blob: cb13a5c47a7c7660c06d75eba1f0cb210868fae5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import { useState } from 'react';
import { Link } from 'react-router';
import '../styles.css';
import Footer from '../components/Footer';
import MorseGame from '../components/MorseGame';
const HomePage = () => {
// Game state
const [gameStarted, setGameStarted] = useState(false);
// Initialize the game when started - this happens on user interaction (button click)
const startGame = () => {
setGameStarted(true);
};
// Reset game to initial state
const resetGame = () => {
setGameStarted(false);
};
return (
<div className="container">
<h1 onClick={resetGame} className="title-link">Morse Hero</h1>
{
!gameStarted ? (
<div id="startScreen">
<div className="hero-content">
<h2>Master Morse Code Through Play</h2>
<p>Morse Hero turns learning Morse code into an engaging game. Listen to the signals, identify the characters, and improve your skills with every round.</p>
<div className="cta-container">
<button id="startButton" className="start-button" onClick={startGame}>
Start Game
</button>
<div className="chart-link">
<Link to="/chart">View Morse Code Chart</Link>
</div>
</div>
<div className="feature-grid">
<div className="feature-item">
<div className="feature-icon">🎮</div>
<h3>Interactive Learning</h3>
<p>Learn by doing with our interactive game format</p>
</div>
<div className="feature-item">
<div className="feature-icon">🔊</div>
<h3>Audio Recognition</h3>
<p>Train your ear to recognize Morse code sounds</p>
</div>
<div className="feature-item">
<div className="feature-icon">📈</div>
<h3>Track Progress</h3>
<p>See your improvement with each practice session</p>
</div>
<div className="feature-item">
<div className="feature-icon">⚡</div>
<h3>Adjustable Speed</h3>
<p>Set your own pace as you build your skills</p>
</div>
</div>
</div>
</div>
) : (
<MorseGame />
)
}
<Footer />
</div>
);
};
export default HomePage;
|
