Move chart and cleanup

2 files changed, 59 insertions, 2 deletions

diff --git a/chart.html b/chart/index.html
index 1000e71..7050771 100644
--- a/chart.html
+++ b/chart/index.html
@@ -9,13 +9,14 @@
         content="Complete Morse code chart with letters, numbers, and special characters. A reference guide from Morse Hero.">
     <meta name="keywords" content="morse code, morse code chart, morse code reference, morse hero">
     <meta name="robots" content="index, follow">
-    <meta name="canonical" href="https://morsehero.com/chart">
+    <meta name="canonical" href="https://morsehero.com/chart/">
 
     <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/ico/icon-192.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/ico/icon-192.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="theme-color" content="#2c3e50">
+    <script src="https://cwjs.mastercw.com/cw.min.js"></script>
 
     <style>
         body {
@@ -79,6 +80,7 @@
             align-items: center;
             box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
             transition: transform 0.2s, box-shadow 0.2s;
+            cursor: pointer;
         }
 
         .morse-item:hover {
@@ -87,6 +89,11 @@
             background-color: rgba(52, 152, 219, 0.3);
         }
 
+        .morse-item.playing {
+            background-color: rgba(243, 156, 18, 0.3);
+            box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
+        }
+
         .character {
             font-size: 28px;
             font-weight: bold;
@@ -346,6 +353,56 @@
                 Morse Code training solution visit <a href="https://www.mastercw.com">Master CW</a>.</p>
         </footer>
     </div>
+
+    <script>
+        // Initialize audio context
+        let actx = null;
+
+        // Set up CW.js
+        function initAudio() {
+            if (!actx) {
+                actx = cw.initAudioContext({ tone: 600 });
+            }
+        }
+
+        // Play Morse code for a character
+        function playCharacter(character) {
+            // Initialize audio if not already done
+            initAudio();
+
+            // Get all morse items
+            const allItems = document.querySelectorAll('.morse-item');
+
+            // Remove playing class from all items
+            allItems.forEach(item => {
+                item.classList.remove('playing');
+            });
+
+            const list = event.currentTarget.classList;
+            // Add playing class to clicked item
+            list.add('playing');
+
+            // Play the character
+            cw.play(character, { actx: actx, wpm: 15 });
+
+            // Remove playing class after animation completes
+            setTimeout(() => {
+                list.remove('playing');
+            }, 1500);
+        }
+
+        // Add click event listeners to all morse items
+        document.addEventListener('DOMContentLoaded', function () {
+            const morseItems = document.querySelectorAll('.morse-item');
+
+            morseItems.forEach(item => {
+                const character = item.querySelector('.character').textContent;
+                item.addEventListener('click', function (event) {
+                    playCharacter(character);
+                });
+            });
+        });
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 3b1c8fc..e45df6a 100644
--- a/index.html
+++ b/index.html
@@ -406,7 +406,7 @@
             <p>Learn Morse code the fun way! Listen to the sound and pick the correct character.</p>
             <button id="startButton" class="start-button">Start Game</button>
             <div class="chart-link">
-                <a href="/chart.html">View Morse Code Chart</a>
+                <a href="/chart/">View Morse Code Chart</a>
             </div>
         </div>