[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68bee872a3a08191a7fa9b127ae2e90b","versionInt","title","Morse Letter Trainer (single-file React App)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\n// ————————————————————————————————————————\n// Morse Letter Trainer — single-file React component\n// Features\n// • Generates ONE random Morse-coded letter at a time from your chosen set\n// • Plays audio beeps (Web Audio API) with configurable WPM, pitch, volume\n// • Hide/Reveal the answer, or show it automatically\n// • Keyboard shortcuts: [N]ext, [Space] play, [R]eveal, [H] hide\n// • Presets for ETAOIN (common letters) and A‑Z\n// ————————————————————————————————————————\n\nconst MORSE: Record = {\n A: \".-\",\n B: \"-...\",\n C: \"-.-.\",\n D: \"-..\",\n E: \".\",\n F: \"..-.\",\n G: \"--.\",\n H: \"....\",\n I: \"..\",\n J: \".---\",\n K: \"-.-\",\n L: \".-..\",\n M: \"--\",\n N: \"-.\",\n O: \"---\",\n P: \".--.\",\n Q: \"--.-\",\n R: \".-.\",\n S: \"...\",\n T: \"-\",\n U: \"..-\",\n V: \"...-\",\n W: \".--\",\n X: \"-..-\",\n Y: \"-.--\",\n Z: \"--..\",\n 0: \"-----\",\n 1: \".----\",\n 2: \"..---\",\n 3: \"...--\",\n 4: \"....-\",\n 5: \".....\",\n 6: \"-....\",\n 7: \"--...\",\n 8: \"---..\",\n 9: \"----.\",\n};\n\nfunction useAudio() {\n const ctxRef = useRef(null);\n const masterGainRef = useRef(null);\n const oscRef = useRef(null);\n\n const ensure = () => {\n if (!ctxRef.current) {\n const ctx = new (window.AudioContext || (window as any).webkitAudioContext)();\n const master = ctx.createGain();\n master.gain.value = 0.0;\n master.connect(ctx.destination);\n const osc = ctx.createOscillator();\n osc.type = \"sine\";\n osc.frequency.value = 600;\n osc.connect(master);\n osc.start();\n ctxRef.current = ctx;\n masterGainRef.current = master;\n oscRef.current = osc;\n }\n return { ctx: ctxRef.current!, master: masterGainRef.current!, osc: oscRef.current! };\n };\n\n const setFrequency = (hz: number) => {\n const { osc } = ensure();\n osc.frequency.setTargetAtTime(hz, ctxRef.current!.currentTime, 0.005);\n };\n\n const setVolume = (vol: number) => {\n const { master, ctx } = ensure();\n master.gain.setTargetAtTime(vol, ctx.currentTime, 0.01);\n };\n\n // Schedule a single dit/dah envelope at given start time (seconds) and duration (seconds)\n const scheduleTone = (start: number, dur: number, level = 1.0) => {\n const { ctx, master } = ensure();\n const a = 0.004; // attack\n const r = 0.010; // release\n master.gain.setValueAtTime(0.0001, start);\n master.gain.linearRampToValueAtTime(level, start + a);\n master.gain.setValueAtTime(level, start + Math.max(a, dur - r));\n master.gain.linearRampToValueAtTime(0.0001, start + Math.max(a, dur - r) + r);\n return start + dur; // return end time for chaining\n };\n\n const stopNow = () => {\n const { ctx, master } = ensure();\n // quick fade to zero\n master.gain.cancelScheduledValues(ctx.currentTime);\n master.gain.setTargetAtTime(0.0001, ctx.currentTime, 0.005);\n };\n\n return { ensure, setFrequency, setVolume, scheduleTone, stopNow };\n}\n\nfunction secondsPerUnitFromWPM(wpm: number) {\n // PARIS standard: 1 WPM = 50 units per minute => unit = 60 / (50 * WPM)\n return 60 / (50 * Math.max(1, wpm));\n}\n\nfunction playMorseLetter(\n letter: string,\n opts: { wpm: number; freq: number; volume: number },\n audio: ReturnType\n) {\n const code = MORSE[letter.toUpperCase()];\n if (!code) return;\n const { ensure, setFrequency, setVolume, scheduleTone } = audio;\n const { ctx } = ensure();\n setFrequency(opts.freq);\n setVolume(0.0); // start muted; envelopes handle the clickless on/off; baseline 0\n const unit = secondsPerUnitFromWPM(opts.wpm);\n let t = ctx.currentTime + 0.02; // tiny scheduling offset\n const elementGap = unit; // between dits/dahs\n const dashUnits = 3;\n\n for (const ch of code) {\n const dur = ch === \".\" ? unit : dashUnits * unit;\n t = scheduleTone(t, dur, opts.volume);\n t += elementGap; // gap between elements\n }\n // implicit character gap (we let UI handle pacing between letters)\n}\n\nconst ALL_LETTERS = Object.keys(MORSE).filter((c) => /[A-Z]/.test(c));\nconst COMMON = [\"E\", \"T\", \"A\", \"O\", \"I\", \"N\", \"S\", \"H\", \"R\", \"D\", \"L\", \"C\", \"U\", \"M\", \"W\", \"F\", \"G\", \"Y\", \"P\", \"B\", \"V\", \"K\", \"J\", \"X\", \"Q\", \"Z\"]; // ETAOIN...\n\nexport default function MorseLetterTrainer() {\n const audio = useAudio();\n const [wpm, setWpm] = useState(18);\n const [freq, setFreq] = useState(600);\n const [volume, setVolume] = useState(0.6);\n const [pool, setPool] = useState([\"A\", \"E\", \"T\", \"S\", \"O\", \"I\", \"M\"]);\n const [current, setCurrent] = useState(null);\n const [hidden, setHidden] = useState(true);\n const [autoplay, setAutoplay] = useState(true);\n const [showMorse, setShowMorse] = useState(false);\n\n const poolSet = useMemo(() => new Set(pool), [pool]);\n\n // Keyboard shortcuts\n useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key.toLowerCase() === \"n\") {\n e.preventDefault();\n nextLetter();\n } else if (e.key === \" \") {\n e.preventDefault();\n if (current) playNow();\n } else if (e.key.toLowerCase() === \"r\") {\n e.preventDefault();\n setHidden(false);\n } else if (e.key.toLowerCase() === \"h\") {\n e.preventDefault();\n setHidden(true);\n }\n };\n window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [current, wpm, freq, volume]);\n\n function nextLetter() {\n if (pool.length === 0) return;\n const idx = Math.floor(Math.random() * pool.length);\n const letter = pool[idx];\n setCurrent(letter);\n setHidden(true);\n if (autoplay) setTimeout(() => playMorseLetter(letter, { wpm, freq, volume }, audio), 30);\n }\n\n function playNow() {\n if (!current) return;\n playMorseLetter(current, { wpm, freq, volume }, audio);\n }\n\n function toggleInPool(char: string) {\n setPool((prev) => (prev.includes(char) ? prev.filter((c) => c !== char) : [...prev, char]));\n }\n\n // UI helpers\n const PoolButton: React.FC<{ label: string; chars: string[] }> = ({ label, chars }) => (\n setPool(chars)}\n >\n {label}\n \n );\n\n return (\n

Morse Letter Trainer

Keys: N next · Space play · R reveal · H hide

\n\n {/* Main card */}\n

\n {/* Left — Controls */}\n

Generator

\n\n

\n \n Next Letter\n \n \n Play Morse\n \n \n setAutoplay(e.target.checked)} />\n Auto-play on next\n \n

\n\n

\n WPM: {wpm}\n setWpm(parseInt(e.target.value))}\n className=\"w-full\"\n />\n

\n Pitch (Hz): {freq}\n setFreq(parseInt(e.target.value))}\n className=\"w-full\"\n />\n

\n Volume: {volume.toFixed(2)}\n setVolume(parseFloat(e.target.value))}\n className=\"w-full\"\n />\n

\n\n

\n Pool presets:\n \n \n \n \n

\n\n

\n {ALL_LETTERS.map((c) => (\n toggleInPool(c)}\n title={`${c} = ${MORSE[c]}`}\n >\n {c}\n \n ))}\n

Click letters to include/exclude from the random pool.

\n\n

\n \n setHidden(e.target.checked)} />\n Hide answer by default\n \n \n setShowMorse(e.target.checked)} />\n Show Morse symbols when revealed\n \n

\n\n {/* Right — Display */}\n

Current Letter

\n {current ? (\n hidden ? (\n •••\n ) : (\n {current}\n )\n ) : (\n Press “Next Letter”\n )}\n

\n\n {!hidden && current && showMorse && (\n

{MORSE[current]}

\n )}\n\n

\n setHidden(false)}\n disabled={!current}\n >\n Reveal\n \n setHidden(true)}\n disabled={!current}\n >\n Hide\n \n \n Play Again\n \n

Unit timing: dot = 1, dash = 3. Character spacing is implicit.

\n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","12218237297548436249","traceTime",1776472097940]