⚡ Morse Trainer

An interactive Morse code training app with a retro CRT terminal aesthetic. Practice encoding letters as Morse code by navigating a binary decision tree — every dot and dash traces a path from root to leaf.

Features

Input Modes

• Paddle Mode — Two separate keys for dit (·) and dah (—), mimicking an iambic paddle. Keyboard shortcuts: . / - or arrow keys.
• Straight Key Mode — A single press-and-hold key where press duration determines dit vs. dah. Configurable timing threshold (80–300ms). Auto-submits after a pause.

Training Modes

• Free Play — Practice all 26 letters randomly. The full Morse binary tree is visible with the target node highlighted.
• Tutor Mode — Progressive curriculum that introduces letters in order of Morse complexity (single symbol → four symbols). Letters unlock as you demonstrate proficiency.
  • Weighted letter selection favoring newest and weakest letters
  • Accuracy tracking per letter with visual progress grid
  • Unlock notifications with celebration sounds
  • Error penalties that require additional practice before advancing
  • Hard mode is enforced (no tree hints, no undo)

Hard Mode

Available in Free Play as a manual toggle (☠), forced on in Tutor mode. Disables:

• Tree target highlighting
• Backspace / undo
• Clear / escape

Visual & Audio

• Full Morse binary tree rendered as an interactive SVG with animated path tracing
• CRT scanline overlay and vignette for retro terminal feel
• Audio feedback via Web Audio API: dit/dah tones, success/error chimes, unlock fanfare
• Stat tracking: current streak, best streak, accuracy %, letters per minute

Getting Started

No build step required. The entire application is a single index.html file.

# Clone and open
git clone <repo-url>
open index.html

Or serve locally:

npx serve .

Controls

Paddle Mode

Key	Action
. or →	Dit
- or ←	Dah
Backspace	Undo last symbol
Enter or Space	Submit
Escape	Clear input

Straight Key Mode

Key	Action
Space (hold)	Key down — duration sets dit/dah
Backspace	Undo last symbol
Enter	Submit (also auto-sends after 900ms pause)
Escape	Clear input

Architecture

Single-file application (index.html, ~1670 lines) containing:

• CSS — Custom properties for theming, CRT effects via pseudo-elements, responsive breakpoints at 1100px / 900px / 600px
• SVG — Programmatically built binary tree with 5 depth levels, edge labels, and animated state classes
• JavaScript — Vanilla JS with no dependencies. State machine for game flow, Web Audio API for sound synthesis, DOM manipulation for UI updates

Morse Binary Tree

The tree encodes the standard ITU Morse alphabet. Starting from the root:

• Left branch = dash (—)
• Right branch = dot (·)

Each leaf node maps to a letter. For example, A (· —) is reached by going right then left.

License

MIT