genemecija/learn-morse-code
1
0
Fork 0
mirror of https://github.com/genemecija/learn-morse-code.git synced 2026-01-06 00:29:56 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Challenge mode buffer display progress

Browse source
This commit is contained in:
Gene Mecija 2020-01-21 02:04:46 -08:00
parent 5f35a664a1
commit db1c7a73b6
9 changed files with 117 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.js
View file

@ -43,7 +43,7 @@ function App() {
{gameMode === 'practice' &&
<>
{keyType === "straight" ?
<StraightKey gameMode={gameMode} /> : <ElectronicKey gameMode={gameMode} />}
<StraightKey gameMode='practice' /> : <ElectronicKey gameMode='practice' />}
<PracticeMode /><br/>
<MorseBufferDisplay /><br/>
<MorseHistory /><br/>
@ -53,8 +53,8 @@ function App() {
{gameMode === 'challenge' &&
<>
{keyType === "straight" ?
<StraightKey gameMode={gameMode} /> : <ElectronicKey gameMode={gameMode} />}
<ChallengeMode />}
<StraightKey gameMode='challenge' /> : <ElectronicKey gameMode='challenge' />}
<ChallengeMode />
</>
}
<MorseButtons />

93
src/app-modes/ChallengeMode.js
View file

@ -2,66 +2,73 @@ import React, {useContext} from 'react';
import '../css/App.css';
import morseCode from '../data/morse-reverse.json'
import ChallengeWord from '../components/ChallengeWord'
// import MorseBufferDisplay from '../components/MorseBufferDisplay'
// import ChallengeDisplay from '../components/ChallengeDisplay';
import ChallengeBufferDisplay from '../components/ChallengeBufferDisplay';
import { MorseBufferContext } from '../contexts/morseBufferContext';
function ChallengeMode() {
export default React.memo(function ChallengeMode() {
console.log("ChallengeMode loaded");
let word = "morse"
const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext)
let wordList = ['morse', 'code', 'hello', 'gene']
let word = wordList.shift()
let challengeLetters = word.split('')
let morseLetters = morseCharBuffer.split('_').filter(l => l !== '')
let correctIndexes = []
let incorrectIndex = null
const {morseCharBuffer} = useContext(MorseBufferContext)
let morseArray = morseCharBuffer.split('_').filter(l => l !== '')
morseLetters.forEach((morseLetter, index) => {
let morseAlpha = morseCode[morseLetter]
let challengeLetter = challengeLetters[index].toLowerCase()
let correctCharIndexes = [] // Indexes of correct letters in Challenge Word
let incorrectCharIndex = null
let incorrectMorseIndexes = [] // Indexes of incorrect morse characters in morse character buffer
console.log('morseAlpha', morseAlpha);
console.log('morseLetter', morseLetter);
console.log('challengeLetter', challengeLetter);
// Iterate through the morse character buffer and compare with each letter of challenge word
morseArray.forEach((item, index) => {
if (morseAlpha === challengeLetter) {
correctIndexes.push(index)
// console.log('MATCH', correctIndexes);
let offset = incorrectMorseIndexes.length || 0
let morseLetter = morseCode[morseArray[index+offset]]
let challengeLetter = challengeLetters[index-offset]
if (morseLetter === challengeLetter) {
correctCharIndexes.push(index-offset)
incorrectCharIndex = null
}
else {
if (morseCharBuffer.slice(-1) === "_") {
incorrectIndex = index
// console.log('MISMATCH:', incorrectIndex, 'should be', challengeLetter, 'instead of', morseAlpha, '>', morseLetter);
// props.setMorseCharBuffer(morseLetters.slice(0,-1).join('_') + '_')
}
incorrectCharIndex = index-offset
incorrectMorseIndexes.push(index+offset)
}
})
let spannedWord = challengeLetters.map((letter,index) => {
// console.log('correctIndexes',correctIndexes);
// console.log('index',index);
let className = 'cLetter'
className += (correctIndexes.includes(index)) ? ' correct' : ''
className += (incorrectIndex === index) ? ' morseError' : ''
return (
<span key={index} className={className} id={"chal"+index}>{letter}</span>
)
// let offset = incorrectMorseIndexes.length
// if (morseArray[index + offset]) { // If value exists at index
// let morseAlpha = morseCode[morseArray[index + offset]]
// let adjustedIndex = index - offset
// if (challengeLetters[adjustedIndex]) { // If value exists at index
// let challengeLetter = challengeLetters[adjustedIndex].toLowerCase()
// if (morseCharBuffer.slice(-1) === "_") { // Signifies buffer has complete characters (i.e. no partial characters)
// if (morseAlpha === challengeLetter) {
// correctCharIndexes.push(adjustedIndex)
// incorrectCharIndex = null
// } else {
// incorrectMorseIndexes.push(index)
// incorrectCharIndex = adjustedIndex
// }
// }
// }
// else { word = wordList.shift() }
// }
})
return (
<>
<ChallengeWord word={spannedWord} />
<ChallengeBufferDisplay incorrectIndex={incorrectIndex} morseLetters={morseLetters} setMorseCharBuffer={setMorseCharBuffer} />
<button onClick={() => console.log(morseCharBuffer)}>morseCharBuffer</button>
<ChallengeWord word={word} correctCharIndexes={correctCharIndexes} incorrectCharIndex={incorrectCharIndex} />
<ChallengeBufferDisplay morseArray={morseArray} incorrectMorseIndexes={incorrectMorseIndexes} />
{/* <button onClick={() => console.log(morseCharBuffer)}>morseCharBuffer</button> */}
</>
);
}
export default React.memo(ChallengeMode);
});

41
src/components/ChallengeBufferDisplay.js
View file

@ -22,37 +22,38 @@ function ChallengeBufferDisplay(props) {
// }
// const {morseCharBuffer, setMorseCharBuffer} = useContext(MorseBufferContext)
const morseLetters = props.morseLetters
console.log('morseLetters', morseLetters);
const setMorseCharBuffer = props.setMorseCharBuffer
const morseArray = props.morseArray
let incorrectMorseIndexes = props.incorrectMorseIndexes
console.log('morseArray', morseArray);
let ditDahs = []
let alphanumeric = ''
let incorrectIndex = props.incorrectIndex
let alphanumeric = []
for (let i in morseLetters) {
let morseChar = morseLetters[i]
alphanumeric += morseCode[morseChar]
let cn = ''
console.log('incorrectIndex', incorrectIndex);
console.log('i', i);
for (let i in morseArray) {
let morseChar = morseArray[i]
cn = (incorrectIndex === Number(i)) ? 'morseError' : ''
ditDahs.push(<span className={cn}>{morseChar}</span>)
// Alphanumeric
let alphaClass = (incorrectMorseIndexes.includes(Number(i))) ? 'strike' : ''
alphanumeric.push(<span className={alphaClass}>{morseCode[morseChar].toUpperCase()}</span>)
// DitDahs
console.log('>>> incorrectMorseIndexes', incorrectMorseIndexes);
let ditDahClass = (incorrectMorseIndexes.includes(Number(i))) ? 'morseError' : ''
ditDahs.push(<span className={ditDahClass}>{morseChar}</span>)
ditDahs.push(<span className='space'>&nbsp;</span>)
}
if (incorrectIndex) {
setTimeout(() => {
setMorseCharBuffer(prev => prev.slice(0,-1))
}, 3000)
}
// if (incorrectIndex) {
// setTimeout(() => {
// setMorseCharBuffer(prev => prev.slice(0,prev.length-2))
// }, 500)
// }
return (
<div id="challengeBufferDisplay">
<div id="alphanumeric-container">
<div id="alphanumeric">
{alphanumeric.toUpperCase()}
{alphanumeric}
</div>
</div>
<div id="ditDahs">

24
src/components/ChallengeWord.js
View file

@ -1,7 +1,29 @@
import React from "react"
export default React.memo(function ChallengeWord(props) {
const word = props.word
const correctCharIndexes = props.correctCharIndexes
const incorrectCharIndex = props.incorrectCharIndex
let challengeLetters = word.split('')
let spannedWord = challengeLetters.map((letter,index) => {
let className = 'cLetter'
if (incorrectCharIndex === index) {
className = 'cLetter morseError'
} else if (correctCharIndexes.includes(index)) {
className = 'cLetter correct'
}
return (
<span key={index} className={className} id={"chal"+index}>{letter}</span>
)
})
return (
<div id="challengeWord">{props.word}</div>
<div id="challengeWord">{spannedWord}</div>
)
})

8
src/css/App.css
View file

@ -125,11 +125,11 @@ html, body {
}
.paddle#left {
border-radius: 50px 0 0 50px;
border-radius: 20% 0 0 20%;
}
.paddle#right {
border-radius: 0 50px 50px 0;
border-radius: 0 20% 20% 0;
}
.paddle.showPaddles {
@ -177,6 +177,10 @@ html, body {
margin: 1px;
}
.strike {
text-decoration: line-through;
}
#morseBufferDisplay, #challengeBufferDisplay {
display: -webkit-box;
display: -ms-flexbox;

2
src/css/App.css.map
View file

File diff suppressed because one or more lines are too long

2
src/hooks/useElectronicKey.js
View file

@ -11,7 +11,7 @@ function useElectronicKey(gameMode) {
const timingUnit = config.timingUnit
let ratio = .2
const ditMaxTime = 85 // ditMaxTime * 0.365 to get ms, e.g. 85 * 0.365 ~= 31ms
const ditMaxTime = 70 // ditMaxTime * 0.365 to get ms, e.g. 85 * 0.365 ~= 31ms
const letterGapMinTime = ditMaxTime*ratio*3 //config.practiceSpeed.normal*3
const wordGapMaxTime = ditMaxTime*ratio*7 // config.practiceSpeed.normal*7

8
src/hooks/useStraightKey.js
View file

@ -44,6 +44,7 @@ function useStraightKey(gameMode) {
function handleInputStart(event) {
event.preventDefault()
console.log("down", event.keyCode);
if (isRunning) {
return
@ -90,17 +91,18 @@ function useStraightKey(gameMode) {
function handleInputEnd(event) {
event.preventDefault()
console.log("up", event.keyCode);
if (isRunning) {
isRunning = false
if ((event.keyCode !== 32 &&
event.target.id !== "morseButton" &&
event.target.id !== "left" &&
event.target.id !== "right") ||
(event.repeat)) {
(event.repeat)) {
return
}
isRunning = false
// console.log('charTime:', charTime);
if (charTime <= ditMaxTime) {
setMorseCharBuffer(prev => prev + '.')

9
src/scss/App.scss
View file

@ -92,10 +92,10 @@ html, body {
transition: all 500ms ease-in-out;
}
.paddle#left {
border-radius: 50px 0 0 50px;
border-radius: 20% 0 0 20%;
}
.paddle#right {
border-radius: 0 50px 50px 0;
border-radius: 0 20% 20% 0;
}
.paddle.showPaddles {
width: 250px;
@ -130,6 +130,11 @@ html, body {
margin: 1px;
}
}
.strike {
text-decoration: line-through;
}
#morseBufferDisplay, #challengeBufferDisplay {
display: flex;
justify-content: center;