clean buttons

1 files changed, 92 insertions, 3 deletions

diff --git a/index.html b/index.html
index 8d0f905..95aff14 100644
--- a/index.html
+++ b/index.html
@@ -91,6 +91,7 @@
                 0 0 15px rgba(52, 152, 219, 0.5);
             min-height: 120px;
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
         }
@@ -121,6 +122,20 @@
             animation: shake 0.5s;
         }
 
+        .char-display {
+            font-size: 36px;
+            font-weight: bold;
+        }
+
+        .morse-hint {
+            display: block;
+            font-size: 18px;
+            margin-top: 10px;
+            color: rgba(255, 255, 255, 0.8);
+            font-family: monospace;
+            letter-spacing: 2px;
+        }
+
         @keyframes pulse-green {
             from {
                 box-shadow: 0 8px 0 #27ae60, 0 0 20px rgba(46, 204, 113, 0.8);
@@ -219,6 +234,18 @@
             font-weight: bold;
             text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
         }
+
+        .hint-setting {
+            display: inline-block;
+            margin-left: 30px;
+        }
+
+        .hint-setting input[type="checkbox"] {
+            width: 24px;
+            height: 24px;
+            vertical-align: middle;
+            cursor: pointer;
+        }
     </style>
 </head>
 
@@ -253,6 +280,10 @@
                 <option value="25">25 WPM</option>
                 <option value="30">30 WPM</option>
             </select>
+            <div class="hint-setting">
+                <input type="checkbox" id="hintMode" name="hintMode">
+                <label for="hintMode">Show Hints</label>
+            </div>
         </div>
     </div>
 
@@ -307,6 +338,7 @@
             const scoreElement = document.getElementById('score');
             const totalElement = document.getElementById('total');
             const wpmSelect = document.getElementById('wpmSelect');
+            const hintModeCheckbox = document.getElementById('hintMode');
 
             optionButtons.forEach(button => {
                 button.addEventListener('click', function () {
@@ -314,6 +346,11 @@
                 });
             });
 
+            // Add event listener for hint mode checkbox
+            hintModeCheckbox.addEventListener('change', function () {
+                updateButtonsWithHints();
+            });
+
             // Start the game
             newRound();
 
@@ -326,6 +363,8 @@
                 optionButtons.forEach(button => {
                     button.disabled = false;
                     button.classList.remove('correct', 'incorrect');
+                    // Clear button content
+                    button.innerHTML = '';
                 });
 
                 // Generate a random character
@@ -347,13 +386,60 @@
 
                 // Set button text
                 for (let i = 0; i < 4; i++) {
-                    optionButtons[i].textContent = options[i];
+                    // Create a span for the character
+                    const charSpan = document.createElement('span');
+                    charSpan.className = 'char-display';
+                    charSpan.textContent = options[i];
+                    optionButtons[i].appendChild(charSpan);
                 }
 
+                // Update buttons with hints if hint mode is enabled
+                updateButtonsWithHints();
+
                 // immediately play sound
                 playMorse();
             }
 
+            // Update buttons with Morse code hints if hint mode is enabled
+            function updateButtonsWithHints() {
+                if (hintModeCheckbox.checked) {
+                    optionButtons.forEach(button => {
+                        // Remove any existing hint spans
+                        const existingHint = button.querySelector('.morse-hint');
+                        if (existingHint) {
+                            button.removeChild(existingHint);
+                        }
+
+                        // Get the character from the button's char-display span
+                        const charSpan = button.querySelector('.char-display');
+                        if (!charSpan) return;
+
+                        const char = charSpan.textContent;
+
+                        // Get the Morse code for the character
+                        const morseCode = cw.codes[char];
+
+                        if (morseCode) {
+                            // Create a span for the hint
+                            const hintSpan = document.createElement('span');
+                            hintSpan.className = 'morse-hint';
+                            hintSpan.textContent = morseCode.replace(/\./g, '·').replace(/\-/g, '−');
+
+                            // Add the hint to the button
+                            button.appendChild(hintSpan);
+                        }
+                    });
+                } else {
+                    // Remove hints if hint mode is disabled
+                    optionButtons.forEach(button => {
+                        const existingHint = button.querySelector('.morse-hint');
+                        if (existingHint) {
+                            button.removeChild(existingHint);
+                        }
+                    });
+                }
+            }
+
             // Play the morse code
             function playMorse() {
                 const wpm = parseInt(wpmSelect.value);
@@ -375,7 +461,9 @@
                 totalPlayed++;
                 totalElement.textContent = totalPlayed;
 
-                const selectedChar = selectedButton.textContent;
+                // Get the character from the button's char-display span
+                const charSpan = selectedButton.querySelector('.char-display');
+                const selectedChar = charSpan ? charSpan.textContent : '';
 
                 if (selectedChar === currentChar) {
                     // Correct answer
@@ -388,7 +476,8 @@
 
                     // Find and highlight the correct button
                     optionButtons.forEach(button => {
-                        if (button.textContent === currentChar) {
+                        const buttonCharSpan = button.querySelector('.char-display');
+                        if (buttonCharSpan && buttonCharSpan.textContent === currentChar) {
                             button.classList.add('correct');
                         }
                     });