diff --git a/data/quests.json b/data/quests.json index 53c388e..f74ee2c 100644 --- a/data/quests.json +++ b/data/quests.json @@ -449,6 +449,32 @@ "difficulty": "Medium", "status": "live" }, + { + "id": "memory-heap-detective", + "name": "Memory Heap Detective", + "shortDescription": "Interactive memory profiling and garbage collection diagnostic simulator for learning JavaScript memory management and leak prevention.", + "longDescription": "## Memory Heap Detective\n\nAn interactive memory profiling and garbage collection diagnostic simulator that teaches memory management, heap snapshot analysis, and memory leak prevention in JavaScript.\n\n### Features\n\n- Interactive Heap Snapshot Visualizer: Real-time visual memory graph displaying GC Roots, Detached DOM Trees, Retainer Chains, and Allocation Timelines\n- Memory Leak Diagnostic Challenges: Level-based scenarios covering dangling event listeners, detached DOM nodes, uncleared timers, and circular reference traps\n- Real-Time Garbage Collector Simulator: Manual 'Trigger GC' sweep button that reclaims freed memory and updates heap allocation charts\n- Web Audio Synthesizer SFX: Audio feedback for GC sweeps, memory alarms, and level completion fanfares\n- Built-In Memory Profiling Manual: Cheatsheet covering V8 Garbage Collection mechanics (Mark-and-Sweep, Generational GC)", + "category": "js-fundamentals", + "tags": [ + "game", + "garbage-collection", + "heap-snapshot", + "javascript", + "memory-leak", + "performance", + "profiling", + "quest", + "v8" + ], + "techStack": [ + "CSS3", + "HTML5", + "Vanilla JS", + "Web Audio API" + ], + "difficulty": "Hard", + "status": "live" + }, { "id": "merge-conflict-frontline", "name": "Merge Conflict: Frontline", diff --git a/quests/memory-heap-detective.html b/quests/memory-heap-detective.html new file mode 100644 index 0000000..9c4589c --- /dev/null +++ b/quests/memory-heap-detective.html @@ -0,0 +1,602 @@ + + + + + + + Memory Heap Detective — One File Tools Quest + + + + + + + +
+
+ +
+

Memory Heap Detective

+
+
+
+ + + + + +
+
+ +
+ +
+
+ ALLOCATED HEAP + 🧠 58.4 MB / 64.0 MB +
+
+ PRESSURE STATUS + ⚠️ Memory Leak Detected +
+
+ CURRENT DIAGNOSTIC + LEVEL 1 / 4 +
+ +
+ +
+
+
+ + +
+ +
+

Level 1: Dangling Event Listeners

+
The scroll event listener is never detached when component unmounts, keeping the entire DOM subtree in memory!
+ +
window.addEventListener('scroll', handleScroll); // Component unmounts without cleanup!
+ + Select Code Patch to Reclaim Memory: +
+ +
+ + +
+
+
+ + +
+

V8 Heap Retainer Inspector

+ +
+
+ ROOT: Window (Global Scope) + 128 B +
+
+ ↳ Detached HTMLDivElement (#heroBanner) + 18.4 MB +
+
+
+
+
+ + + + + + + diff --git a/quests/memory-heap-detective.png b/quests/memory-heap-detective.png new file mode 100644 index 0000000..870f078 Binary files /dev/null and b/quests/memory-heap-detective.png differ