summaryrefslogtreecommitdiff
path: root/morsehero/src
diff options
context:
space:
mode:
Diffstat (limited to 'morsehero/src')
-rw-r--r--morsehero/src/App.css42
-rw-r--r--morsehero/src/App.tsx18
-rw-r--r--morsehero/src/assets/react.svg1
-rw-r--r--morsehero/src/base.css183
-rw-r--r--morsehero/src/index.css68
-rw-r--r--morsehero/src/main.tsx10
-rw-r--r--morsehero/src/pages/HomePage.tsx294
-rw-r--r--morsehero/src/pages/chart/ChartPage.tsx178
-rw-r--r--morsehero/src/pages/chart/styles.css132
-rw-r--r--morsehero/src/styles.css605
-rw-r--r--morsehero/src/vite-env.d.ts1
11 files changed, 0 insertions, 1532 deletions
diff --git a/morsehero/src/App.css b/morsehero/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/morsehero/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#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/morsehero/src/App.tsx b/morsehero/src/App.tsx
deleted file mode 100644
index 1512713..0000000
--- a/morsehero/src/App.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-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 (
- <Router>
- <Routes>
- <Route path="/" element={<HomePage />} />
- <Route path="/chart" element={<ChartPage />} />
- </Routes>
- </Router>
- )
-}
-
-export default App
diff --git a/morsehero/src/assets/react.svg b/morsehero/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/morsehero/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg> \ No newline at end of file
diff --git a/morsehero/src/base.css b/morsehero/src/base.css
deleted file mode 100644
index d5afb78..0000000
--- a/morsehero/src/base.css
+++ /dev/null
@@ -1,183 +0,0 @@
-/* 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/morsehero/src/index.css b/morsehero/src/index.css
deleted file mode 100644
index 08a3ac9..0000000
--- a/morsehero/src/index.css
+++ /dev/null
@@ -1,68 +0,0 @@
-:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/morsehero/src/main.tsx b/morsehero/src/main.tsx
deleted file mode 100644
index bef5202..0000000
--- a/morsehero/src/main.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
- <StrictMode>
- <App />
- </StrictMode>,
-)
diff --git a/morsehero/src/pages/HomePage.tsx b/morsehero/src/pages/HomePage.tsx
deleted file mode 100644
index bf07bd5..0000000
--- a/morsehero/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-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<string[]>([]);
- const [wpm, setWpm] = useState(20);
- const [showHints, setShowHints] = useState(false);
-
- const actxRef = useRef<any>(null);
- const optionButtonsRef = useRef<Array<HTMLButtonElement | null>>([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 (
- <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>
- </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>
- </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="feedback" id="feedback">{feedback}</div>
- </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>
- </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>
- );
-};
-
-export default HomePage;
diff --git a/morsehero/src/pages/chart/ChartPage.tsx b/morsehero/src/pages/chart/ChartPage.tsx
deleted file mode 100644
index 88c1ec2..0000000
--- a/morsehero/src/pages/chart/ChartPage.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-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<any>(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 (
- <div className="container">
- <h1><Link to="/" className="title-link">Morse Hero</Link></h1>
- <h2>Morse Code Chart</h2>
-
- <div className="chart-section">
- <h2>Letters</h2>
- <div className="morse-grid">
- {[...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'].map(char => (
- <div key={char} className="morse-item" data-char={char}>
- <div className="character">{char}</div>
- <div className="morse">{getMorseCode(char)}</div>
- </div>
- ))}
- </div>
- </div>
-
- <div className="chart-section">
- <h2>Numbers</h2>
- <div className="morse-grid">
- {[...'0123456789'].map(char => (
- <div key={char} className="morse-item" data-char={char}>
- <div className="character">{char}</div>
- <div className="morse">{getMorseCode(char)}</div>
- </div>
- ))}
- </div>
- </div>
-
- <div className="chart-section">
- <h2>Special Characters</h2>
- <div className="morse-grid">
- {[...'.=,?/'].map(char => (
- <div key={char} className="morse-item" data-char={char}>
- <div className="character">{char}</div>
- <div className="morse">{getMorseCode(char)}</div>
- </div>
- ))}
- </div>
- </div>
-
- <div className="chart-section">
- <h2>Prosigns</h2>
- <div className="morse-grid">
- <div className="morse-item">
- <div className="character">AR</div>
- <div className="morse">·−·−·</div>
- <div className="description">End of message</div>
- </div>
- <div className="morse-item">
- <div className="character">SK</div>
- <div className="morse">···−·−</div>
- <div className="description">End of contact</div>
- </div>
- <div className="morse-item">
- <div className="character">BT</div>
- <div className="morse">−···−</div>
- <div className="description">Break</div>
- </div>
- <div className="morse-item">
- <div className="character">KN</div>
- <div className="morse">−·−−·</div>
- <div className="description">Go only</div>
- </div>
- </div>
- </div>
-
- <div className="back-link">
- <Link to="/">Back to Morse Hero</Link>
- </div>
-
- <footer className="footer">
- <p>Click on any character to hear its Morse code sound.</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>
- );
-};
-
-// 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/morsehero/src/pages/chart/styles.css b/morsehero/src/pages/chart/styles.css
deleted file mode 100644
index 279d421..0000000
--- a/morsehero/src/pages/chart/styles.css
+++ /dev/null
@@ -1,132 +0,0 @@
-/* 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/morsehero/src/styles.css b/morsehero/src/styles.css
deleted file mode 100644
index 264b6f7..0000000
--- a/morsehero/src/styles.css
+++ /dev/null
@@ -1,605 +0,0 @@
-/* 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/morsehero/src/vite-env.d.ts b/morsehero/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe..0000000
--- a/morsehero/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 21:35:49 +0000