From a6fac18fb89d7268ac5ce1026f3bffd2e9f275a7 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Fri, 7 Mar 2025 13:12:43 +0100 Subject: Initial fatter design and copy --- src/pages/HomePage.tsx | 123 +++++++++++++++++++++++++++++++++++------- src/pages/chart/ChartPage.tsx | 51 ++++++++++++++++-- 2 files changed, 149 insertions(+), 25 deletions(-) (limited to 'src/pages') diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 6a8c9c7..f7f65dd 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -18,6 +18,7 @@ const HomePage = () => { const [options, setOptions] = useState([]); const [wpm, setWpm] = useState(20); const [showHints, setShowHints] = useState(false); + const [showHowToPlay, setShowHowToPlay] = useState(false); const actxRef = useRef(null); const optionButtonsRef = useRef>([null, null, null, null]); @@ -234,10 +235,63 @@ const HomePage = () => { { !gameStarted ? (
-

Learn Morse code the fun way!

- -
- View Morse Code Chart +
+

Master Morse Code Through Play

+

Morse Hero turns learning Morse code into an engaging game. Listen to the signals, identify the characters, and improve your skills with every round.

+ +
+
+
🎮
+

Interactive Learning

+

Learn by doing with our interactive game format

+
+
+
🔊
+

Audio Recognition

+

Train your ear to recognize Morse code sounds

+
+
+
📈
+

Track Progress

+

See your improvement with each practice session

+
+
+
âš¡
+

Adjustable Speed

+

Set your own pace as you build your skills

+
+
+ +
+ + +
+ + {showHowToPlay && ( +
+

How to Play Morse Hero

+
    +
  1. Listen to the Morse code sound played
    2. +
  2. Select the correct character from the four options
    3. +
  3. Use keyboard keys that match the displayed characters for faster play
    4. +
  4. Enable hints if you need help seeing the Morse patterns
    5. +
  5. Adjust the speed to match your skill level
    6. +
+
+

Did You Know?

+

Morse code was developed by Samuel Morse and Alfred Vail in the 1830s and revolutionized long-distance communication.

+
+
+ )} + +
+ View Morse Code Chart +
) : ( @@ -255,6 +309,13 @@ const HomePage = () => {
+
+

Listen to the Morse code and select the correct character

+ +
+
{options.map((option, index) => (
- - -
+
+ + +
+
{ />
+ +
+ +
+

Pro Tip: Use your keyboard to select options faster!

@@ -301,9 +369,24 @@ const HomePage = () => { }
-

Need help? View the Morse Code Chart.

-

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

+
+
+

About Morse Code

+

Morse code is a method of transmitting text as a series of on-off tones, lights, or clicks that can be understood by a skilled listener without specialized equipment.

+
+
+

Quick Links

+ +
+
+
+

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

+

© {new Date().getFullYear()} Morse Hero - Practice Morse Code the Fun Way

+
); diff --git a/src/pages/chart/ChartPage.tsx b/src/pages/chart/ChartPage.tsx index e8bf7bc..0492265 100644 --- a/src/pages/chart/ChartPage.tsx +++ b/src/pages/chart/ChartPage.tsx @@ -83,7 +83,24 @@ const ChartPage = () => {

Morse Hero

-

Morse Code Chart

+ +
+

Morse Code Reference Chart

+

Click on any character to hear its Morse code sound. Practice recognizing these patterns to improve your Morse code skills.

+
+ +
+

Understanding Morse Code

+

Morse code uses dots (·) and dashes (−) to represent letters, numbers, and special characters. A dash is three times as long as a dot. The space between parts of the same letter is one dot length, between letters is three dot lengths, and between words is seven dot lengths.

+
+

Memorization Tips

+
    +
  • E (·) and T (−) are the most common letters in English and have the shortest codes
    • +
  • Letters with similar sounds often have related patterns (e.g., S and O: S = ··· and O = −−−)
    • +
  • Practice regularly with common words to build muscle memory
    • +
+
+

Letters

@@ -120,15 +137,39 @@ const ChartPage = () => { ))}
+ +
+

History of Morse Code

+
+

Morse code was developed in the 1830s by Samuel Morse and Alfred Vail for use with the telegraph. It revolutionized long-distance communication and remained the standard for telegraph communication for over 160 years.

+

The original Morse code was slightly different from what we use today. The International Morse Code, which is the standard now, was created in 1865 to accommodate languages other than English.

+

Though largely replaced by newer technologies, Morse code remains important in aviation, amateur radio, and emergencies where other communication systems might fail.

+
+
- Back to Morse Hero + Back to Morse Hero Game
); -- cgit v1.3.1