public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: add Playground module with full-height editor

Browse Source
This commit is contained in:
Michael Czechowski
2025-12-31 00:36:14 +01:00
parent 13798f5e83
commit c0bb79da9f
5 changed files with 71 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.js
View File

@@ -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");