From 5bf781f3ac381744fbec035f938d69a201f75fa4 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Wed, 5 Mar 2025 12:21:25 +0100 Subject: Replace all impl with vite --- src/pages/chart/ChartPage.tsx | 178 ++++++++++++++++++++++++++++++++++++++++++ src/pages/chart/styles.css | 132 +++++++++++++++++++++++++++++++ 2 files changed, 310 insertions(+) create mode 100644 src/pages/chart/ChartPage.tsx create mode 100644 src/pages/chart/styles.css (limited to 'src/pages/chart') diff --git a/src/pages/chart/ChartPage.tsx b/src/pages/chart/ChartPage.tsx new file mode 100644 index 0000000..88c1ec2 --- /dev/null +++ b/src/pages/chart/ChartPage.tsx @@ -0,0 +1,178 @@ +import { useEffect, useRef } from 'react'; +import { Link } from 'react-router'; +import * as cw from 'cw'; +import '../../base.css'; +import './styles.css'; + +declare global { + interface Window { + cw: any; + } +} + +const ChartPage = () => { + const actxRef = useRef(null); + + // Initialize audio context + const initAudio = () => { + if (actxRef.current) return; // Already initialized + + try { + actxRef.current = cw.initAudioContext({ tone: 600 }); + } catch (error) { + console.error('Failed to initialize audio context:', error); + } + }; + + // Play Morse code for a character + const playCharacter = (character: string) => { + // Initialize audio on first user interaction + if (!actxRef.current) { + initAudio(); + } + + if (actxRef.current) { + // Remove 'playing' class from all items + document.querySelectorAll('.morse-item').forEach(item => { + item.classList.remove('playing'); + }); + + // Add 'playing' class to the clicked item + const clickedItem = document.querySelector(`.morse-item[data-char="${character}"]`); + if (clickedItem) { + clickedItem.classList.add('playing'); + } + + cw.play(character, { + wpm: 20, + actx: actxRef.current + }); + + // Remove the 'playing' class after the audio finishes + setTimeout(() => { + if (clickedItem) { + clickedItem.classList.remove('playing'); + } + }, 2000); + } + }; + + // Add click event listeners to all morse items + useEffect(() => { + const handleMorseItemClick = (e: Event) => { + const target = e.currentTarget as HTMLElement; + const character = target.getAttribute('data-char'); + if (character) { + playCharacter(character); + } + }; + + const morseItems = document.querySelectorAll('.morse-item'); + morseItems.forEach(item => { + item.addEventListener('click', handleMorseItemClick); + }); + + return () => { + morseItems.forEach(item => { + item.removeEventListener('click', handleMorseItemClick); + }); + }; + }, []); + + return ( +
+

Morse Hero

+

Morse Code Chart

+ +
+

Letters

+
+ {[...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'].map(char => ( +
+
{char}
+
{getMorseCode(char)}
+
+ ))} +
+
+ +
+

Numbers

+
+ {[...'0123456789'].map(char => ( +
+
{char}
+
{getMorseCode(char)}
+
+ ))} +
+
+ +
+

Special Characters

+
+ {[...'.=,?/'].map(char => ( +
+
{char}
+
{getMorseCode(char)}
+
+ ))} +
+
+ +
+

Prosigns

+
+
+
AR
+
·−·−·
+
End of message
+
+
+
SK
+
···−·−
+
End of contact
+
+
+
BT
+
−···−
+
Break
+
+
+
KN
+
−·−−·
+
Go only
+
+
+
+ +
+ Back to Morse Hero +
+ + +
+ ); +}; + +// Helper function to get morse code representation +const getMorseCode = (char: string) => { + const morseMap: { [key: string]: string } = { + 'A': '·−', 'B': '−···', 'C': '−·−·', 'D': '−··', 'E': '·', + 'F': '··−·', 'G': '−−·', 'H': '····', 'I': '··', 'J': '·−−−', + 'K': '−·−', 'L': '·−··', 'M': '−−', 'N': '−·', 'O': '−−−', + 'P': '·−−·', 'Q': '−−·−', 'R': '·−·', 'S': '···', 'T': '−', + 'U': '··−', 'V': '···−', 'W': '·−−', 'X': '−··−', 'Y': '−·−−', + 'Z': '−−··', '0': '−−−−−', '1': '·−−−−', '2': '··−−−', '3': '···−−', + '4': '····−', '5': '·····', '6': '−····', '7': '−−···', '8': '−−−··', + '9': '−−−−·', '.': '·−·−·−', ',': '−−··−−', '?': '··−−··', '/': '−··−·', '=': '−···−' + }; + + return morseMap[char] || ''; +}; + +export default ChartPage; diff --git a/src/pages/chart/styles.css b/src/pages/chart/styles.css new file mode 100644 index 0000000..279d421 --- /dev/null +++ b/src/pages/chart/styles.css @@ -0,0 +1,132 @@ +/* Morse Hero Chart Styles */ + +h1 { + font-size: 48px; +} + +h2 { + font-size: 32px; + margin: 30px 0 15px; + color: var(--primary-color); + text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), + 0 0 10px rgba(52, 152, 219, 0.4); + font-family: 'Fredoka', sans-serif; + font-weight: 600; +} + +.chart-section { + background: linear-gradient(145deg, var(--bg-light) 0%, #2d3e50 100%); + border-radius: var(--border-radius-md); + padding: 30px 25px; + margin-bottom: 40px; + box-shadow: var(--shadow-lg); + position: relative; + overflow: hidden; +} + +.chart-section::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 5px; + background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); + z-index: 1; +} + +.morse-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 20px; + margin: 0 auto; +} + +.morse-item { + background: linear-gradient(145deg, rgba(52, 152, 219, 0.1) 0%, rgba(52, 152, 219, 0.2) 100%); + border-radius: var(--border-radius-sm); + padding: 20px 15px; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: var(--shadow-sm); + transition: all var(--transition-normal); + cursor: pointer; + border: 1px solid rgba(52, 152, 219, 0.2); +} + +.morse-item:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-md); + background: linear-gradient(145deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.3) 100%); + border-color: rgba(52, 152, 219, 0.3); +} + +.morse-item.playing { + background: linear-gradient(145deg, rgba(243, 156, 18, 0.2) 0%, rgba(243, 156, 18, 0.3) 100%); + box-shadow: 0 0 20px rgba(243, 156, 18, 0.4); + border-color: rgba(243, 156, 18, 0.4); +} + +.character { + font-size: 32px; + font-weight: bold; + margin-bottom: 10px; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); +} + +.morse { + font-family: monospace; + font-size: 18px; + letter-spacing: 2px; + color: var(--text-dim); +} + +.back-link { + margin-top: 40px; + font-size: 18px; +} + +.back-link a { + color: var(--primary-color); + text-decoration: none; + transition: all var(--transition-normal); + padding: 10px 20px; + background-color: rgba(255, 255, 255, 0.05); + border-radius: var(--border-radius-sm); + display: inline-block; +} + +.back-link a:hover { + color: var(--secondary-color); + background-color: rgba(255, 255, 255, 0.1); + transform: translateY(-3px); + box-shadow: var(--shadow-sm); +} + +@media (max-width: 768px) { + .morse-grid { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 15px; + } + + .morse-item { + padding: 15px 10px; + } + + .character { + font-size: 28px; + } + + .morse { + font-size: 16px; + } + + h1 { + font-size: 36px; + } + + h2 { + font-size: 24px; + } +} -- cgit v1.3.1