From f56a1c8624f266707aa24f3c0170ef627b1b72dd Mon Sep 17 00:00:00 2001
From: Michael Czechowski <m.czechowski@pons.de>
Date: Tue, 13 May 2025 20:08:33 +0200
Subject: [PATCH] refactor: reorganize project structure and update import
 paths

---
 src/js/app.js       | 32 ++++++++++++++++++++++++++++++++
 src/styles/main.css | 21 +++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/src/js/app.js b/src/js/app.js
index 1b513bf..a44d2c2 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -203,6 +203,9 @@ function loadCurrentLesson() {
 
     // Update progress indicator on module selector button
     updateModuleSelectorButtonProgress();
+
+    // Focus on the code editor by default
+    elements.codeInput.focus();
 }
 
 // Update navigation buttons state
@@ -416,6 +419,19 @@ function closeModal() {
     elements.modalContainer.classList.add('hidden');
 }
 
+// Handle clicks in the code editor to focus the input
+function handleEditorClick() {
+    elements.codeInput.focus();
+
+    // Add a temporary highlight class to show where the cursor is
+    elements.codeInput.classList.add('editor-focused');
+
+    // Remove the highlight after a short delay
+    setTimeout(() => {
+        elements.codeInput.classList.remove('editor-focused');
+    }, 300);
+}
+
 // Handle tab key in the code editor
 function handleTabKey(e) {
     if (e.key === 'Tab') {
@@ -445,6 +461,22 @@ function init() {
     elements.moduleSelectorBtn.addEventListener('click', showModuleSelector);
     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();
+        }
+    });
 
     // Add tab key handler for the code input
     elements.codeInput.addEventListener('keydown', handleTabKey);
diff --git a/src/styles/main.css b/src/styles/main.css
index 9638c91..b3157c6 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -201,6 +201,25 @@ body {
     font-family: 'JetBrains Mono', 'Fira Code', monospace;
     font-size: 14px;
     line-height: 1.5;
+    cursor: text; /* Add text cursor to indicate it's editable */
+}
+
+/* Style for when editor is clicked - pulse effect */
+.editor-focused {
+    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; }
+    50% { background-color: #303030; }
+    100% { background-color: #1e1e1e; }
 }
 
 code {
@@ -219,6 +238,8 @@ code {
     padding: 0.5rem 0;
     outline: none;
     resize: vertical;
+    caret-color: #ff7e5f; /* Make cursor more visible with accent color */
+    transition: background-color 0.2s ease;
 }
 
 /* Controls */