diff --git a/src/app.js b/src/app.js index 54c2877..10172de 100644 --- a/src/app.js +++ b/src/app.js @@ -43,7 +43,7 @@ const lessonEngine = new LessonEngine(); // Load user progress from localStorage function loadUserProgress() { - const savedProgress = localStorage.getItem("codeCrispiesProgress"); + const savedProgress = localStorage.getItem("codeCrispies.Progress"); if (savedProgress) { state.userProgress = JSON.parse(savedProgress); } @@ -51,7 +51,7 @@ function loadUserProgress() { // Save user progress to localStorage function saveUserProgress() { - localStorage.setItem("codeCrispiesProgress", JSON.stringify(state.userProgress)); + localStorage.setItem("codeCrispies.Progress", JSON.stringify(state.userProgress)); } // Initialize the module list @@ -61,7 +61,7 @@ async function initializeModules() { renderModuleList(elements.moduleList, state.modules, selectModule); // Select the first module or the last one user was on - const lastModuleId = localStorage.getItem("lastModuleId"); + const lastModuleId = localStorage.getItem("codeCrispies.lastModuleId"); if (lastModuleId && state.modules.find((m) => m.id === lastModuleId)) { selectModule(lastModuleId); } else if (state.modules.length > 0) { @@ -145,7 +145,7 @@ function selectModule(moduleId) { loadCurrentLesson(); // Save the last selected module - localStorage.setItem("lastModuleId", moduleId); + localStorage.setItem("codeCrispies.lastModuleId", moduleId); // Reset any success indicators resetSuccessIndicators(); @@ -161,29 +161,10 @@ function resetSuccessIndicators() { // Configure editor layout based on display type function configureEditorLayout(lesson) { - // Default to block display if not specified - const displayType = lesson.editorDisplayType || "block"; - - // Reset classes - elements.codeEditor.classList.remove("inline-editor", "block-editor"); - elements.editorContent.classList.remove("inline-mode", "block-mode"); - - // Apply appropriate layout class - if (displayType === "inline") { - elements.codeEditor.classList.add("inline-editor"); - elements.editorContent.classList.add("inline-mode"); - - // Add special styling for inline mode - elements.codeInput.style.display = "inline-block"; - elements.codeInput.style.width = lesson.inlineInputWidth || "auto"; - } else { - // Default block mode - elements.codeEditor.classList.add("block-editor"); - elements.editorContent.classList.add("block-mode"); - - // Reset styles for block mode - elements.codeInput.style.display = "block"; - elements.codeInput.style.width = "100%"; + // Remove validation indicator if exists + const existingIndicator = elements.codeEditor.querySelector(".validation-success-indicator"); + if (existingIndicator) { + existingIndicator.remove(); } } @@ -248,10 +229,10 @@ function loadCurrentLesson() { let previewTimer = null; function setupLivePreview() { // Clear previous event listener if any - elements.codeInput.removeEventListener('input', handleUserInput); + elements.codeInput.removeEventListener("input", handleUserInput); // Add new event listener - elements.codeInput.addEventListener('input', handleUserInput); + elements.codeInput.addEventListener("input", handleUserInput); } // Handle user input with debounced preview updates @@ -327,6 +308,12 @@ function runCode() { updateModuleSelectorButtonProgress(); } + // Add validation indicator to editor + const validationIndicator = document.createElement("div"); + validationIndicator.className = "validation-success-indicator"; + validationIndicator.innerHTML = "✓"; + elements.codeEditor.appendChild(validationIndicator); + // Show success feedback with visual indicators showFeedback(true, validationResult.message || "Great job! Your code works correctly."); @@ -457,8 +444,8 @@ function resetProgress() { document.getElementById("cancel-reset").addEventListener("click", closeModal); document.getElementById("confirm-reset").addEventListener("click", () => { - localStorage.removeItem("codeCrispiesProgress"); - localStorage.removeItem("lastModuleId"); + localStorage.removeItem("codeCrispies.Progress"); + localStorage.removeItem("codeCrispies.lastModuleId"); state.userProgress = {}; closeModal(); @@ -545,4 +532,4 @@ function init() { } // Start the application -init(); \ No newline at end of file +init(); diff --git a/src/config/lessons.js b/src/config/lessons.js index 03578b1..0bde848 100644 --- a/src/config/lessons.js +++ b/src/config/lessons.js @@ -16,16 +16,16 @@ import responsiveConfig from "../../lessons/08-responsive.json"; // Module store const moduleStore = [ - basicSelectorsConfig, - basicsConfig, - boxModelConfig, - selectorsConfig, - colorsConfig, - typographyConfig, - unitVariablesConfig, - transitionsAnimationsConfig, - layoutConfig, - responsiveConfig + basicSelectorsConfig + // basicsConfig, + // boxModelConfig, + // selectorsConfig, + // colorsConfig, + // typographyConfig, + // unitVariablesConfig, + // transitionsAnimationsConfig, + // layoutConfig, + // responsiveConfig ]; /** @@ -83,15 +83,6 @@ function validateModuleConfig(config) { config.lessons.forEach((lesson, index) => { if (!lesson.title) throw new Error(`Lesson ${index} missing "title"`); if (!lesson.previewHTML) throw new Error(`Lesson ${index} missing "previewHTML"`); - - // Apply defaults for new properties if they don't exist - if (lesson.editorDisplayType === undefined) { - lesson.editorDisplayType = "block"; // Default to block display - } - - if (lesson.editorDisplayType === "inline" && lesson.inlineInputWidth === undefined) { - lesson.inlineInputWidth = "auto"; // Default width for inline input - } }); } @@ -120,36 +111,3 @@ export function addCustomModule(moduleConfig) { return false; } } - -/** - * Convert a module to include the enhanced schema with editorDisplayType - * @param {Object} moduleConfig - The module configuration to convert - * @returns {Object} The enhanced module configuration - */ -export function enhanceModuleSchema(moduleConfig) { - if (!moduleConfig || !moduleConfig.lessons) return moduleConfig; - - const enhancedModule = {...moduleConfig}; - - enhancedModule.lessons = moduleConfig.lessons.map(lesson => { - const enhancedLesson = {...lesson}; - - // Apply defaults for new properties if they don't exist - if (enhancedLesson.editorDisplayType === undefined) { - enhancedLesson.editorDisplayType = "block"; // Default to block display - } - - if (enhancedLesson.editorDisplayType === "inline" && enhancedLesson.inlineInputWidth === undefined) { - enhancedLesson.inlineInputWidth = "auto"; // Default width for inline input - } - - return enhancedLesson; - }); - - return enhancedModule; -} - -// Enhance all modules on load to ensure they have the new schema properties -moduleStore.forEach((module, index) => { - moduleStore[index] = enhanceModuleSchema(module); -}); \ No newline at end of file diff --git a/src/impl/LessonEngine.js b/src/impl/LessonEngine.js index ad39063..c5f661f 100644 --- a/src/impl/LessonEngine.js +++ b/src/impl/LessonEngine.js @@ -254,4 +254,4 @@ export class LessonEngine { clearProgress() { localStorage.removeItem("codeCrispies.progress"); } -} \ No newline at end of file +} diff --git a/src/main.css b/src/main.css index 9d5fa67..9dd885b 100644 --- a/src/main.css +++ b/src/main.css @@ -331,17 +331,27 @@ code { color: #d4d4d4; border: none; width: 100%; - min-height: 100px; + min-height: 100px; /* Ensure minimum height */ font-family: var(--font-code); font-size: 14px; line-height: 1.5; padding: var(--spacing-xs) 0; outline: none; - resize: vertical; + overflow: auto; /* Ensure scrolling works */ + resize: none; /* Disable textarea resize */ caret-color: var(--primary-light); transition: background-color 0.2s ease; } +.code-input.inline-input { + display: inline-block; + min-height: 30px; + height: auto; + padding: 2px 4px; + margin: 0 4px; + border-bottom: 1px dashed #666; +} + /* Controls */ .controls { display: flex; @@ -414,6 +424,22 @@ code { border: 1px solid var(--success-color); } +.validation-success-indicator { + position: absolute; + top: 1rem; + right: 7rem; + background-color: var(--success-color); + color: white; + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + z-index: 5; +} + /* Module selector button with progress */ #module-selector-btn { overflow: hidden;