feat: enhance LessonEngine to manage user progress and code storage

src/app.js

@@ -1,16 +1,9 @@
 import { LessonEngine } from "./impl/LessonEngine.js";
 import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback, updateActiveLessonInSidebar } from "./helpers/renderer.js";
-import { validateUserCode } from "./helpers/validator.js";
 import { loadModules } from "./config/lessons.js";
 
-// Main Application state
+// Simplified state - LessonEngine now manages lesson state and progress
 const state = {
-	currentModule: null,
-	currentLessonIndex: 0,
-	modules: [],
-	userCode: new Map(), // Store user code for each lesson
-	userProgress: {}, // Format: { moduleId: { completed: [0, 2, 3], current: 4 } }
-	userCodeBeforeValidation: "", // Track user code state before validation
 	userSettings: {
 		disableFeedbackErrors: false
 	}
@@ -44,7 +37,7 @@ const elements = {
 	disableFeedbackToggle: document.getElementById("disable-feedback-toggle")
 };
 
-// Initialize the lesson engine
+// Initialize the lesson engine - now the single source of truth
 const lessonEngine = new LessonEngine();
 
 // Load user progress from localStorage
@@ -89,17 +82,20 @@ function initFeedbackToggle() {
 // Initialize the module list
 async function initializeModules() {
 	try {
-		state.modules = await loadModules();
+		const modules = await loadModules();
+		lessonEngine.setModules(modules);
 
 		// Use the new renderModuleList function with both callbacks
-		renderModuleList(elements.moduleList, state.modules, selectModule, selectLesson);
+		renderModuleList(elements.moduleList, modules, selectModule, selectLesson);
 
-		// Select the first module or the last one user was on
+		// Load saved progress and select appropriate module
-		const lastModuleId = localStorage.getItem("codeCrispies.lastModuleId");
+		const progressData = lessonEngine.loadUserProgress();
-		if (lastModuleId && state.modules.find((m) => m.id === lastModuleId)) {
+		const lastModuleId = progressData?.lastModuleId;
+
+		if (lastModuleId && modules.find(m => m.id === lastModuleId)) {
 			selectModule(lastModuleId);
-		} else if (state.modules.length > 0) {
+		} else if (modules.length > 0) {
-			selectModule(state.modules[0].id);
+			selectModule(modules[0].id);
 		}
 
 		// Update progress indicator on module selector button
@@ -112,21 +108,7 @@ async function initializeModules() {
 
 // Update progress indicator on module selector button
 function updateModuleSelectorButtonProgress() {
-	if (!state.modules.length) return;
+	const stats = lessonEngine.getProgressStats();
-
-	// Calculate overall progress across all modules
-	let totalLessons = 0;
-	let totalCompleted = 0;
-
-	state.modules.forEach((module) => {
-		totalLessons += module.lessons.length;
-		const progress = state.userProgress[module.id];
-		if (progress && progress.completed) {
-			totalCompleted += progress.completed.length;
-		}
-	});
-
-	const percentComplete = totalLessons > 0 ? Math.round((totalCompleted / totalLessons) * 100) : 0;
 
 	// Create progress indicator
 	const progressBar = document.createElement("div");
@@ -136,13 +118,13 @@ function updateModuleSelectorButtonProgress() {
 		bottom: 0;
 		left: 0;
 		height: 3px;
-		width: ${percentComplete}%;
+		width: ${stats.percentComplete}%;
 		background-color: var(--primary-light);
 		border-radius: 0 3px 3px 0;
 	`;
 
 	// Add progress percentage text
-	elements.moduleSelectorBtn.innerHTML = `Progress <span style="font-size: 0.8em; opacity: 0.8;">${percentComplete}%</span>`;
+	elements.moduleSelectorBtn.innerHTML = `Progress <span style="font-size: 0.8em; opacity: 0.8;">${stats.percentComplete}%</span>`;
 	elements.moduleSelectorBtn.style.position = "relative";
 
 	// Remove any existing progress bar before adding new one
@@ -154,12 +136,10 @@ function updateModuleSelectorButtonProgress() {
 	elements.moduleSelectorBtn.appendChild(progressBar);
 }
 
-// Select a module
+// Select a module - delegate to LessonEngine
 function selectModule(moduleId) {
-	const selectedModule = state.modules.find((module) => module.id === moduleId);
+	const success = lessonEngine.setModuleById(moduleId);
-	if (!selectedModule) return;
+	if (!success) return;
-
-	state.currentModule = selectedModule;
 
 	// Update module list UI to highlight the active module
 	const moduleItems = elements.moduleList.querySelectorAll(".module-header");
@@ -170,35 +150,21 @@ function selectModule(moduleId) {
 		}
 	});
 
-	// Load user progress for this module
-	if (!state.userProgress[moduleId]) {
-		state.userProgress[moduleId] = { completed: [], current: 0 };
-	}
-
-	state.currentLessonIndex = state.userProgress[moduleId].current || 0;
 	loadCurrentLesson();
 
-	// Save the last selected module
-	localStorage.setItem("codeCrispies.lastModuleId", moduleId);
-
 	// Reset any success indicators
 	resetSuccessIndicators();
 }
 
 function selectLesson(moduleId, lessonIndex) {
 	// Select the module first if it's not already selected
-	if (!state.currentModule || state.currentModule.id !== moduleId) {
+	const currentState = lessonEngine.getCurrentState();
-		selectModule(moduleId);
+	if (!currentState.module || currentState.module.id !== moduleId) {
+		lessonEngine.setModuleById(moduleId);
 	}
 
-	// Update current lesson index
+	// Set the lesson
-	state.currentLessonIndex = lessonIndex;
+	lessonEngine.setLessonByIndex(lessonIndex);
-
-	// Update user progress
-	state.userProgress[moduleId].current = lessonIndex;
-	saveUserProgress();
-
-	// Load the lesson
 	loadCurrentLesson();
 }
 
@@ -229,22 +195,16 @@ function resetEditorLayout(lesson) {
 	elements.validationIndicators.innerHTML = "";
 }
 
-// Load the current lesson
+// Load the current lesson - now delegates to LessonEngine
 function loadCurrentLesson() {
-	if (!state.currentModule || !state.currentModule.lessons) {
+	const engineState = lessonEngine.getCurrentState();
+
+	if (!engineState.module || !engineState.lesson) {
 		return;
 	}
 
-	// Make sure lesson index is in bounds
+	const lesson = engineState.lesson;
-	if (state.currentLessonIndex >= state.currentModule.lessons.length) {
+	const mode = lesson.mode || engineState.module?.mode || "css";
-		state.currentLessonIndex = state.currentModule.lessons.length - 1;
-	} else if (state.currentLessonIndex < 0) {
-		state.currentLessonIndex = 0;
-	}
-
-	const lesson = state.currentModule.lessons[state.currentLessonIndex];
-	const mode = lesson.mode || state.currentModule?.mode || "css";
-	lessonEngine.setLesson(lesson);
 
 	// Update UI based on mode
 	updateEditorForMode(mode);
@@ -264,12 +224,14 @@ function loadCurrentLesson() {
 		lesson
 	);
 
+	// Set user code in input
+	elements.codeInput.value = engineState.userCode;
+
 	// Configure editor layout based on lesson settings
 	resetEditorLayout(lesson);
 
 	// Update Run button text based on completion status
-	const moduleProgress = state.userProgress[state.currentModule.id];
+	if (engineState.isCompleted) {
-	if (moduleProgress && moduleProgress.completed.includes(state.currentLessonIndex)) {
 		elements.runBtn.innerHTML = '<img src="./gear.svg" />Re-run';
 
 		// Add completion badge next to title if not already present
@@ -290,27 +252,20 @@ function loadCurrentLesson() {
 	}
 
 	// Update level indicator
-	renderLevelIndicator(elements.levelIndicator, state.currentLessonIndex + 1, state.currentModule.lessons.length);
+	renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
 
 	// Update active lesson in sidebar
-	updateActiveLessonInSidebar(state.currentModule.id, state.currentLessonIndex);
+	updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);
 
 	// Update navigation buttons
 	updateNavigationButtons();
 
-	// Save current progress
-	state.userProgress[state.currentModule.id].current = state.currentLessonIndex;
-	saveUserProgress();
-
 	// Update progress indicator on module selector button
 	updateModuleSelectorButtonProgress();
 
 	// Focus on the code editor by default
 	elements.codeInput.focus();
 
-	// Store current code
-	state.userCodeBeforeValidation = elements.codeInput.value;
-
 	// Track live changes and update preview when the user pauses typing
 	setupLivePreview();
 }
@@ -334,19 +289,16 @@ function handleUserInput() {
 
 	// Set a new timer for preview update after user stops typing
 	previewTimer = setTimeout(() => {
-		// Apply the code for preview without validation
-		// lessonEngine.applyUserCode(elements.codeInput.value);
 		runCode();
-	}, 800); // Update preview 500ms after user stops typing
+	}, 800); // Update preview 800ms after user stops typing
-
-	// Store current code state
-	state.userCodeBeforeValidation = elements.codeInput.value;
 }
 
 // Update navigation buttons state
 function updateNavigationButtons() {
-	elements.prevBtn.disabled = state.currentLessonIndex === 0;
+	const engineState = lessonEngine.getCurrentState();
-	elements.nextBtn.disabled = !state.currentModule || state.currentLessonIndex === state.currentModule.lessons.length - 1;
+
+	elements.prevBtn.disabled = !engineState.canGoPrev;
+	elements.nextBtn.disabled = !engineState.canGoNext;
 
 	// Style changes for disabled buttons
 	if (elements.prevBtn.disabled) {
@@ -362,42 +314,36 @@ function updateNavigationButtons() {
 	}
 }
 
-// Go to the next lesson
+// Go to the next lesson - delegate to LessonEngine
 function nextLesson() {
-	if (!state.currentModule) return;
+	const success = lessonEngine.nextLesson();
-
+	if (success) {
-	if (state.currentLessonIndex < state.currentModule.lessons.length - 1) {
-		state.currentLessonIndex++;
 		loadCurrentLesson();
 	}
 }
 
-// Go to the previous lesson
+// Go to the previous lesson - delegate to LessonEngine
 function prevLesson() {
-	if (state.currentLessonIndex > 0) {
+	const success = lessonEngine.previousLesson();
-		state.currentLessonIndex--;
+	if (success) {
 		loadCurrentLesson();
 	}
 }
 
-// Run the user code
+// Run the user code - now uses LessonEngine validation
 function runCode() {
 	const userCode = elements.codeInput.value;
-	const lesson = state.currentModule.lessons[state.currentLessonIndex];
 
 	// Rotate the Run button icon
 	const runButtonImg = document.querySelector("#run-btn img");
 	const runButtonRotationDegree = Number(runButtonImg.style.transform.match(/\d+/)?.pop() ?? 0);
 	document.querySelector("#run-btn img").style.transform = `rotate(${runButtonRotationDegree + 180}deg)`;
 
-	// Always apply the code to the preview, regardless of validation result
+	// Apply the code to the preview via LessonEngine
 	lessonEngine.applyUserCode(userCode, true);
 
-	// Backup code in local storage
+	// Validate code using LessonEngine
-	state.userCode.set(state.currentLessonIndex, userCode);
+	const validationResult = lessonEngine.validateCode();
-	localStorage.setItem("codeCrispies.userCode", JSON.stringify(Array.from(state.userCode.entries())));
-
-	const validationResult = validateUserCode(userCode, lesson);
 
 	// Add validation indicators based on validCases count if available
 	if (validationResult.validCases) {
@@ -412,18 +358,10 @@ function runCode() {
 	}
 
 	if (validationResult.isValid) {
-		// Mark lesson as completed
-		const moduleProgress = state.userProgress[state.currentModule.id];
-		if (!moduleProgress.completed.includes(state.currentLessonIndex)) {
-			moduleProgress.completed.push(state.currentLessonIndex);
-			saveUserProgress();
-			updateModuleSelectorButtonProgress();
-		}
-
 		// Show success feedback with visual indicators
 		showFeedback(true, validationResult.message || "Great job! Your code works correctly.");
 
-		// Add this block to update the Run button to Re-run
+		// Update the Run button to Re-run
 		elements.runBtn.innerHTML = '<img src="./gear.svg" />Re-run';
 		elements.runBtn.classList.add("re-run");
 
@@ -441,11 +379,11 @@ function runCode() {
 		elements.nextBtn.classList.add("success");
 		elements.taskInstruction.classList.add("success-instruction");
 
-		// Enable the next button if not already on the last lesson
+		// Update navigation buttons
-		if (state.currentLessonIndex < state.currentModule.lessons.length - 1) {
+		updateNavigationButtons();
-			elements.nextBtn.disabled = false;
+
-			elements.nextBtn.classList.remove("btn-disabled");
+		// Update progress indicator
-		}
+		updateModuleSelectorButtonProgress();
 	} else {
 		// Reset any success indicators
 		resetSuccessIndicators();
@@ -459,8 +397,11 @@ function runCode() {
 function showModuleSelector() {
 	elements.modalTitle.textContent = "Select a Module";
 
+	const engineState = lessonEngine.getCurrentState();
+	const modules = lessonEngine.modules;
+
 	// Create module buttons
-	const moduleButtons = state.modules.map((module) => {
+	const moduleButtons = modules.map((module) => {
 		const button = document.createElement("button");
 		button.classList.add("btn", "module-button");
 		button.style.display = "block";
@@ -469,9 +410,8 @@ function showModuleSelector() {
 		button.style.padding = "15px";
 		button.style.textAlign = "left";
 
-		// Add completion status
+		// Add completion status using LessonEngine
-		const progress = state.userProgress[module.id];
+		const completedCount = lessonEngine.userProgress[module.id]?.completed.length || 0;
-		const completedCount = progress ? progress.completed.length : 0;
 		const totalLessons = module.lessons.length;
 		const percentComplete = Math.round((completedCount / totalLessons) * 100);
 

src/impl/LessonEngine.js

@@ -1,6 +1,6 @@
 /**
  * LessonEngine - Core class for managing lessons and applying/testing user code
- * This file is the implementation of the LessonEngine class declaration from app.helpers
+ * Single source of truth for lesson state and progress
  */
 import { validateUserCode } from "../helpers/validator.js";
 import { showFeedback } from "../helpers/renderer.js";
@@ -12,6 +12,19 @@ export class LessonEngine {
 		this.currentModule = null;
 		this.currentLessonIndex = 0;
 		this.lastRenderedCode = ""; // Track last applied code to prevent unnecessary re-renders
+		this.modules = [];
+		this.userProgress = {}; // Format: { moduleId: { completed: [0, 2, 3], current: 4 } }
+		this.userCodeMap = new Map(); // Store user code for each lesson
+		this.loadUserProgress();
+	}
+
+	/**
+	 * Initialize with modules array
+	 * @param {Array} modules - Available modules
+	 */
+	setModules(modules) {
+		this.modules = modules;
+		this.loadUserCodeFromStorage();
 	}
 
 	/**
@@ -21,9 +34,32 @@ export class LessonEngine {
 	setModule(module) {
 		this.currentModule = module;
 		this.currentLessonIndex = 0;
-		if (module && module.lessons && module.lessons.length > 0) {
+
-			this.setLesson(module.lessons[0]);
+		// Load user progress for this module
+		if (!this.userProgress[module.id]) {
+			this.userProgress[module.id] = { completed: [], current: 0 };
 		}
+
+		this.currentLessonIndex = this.userProgress[module.id].current || 0;
+
+		if (module && module.lessons && module.lessons.length > 0) {
+			this.setLesson(module.lessons[this.currentLessonIndex]);
+		}
+
+		this.saveUserProgress();
+	}
+
+	/**
+	 * Set module by ID
+	 * @param {string} moduleId - The module ID
+	 * @returns {boolean} Whether the operation was successful
+	 */
+	setModuleById(moduleId) {
+		const module = this.modules.find(m => m.id === moduleId);
+		if (!module) return false;
+
+		this.setModule(module);
+		return true;
 	}
 
 	/**
@@ -32,7 +68,11 @@ export class LessonEngine {
 	 */
 	setLesson(lesson) {
 		this.currentLesson = lesson;
-		this.userCode = lesson.initialCode || "";
+
+		// Load saved user code for this lesson or use initial code
+		const lessonKey = `${this.currentModule.id}-${this.currentLessonIndex}`;
+		this.userCode = this.userCodeMap.get(lessonKey) || lesson.initialCode || "";
+
 		this.lastRenderedCode = ""; // Reset last rendered code
 		this.renderPreview();
 	}
@@ -53,6 +93,11 @@ export class LessonEngine {
 
 		this.currentLessonIndex = index;
 		this.setLesson(this.currentModule.lessons[index]);
+
+		// Update progress
+		this.userProgress[this.currentModule.id].current = index;
+		this.saveUserProgress();
+
 		return true;
 	}
 
@@ -82,6 +127,11 @@ export class LessonEngine {
 
 		this.userCode = code;
 
+		// Save user code for this lesson
+		const lessonKey = `${this.currentModule.id}-${this.currentLessonIndex}`;
+		this.userCodeMap.set(lessonKey, code);
+		this.saveUserCodeToStorage();
+
 		// Only re-render if code changed or forced update
 		if (forceUpdate || this.lastRenderedCode !== code) {
 			this.lastRenderedCode = code;
@@ -180,12 +230,40 @@ export class LessonEngine {
 
 		const result = validateUserCode(this.userCode, this.currentLesson);
 
-		// Display feedback to the user
+		// Mark lesson as completed if valid
-		showFeedback(result.isValid, result.message);
+		if (result.isValid) {
+			const moduleProgress = this.userProgress[this.currentModule.id];
+			if (!moduleProgress.completed.includes(this.currentLessonIndex)) {
+				moduleProgress.completed.push(this.currentLessonIndex);
+				this.saveUserProgress();
+			}
+		}
 
 		return result;
 	}
 
+	/**
+	 * Check if current lesson is completed
+	 * @returns {boolean} Whether the lesson is completed
+	 */
+	isCurrentLessonCompleted() {
+		if (!this.currentModule) return false;
+
+		const moduleProgress = this.userProgress[this.currentModule.id];
+		return moduleProgress && moduleProgress.completed.includes(this.currentLessonIndex);
+	}
+
+	/**
+	 * Get completion status for a specific lesson
+	 * @param {string} moduleId - Module ID
+	 * @param {number} lessonIndex - Lesson index
+	 * @returns {boolean} Whether the lesson is completed
+	 */
+	isLessonCompleted(moduleId, lessonIndex) {
+		const moduleProgress = this.userProgress[moduleId];
+		return moduleProgress && moduleProgress.completed.includes(lessonIndex);
+	}
+
 	/**
 	 * Get the current state of the lesson
 	 * @returns {Object} The current lesson state
@@ -196,72 +274,123 @@ export class LessonEngine {
 			lesson: this.currentLesson,
 			lessonIndex: this.currentLessonIndex,
 			userCode: this.userCode,
-			totalLessons: this.currentModule ? this.currentModule.lessons.length : 0
+			totalLessons: this.currentModule ? this.currentModule.lessons.length : 0,
+			isCompleted: this.isCurrentLessonCompleted(),
+			canGoNext: this.currentLessonIndex < (this.currentModule ? this.currentModule.lessons.length - 1 : 0),
+			canGoPrev: this.currentLessonIndex > 0
+		};
+	}
+
+	/**
+	 * Get overall progress statistics
+	 * @returns {Object} Progress statistics
+	 */
+	getProgressStats() {
+		let totalLessons = 0;
+		let totalCompleted = 0;
+
+		this.modules.forEach((module) => {
+			totalLessons += module.lessons.length;
+			const progress = this.userProgress[module.id];
+			if (progress && progress.completed) {
+				totalCompleted += progress.completed.length;
+			}
+		});
+
+		return {
+			totalLessons,
+			totalCompleted,
+			percentComplete: totalLessons > 0 ? Math.round((totalCompleted / totalLessons) * 100) : 0
 		};
 	}
 
 	/**
 	 * Save progress to localStorage
 	 */
-	saveProgress() {
+	saveUserProgress() {
-		if (!this.currentModule || !this.currentLesson) return;
-
-		const progressData = {
-			moduleId: this.currentModule.id,
-			lessonIndex: this.currentLessonIndex,
-			userCode: this.userCode,
-			timestamp: new Date().toISOString()
-		};
-
-		localStorage.setItem("codeCrispies.progress", JSON.stringify(progressData));
-	}
-
-	/**
-	 * Load progress from localStorage
-	 * @param {Array} modules - Available modules
-	 * @returns {Object|null} Loaded progress data or null if not found
-	 */
-	loadProgress(modules) {
-		const savedProgress = localStorage.getItem("codeCrispies.progress");
-		if (!savedProgress) return null;
-
 		try {
-			const progressData = JSON.parse(savedProgress);
+			const progressData = {
-
+				...this.userProgress,
-			// Find the module
+				lastModuleId: this.currentModule?.id,
-			const module = modules.find((m) => m.id === progressData.moduleId);
+				timestamp: new Date().toISOString()
-			if (!module) return null;
+			};
-
+			localStorage.setItem("codeCrispies.progress", JSON.stringify(progressData));
-			this.setModule(module);
-			this.setLessonByIndex(progressData.lessonIndex);
-
-			// Restore user code if available
-			if (progressData.userCode) {
-				this.userCode = progressData.userCode;
-				this.renderPreview();
-			}
-
-			return progressData;
 		} catch (e) {
-			console.error("Error loading progress:", e);
+			console.error("Error saving progress:", e);
-			return null;
 		}
 	}
 
 	/**
-	 * Reset the current state
+	 * Load progress from localStorage
+	 */
+	loadUserProgress() {
+		try {
+			const savedProgress = localStorage.getItem("codeCrispies.progress");
+			if (savedProgress) {
+				const progressData = JSON.parse(savedProgress);
+
+				// Extract user progress, excluding metadata
+				const { lastModuleId, timestamp, ...userProgress } = progressData;
+				this.userProgress = userProgress;
+
+				return { lastModuleId, timestamp };
+			}
+		} catch (e) {
+			console.error("Error loading progress:", e);
+		}
+		return null;
+	}
+
+	/**
+	 * Save user code to localStorage
+	 */
+	saveUserCodeToStorage() {
+		try {
+			localStorage.setItem("codeCrispies.userCode", JSON.stringify(Array.from(this.userCodeMap.entries())));
+		} catch (e) {
+			console.error("Error saving user code:", e);
+		}
+	}
+
+	/**
+	 * Load user code from localStorage
+	 */
+	loadUserCodeFromStorage() {
+		try {
+			const savedCode = localStorage.getItem("codeCrispies.userCode");
+			if (savedCode) {
+				const codeEntries = JSON.parse(savedCode);
+				this.userCodeMap = new Map(codeEntries);
+			}
+		} catch (e) {
+			console.error("Error loading user code:", e);
+		}
+	}
+
+	/**
+	 * Reset the current lesson
 	 */
 	reset() {
 		if (this.currentLesson) {
 			this.userCode = this.currentLesson.initialCode || "";
+
+			// Clear saved user code for this lesson
+			const lessonKey = `${this.currentModule.id}-${this.currentLessonIndex}`;
+			this.userCodeMap.delete(lessonKey);
+			this.saveUserCodeToStorage();
+
 			this.renderPreview();
 		}
 	}
 
 	/**
-	 * Clear all saved progress
+	 * Clear all saved progress and user code
 	 */
 	clearProgress() {
+		this.userProgress = {};
+		this.userCodeMap.clear();
 		localStorage.removeItem("codeCrispies.progress");
+		localStorage.removeItem("codeCrispies.userCode");
+		localStorage.removeItem("codeCrispies.lastModuleId");
 	}
 }