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/App.css | 42 +++ src/App.tsx | 18 ++ src/assets/react.svg | 1 + src/base.css | 183 +++++++++++++ src/index.css | 0 src/main.tsx | 10 + src/pages/HomePage.tsx | 294 ++++++++++++++++++++ src/pages/chart/ChartPage.tsx | 178 +++++++++++++ src/pages/chart/styles.css | 132 +++++++++ src/styles.css | 605 ++++++++++++++++++++++++++++++++++++++++++ src/vite-env.d.ts | 1 + 11 files changed, 1464 insertions(+) create mode 100644 src/App.css create mode 100644 src/App.tsx create mode 100644 src/assets/react.svg create mode 100644 src/base.css create mode 100644 src/index.css create mode 100644 src/main.tsx create mode 100644 src/pages/HomePage.tsx create mode 100644 src/pages/chart/ChartPage.tsx create mode 100644 src/pages/chart/styles.css create mode 100644 src/styles.css create mode 100644 src/vite-env.d.ts (limited to 'src') diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..b9d355d --- /dev/null +++ b/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..1512713 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,18 @@ +import { BrowserRouter as Router, Routes, Route } from 'react-router' +import HomePage from './pages/HomePage' +import ChartPage from './pages/chart/ChartPage' +import './base.css' +import './styles.css' + +function App() { + return ( + + + } /> + } /> + + + ) +} + +export default App diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/base.css b/src/base.css new file mode 100644 index 0000000..d5afb78 --- /dev/null +++ b/src/base.css @@ -0,0 +1,183 @@ +/* Morse Hero Base Styles */ +:root { + --primary-color: #3498db; + --primary-dark: #2980b9; + --secondary-color: #f39c12; + --secondary-dark: #e67e22; + --accent-color: #e74c3c; + --accent-dark: #c0392b; + --success-color: #2ecc71; + --success-dark: #27ae60; + --bg-dark: #2c3e50; + --bg-darker: #1a2530; + --bg-light: #34495e; + --text-light: #ecf0f1; + --text-dim: rgba(255, 255, 255, 0.7); + --border-radius-sm: 12px; + --border-radius-md: 20px; + --border-radius-lg: 30px; + --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.15); + --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.2); + --transition-fast: 0.2s ease; + --transition-normal: 0.3s ease; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Poppins', 'Fredoka', sans-serif; + margin: 0; + padding: 0; + background: radial-gradient(ellipse at top, var(--bg-dark) 0%, var(--bg-darker) 100%); + color: var(--text-light); + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 18px; + line-height: 1.6; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 30px 20px; + text-align: center; + width: 100%; +} + +h1 { + color: var(--secondary-color); + text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(243, 156, 18, 0.5); + margin-bottom: 20px; + font-family: 'Fredoka', sans-serif; + font-weight: 600; + position: relative; + display: inline-block; +} + +h1::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: linear-gradient(90deg, var(--accent-color), var(--secondary-color)); + border-radius: 2px; +} + +button { + cursor: pointer; + font-family: 'Poppins', 'Fredoka', sans-serif; + transition: all var(--transition-normal); + font-weight: 600; + letter-spacing: 1px; + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); + border: none; + outline: none; + position: relative; + overflow: hidden; +} + +button::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); + opacity: 0; + transition: opacity var(--transition-fast); +} + +button:hover::after { + opacity: 1; +} + +.title-link { + color: inherit; + text-decoration: none; + transition: all var(--transition-normal); + position: relative; + display: inline-block; +} + +.title-link:hover { + color: var(--secondary-color); + text-shadow: 0 0 15px rgba(243, 156, 18, 0.6); +} + +.footer { + margin-top: 40px; + padding: 20px; + text-align: center; + font-size: 16px; + color: var(--text-dim); + width: 100%; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer a { + color: var(--primary-color); + text-decoration: none; + font-weight: bold; + transition: color var(--transition-normal); + position: relative; +} + +.footer a::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: -2px; + left: 0; + background-color: var(--primary-color); + transform-origin: bottom right; + transition: transform 0.3s ease-out; +} + +.footer a:hover { + color: var(--secondary-color); +} + +.footer a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} + +/* Common Media Queries */ +@media (max-width: 768px) { + .container { + padding: 20px 15px; + } + + h1 { + font-size: 36px; + } + + button { + font-size: 16px; + } +} + +@media (max-width: 480px) { + h1 { + font-size: 28px; + } + + .container { + padding: 15px 10px; + } +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..bef5202 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + + , +) diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000..bf07bd5 --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,294 @@ +import { useState, 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 HomePage = () => { + // Game variables + const [gameStarted, setGameStarted] = useState(false); + const [score, setScore] = useState(0); + const [totalPlayed, setTotalPlayed] = useState(0); + const [currentChar, setCurrentChar] = useState(''); + const [feedback, setFeedback] = useState(''); + const [options, setOptions] = useState([]); + const [wpm, setWpm] = useState(20); + const [showHints, setShowHints] = useState(false); + + const actxRef = useRef(null); + const optionButtonsRef = useRef>([null, null, null, null]); + + // Define available characters + const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + const numbers = '0123456789'; + const specialChars = '.,?/='; + const allChars = letters + numbers + specialChars; + + // Initialize the game when started - this happens on user interaction (button click) + const startGame = () => { + try { + // Initialize audio context on user interaction + actxRef.current = cw.initAudioContext({ tone: 600 }); + setGameStarted(true); + newRound(); + } catch (error) { + console.error('Failed to initialize audio context:', error); + alert('Failed to initialize audio. Please try again.'); + } + }; + + // Generate a new round + const newRound = () => { + // Clear feedback + setFeedback(''); + + // Reset button states + optionButtonsRef.current.forEach(button => { + if (button) { + button.disabled = false; + button.classList.remove('correct', 'incorrect', 'key-pressed'); + } + }); + + // Generate a random character + const randomIndex = Math.floor(Math.random() * allChars.length); + const newChar = allChars[randomIndex]; + setCurrentChar(newChar); + + // Generate options (one correct, three random) + let newOptions = [newChar]; + + // Add three random unique characters + while (newOptions.length < 4) { + const randomChar = allChars[Math.floor(Math.random() * allChars.length)]; + if (!newOptions.includes(randomChar)) { + newOptions.push(randomChar); + } + } + + // Shuffle options + newOptions = shuffleArray(newOptions); + setOptions(newOptions); + + // Play the Morse code for the character + playMorseCode(newChar); + }; + + // Play Morse code for a character + const playMorseCode = (char: string) => { + if (actxRef.current) { + cw.play(char, { + wpm: wpm, + actx: actxRef.current + }); + } + }; + + // Check if the answer is correct + const checkAnswer = (selectedChar: string) => { + if (selectedChar === currentChar) { + // Correct answer + setFeedback('Correct!'); + setScore(prevScore => prevScore + 1); + + // Add to score tracker + const scoreTracker = document.getElementById('scoreTracker'); + if (scoreTracker) { + const marker = document.createElement('div'); + marker.className = 'score-marker correct'; + scoreTracker.appendChild(marker); + } + + // Disable all buttons + optionButtonsRef.current.forEach(button => { + if (button) button.disabled = true; + }); + + // Highlight the correct button + const correctButtonIndex = options.indexOf(currentChar); + if (correctButtonIndex !== -1 && optionButtonsRef.current[correctButtonIndex]) { + const button = optionButtonsRef.current[correctButtonIndex]; + if (button) button.classList.add('correct'); + } + + // Move to next round after delay + setTimeout(newRound, 1500); + } else { + // Incorrect answer + setFeedback('Incorrect! The correct answer was ' + currentChar); + + // Add to score tracker + const scoreTracker = document.getElementById('scoreTracker'); + if (scoreTracker) { + const marker = document.createElement('div'); + marker.className = 'score-marker incorrect'; + scoreTracker.appendChild(marker); + } + + // Disable all buttons + optionButtonsRef.current.forEach(button => { + if (button) button.disabled = true; + }); + + // Highlight the incorrect button and show the correct one + const selectedButtonIndex = options.indexOf(selectedChar); + if (selectedButtonIndex !== -1 && optionButtonsRef.current[selectedButtonIndex]) { + const button = optionButtonsRef.current[selectedButtonIndex]; + if (button) button.classList.add('incorrect'); + } + + const correctButtonIndex = options.indexOf(currentChar); + if (correctButtonIndex !== -1 && optionButtonsRef.current[correctButtonIndex]) { + const button = optionButtonsRef.current[correctButtonIndex]; + if (button) button.classList.add('correct'); + } + + // Move to next round after delay + setTimeout(newRound, 2000); + } + + setTotalPlayed(prevTotal => prevTotal + 1); + }; + + // Handle keyboard input + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (!gameStarted) return; + + const key = event.key.toUpperCase(); + + // Find if any button has this character + const index = options.findIndex(option => option === key); + if (index !== -1) { + const button = optionButtonsRef.current[index]; + if (button && !button.disabled) { + button.classList.add('key-pressed'); + setTimeout(() => { + button.classList.remove('key-pressed'); + checkAnswer(key); + }, 100); + } + } + }; + + document.addEventListener('keydown', handleKeyDown); + return () => { + document.removeEventListener('keydown', handleKeyDown); + }; + }, [gameStarted, options]); + + // Utility function to shuffle an array + const shuffleArray = (array: string[]) => { + const newArray = [...array]; + for (let i = newArray.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [newArray[i], newArray[j]] = [newArray[j], newArray[i]]; + } + return newArray; + }; + + // Get Morse code representation for a character + 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] || ''; + }; + + return ( +
+

Morse Hero

+ + {!gameStarted ? ( +
+

Learn Morse code the fun way!

+ +
+ View Morse Code Chart +
+
+ ) : ( +
+
+
+
+
Score:
+
+ {score} / {totalPlayed} +
+
+
+
+
+ +
+
+ {options.map((option, index) => ( + + ))} +
+ +
{feedback}
+
+ +
+ + +
+ setShowHints(e.target.checked)} + /> + +
+
+
+ )} + +
+

Need help? View the Morse Code Chart.

+

Created with CW.js. For a complete and professional + Morse Code training solution visit Master CW.

+
+
+ ); +}; + +export default HomePage; 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 +
+ +
+

Click on any character to hear its Morse code sound.

+

Created with CW.js. For a complete and professional + Morse Code training solution visit Master CW.

+
+
+ ); +}; + +// 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; + } +} diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..264b6f7 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,605 @@ +/* Morse Hero Main Styles */ + +h1 { + font-size: 4.5em; + margin-top: 0.5rem; + letter-spacing: 2px; + font-weight: 700; + text-shadow: + 0 0 15px rgba(243, 156, 18, 0.4), + 3px 3px 0px rgba(231, 76, 60, 0.6); +} + +h1::after { + width: 80px; +} + +.game-container { + background: linear-gradient(145deg, var(--bg-dark) 0%, var(--bg-darker) 100%); + border-radius: var(--border-radius-lg); + padding: 40px; + box-shadow: var(--shadow-lg); + border: none; + position: relative; + overflow: hidden; +} + +.game-container::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; +} + +.options { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-top: 40px; +} + +.start-button { + background: linear-gradient(145deg, var(--accent-color) 0%, #c0392b 100%); + color: white; + border: none; + padding: 20px 50px; + font-size: 32px; + font-weight: 700; + border-radius: var(--border-radius-lg); + cursor: pointer; + transition: all var(--transition-normal); + box-shadow: var(--shadow-md); + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 30px; + width: 100%; + max-width: 300px; + position: relative; + z-index: 1; +} + +.start-button:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); + background: linear-gradient(145deg, #e74c3c 0%, var(--accent-color) 100%); +} + +.start-button:active { + transform: translateY(-2px); + box-shadow: var(--shadow-sm); +} + +.option-button { + background: linear-gradient(145deg, var(--primary-color), var(--primary-dark)); + color: white; + border-radius: var(--border-radius-md); + font-size: 36px; + padding: 25px 15px; + box-shadow: 0 8px 0 var(--primary-dark), + var(--shadow-md); + min-height: 130px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + z-index: 1; +} + +.option-button:hover { + transform: translateY(-5px); + box-shadow: 0 13px 0 var(--primary-dark), + var(--shadow-lg); +} + +.option-button:active { + transform: translateY(3px); + box-shadow: 0 5px 0 var(--primary-dark), + var(--shadow-sm); +} + +.option-button.correct { + background: linear-gradient(145deg, var(--success-color), var(--success-dark)); + box-shadow: 0 8px 0 var(--success-dark), + 0 0 30px rgba(46, 204, 113, 0.5); + animation: pulse 0.5s; +} + +.option-button.incorrect { + background: linear-gradient(145deg, var(--accent-color), var(--accent-dark)); + box-shadow: 0 8px 0 var(--accent-dark), + 0 0 30px rgba(231, 76, 60, 0.5); + animation: shake 0.5s; +} + +.char-display { + font-size: 38px; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +.morse-hint { + display: block; + font-size: 18px; + margin-top: 10px; + color: var(--text-dim); + font-family: monospace; + letter-spacing: 2px; +} + +.key-label { + position: absolute; + top: 8px; + right: 12px; + font-size: 14px; + color: var(--text-dim); + font-family: monospace; + background-color: rgba(0, 0, 0, 0.2); + padding: 2px 8px; + border-radius: 10px; +} + +.key-pressed { + transform: translateY(3px) !important; + box-shadow: 0 5px 0 var(--primary-dark) !important; + transition: transform 0.05s, box-shadow 0.05s; +} + +.chart-link { + margin-top: 20px; + font-size: 18px; +} + +.chart-link a { + color: var(--primary-color); + text-decoration: none; + transition: all var(--transition-normal); + position: relative; +} + +.chart-link a:hover { + color: var(--secondary-color); + text-decoration: underline; +} + +.chart-link a::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: -2px; + left: 0; + background-color: var(--primary-color); + transform-origin: bottom right; + transition: transform 0.3s ease-out; +} + +.chart-link a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; + background-color: var(--secondary-color); +} + +#startScreen { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + background: linear-gradient(145deg, var(--bg-dark) 0%, var(--bg-darker) 100%); + border-radius: var(--border-radius-lg); + padding: 40px 30px; + margin: 40px 0; + position: relative; + border: 2px dashed rgba(52, 152, 219, 0.3); + box-shadow: var(--shadow-md); +} + +#startScreen::before { + content: ''; + position: absolute; + left: 50%; + top: -2px; + transform: translateX(-50%); + width: 80%; + height: 4px; + background: linear-gradient(90deg, rgba(52, 152, 219, 0) 0%, rgba(52, 152, 219, 0.8) 50%, rgba(52, 152, 219, 0) 100%); + border-radius: 2px; +} + +#startScreen p { + font-size: 28px; + font-weight: 600; + color: var(--text-light); + margin-bottom: 40px; + text-shadow: var(--text-shadow); +} + +#startScreen .chart-link { + margin-top: 0; + width: 100%; + max-width: 300px; +} + +#startScreen .chart-link a { + display: block; + width: 100%; + padding: 12px 25px; + background: linear-gradient(145deg, rgba(52, 152, 219, 0.2) 0%, rgba(52, 152, 219, 0.3) 100%); + border-radius: var(--border-radius-md); + color: var(--text-light); + font-size: 18px; + font-weight: 600; + text-decoration: none; + transition: all var(--transition-normal); + border: 1px solid rgba(52, 152, 219, 0.3); + box-shadow: var(--shadow-sm); + box-sizing: border-box; +} + +#startScreen .chart-link a:hover { + background: linear-gradient(145deg, rgba(52, 152, 219, 0.3) 0%, rgba(52, 152, 219, 0.4) 100%); + transform: translateY(-3px); + box-shadow: var(--shadow-md); + color: var(--primary-color); + border-color: rgba(52, 152, 219, 0.5); +} + +.score-container { + margin-bottom: 20px; + width: 100%; +} + +.score-widget { + background-color: rgba(255, 255, 255, 0.1); + border-radius: var(--border-radius-md); + padding: 15px; + box-shadow: var(--shadow-sm); + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.score-info { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-right: 15px; + min-width: 100px; +} + +.score-label { + font-size: 18px; + margin-bottom: 5px; + color: var(--text-dim); +} + +.score-value { + font-size: 24px; + font-weight: bold; + color: var(--secondary-color); +} + +.score-tracker { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 5px; + max-width: 100%; + margin-top: 5px; +} + +.score-dot { + width: 12px; + height: 12px; + border-radius: 50%; + margin: 2px; + transition: all 0.3s ease; +} + +.score-dot.correct { + background-color: var(--success-color); + box-shadow: 0 0 5px rgba(46, 204, 113, 0.7); +} + +.score-dot.incorrect { + background-color: var(--accent-color); + box-shadow: 0 0 5px rgba(231, 76, 60, 0.7); +} + +.feedback { + height: 40px; + margin-top: 30px; + font-weight: bold; + font-size: 28px; + color: var(--secondary-color); + text-shadow: 0 0 10px rgba(243, 156, 18, 0.5); +} + +.score { + font-size: 32px; + font-weight: bold; + color: var(--secondary-color); + margin-bottom: 30px; + text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3), + 0 0 10px rgba(243, 156, 18, 0.3); +} + +.score-display { + font-size: 24px; + font-weight: bold; + margin: 15px 0; + color: var(--secondary-color); +} + +.settings { + background: linear-gradient(145deg, rgba(52, 73, 94, 0.7) 0%, rgba(44, 62, 80, 0.7) 100%); + padding: 25px; + border-radius: var(--border-radius-md); + margin-top: 30px; + font-size: 20px; + border: none; + box-shadow: var(--shadow-md); +} + +.settings label { + font-size: 20px; + margin-right: 15px; + color: var(--primary-color); + font-weight: 600; +} + +.settings select { + padding: 12px 20px; + font-size: 18px; + border-radius: var(--border-radius-sm); + border: 2px solid var(--primary-dark); + background-color: rgba(44, 62, 80, 0.7); + color: var(--text-light); + font-family: 'Poppins', sans-serif; + cursor: pointer; + box-shadow: var(--shadow-sm); + transition: all var(--transition-normal); +} + +.settings select:hover { + border-color: var(--primary-color); + box-shadow: 0 0 10px rgba(52, 152, 219, 0.3); +} + +.settings select:focus { + outline: none; + border-color: var(--secondary-color); + box-shadow: 0 0 15px rgba(243, 156, 18, 0.3); +} + +.hint-setting { + display: inline-block; + margin-left: 30px; +} + +.hint-icon { + display: inline-block; + margin-right: 8px; +} + +.hint-setting input[type="checkbox"] { + width: 20px; + height: 20px; + vertical-align: middle; + cursor: pointer; + margin-right: 8px; +} + +.controls { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 30px; +} + +.control-button { + background: linear-gradient(145deg, var(--bg-light), #2d3e50); + color: var(--text-light); + border-radius: var(--border-radius-sm); + padding: 12px 25px; + font-size: 16px; + box-shadow: var(--shadow-sm); + transition: all var(--transition-normal); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.control-button:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-md); + background: linear-gradient(145deg, #3a5269, var(--bg-light)); +} + +.control-button:active { + transform: translateY(1px); + box-shadow: var(--shadow-sm); +} + +.play-again-button { + background: linear-gradient(145deg, var(--secondary-color), var(--secondary-dark)); + color: white; + border-radius: var(--border-radius-md); + padding: 15px 30px; + font-size: 20px; + margin-top: 20px; + box-shadow: 0 6px 0 var(--secondary-dark), + var(--shadow-md); +} + +.play-again-button:hover { + transform: translateY(-5px); + box-shadow: 0 11px 0 var(--secondary-dark), + var(--shadow-lg); +} + +.play-again-button:active { + transform: translateY(3px); + box-shadow: 0 3px 0 var(--secondary-dark), + var(--shadow-sm); +} + +.progress-container { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 20px; + height: 10px; + width: 100%; + margin: 20px 0; + overflow: hidden; + position: relative; +} + +.progress-bar { + background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); + height: 100%; + border-radius: 20px; + transition: width 0.5s ease; +} + +.instructions { + background-color: rgba(255, 255, 255, 0.05); + border-radius: var(--border-radius-md); + padding: 25px; + margin-bottom: 30px; + text-align: left; + box-shadow: var(--shadow-sm); + border-left: 4px solid var(--primary-color); +} + +.instructions h2 { + color: var(--secondary-color); + margin-bottom: 15px; + font-size: 24px; +} + +.instructions p { + margin-bottom: 10px; + font-size: 16px; + line-height: 1.6; +} + +.instructions ul { + margin-left: 20px; + margin-bottom: 10px; +} + +.instructions li { + margin-bottom: 5px; +} + +@keyframes pulse { + 0% { + box-shadow: 0 8px 0 var(--success-dark), 0 0 20px rgba(46, 204, 113, 0.5); + } + 50% { + box-shadow: 0 8px 0 var(--success-dark), 0 0 40px rgba(46, 204, 113, 0.8); + } + 100% { + box-shadow: 0 8px 0 var(--success-dark), 0 0 20px rgba(46, 204, 113, 0.5); + } +} + +@keyframes shake { + 0%, 100% { + transform: translateX(0); + } + 20%, 60% { + transform: translateX(-10px); + } + 40%, 80% { + transform: translateX(10px); + } +} + +/* Game Area */ +#gameArea { + display: none; +} + +/* When game is active, JavaScript will override this */ +body.game-active #gameArea { + display: block; +} + +body.game-active #startScreen { + display: none; +} + +@media (max-width: 768px) { + .game-container { + padding: 30px 20px; + } + + .options { + grid-template-columns: 1fr; + gap: 20px; + } + + .option-button { + font-size: 30px; + padding: 20px 15px; + min-height: 110px; + } + + h1 { + font-size: 3.5em; + } + + .start-button { + font-size: 28px; + padding: 15px 40px; + } + + .score-container { + flex-direction: column; + align-items: center; + } + + .score-widget { + margin-bottom: 15px; + } + + .settings-toggle { + margin-left: 0; + margin-top: 10px; + } +} + +@media (max-width: 480px) { + .game-container { + padding: 25px 15px; + } + + .option-button { + font-size: 24px; + padding: 15px 10px; + min-height: 90px; + } + + h1 { + font-size: 2.8em; + } + + .start-button { + font-size: 24px; + padding: 12px 30px; + } + + .hint-setting { + margin-left: 0; + margin-top: 10px; + } +} \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// -- cgit v1.3.1