\n {props.children}\n \n )\n}\n\nexport {GameModeContextProvider, GameModeContext}\n","import React, {useState} from \"react\"\n\nconst MorseBufferContext = React.createContext()\n\nfunction MorseBufferContextProvider(props) {\n \n const [morseCharBuffer, setMorseCharBuffer] = useState('')\n const [morseWords, setMorseWords] = useState([])\n \n return (\n \n {props.children}\n \n )\n}\n\nexport {MorseBufferContextProvider, MorseBufferContext}\n","import React, {useState} from \"react\"\nimport alphabet from '../data/alphabet.json'\nimport numbers from '../data/numbers.json'\nimport common100 from '../data/common100.json'\nimport boys from '../data/names_boys.json'\nimport girls from '../data/names_girls.json'\nimport trek from '../data/startrek.json'\n\n\nconst WordListPickerContext = React.createContext()\n\nfunction WordListPickerContextProvider(props) {\n\n const [wordListCategory, setWordListCategory] = useState('alphabet')\n const [wordListCount, setWordListCount] = useState(10)\n\n let wordList = []\n\n switch (wordListCategory) {\n case \"alphabet\":\n wordList = alphabet.words\n break\n case \"numbers\":\n wordList = numbers.words\n break\n case \"boys\":\n wordList = boys.words\n break\n case \"girls\":\n wordList = girls.words\n break\n case \"startrek\":\n wordList = trek.words\n break\n case \"common100\":\n wordList = common100.words\n break\n default:\n wordList = alphabet.words\n }\n\n const wordListCountMax = wordList.length\n\n const metadata = {\n 'alphabet': {name: 'Alphabet', description: 'All letters of the alphabet'},\n 'numbers': {name: 'Numbers', description: '0-9'},\n 'boys': {name: 'Boys Names', description: 'Popular Boys Names'},\n 'girls': {name: 'Girls Names', description: 'Popular Girls Names'},\n 'startrek': {name: 'Star Trek', description: 'Star Trek universe'},\n 'common100': {name: 'Common Words', description: '100 Most Common Words'}\n }\n\n // Shuffle input array and return\n function randomize(arr) {\n let array = [...arr]\n let currentIndex = array.length, temporaryValue, randomIndex;\n \n // While there remain elements to shuffle...\n while (0 !== currentIndex) {\n \n // Pick a remaining element...\n randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex -= 1;\n \n // And swap it with the current element.\n temporaryValue = array[currentIndex];\n array[currentIndex] = array[randomIndex];\n array[randomIndex] = temporaryValue;\n }\n return array;\n }\n\n return (\n \n {props.children}\n \n )\n}\n\nexport {WordListPickerContextProvider, WordListPickerContext}\n","import React, {useState, useContext} from \"react\"\nimport { WordListPickerContext } from \"./wordListPickerContext\"\nconst WordFeederContext = React.createContext()\n\nfunction WordFeederContextProvider(props) {\n\n const {wordList, wordListShuffled} = useContext(WordListPickerContext)\n\n const [wordIndex, setWordIndex] = useState(0)\n const [order, setOrder] = useState('sequential')\n let word \n\n // Set word list ordered appropriately\n if (order === 'sequential') {\n if (wordList[wordIndex] === undefined) {\n word = [wordList[0]]\n }\n else {\n word = wordList[wordIndex]\n }\n }\n else if (order === 'random') {\n if (wordListShuffled[wordIndex] === undefined) {\n word = [wordListShuffled[0]]\n }\n else {\n word = wordListShuffled[wordIndex]\n }\n }\n\n function resetFeeder() {\n setWordIndex(0)\n }\n \n function getNextWord() {\n setWordIndex(prev => prev + 1)\n }\n \n return (\n \n {props.children}\n \n )\n}\n\nexport {WordFeederContextProvider, WordFeederContext}\n","import React, {useState, useContext} from \"react\"\nimport { WordFeederContext } from \"./wordFeederContext\"\nimport { MorseBufferContext } from \"./morseBufferContext\";\nimport morseCode from '../data/morse-reverse.json'\n\n\nconst ChallengeContext = React.createContext()\n\nfunction ChallengeContextProvider(props) {\n\n const [challengeState, setChallengeState] = useState('ready')\n const {resetFeeder} = useContext(WordFeederContext)\n const {word, getNextWord} = useContext(WordFeederContext)\n const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext)\n \n \n let morseArray = morseCharBuffer.split('_').filter(l => l !== '')\n let challengeWordClass = ''\n \n let correctCharIndexes = [] // Indexes of correct letters in Challenge Word\n let incorrectMorseIndexes = [] // Indexes of incorrect morse characters in morse character buffer\n \n let offset = 0\n let challengeLetters\n\n\n function startChallenge() {\n\n let countdown\n let count = 3\n\n // Challenge countdown setup\n document.getElementById('challengeReady').classList.add('starting')\n document.getElementById('challengeReady').innerHTML = `Challenge starting in${count}`\n // Start Challenge countdown\n countdown = setInterval(() => {\n count--\n if (count === 0) {\n // Do this when countdown hits 0\n document.getElementById('challenge-overlay').classList.add('fade')\n clearInterval(countdown)\n setTimeout(() => {\n document.getElementById('challenge-overlay').classList.add('hide')\n // Start Challenge\n setChallengeState('started')\n }, 900);\n }\n document.getElementById('challengeReady').innerHTML = `Challenge starting in${count}`\n }, 1000)\n }\n\n function completeChallenge() {\n if (challengeState !== 'completed') {\n setChallengeState('completed')\n resetFeeder()\n showOverlay()\n }\n }\n\n function cancelChallenge() {\n if (challengeState !== 'cancelled') {\n setChallengeState('cancelled')\n resetFeeder()\n showOverlay()\n }\n }\n\n function showOverlay() {\n const challengeOverlay = document.getElementById('challenge-overlay')\n challengeOverlay.classList.remove('fade')\n challengeOverlay.classList.remove('hide')\n }\n\n\n // If no more words in wordlist, feeder returns first word in an array\n if (typeof word === 'object') {\n completeChallenge()\n challengeLetters = word[0].split('')\n }\n else {\n challengeLetters = word.split('')\n }\n\n // Iterate through the morse character buffer and compare with each letter of challenge word\n morseArray.forEach((item, index) => { \n if (morseCharBuffer.slice(-1) === '_') { // If end of morse character\n \n let morseLetter = morseCode[morseArray[index]] || '[?]'\n let challengeLetter = challengeLetters[index-offset].toLowerCase()\n \n if (morseLetter === challengeLetter) {\n correctCharIndexes.push(index-offset)\n \n document.getElementById('challengeWord').childNodes[index-offset].classList.add('correct')\n }\n else {\n incorrectMorseIndexes.push(index)\n if (incorrectMorseIndexes.length > 0) {\n setMorseCharBuffer(prev => {\n let newState = prev.split('_').filter(l => l !== '')\n newState.splice(incorrectMorseIndexes[0], 1)\n newState = newState.join('_') + '_'\n \n return newState\n })\n incorrectMorseIndexes.splice(1,incorrectMorseIndexes.length)\n }\n offset = incorrectMorseIndexes.length\n }\n }\n })\n\n\n // Retrieve next word once all characters are correct\n if (correctCharIndexes.length === challengeLetters.length) {\n challengeWordClass = 'correct'\n setTimeout(() => {\n setMorseCharBuffer('')\n morseArray = []\n incorrectMorseIndexes = []\n offset = 0\n if (document.getElementById('challengeWord') !== null) {\n document.getElementById('challengeWord').childNodes.forEach(node => {\n node.classList = \"cLetter\"\n })\n }\n }, 800)\n setTimeout(() => {\n if (correctCharIndexes.length > 0) {\n correctCharIndexes = []\n getNextWord()\n }\n }, 1000)\n }\n\n \n return (\n \n {props.children}\n \n )\n}\n\nexport {ChallengeContextProvider, ChallengeContext}\n","import React, {useState, useContext, useEffect} from \"react\"\nimport { ChallengeContext } from \"./challengeContext\"\nconst GameClockContext = React.createContext()\n\nfunction GameClockContextProvider(props) {\n\n const [gameClockTime, setGameClockTime] = useState(0)\n const [clockIsRunning, setClockIsRunning] = useState(false)\n const [intervals, setIntervals] = useState([])\n const {challengeState, setChallengeState} = useContext(ChallengeContext)\n\n\n function startGameClock() {\n if (!clockIsRunning) {\n setClockIsRunning(true)\n setIntervals(prev => [...prev, (setInterval(() => {\n if (document.getElementById('gameClock') === null) {\n stopGameClock()\n return\n }\n setGameClockTime(prev => prev + 1)\n }, 1000))\n ])\n }\n }\n function stopGameClock() {\n if (clockIsRunning) {\n cleanup()\n setClockIsRunning(false)\n }\n }\n\n // Clear game clock intervals\n function cleanup() {\n for (let i = 0; i < intervals.length; i++) {\n clearInterval(intervals[i]);\n }\n }\n\n // Trigger game clock changes on challenge state change\n useEffect(() => {\n switch (challengeState) {\n case 'ready':\n setGameClockTime(0)\n cleanup()\n break\n case 'started':\n startGameClock()\n break\n case 'completed':\n stopGameClock()\n break\n case 'cancelled':\n stopGameClock()\n setChallengeState('ready')\n break\n default:\n return\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [challengeState])\n \n\n return (\n \n {props.children}\n \n )\n}\n\nexport {GameClockContextProvider, GameClockContext}\n","import React, {useState} from \"react\"\n\nconst WPMContext = React.createContext()\n\nfunction WPMContextProvider(props) {\n \n const [wpm, setWPM] = useState(10)\n\n return (\n \n {props.children}\n \n )\n}\n\nexport {WPMContextProvider, WPMContext}\n","import React, {useState} from \"react\"\n\nconst FrequencyContext = React.createContext()\n\nfunction FrequencyContextProvider(props) {\n \n const [frequency, setFrequency] = useState(650)\n\n return (\n \n {props.children}\n \n )\n}\n\nexport {FrequencyContextProvider, FrequencyContext}\n","import React, {useState} from \"react\"\n\nconst KeyTypeContext = React.createContext()\n\nfunction KeyTypeContextProvider(props) {\n\n const [keyType, setKeyType] = useState('straight')\n\n return (\n \n {props.children}\n \n )\n}\n\nexport {KeyTypeContextProvider, KeyTypeContext}\n","import {useEffect, useContext} from 'react'\nimport { FrequencyContext } from '../contexts/frequencyContext'\nimport { GameModeContext } from '../contexts/gameModeContext'\nimport { MorseBufferContext } from '../contexts/morseBufferContext'\nimport { WPMContext } from '../contexts/wpmContext'\nimport config from '../config.json'\n\n// ELECTRONIC KEY TELEGRAPH - Iambic A\n\nexport default (function useElectronicKey() {\n\n const {morseCharBuffer, setMorseCharBuffer, morseWords, setMorseWords} = useContext(MorseBufferContext)\n const {wpm} = useContext(WPMContext)\n const {gameMode} = useContext(GameModeContext)\n const {frequency} = useContext(FrequencyContext)\n\n // DitDah length setup\n let ditMaxTime = 1200/wpm\n let ratio = .2\n const letterGapMinTime = ditMaxTime*ratio*3\n const wordGapMaxTime = ditMaxTime*ratio*7\n\n const morseHistorySize = config.historySize\n \n let leftIsPressed = false\n let rightIsPressed = false\n let queueRunning = false\n let queue = []\n let pressedFirst = null\n let lastPlayed = ''\n\n // Timers setup\n let depressSyncTime\n let depressSyncTimer\n let depressSyncTimerRunning = false\n let gapTime = 0\n let gapTimer = 0\n\n let paddlesReleasedSimultaneously = false\n\n let currentPromise = Promise.resolve()\n\n // Audio Setup\n let AudioContext = window.AudioContext || window.webkitAudioContext || false\n let context\n window.AudioContext = window.AudioContext || window.webkitAudioContext;\n if (AudioContext) {\n context = new AudioContext()\n } else {\n context = null\n }\n\n // Promisify playing Dits and Dahs\n function play(ditDah) {\n lastPlayed = ditDah\n let playDuration = ((ditDah === '.') ? ditMaxTime : ditMaxTime*3)\n\n return new Promise((resolve, reject) => {\n if (context.state === 'interrupted') {\n context.resume()\n }\n \n let o = context.createOscillator()\n o.frequency.value = frequency\n o.type = \"sine\"\n o.onended = () => {\n resolve()\n }\n \n let startTime = context.currentTime;\n \n let g = context.createGain()\n g.gain.exponentialRampToValueAtTime(config.mainVolume, startTime)\n g.gain.setValueAtTime(config.mainVolume, startTime)\n o.connect(g)\n g.connect(context.destination)\n \n o.start(startTime)\n \n setTimeout(() => {\n g.gain.setTargetAtTime(0.0001, context.currentTime, 0.001)\n o.stop(context.currentTime + 0.05)\n }, playDuration)\n })\n }\n\n // Play dit or dah with trailing space (silence)\n function playWithSpaces(ditDah) {\n let delay = (ditDah === '.') ? ditMaxTime + ditMaxTime : ditMaxTime*3 + ditMaxTime\n\n return new Promise(function(resolve) {\n if (ditDah === '.' || ditDah === '-') {\n\n clearInterval(gapTimer)\n checkGapBetweenInputs()\n setMorseCharBuffer(prev => prev + ditDah)\n \n play(ditDah)\n .then(setTimeout(() => {\n // START GAP TIMER\n gapTimer = setInterval(() => {\n gapTime += 1\n \n // if (gapTime >= wordGapMaxTime) {\n if (gameMode === 'practice' && gapTime >= wordGapMaxTime) {\n setMorseCharBuffer(prev => prev + '/')\n clearInterval(gapTimer)\n gapTimer = 0\n gapTime = 0\n }\n else if (gameMode === 'challenge' && gapTime >= letterGapMinTime) {\n setMorseCharBuffer(prev => prev + '_')\n clearInterval(gapTimer)\n gapTimer = 0\n gapTime = 0\n }\n }, 1)\n \n resolve();\n }, delay)\n )\n } else {\n setTimeout(() => {\n resolve();\n }, ditMaxTime*3)\n }\n });\n }\n\n function executeQueue() {\n let localQueue = queue\n \n // Set waitTime to completion of queue (ditDah time + following silences)\n let waitTime = 0\n for (let i in localQueue) {\n if (localQueue[i] === '.') {\n waitTime += ditMaxTime*2\n } else if (localQueue[i] === '-') {\n waitTime += ditMaxTime*4\n }\n }\n \n // Cleanup\n function cleanup() {\n queueRunning = false\n queue = []\n sendPressedToQueue() // Check if anything still pressed down on queue finish\n }\n \n // Wait till completion of queue to execute\n const clear = setTimeout(() => {\n cleanup()\n }, waitTime)\n \n // Execute queue\n queueRunning = true\n for (let i = 0; i < localQueue.length; i++) {\n if (paddlesReleasedSimultaneously) {\n localQueue.pop()\n clearTimeout(clear)\n cleanup()\n }\n currentPromise = currentPromise.then(() => {\n var ditDah = localQueue[i]\n if (ditDah)\n {\n return playWithSpaces(ditDah)\n }\n });\n }\n }\n\n // Determine which paddles are pressed, add to queue, and execute\n function sendPressedToQueue() {\n if (leftIsPressed && rightIsPressed) {\n if (pressedFirst === 'left') {\n queue.push('-')\n pressedFirst = null\n } else {\n queue.push('.')\n queue.push('-')\n }\n }\n else if (leftIsPressed && !rightIsPressed) {\n queue.push('.')\n }\n else if (rightIsPressed && !leftIsPressed) {\n queue.push('-')\n }\n if (queue.length > 0) {\n executeQueue()\n }\n }\n\n\n function handleInputStart(event) {\n if (event.type === 'touchstart') {\n event.preventDefault()\n }\n\n paddlesReleasedSimultaneously = false\n\n if (event.keyCode === 188 || event.keyCode === 190) {\n if (document.activeElement.id === 'morseInput') {\n return\n } else if (document.activeElement.tagName.toLowerCase() !== 'body') {\n event.preventDefault()\n document.activeElement.blur()\n }\n }\n if (event.repeat) { return }\n\n if (event.keyCode === 188 || event.target.id === \"left\") {\n document.querySelector('.paddle#left').classList.add('active')\n \n leftIsPressed = true\n if (!rightIsPressed) { pressedFirst = 'left'}\n\n // Prevent further input if queue is executing\n if (!queueRunning) {\n sendPressedToQueue()\n }\n }\n else if (event.keyCode === 190 || event.target.id === \"right\") {\n document.querySelector('.paddle#right').classList.add('active')\n\n rightIsPressed = true\n if (!leftIsPressed) { pressedFirst = 'right'}\n\n // Prevent further input if queue is executing\n if (!queueRunning) {\n sendPressedToQueue()\n }\n }\n }\n\n function handleInputEnd(event) {\n if (event.type === 'touchend') {\n event.preventDefault()\n }\n\n if (event.keyCode === 188 || event.target.id === \"left\") {\n document.querySelector('.paddle#left').classList.remove('active')\n\n leftIsPressed = false\n if (pressedFirst === 'left') { pressedFirst = null }\n\n if (!depressSyncTimerRunning) { startDepressSyncTimer() }\n else { stopDepressSyncTimer() }\n }\n if (event.keyCode === 190 || event.target.id === \"right\") {\n document.querySelector('.paddle#right').classList.remove('active')\n\n rightIsPressed = false\n if (pressedFirst === 'right') { pressedFirst = null }\n\n if (!depressSyncTimerRunning) { startDepressSyncTimer() }\n else { stopDepressSyncTimer() }\n }\n\n if (paddlesReleasedSimultaneously && document.getElementById('modeB').classList.contains('selected'))\n {\n currentPromise = currentPromise.then(() => {\n return playWithSpaces(lastPlayed == '.' ? '-' : '.')\n });\n }\n }\n \n // Timer used to determine if both paddles are released within 10ms\n // Need to know this to stop Iambic tones at correct time\n function startDepressSyncTimer() {\n depressSyncTimerRunning = true\n // Reset depressSyncTime\n depressSyncTime = 0\n // Start depressSyncTimer\n depressSyncTimer = setInterval(() => {\n depressSyncTime += 1\n if (depressSyncTime > 20) {\n depressSyncTimerRunning = false\n clearInterval(depressSyncTimer)\n depressSyncTime = 0\n }\n }, 1);\n }\n function stopDepressSyncTimer() {\n depressSyncTimerRunning = false\n clearInterval(depressSyncTimer)\n if (depressSyncTime < 10) {\n paddlesReleasedSimultaneously = true\n queue.pop()\n }\n depressSyncTime = 0\n }\n\n\n // Check gap between letters to determin if new character or new word\n function checkGapBetweenInputs() {\n if (gapTime >= letterGapMinTime && gapTime < wordGapMaxTime) {\n if (gameMode === 'practice') {\n setMorseCharBuffer(prev => prev + ' ')\n } else if (gameMode === 'challenge') {\n setMorseCharBuffer(prev => prev + '_')\n }\n gapTime = 0\n clearInterval(gapTimer)\n gapTimer = 0\n }\n }\n\n // Add paddle event listeners and update on WPM, Game Mode, or Frequency change\n // Not updating on these state changes prevents change from taking effect\n useEffect(() => {\n document.addEventListener('keydown', handleInputStart)\n document.addEventListener('keyup', handleInputEnd)\n\n const paddles = document.querySelectorAll('.paddle')\n paddles.forEach(paddle => {\n paddle.addEventListener('mousedown', handleInputStart)\n paddle.addEventListener('touchstart', handleInputStart)\n paddle.addEventListener('mouseout', handleInputEnd)\n paddle.addEventListener('mouseup', handleInputEnd)\n paddle.addEventListener('touchend', handleInputEnd)\n })\n\n return function cleanup() {\n document.removeEventListener('keydown', handleInputStart)\n document.removeEventListener('keyup', handleInputEnd)\n\n const paddles = document.querySelectorAll('.paddle')\n paddles.forEach(paddle => {\n paddle.removeEventListener('mousedown', handleInputStart)\n paddle.removeEventListener('touchstart', handleInputStart)\n paddle.removeEventListener('mouseout', handleInputEnd)\n paddle.removeEventListener('mouseup', handleInputEnd)\n paddle.removeEventListener('touchend', handleInputEnd)\n })\n\n clearInterval(depressSyncTimer)\n clearInterval(gapTimer)\n }\n // eslint-disable-next-line\n }, [wpm, gameMode, frequency])\n\n // Remove forward slash and move buffer contents to morse words array\n useEffect(() => {\n if (morseCharBuffer.slice(-1) === '/' && gameMode === 'practice') {\n let val = morseCharBuffer.slice(0,morseCharBuffer.length-1)\n setMorseWords(prev => [val, ...prev])\n\n // Limit history to configured history size\n if (morseWords.length >= morseHistorySize) {\n setMorseWords(prev => prev.slice(0,prev.length-1))\n }\n setMorseCharBuffer('')\n }\n\n // eslint-disable-next-line\n }, [morseCharBuffer])\n\n})","import React from \"react\"\nimport useElectronicKey from '../hooks/useElectronicKey';\n\nexport default React.memo(function ElectronicKey() {\n useElectronicKey()\n})","import React from \"react\"\n\nexport default (function DitDahDisplay(props) {\n\n return (props.dd === ' ') ?
: {props.dd}
\n})","import React, { useContext } from \"react\"\nimport { MorseBufferContext } from \"../contexts/morseBufferContext\"\nimport DitDahDisplay from \"./DitDahDisplay\"\nimport morseCode from '../data/morse-reverse.json'\n\nexport default React.memo(function MorseBufferDisplay() {\n \n const {morseCharBuffer} = useContext(MorseBufferContext)\n\n let ditDahs = morseCharBuffer.split('').map((ditdah,index) => )\n let alphanumeric = ''\n let letters = morseCharBuffer.split(' ')\n\n if (morseCharBuffer === '') {}\n else {\n for (let i in letters) {\n if (letters[i] === ' ') {\n alphanumeric += ' '\n } else {\n if (morseCode[letters[i]] === undefined) {\n alphanumeric += (letters[i] === '' ? '':'[?]')\n } else {\n alphanumeric += morseCode[letters[i]]\n }\n }\n }\n }\n\n return (\n \n
\n
\n
\n
\n {alphanumeric.toUpperCase()}\n
\n
\n
\n
{text}
\n
\n \"[?]\" signifies no translation available.\n \n
\n
\n \n \n );\n\n \n})","import React from \"react\"\n\nexport default React.memo(function ChallengeBufferDisplay(props) {\n\n const morseArray = props.morseArray\n\n let ditDahs = []\n\n for (let i in morseArray) {\n let morseChar = morseArray[i]\n \n ditDahs.push({morseChar})\n }\n\n return (\n \n )\n})","import React from \"react\"\n\nexport default (function ChallengeControls(props) {\n\n return (\n \n \n
\n )\n})","import React, { useContext } from \"react\"\nimport { WordFeederContext } from \"../contexts/wordFeederContext\"\n\nexport default React.memo(function ChallengeWord(props) {\n\n const {word} = useContext(WordFeederContext)\n\n let challengeLetters\n if (typeof word === 'object') {\n challengeLetters = word[0].split('')\n }\n else {\n challengeLetters = word.split('')\n }\n\n let spannedWord = challengeLetters.map((letter,index) => {letter})\n\n return (\n {spannedWord}
\n )\n})","import React, {useContext} from \"react\"\nimport { GameClockContext } from \"../contexts/gameClockContext\";\n\nexport default (function GameClock(props) {\n \n const {gameClockTime} = useContext(GameClockContext)\n\n const minutes = Math.floor(gameClockTime / 60)\n const seconds = gameClockTime % 60\n\n return (\n Time Elapsed: {minutes} minutes {seconds} seconds
\n )\n})","import React, {useContext} from 'react';\nimport '../css/App.css';\nimport { ChallengeContext } from '../contexts/challengeContext';\nimport { KeyTypeContext } from '../contexts/keyTypeContext';\nimport ChallengeBufferDisplay from '../components/ChallengeBufferDisplay';\nimport ChallengeControls from '../components/ChallengeControls';\nimport ChallengeWord from '../components/ChallengeWord'\nimport ElectronicKey from '../components/ElectronicKey';\nimport GameClock from '../components/GameClock';\nimport StraightKey from '../components/StraightKey';\n\n\nexport default React.memo(function ChallengeMode() {\n \n const {keyType} = useContext(KeyTypeContext)\n const {challengeState, cancelChallenge, morseArray, challengeWordClass} = useContext(ChallengeContext)\n\n return (\n <>\n {challengeState === 'started' ? (keyType === \"straight\" ?\n : ) : <>\n }\n \n \n \n \n )\n});\n","import React, {useContext} from \"react\"\nimport { ChallengeContext } from \"../contexts/challengeContext\"\nimport { GameClockContext } from \"../contexts/gameClockContext\"\nimport { GameModeContext } from \"../contexts/gameModeContext\"\nimport { MorseBufferContext } from \"../contexts/morseBufferContext\"\nimport { WordFeederContext } from \"../contexts/wordFeederContext\"\n\nexport default React.memo(function ModePicker() {\n\n const {setGameMode} = useContext(GameModeContext)\n const {setMorseCharBuffer} = useContext(MorseBufferContext)\n const {resetFeeder} = useContext(WordFeederContext)\n const {stopGameClock, setGameClockTime, clockIsRunning} = useContext(GameClockContext)\n const {setChallengeState} = useContext(ChallengeContext)\n\n function handleClick(e) {\n setMorseCharBuffer('')\n resetFeeder()\n setChallengeState('ready')\n\n setGameMode(e.target.id)\n\n if (clockIsRunning) { \n stopGameClock()\n setGameClockTime(0)\n }\n\n let buttons = document.querySelector(\".mode-picker#gameMode #buttons\").childNodes\n buttons.forEach(button => {\n if (button.id === e.target.id) {\n button.classList.add('selected')\n } else { button.classList.remove('selected')}\n })\n }\n\n return (\n \n
\n Mode\n
\n
\n \n \n
\n
\n
\n Key Type\n
\n
\n \n \n
\n
\n
\n \n
\n
\n WPM ({minWPM}-{maxWPM})\n
\n
\n \n \n \n Test playMorseWord('.....')}>\n
\n
\n \n \n
\n \n TAP BUTTON OR PRESS SPACEBAR\n
\n \n )\n})","import React from \"react\"\nimport { contactLinks } from \"../data/social\"\n\nexport default (function Footer() {\n\n function handleClick(event) {\n window.open(contactLinks[event.target.id]['link'])\n }\n \n return (\n \n )\n})","import React, {useContext} from \"react\"\nimport { WordListPickerContext } from \"../contexts/wordListPickerContext\";\nimport { WordFeederContext } from \"../contexts/wordFeederContext\";\n\nexport default React.memo(function WordCountPicker() {\n\n const {setWordListCount, wordListCountMax} = useContext(WordListPickerContext)\n const {resetFeeder} = useContext(WordFeederContext)\n\n function handleChange(e) {\n resetFeeder()\n setWordListCount(e.target.value)\n }\n\n // Create Options for Select element\n let options = []\n for (let i = 0; i < wordListCountMax; i++) {\n options.push()\n }\n \n return (\n \n
\n Challenge Word Count: (1-{wordListCountMax})\n
\n
\n \n
\n
\n
\n
\n Word List:\n
\n
\n \n
\n
\n\n
\n
\n Word Order:\n
\n
\n \n \n
\n
\n\n
\n\n
\n
\n Description:\n
\n
\n {metadata[wordListCategory]['description']}\n
\n
\n
\n Challenge Options\n \n \n
\n )\n})\n\n","import React, { useContext } from \"react\"\nimport { GameClockContext } from \"../contexts/gameClockContext\"\nimport { ChallengeContext } from \"../contexts/challengeContext\"\nimport { WordListPickerContext } from \"../contexts/wordListPickerContext\"\n\nexport default (function ChallengeComplete() {\n\n const {gameClockTime} = useContext(GameClockContext)\n const {setChallengeState} = useContext(ChallengeContext)\n const {wordListCount, wordListCategory, metadata} = useContext(WordListPickerContext)\n\n function _continue() {\n setChallengeState('ready')\n }\n\n const minutes = Math.floor(gameClockTime / 60)\n const seconds = gameClockTime % 60\n\n let time = (minutes === 0) ? `${seconds} seconds` : `${minutes} minutes and ${seconds} seconds`\n\n return (\n \n Challenge Complete\n You completed {wordListCount} words
\n from the {metadata[wordListCategory]['name']} word list
\n in {time}!\n \n\n
\n )\n})\n\n","import React, { useContext } from \"react\"\nimport { ChallengeContext } from \"../contexts/challengeContext\"\nimport ChallengeReady from \"./ChallengeReady\"\nimport ChallengeComplete from \"./ChallengeComplete\"\n\nexport default (function ChallengeOverlay() {\n\n const {challengeState, setChallengeState} = useContext(ChallengeContext)\n \n return (\n \n {challengeState === 'ready' && }\n {challengeState === 'completed' && }\n
\n )\n})","import React from \"react\"\nimport useMorsePlayer from \"../hooks/useMorsePlayer\"\nimport straight_key from \"../media/images/straight_key.jpg\"\nimport electronic_key from \"../media/images/electronic_key.jpg\"\n\nexport default React.memo(function Info() {\n\n const {playMorseWord} = useMorsePlayer()\n\n return (\n \n
Morse Code
\n
Morse code is a method of communication that uses short tones (dits) and long tones (dahs) in various sequences to make letters, numbers, and special characters. This tool will help beginners learn Morse code.
\n\n
Dits and Dahs
\n
\n Dit playMorseWord('.')}> (.) Short tones and the base unit length of Morse code communication.
\n Dah playMorseWord('-')}> (-) Long tones, each the length of three dits.\n
\n\n
Spacing
\n
The spacing between dits and dahs matters in Morse code. Spacing of various lengths signify different things.
\n\n Intra-character Spacing A letter in Morse code can be made up of multiple dits and dahs. The spaces between the dits and dahs that make up a single letter are each the length of one dit. E.g., three dits, each separated by one-dit-long spaces, is an \"S\". (...) playMorseWord('...')}>
\n\n Inter-character Spacing The space between consecutive letters is three dits long. E.g., three dits, each separated by a three-dit-long spaces is \"EEE\". (. . .) playMorseWord('. . .')}>
\n \n Inter-word Spacing The space between words is seven dits long. E.g., three dits, each separated by seven-dit-long spaces (denoted by a forward slash in this example: ././.), is \"E E E\". playMorseWord('././.')}>\n
\n\n
Speed
\n
\n The rate of communication is increased or decreased by adjusting the length of the dits, which in turn adjusts the length of dahs and spaces. Adjust the WPM (Words Per Minute) in the Options section to adjust the speed.\n
\n\n
Telegraph Key Types
\n
The instrument used to send Morse code is called the key.
\n \n
\n
Straight Keys use a single button and generate tones when pressed down. Straight keys require greater accuracy as the length of dits, dahs, and spacing is completely under manual control.
\n
\n
Electronic Keys use paddles that automatically generate dits and dahs when pressed. The Electronic Keyer used here is an Iambic keyer that uses two paddles–left paddle for dits, right paddle for dahs. Pressing both paddles simultaneously automatically alternates between dit and dah. Mode B automatically adds an extra alternate dit or dah. Switch between the two paddles at the appropriate times to build letters in Morse code.
\n\n
Check out this video for a demonstration of the difference between Straight and Electronic keys.
\n
\n
\n Legend\n
\n
\n {letters}\n {numbers}\n {special}\n
\n
\n \n
\n )\n\n})\n","import React, {useContext} from \"react\"\nimport { FrequencyContext } from \"../contexts/frequencyContext\";\n\nexport default React.memo(function FrequencyPicker(props) {\n\n const {frequency, setFrequency} = useContext(FrequencyContext)\n\n const minFreq = 300\n const maxFreq = 1500\n\n function handleChange(e) {\n if (Number(e.target.value) > maxFreq) {\n setFrequency(maxFreq)\n } else if (Number(e.target.value) < minFreq) {\n setFrequency(minFreq)\n } else {\n setFrequency(Number(e.target.value))\n }\n }\n\n function increment() {\n setFrequency(prevFreq => {\n if (prevFreq + 10 <= maxFreq) {\n return (prevFreq + 10)\n } else {\n return maxFreq\n }\n })\n }\n\n function decrement() {\n setFrequency(prevFreq => {\n if (prevFreq - 10 >= minFreq) {\n return (prevFreq - 10)\n } else {\n return minFreq\n }\n })\n }\n \n return (\n \n
\n Frequency ({minFreq}-{maxFreq})\n
\n
\n \n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n {gameMode === 'practice' &&
}\n {gameMode === 'challenge' &&\n <>\n
\n
\n \n }\n
\n
\n
: {props.dd}
\n})","import React, { useContext } from \"react\"\nimport { MorseBufferContext } from \"../contexts/morseBufferContext\"\nimport DitDahDisplay from \"./DitDahDisplay\"\nimport morseCode from '../data/morse-reverse.json'\n\nexport default React.memo(function MorseBufferDisplay() {\n \n const {morseCharBuffer} = useContext(MorseBufferContext)\n\n let ditDahs = morseCharBuffer.split('').map((ditdah,index) => )\n let alphanumeric = ''\n let letters = morseCharBuffer.split(' ')\n\n if (morseCharBuffer === '') {}\n else {\n for (let i in letters) {\n if (letters[i] === ' ') {\n alphanumeric += ' '\n } else {\n if (morseCode[letters[i]] === undefined) {\n alphanumeric += (letters[i] === '' ? '':'[?]')\n } else {\n alphanumeric += morseCode[letters[i]]\n }\n }\n }\n }\n\n return (\n \n
\n
\n
\n
\n {alphanumeric.toUpperCase()}\n
\n
\n
\n
{text}
\n
\n \"[?]\" signifies no translation available.\n \n
\n
\n \n \n );\n\n \n})","import React from \"react\"\n\nexport default React.memo(function ChallengeBufferDisplay(props) {\n\n const morseArray = props.morseArray\n\n let ditDahs = []\n\n for (let i in morseArray) {\n let morseChar = morseArray[i]\n \n ditDahs.push({morseChar})\n }\n\n return (\n \n )\n})","import React from \"react\"\n\nexport default (function ChallengeControls(props) {\n\n return (\n \n \n
\n )\n})","import React, { useContext } from \"react\"\nimport { WordFeederContext } from \"../contexts/wordFeederContext\"\n\nexport default React.memo(function ChallengeWord(props) {\n\n const {word} = useContext(WordFeederContext)\n\n let challengeLetters\n if (typeof word === 'object') {\n challengeLetters = word[0].split('')\n }\n else {\n challengeLetters = word.split('')\n }\n\n let spannedWord = challengeLetters.map((letter,index) => {letter})\n\n return (\n {spannedWord}
\n )\n})","import React, {useContext} from \"react\"\nimport { GameClockContext } from \"../contexts/gameClockContext\";\n\nexport default (function GameClock(props) {\n \n const {gameClockTime} = useContext(GameClockContext)\n\n const minutes = Math.floor(gameClockTime / 60)\n const seconds = gameClockTime % 60\n\n return (\n Time Elapsed: {minutes} minutes {seconds} seconds
\n )\n})","import React, {useContext} from 'react';\nimport '../css/App.css';\nimport { ChallengeContext } from '../contexts/challengeContext';\nimport { KeyTypeContext } from '../contexts/keyTypeContext';\nimport ChallengeBufferDisplay from '../components/ChallengeBufferDisplay';\nimport ChallengeControls from '../components/ChallengeControls';\nimport ChallengeWord from '../components/ChallengeWord'\nimport ElectronicKey from '../components/ElectronicKey';\nimport GameClock from '../components/GameClock';\nimport StraightKey from '../components/StraightKey';\n\n\nexport default React.memo(function ChallengeMode() {\n \n const {keyType} = useContext(KeyTypeContext)\n const {challengeState, cancelChallenge, morseArray, challengeWordClass} = useContext(ChallengeContext)\n\n return (\n <>\n {challengeState === 'started' ? (keyType === \"straight\" ?\n : ) : <>\n }\n \n \n \n \n )\n});\n","import React, {useContext} from \"react\"\nimport { ChallengeContext } from \"../contexts/challengeContext\"\nimport { GameClockContext } from \"../contexts/gameClockContext\"\nimport { GameModeContext } from \"../contexts/gameModeContext\"\nimport { MorseBufferContext } from \"../contexts/morseBufferContext\"\nimport { WordFeederContext } from \"../contexts/wordFeederContext\"\n\nexport default React.memo(function ModePicker() {\n\n const {setGameMode} = useContext(GameModeContext)\n const {setMorseCharBuffer} = useContext(MorseBufferContext)\n const {resetFeeder} = useContext(WordFeederContext)\n const {stopGameClock, setGameClockTime, clockIsRunning} = useContext(GameClockContext)\n const {setChallengeState} = useContext(ChallengeContext)\n\n function handleClick(e) {\n setMorseCharBuffer('')\n resetFeeder()\n setChallengeState('ready')\n\n setGameMode(e.target.id)\n\n if (clockIsRunning) { \n stopGameClock()\n setGameClockTime(0)\n }\n\n let buttons = document.querySelector(\".mode-picker#gameMode #buttons\").childNodes\n buttons.forEach(button => {\n if (button.id === e.target.id) {\n button.classList.add('selected')\n } else { button.classList.remove('selected')}\n })\n }\n\n return (\n \n
\n Mode\n
\n
\n \n \n
\n
\n
\n Key Type\n
\n
\n \n \n
\n
\n
\n WPM ({minWPM}-{maxWPM})\n
\n
\n \n \n \n Test playMorseWord('.....')}>\n
\n
\n \n \n
\n \n TAP BUTTON OR PRESS SPACEBAR\n
\n \n )\n})","import React from \"react\"\nimport { contactLinks } from \"../data/social\"\n\nexport default (function Footer() {\n\n function handleClick(event) {\n window.open(contactLinks[event.target.id]['link'])\n }\n \n return (\n \n )\n})","import React, {useContext} from \"react\"\nimport { WordListPickerContext } from \"../contexts/wordListPickerContext\";\nimport { WordFeederContext } from \"../contexts/wordFeederContext\";\n\nexport default React.memo(function WordCountPicker() {\n\n const {setWordListCount, wordListCountMax} = useContext(WordListPickerContext)\n const {resetFeeder} = useContext(WordFeederContext)\n\n function handleChange(e) {\n resetFeeder()\n setWordListCount(e.target.value)\n }\n\n // Create Options for Select element\n let options = []\n for (let i = 0; i < wordListCountMax; i++) {\n options.push()\n }\n \n return (\n \n
\n Challenge Word Count: (1-{wordListCountMax})\n
\n
\n \n
\n
\n
\n
\n Word List:\n
\n
\n \n
\n
\n\n
\n
\n Word Order:\n
\n
\n \n \n
\n
\n\n
\n\n
\n
\n Description:\n
\n
\n {metadata[wordListCategory]['description']}\n
\n
\n
\n Challenge Options\n \n \n
\n )\n})\n\n","import React, { useContext } from \"react\"\nimport { GameClockContext } from \"../contexts/gameClockContext\"\nimport { ChallengeContext } from \"../contexts/challengeContext\"\nimport { WordListPickerContext } from \"../contexts/wordListPickerContext\"\n\nexport default (function ChallengeComplete() {\n\n const {gameClockTime} = useContext(GameClockContext)\n const {setChallengeState} = useContext(ChallengeContext)\n const {wordListCount, wordListCategory, metadata} = useContext(WordListPickerContext)\n\n function _continue() {\n setChallengeState('ready')\n }\n\n const minutes = Math.floor(gameClockTime / 60)\n const seconds = gameClockTime % 60\n\n let time = (minutes === 0) ? `${seconds} seconds` : `${minutes} minutes and ${seconds} seconds`\n\n return (\n \n Challenge Complete\n You completed {wordListCount} words
\n from the {metadata[wordListCategory]['name']} word list
\n in {time}!\n \n\n
\n )\n})\n\n","import React, { useContext } from \"react\"\nimport { ChallengeContext } from \"../contexts/challengeContext\"\nimport ChallengeReady from \"./ChallengeReady\"\nimport ChallengeComplete from \"./ChallengeComplete\"\n\nexport default (function ChallengeOverlay() {\n\n const {challengeState, setChallengeState} = useContext(ChallengeContext)\n \n return (\n \n {challengeState === 'ready' && }\n {challengeState === 'completed' && }\n
\n )\n})","import React from \"react\"\nimport useMorsePlayer from \"../hooks/useMorsePlayer\"\nimport straight_key from \"../media/images/straight_key.jpg\"\nimport electronic_key from \"../media/images/electronic_key.jpg\"\n\nexport default React.memo(function Info() {\n\n const {playMorseWord} = useMorsePlayer()\n\n return (\n \n
Morse Code
\n
Morse code is a method of communication that uses short tones (dits) and long tones (dahs) in various sequences to make letters, numbers, and special characters. This tool will help beginners learn Morse code.
\n\n
Dits and Dahs
\n
\n Dit playMorseWord('.')}> (.) Short tones and the base unit length of Morse code communication.
\n Dah playMorseWord('-')}> (-) Long tones, each the length of three dits.\n
\n\n
Spacing
\n
The spacing between dits and dahs matters in Morse code. Spacing of various lengths signify different things.
\n\n Intra-character Spacing A letter in Morse code can be made up of multiple dits and dahs. The spaces between the dits and dahs that make up a single letter are each the length of one dit. E.g., three dits, each separated by one-dit-long spaces, is an \"S\". (...) playMorseWord('...')}>
\n\n Inter-character Spacing The space between consecutive letters is three dits long. E.g., three dits, each separated by a three-dit-long spaces is \"EEE\". (. . .) playMorseWord('. . .')}>
\n \n Inter-word Spacing The space between words is seven dits long. E.g., three dits, each separated by seven-dit-long spaces (denoted by a forward slash in this example: ././.), is \"E E E\". playMorseWord('././.')}>\n
\n\n
Speed
\n
\n The rate of communication is increased or decreased by adjusting the length of the dits, which in turn adjusts the length of dahs and spaces. Adjust the WPM (Words Per Minute) in the Options section to adjust the speed.\n
\n\n
Telegraph Key Types
\n
The instrument used to send Morse code is called the key.
\n \n
\n
Straight Keys use a single button and generate tones when pressed down. Straight keys require greater accuracy as the length of dits, dahs, and spacing is completely under manual control.
\n
\n
Electronic Keys use paddles that automatically generate dits and dahs when pressed. The Electronic Keyer used here is an Iambic keyer that uses two paddles–left paddle for dits, right paddle for dahs. Pressing both paddles simultaneously automatically alternates between dit and dah. Switch between the two paddles at the appropriate times to build letters in Morse code.
\n\n
Check out this video for a demonstration of the difference between Straight and Electronic keys.
\n
\n
\n Legend\n
\n
\n {letters}\n {numbers}\n {special}\n
\n
\n \n
\n )\n\n})\n","import React, {useContext} from \"react\"\nimport { FrequencyContext } from \"../contexts/frequencyContext\";\n\nexport default React.memo(function FrequencyPicker(props) {\n\n const {frequency, setFrequency} = useContext(FrequencyContext)\n\n const minFreq = 300\n const maxFreq = 1500\n\n function handleChange(e) {\n if (Number(e.target.value) > maxFreq) {\n setFrequency(maxFreq)\n } else if (Number(e.target.value) < minFreq) {\n setFrequency(minFreq)\n } else {\n setFrequency(Number(e.target.value))\n }\n }\n\n function increment() {\n setFrequency(prevFreq => {\n if (prevFreq + 10 <= maxFreq) {\n return (prevFreq + 10)\n } else {\n return maxFreq\n }\n })\n }\n\n function decrement() {\n setFrequency(prevFreq => {\n if (prevFreq - 10 >= minFreq) {\n return (prevFreq - 10)\n } else {\n return minFreq\n }\n })\n }\n \n return (\n \n
\n Frequency ({minFreq}-{maxFreq})\n
\n
\n \n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n {gameMode === 'practice' &&
}\n {gameMode === 'challenge' &&\n <>\n
\n
\n \n }\n
\n
\n