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

4
src/index.html
View File

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

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

@@ -209,12 +209,6 @@ body {
animation: focus-pulse 0.3s ease; 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 */ /* Pulse animation */
@keyframes focus-pulse { @keyframes focus-pulse {
0% { background-color: #1e1e1e; } 0% { background-color: #1e1e1e; }
@@ -227,7 +221,7 @@ code {
} }
.code-input { .code-input {
background-color: #1e1e1e; background-color: transparent;
color: #d4d4d4; color: #d4d4d4;
border: none; border: none;
width: 100%; width: 100%;
@@ -238,7 +232,8 @@ code {
padding: 0.5rem 0; padding: 0.5rem 0;
outline: none; outline: none;
resize: vertical; 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; transition: background-color 0.2s ease;
} }

2
vite.config.js
View File

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