From 4a9db6d10ff7ee7d6916466e93d5f47b4dd171ee Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 31 Dec 2025 00:36:14 +0100
Subject: [PATCH] feat: add Playground module with full-height editor

---
 lessons/99-playground.json    | 23 +++++++++++++++++++++++
 lessons/de/99-playground.json | 23 +++++++++++++++++++++++
 src/app.js                    | 11 +++++++++++
 src/config/lessons.js         | 10 ++++++++--
 src/main.css                  |  6 ++++++
 5 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 lessons/99-playground.json
 create mode 100644 lessons/de/99-playground.json

diff --git a/lessons/99-playground.json b/lessons/99-playground.json
new file mode 100644
index 0000000..391f42f
--- /dev/null
+++ b/lessons/99-playground.json
@@ -0,0 +1,23 @@
+{
+	"$schema": "../schemas/code-crispies-module-schema.json",
+	"id": "playground",
+	"title": "Playground",
+	"description": "Free-form HTML & CSS playground",
+	"mode": "html",
+	"difficulty": "beginner",
+	"lessons": [
+		{
+			"id": "playground",
+			"title": "Playground",
+			"description": "",
+			"task": "",
+			"previewHTML": "",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "",
+			"previewContainer": "preview-area",
+			"validations": []
+		}
+	]
+}
diff --git a/lessons/de/99-playground.json b/lessons/de/99-playground.json
new file mode 100644
index 0000000..ac0d653
--- /dev/null
+++ b/lessons/de/99-playground.json
@@ -0,0 +1,23 @@
+{
+	"$schema": "../../schemas/code-crispies-module-schema.json",
+	"id": "playground",
+	"title": "Playground",
+	"description": "Freier HTML & CSS Spielplatz",
+	"mode": "html",
+	"difficulty": "beginner",
+	"lessons": [
+		{
+			"id": "playground",
+			"title": "Playground",
+			"description": "",
+			"task": "",
+			"previewHTML": "",
+			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }",
+			"sandboxCSS": "",
+			"initialCode": "",
+			"solution": "",
+			"previewContainer": "preview-area",
+			"validations": []
+		}
+	]
+}
diff --git a/src/app.js b/src/app.js
index 00c4ed6..d749350 100644
--- a/src/app.js
+++ b/src/app.js
@@ -21,6 +21,7 @@ const elements = {
 	helpBtn: document.getElementById("help-btn"),
 
 	// Left panel
+	instructionsSection: document.querySelector(".instructions"),
 	editorSection: document.querySelector(".editor-section"),
 	modulePill: document.getElementById("module-pill"),
 	moduleName: document.querySelector(".module-name"),
@@ -384,6 +385,16 @@ function loadCurrentLesson() {
 
 	const lesson = engineState.lesson;
 	const mode = lesson.mode || engineState.module?.mode || "css";
+	const isPlayground = engineState.module.id === "playground";
+
+	// Handle playground mode - hide instructions, full height editor
+	if (isPlayground) {
+		elements.instructionsSection?.classList.add("hidden");
+		elements.editorSection?.classList.add("playground-mode");
+	} else {
+		elements.instructionsSection?.classList.remove("hidden");
+		elements.editorSection?.classList.remove("playground-mode");
+	}
 
 	// Add transition class for smooth content swap
 	elements.editorSection?.classList.add("transitioning");
diff --git a/src/config/lessons.js b/src/config/lessons.js
index f019d7e..29e5cfc 100644
--- a/src/config/lessons.js
+++ b/src/config/lessons.js
@@ -19,6 +19,7 @@ import htmlTablesEN from "../../lessons/30-html-tables.json";
 import htmlMarqueeEN from "../../lessons/31-html-marquee.json";
 import htmlSvgEN from "../../lessons/32-html-svg.json";
 import flexboxEN from "../../lessons/flexbox.json";
+import playgroundEN from "../../lessons/99-playground.json";
 
 // German lesson imports
 import welcomeDE from "../../lessons/de/00-welcome.json";
@@ -36,6 +37,7 @@ import htmlTablesDE from "../../lessons/de/30-html-tables.json";
 import htmlMarqueeDE from "../../lessons/de/31-html-marquee.json";
 import htmlSvgDE from "../../lessons/de/32-html-svg.json";
 import flexboxDE from "../../lessons/de/flexbox.json";
+import playgroundDE from "../../lessons/de/99-playground.json";
 
 // English module store - ordered by learning path
 const moduleStoreEN = [
@@ -60,7 +62,9 @@ const moduleStoreEN = [
 	flexboxEN,
 	responsiveEN,
 	// CSS Animationen
-	transitionsAnimationsEN
+	transitionsAnimationsEN,
+	// Playground
+	playgroundEN
 ];
 
 // German module store - ordered by learning path
@@ -86,7 +90,9 @@ const moduleStoreDE = [
 	flexboxDE,
 	responsiveDE,
 	// CSS Animationen
-	transitionsAnimationsDE
+	transitionsAnimationsDE,
+	// Playground
+	playgroundDE
 ];
 
 /**
diff --git a/src/main.css b/src/main.css
index 69c6c89..f7d473a 100644
--- a/src/main.css
+++ b/src/main.css
@@ -395,6 +395,12 @@ code, kbd {
 	position: relative;
 }
 
+/* Playground mode - full height editor */
+.editor-section.playground-mode {
+	flex: 1;
+	min-height: 0;
+}
+
 .code-editor {
 	flex: 1;
 	display: flex;