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

refactor: reorganize project structure and update import paths

Browse Source
This commit is contained in:
Michael Czechowski
2025-05-13 20:29:59 +02:00
parent f56a1c8624
commit ab4279f9ca
12 changed files with 22 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/lessons/configs/basics.json → lessons/basics.json
View File

0
src/lessons/configs/flexbox.json → lessons/flexbox.json
View File

0
src/lessons/configs/grid.json → lessons/grid.json
View File

0
src/lessons/configs/tailwindcss.json → lessons/tailwindcss.json
View File

27
src/js/app.js → src/app.js
View File

@@ -1,7 +1,7 @@
import { LessonEngine } from './LessonEngine';
import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback } from './renderer';
import { validateUserCode } from './validator';
import { loadModules } from '../lessons/config.js';
import { LessonEngine } from './impl/LessonEngine.js';
import { renderLesson, renderModuleList, renderLevelIndicator, showFeedback } from './helpers/renderer.js';
import { validateUserCode } from './helpers/validator.js';
import { loadModules } from './config/lessons.js';
// Main Application state
const state = {
@@ -33,6 +33,7 @@ const elements = {
resetBtn: document.getElementById('reset-btn'),
helpBtn: document.getElementById('help-btn'),
lessonContainer: document.querySelector('.lesson-container'),
editorContent: document.querySelector('.editor-content')
};
// Initialize the lesson engine
@@ -424,11 +425,11 @@ function handleEditorClick() {
elements.codeInput.focus();
// Add a temporary highlight class to show where the cursor is
elements.codeInput.classList.add('editor-focused');
elements.editorContent.classList.add('editor-focused');
// Remove the highlight after a short delay
setTimeout(() => {
elements.codeInput.classList.remove('editor-focused');
elements.editorContent.classList.remove('editor-focused');
}, 300);
}
@@ -462,20 +463,10 @@ function init() {
elements.resetBtn.addEventListener('click', resetProgress);
elements.helpBtn.addEventListener('click', showHelp);
elements.codeInput.addEventListener('click', handleEditorClick);
elements.codeInput.addEventListener('focus', () => {
elements.codeInput.classList.add('editor-active');
});
elements.codeInput.addEventListener('blur', () => {
elements.codeInput.classList.remove('editor-active');
});
// Also make the editor container clickable to focus the text area
const editorContent = document.querySelector('.editor-content');
editorContent.addEventListener('click', (e) => {
// Only trigger if clicking the container itself, not child elements
if (e.target === editorContent) {
elements.codeInput.focus();
}
elements.editorContent.addEventListener('click', (e) => {
elements.codeInput.focus();
});
// Add tab key handler for the code input

8
src/lessons/config.js → src/config/lessons.js
View File

@@ -3,10 +3,10 @@
*/
// Import lesson configs
import flexboxConfig from './configs/flexbox.json';
import gridConfig from './configs/grid.json';
import basicsConfig from './configs/basics.json';
import tailwindConfig from './configs/tailwindcss.json';
import flexboxConfig from '../../lessons/flexbox.json';
import gridConfig from '../../lessons/grid.json';
import basicsConfig from '../../lessons/basics.json';
import tailwindConfig from '../../lessons/tailwindcss.json';
// Module store
const moduleStore = [

0
src/js/renderer.js → src/helpers/renderer.js
View File

0
src/js/validator.js → src/helpers/validator.js
View File

6
src/js/LessonEngine.js → src/impl/LessonEngine.js
View File

@@ -1,9 +1,9 @@
/**
* LessonEngine - Core class for managing lessons and applying/testing user code
* This file is the implementation of the LessonEngine class declaration from app.js
* This file is the implementation of the LessonEngine class declaration from app.helpers
*/
import { validateUserCode } from './validator.js';
import { showFeedback } from './renderer.js';
import { validateUserCode } from '../helpers/validator.js';
import { showFeedback } from '../helpers/renderer.js';
export class LessonEngine {
constructor() {

4
src/index.html
View File

@@ -5,7 +5,7 @@
<link rel="icon" href="./public/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CODE CRISPIES - Learn CSS Interactively</title>
<link rel="stylesheet" href="./styles/main.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="app-container">
@@ -85,6 +85,6 @@
</div>
</div>
<script type="module" src="./js/app.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>

11
src/styles/main.css → src/main.css
View File

@@ -209,12 +209,6 @@ body {
animation: focus-pulse 0.3s ease;
}
/* Style for when editor has focus */
.editor-active {
background-color: #252525;
box-shadow: inset 0 0 0 1px var(--primary-light);
}
/* Pulse animation */
@keyframes focus-pulse {
0% { background-color: #1e1e1e; }
@@ -227,7 +221,7 @@ code {
}
.code-input {
background-color: #1e1e1e;
background-color: transparent;
color: #d4d4d4;
border: none;
width: 100%;
@@ -238,7 +232,8 @@ code {
padding: 0.5rem 0;
outline: none;
resize: vertical;
caret-color: #ff7e5f; /* Make cursor more visible with accent color */
caret-color: var(--primary-color);
caret-shape: block;
transition: background-color 0.2s ease;
}

2
vite.config.js
View File

@@ -4,7 +4,7 @@ export default defineConfig({
root: './src',
publicDir: './public',
build: {
outDir: './dist',
outDir: '../dist',
emptyOutDir: true,
sourcemap: true
},