From 8c1683f3f37f711b039889d8dad04d0700edd1c7 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 31 Dec 2025 00:38:41 +0100
Subject: [PATCH] fix: playground mode with HTML & CSS editor, no validation

---
 lessons/99-playground.json    |  6 +++---
 lessons/de/99-playground.json |  6 +++---
 src/app.js                    | 12 ++++++++++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/lessons/99-playground.json b/lessons/99-playground.json
index 391f42f..85f5d29 100644
--- a/lessons/99-playground.json
+++ b/lessons/99-playground.json
@@ -3,7 +3,7 @@
 	"id": "playground",
 	"title": "Playground",
 	"description": "Free-form HTML & CSS playground",
-	"mode": "html",
+	"mode": "playground",
 	"difficulty": "beginner",
 	"lessons": [
 		{
@@ -12,9 +12,9 @@
 			"description": "",
 			"task": "",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }",
+			"previewBaseCSS": "",
 			"sandboxCSS": "",
-			"initialCode": "",
+			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hello World</h1>\n<p>Start coding!</p>",
 			"solution": "",
 			"previewContainer": "preview-area",
 			"validations": []
diff --git a/lessons/de/99-playground.json b/lessons/de/99-playground.json
index ac0d653..24ab306 100644
--- a/lessons/de/99-playground.json
+++ b/lessons/de/99-playground.json
@@ -3,7 +3,7 @@
 	"id": "playground",
 	"title": "Playground",
 	"description": "Freier HTML & CSS Spielplatz",
-	"mode": "html",
+	"mode": "playground",
 	"difficulty": "beginner",
 	"lessons": [
 		{
@@ -12,9 +12,9 @@
 			"description": "",
 			"task": "",
 			"previewHTML": "",
-			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; }",
+			"previewBaseCSS": "",
 			"sandboxCSS": "",
-			"initialCode": "",
+			"initialCode": "<style>\n  body {\n    font-family: system-ui, sans-serif;\n    padding: 20px;\n  }\n</style>\n\n<h1>Hallo Welt</h1>\n<p>Los geht's!</p>",
 			"solution": "",
 			"previewContainer": "preview-area",
 			"validations": []
diff --git a/src/app.js b/src/app.js
index d749350..5c6abdc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -363,6 +363,11 @@ function updateEditorForMode(mode) {
 			placeholder: "Enter your CSS code here...",
 			label: "CSS Editor",
 			cmMode: "css"
+		},
+		playground: {
+			placeholder: "<style>\n  /* CSS here */\n</style>\n\n<!-- HTML here -->",
+			label: "HTML & CSS",
+			cmMode: "html"
 		}
 	};
 
@@ -575,6 +580,8 @@ function resetCode() {
 
 function runCode() {
 	const userCode = codeEditor ? codeEditor.getValue() : "";
+	const engineState = lessonEngine.getCurrentState();
+	const isPlayground = engineState.module?.id === "playground";
 
 	// Rotate the Run button icon
 	const runButtonImg = document.querySelector("#run-btn img");
@@ -586,6 +593,11 @@ function runCode() {
 	// Apply the code to the preview via LessonEngine
 	lessonEngine.applyUserCode(userCode, true);
 
+	// Skip validation for playground mode
+	if (isPlayground) {
+		return;
+	}
+
 	// Validate code using LessonEngine
 	const validationResult = lessonEngine.validateCode();