diff --git a/src/app.js b/src/app.js index 53849cd..65347e6 100644 --- a/src/app.js +++ b/src/app.js @@ -5,6 +5,7 @@ import { loadModules } from "./config/lessons.js"; import { initI18n, t, getLanguage, setLanguage, applyTranslations } from "./i18n.js"; import { parseHash, updateHash, replaceHash, getShareableUrl, RouteType, navigateTo } from "./helpers/router.js"; import { sections, getSection, getModuleSection, getModulesBySection } from "./config/sections.js"; +import { getRandomTemplate } from "./config/playground-templates.js"; // CodeMirror imports for syntax highlighting import { EditorState } from "@codemirror/state"; @@ -121,6 +122,7 @@ const elements = { undoBtn: document.getElementById("undo-btn"), redoBtn: document.getElementById("redo-btn"), resetCodeBtn: document.getElementById("reset-code-btn"), + randomTemplateBtn: document.getElementById("random-template-btn"), hintArea: document.getElementById("hint-area"), editorContent: document.querySelector(".editor-content"), codeEditor: document.querySelector(".code-editor"), @@ -506,13 +508,15 @@ function loadCurrentLesson() { const mode = lesson.mode || engineState.module?.mode || "css"; const isPlayground = lesson.mode === "playground"; - // Handle playground mode - hide instructions, full height editor + // Handle playground mode - hide instructions, full height editor, show random button if (isPlayground) { elements.instructionsSection?.classList.add("hidden"); elements.editorSection?.classList.add("playground-mode"); + elements.randomTemplateBtn?.classList.remove("hidden"); } else { elements.instructionsSection?.classList.remove("hidden"); elements.editorSection?.classList.remove("playground-mode"); + elements.randomTemplateBtn?.classList.add("hidden"); } // Add transition class for smooth content swap @@ -708,6 +712,15 @@ function resetCode() { resetSuccessIndicators(); } +function loadRandomTemplate() { + const template = getRandomTemplate(); + if (codeEditor && template) { + codeEditor.setValue(template.code); + // Apply the code to the preview + lessonEngine.applyUserCode(template.code, true); + } +} + function runCode() { const userCode = codeEditor ? codeEditor.getValue() : ""; const engineState = lessonEngine.getCurrentState(); @@ -1516,6 +1529,7 @@ function init() { if (codeEditor) codeEditor.redo(); }); elements.resetCodeBtn.addEventListener("click", handleResetCodeClick); + elements.randomTemplateBtn.addEventListener("click", loadRandomTemplate); elements.shareBtn.addEventListener("click", showShareDialog); // Dialogs diff --git a/src/config/playground-templates.js b/src/config/playground-templates.js new file mode 100644 index 0000000..2c68451 --- /dev/null +++ b/src/config/playground-templates.js @@ -0,0 +1,701 @@ +/** + * Playground boilerplate templates + * Each template provides a starting point for experimentation + */ + +export const playgroundTemplates = [ + { + name: "Card Component", + code: ` + +
+
+
+

Card Title

+

This is a simple card component with an image placeholder and text content.

+
+
` + }, + { + name: "Navigation Bar", + code: ` + +` + }, + { + name: "Profile Card", + code: ` + +
+
+

Jane Doe

+

UI Designer

+
+
+
142
+
Posts
+
+
+
8.5k
+
Followers
+
+
+
284
+
Following
+
+
+
` + }, + { + name: "Button Styles", + code: ` + + + + + +` + }, + { + name: "Pricing Table", + code: ` + +
+
Basic
+
$9
+
per month
+ +
+ +
+
Pro
+
$29
+
per month
+ +
+ +
+
Team
+
$99
+
per month
+ +
` + }, + { + name: "Form Layout", + code: ` + +
+

Sign In

+
+ + +
+
+ + +
+ +
` + }, + { + name: "Feature Grid", + code: ` + +
+
+
+

Fast

+

Lightning quick performance for all your needs.

+
+
+
+

Secure

+

Enterprise-grade security built in from day one.

+
+
+
+

Simple

+

Intuitive interface that anyone can master.

+
+
` + }, + { + name: "Badge Collection", + code: ` + +New +Active +Urgent +Pending +Beta +Default +Online +Offline` + }, + { + name: "CSS Animation", + code: ` + +
+
+
+
` + }, + { + name: "Flexbox Layout", + code: ` + +
+
+ +
+

Main Content

+

Flexible width - grows to fill space

+
+
+

Card 1

+

Equal flex

+
+
+

Card 2

+

Equal flex

+
+
+

Card 3

+

Equal flex

+
+
+
+
+
` + } +]; + +/** + * Get a random template + * @returns {object} Random template with name and code + */ +export function getRandomTemplate() { + const index = Math.floor(Math.random() * playgroundTemplates.length); + return playgroundTemplates[index]; +} + +/** + * Get all template names + * @returns {string[]} Array of template names + */ +export function getTemplateNames() { + return playgroundTemplates.map((t) => t.name); +} diff --git a/src/index.html b/src/index.html index c600b4e..a1c1b18 100644 --- a/src/index.html +++ b/src/index.html @@ -177,6 +177,9 @@ > ⟲ +