diff --git a/data/quests.json b/data/quests.json index f5b7067..ea0f2d1 100644 --- a/data/quests.json +++ b/data/quests.json @@ -478,6 +478,33 @@ "difficulty": "Medium", "status": "live" }, + { + "id": "glassblowers-immutable-forge", + "name": "Glassblower's Immutable Forge", + "shortDescription": "A glass studio simulation teaching JavaScript mutability vs. immutability, object/array mutation, and Object.freeze() through physical shaping and shattering.", + "longDescription": "## Glassblower's Immutable Forge\n\nStep into a hot glass workshop where variables, objects, and arrays are literal works of glass. In this interactive programming quest, you will master the vital distinction between mutable data (soft, reshapable glass you can bend live) and immutable architecture. Learn how `const` protects bindings, how spread syntax creates safe copies, and how `Object.freeze()` hardens structures so that improper mutations cause dramatic, visible shattering rather than silent bugs.\n\n### Features\n\n- **Physical State Manipulation:** Stretch, blow, and modify properties of objects and arrays rendered as glowing, malleable glass artifacts.\n- **Kiln-Cooled Immutability:** Run the kiln-cooling phase to apply `Object.freeze()`, transforming flexible vessels into rigid pieces that shatter if modified improperly.\n- **Modern Immutability Workflows:** Practice safe state updates using spread syntax (`...`) and non-mutating array methods.\n- **Web Audio Soundscapes:** Custom glassblowing hisses, shaping crunches, and physics-based shattering sounds synthesized entirely via the Web Audio API.\n- **Zero-Dependency Architecture:** A completely self-contained browser quest built natively using Vanilla JS and HTML5 Canvas.", + "category": "js-fundamentals", + "tags": [ + "arrays", + "freeze", + "immutability", + "interactive", + "javascript", + "mutability", + "objects", + "quest", + "web-audio-api" + ], + "techStack": [ + "Canvas API", + "CSS3", + "HTML5", + "Vanilla JS", + "Web Audio API" + ], + "difficulty": "Medium", + "status": "live" + }, { "id": "yugen-trail", "name": "Lantern & Rope — The Yūgen Trail", diff --git a/quests/glassblowers-immutable-forge.html b/quests/glassblowers-immutable-forge.html new file mode 100644 index 0000000..caaa5fc --- /dev/null +++ b/quests/glassblowers-immutable-forge.html @@ -0,0 +1,1509 @@ + + + + + +The Glassblower's Immutable Forge + + + + + + +
+ +
+ + +
+
+
+ + + +
+
+
A Play-By-Learn Workshop
+

The Glassblower's
Immutable Forge

+

Every object you touch here is a piece of molten glass — some soft enough to reshape with your bare hands, some cooled solid in the kiln forever. Learn mutability, const, and Object.freeze() by actually shaping the glass — not by answering quizzes.

+
+ + +
+
+
01 · Mutation
+
02 · const
+
03 · push vs spread
+
04 · Object.freeze
+
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + +
+
+ +
+
+ + Immutable Forge +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
Level 1 · Molten Reshaping
+
The Soft Glass
+
Drag the glowing anchor points to reshape the piece.
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
forge.js
+
+
+
+
+
+
+
console
+
+
+
+
+
+
+ + +
+
+ + + + + + + + + + + +

Master of the Forge

+

You've earned the right to say: you understand mutability from the inside out.

+
+ Object Mutationconst ≠ frozenpush() vs [...spread]Object.freeze() +
+
+ + +
+
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/quests/glassblowers-immutable-forge.png b/quests/glassblowers-immutable-forge.png new file mode 100644 index 0000000..2ecfb43 Binary files /dev/null and b/quests/glassblowers-immutable-forge.png differ