From c0778dc18c353e81bb6e6898943d20d4c4329885 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
Date: Wed, 5 Mar 2025 13:28:50 +0100
Subject: Fix h1 click

---
 src/pages/HomePage.tsx | 147 +++++++++++++++++++++++++++++--------------------
 1 file changed, 87 insertions(+), 60 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 5892c8c..7b726a6 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -203,83 +203,110 @@ const HomePage = () => {
     return morseMap[char] || '';
   };
 
+  // Reset game to initial state
+  const resetGame = () => {
+    setGameStarted(false);
+    setScore(0);
+    setTotalPlayed(0);
+    setCurrentChar('');
+    setOptions([]);
+
+    // Clear score tracker
+    const scoreTracker = document.getElementById('scoreTracker');
+    if (scoreTracker) {
+      scoreTracker.innerHTML = '';
+    }
+
+    // Stop any playing audio
+    if (actxRef.current) {
+      try {
+        actxRef.current.close();
+        actxRef.current = null;
+      } catch (error) {
+        console.error('Error closing audio context:', error);
+      }
+    }
+  };
+
   return (
     <div className="container">
-      <h1><Link to="/" className="title-link">Morse Hero</Link></h1>
-
-      {!gameStarted ? (
-        <div id="startScreen">
-          <p>Learn Morse code the fun way!</p>
-          <button id="startButton" className="start-button" onClick={startGame}>Start</button>
-          <div className="chart-link">
-            <Link to="/chart">View Morse Code Chart</Link>
+      <h1 onClick={resetGame} className="title-link">Morse Hero</h1>
+
+      {
+        !gameStarted ? (
+          <div id="startScreen">
+            <p>Learn Morse code the fun way!</p>
+            <button id="startButton" className="start-button" onClick={startGame}>Start</button>
+            <div className="chart-link">
+              <Link to="/chart">View Morse Code Chart</Link>
+            </div>
           </div>
-        </div>
-      ) : (
-        <div id="gameArea" style={{ display: 'block' }}>
-          <div className="score-container">
-            <div className="score-widget">
-              <div className="score-info">
-                <div className="score-label">Score:</div>
-                <div className="score-value">
-                  <span id="score">{score}</span> / <span id="total">{totalPlayed}</span>
+        ) : (
+          <div id="gameArea" style={{ display: 'block' }}>
+            <div className="score-container">
+              <div className="score-widget">
+                <div className="score-info">
+                  <div className="score-label">Score:</div>
+                  <div className="score-value">
+                    <span id="score">{score}</span> / <span id="total">{totalPlayed}</span>
+                  </div>
                 </div>
+                <div className="score-tracker" id="scoreTracker"></div>
               </div>
-              <div className="score-tracker" id="scoreTracker"></div>
             </div>
-          </div>
 
-          <div className="game-container">
-            <div className="options">
-              {options.map((option, index) => (
-                <button
-                  key={index}
-                  className="option-button"
-                  ref={el => {
-                    optionButtonsRef.current[index] = el;
-                  }}
-                  onClick={() => checkAnswer(option)}
-                >
-                  <span className="char-display">{option}</span>
-                  {showHints && <span className="morse-hint">{getMorseCode(option)}</span>}
-                </button>
-              ))}
-            </div>
+            <div className="game-container">
+              <div className="options">
+                {options.map((option, index) => (
+                  <button
+                    key={index}
+                    className="option-button"
+                    ref={el => {
+                      optionButtonsRef.current[index] = el;
+                    }}
+                    onClick={() => checkAnswer(option)}
+                  >
+                    <span className="char-display">{option}</span>
+                    {showHints && <span className="morse-hint">{getMorseCode(option)}</span>}
+                  </button>
+                ))}
+              </div>
 
-            <div className="settings">
-              <label htmlFor="wpmSelect">Speed:</label>
-              <select
-                id="wpmSelect"
-                value={wpm}
-                onChange={(e) => setWpm(parseInt(e.target.value))}
-              >
-                <option value="10">10 WPM</option>
-                <option value="15">15 WPM</option>
-                <option value="20">20 WPM</option>
-                <option value="25">25 WPM</option>
-                <option value="30">30 WPM</option>
-              </select>
-              <div className="hint-setting">
-                <input
-                  type="checkbox"
-                  id="hintMode"
-                  name="hintMode"
-                  checked={showHints}
-                  onChange={(e) => setShowHints(e.target.checked)}
-                />
-                <label htmlFor="hintMode">Show Hints</label>
+              <div className="settings">
+                <label htmlFor="wpmSelect">Speed:</label>
+                <select
+                  id="wpmSelect"
+                  value={wpm}
+                  onChange={(e) => setWpm(parseInt(e.target.value))}
+                >
+                  <option value="10">10 WPM</option>
+                  <option value="15">15 WPM</option>
+                  <option value="20">20 WPM</option>
+                  <option value="25">25 WPM</option>
+                  <option value="30">30 WPM</option>
+                </select>
+                <div className="hint-setting">
+                  <input
+                    type="checkbox"
+                    id="hintMode"
+                    name="hintMode"
+                    checked={showHints}
+                    onChange={(e) => setShowHints(e.target.checked)}
+                  />
+                  <label htmlFor="hintMode">Show Hints</label>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
+        )
+      }
 
       <footer className="footer">
         <p>Need help? View the <Link to="/chart">Morse Code Chart</Link>. </p>
         <p>Created with <a href="https://www.mastercw.com/cw.js/">CW.js</a>. For a complete and professional
           Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
       </footer>
-    </div>
+    </div >
   );
 };
 
-- 
cgit v1.3.1