diff --git a/src/api/getWordReport.ts b/src/api/getWordReport.ts index cf6acb0b7..67874188c 100644 --- a/src/api/getWordReport.ts +++ b/src/api/getWordReport.ts @@ -24,11 +24,11 @@ export const temporaryTranslatorPatterns = (word: string, pattern: number[]): Pa const { affixes, wordLetters } = pattern.reduce((stack: PatternReport, value: number, index: number) => { const letter = letters[index]; - const { type, text } = stack.current || {}; - const shouldClose = value < 3; if (shouldClose) { + const { type, text } = stack.current || {}; + if (type && text) { stack.affixes.push({ type, text }); stack.current = { type: AffixStatus.Unknown, text: '' }; @@ -36,6 +36,8 @@ export const temporaryTranslatorPatterns = (word: string, pattern: number[]): Pa } if (value === 2 || value === 3) { + const { text } = stack.current || {}; + stack.current = ({ type: AffixStatus.Correct, text: `${text}${letter}` }); stack.wordLetters.correct[letter] = stack.wordLetters.correct[letter] ? stack.wordLetters.correct[letter] + 1 : 1; diff --git a/src/components/Words/Affix.scss b/src/components/Words/Affix.scss index 69d10645a..62371e126 100644 --- a/src/components/Words/Affix.scss +++ b/src/components/Words/Affix.scss @@ -70,23 +70,7 @@ } } - &.new { - &.known-incorect, - &.known-typed-too-much { - &::after { - bottom: -10px; - } - } - } - - &.correct { - &.known-missing-part { - &::after { - bottom: -8px; - } - } - } - + &.incorrect, &.new, &.correct { &.known-incorect, @@ -96,13 +80,17 @@ content: ''; position: absolute; left: calc(50% - 4px); + bottom: -8px; height: 0; width: 0; border-radius: 6px; border: 4px solid transparent; } } + } + &.new, + &.incorrect { &.known-incorect { &::after { border-bottom-color: var(--incorrect-red-contrast); diff --git a/src/components/Words/Affix.tsx b/src/components/Words/Affix.tsx index 814fd3e92..7bdc20cbd 100644 --- a/src/components/Words/Affix.tsx +++ b/src/components/Words/Affix.tsx @@ -8,10 +8,10 @@ import { AffixStatus, Affix as AffixType } from '@common-types'; import './Affix.scss'; const Affix = ({ - type, text, isStart, isEnd, hasCaretBefore, onClick, isSubmitted = false, + type, text, wordIndex, isStart, isEnd, hasCaretBefore, onClick, isSubmitted = false, }: AffixType) => { const wordToSubmit = useSelector(selectWordToSubmit); - const keyCapType = useSelector(selectLetterState(text)); + const keyCapType = useSelector(selectLetterState(text, wordIndex)); const { status: keyboardState } = useSelector(selectKeyboardState); const flatAffixes = useSelector(state => state.game.flatAffixes); diff --git a/src/components/Words/Word.tsx b/src/components/Words/Word.tsx index 5c5dac493..07eaf4950 100644 --- a/src/components/Words/Word.tsx +++ b/src/components/Words/Word.tsx @@ -8,7 +8,7 @@ import Affix from '@components/Words/Affix'; import './Words.scss'; -const Word = ({ guess, isSubmitted = false }: { guess: WordType, isSubmitted?: boolean }) => { +const Word = ({ guess, wordIndex, isSubmitted = false }: { guess: WordType, wordIndex?: number, isSubmitted?: boolean }) => { const dispatch = useDispatch(); const handleClickGenerator = (letterIndex: number) => () => { @@ -47,6 +47,7 @@ const Word = ({ guess, isSubmitted = false }: { guess: WordType, isSubmitted?: b // eslint-disable-next-line react/no-array-index-key key={`text-${index}`} text={text} + wordIndex={wordIndex} type={type} isStart={isStart} isEnd={isEnd} diff --git a/src/components/Words/Words.tsx b/src/components/Words/Words.tsx index d367a5b46..b82f615cf 100644 --- a/src/components/Words/Words.tsx +++ b/src/components/Words/Words.tsx @@ -107,9 +107,9 @@ const Words = () => { return (
- {guesses.map((guess) => { + {guesses.map((guess, index) => { return ( - + ); })} {isGameEnded ? : } diff --git a/src/store/gameSlice.ts b/src/store/gameSlice.ts index df2cf2e8a..a58ce04da 100644 --- a/src/store/gameSlice.ts +++ b/src/store/gameSlice.ts @@ -239,8 +239,6 @@ export const restoreGameState = createAsyncThunk( const statusToReturn = status ?? (isWon ? GameStatus.Won : GameStatus.Guessing); - console.log('wordsLetters', wordsLetters); - return { gameMode, status: statusToReturn, diff --git a/src/store/selectors.ts b/src/store/selectors.ts index 26d21cb56..d59d7bec0 100644 --- a/src/store/selectors.ts +++ b/src/store/selectors.ts @@ -97,15 +97,25 @@ const selectPositionLetters = (state: RootState) => state.game.letters.position; export const selectGuesses = (state: RootState) => state.game.guesses; -const getLetterState = ( +const getLetterState = ({ + letter, + wordToSubmit, + wordToGuess, + wordIndex, + correctLetters, + incorrectLetters, + positionLetters, + specialCharacters, +}: { letter: string, wordToSubmit: string, wordToGuess: string, + wordIndex?: number, correctLetters: UsedLetters, - incorrectLetter: UsedLetters, + incorrectLetters: UsedLetters, positionLetters: UsedLetters, specialCharacters: string[], -) => { +}) => { const isSpecialCharacter = specialCharacters.includes(letter); if (isSpecialCharacter) { @@ -117,17 +127,24 @@ const getLetterState = ( } } - if (incorrectLetter[letter]) { + if (typeof incorrectLetters[letter] === 'number') { const isCorrectSometimes = positionLetters[letter] > 0; if (isCorrectSometimes) { const occurrencesOfLetterInSubmitedWord = getLetterOccuranceInWord(letter, wordToSubmit); const isCorrectSometimesButHereNumberOfOccuranceIsTooHigh = occurrencesOfLetterInSubmitedWord > positionLetters[letter]; - if (isCorrectSometimesButHereNumberOfOccuranceIsTooHigh) { return AffixStatus.IncorrectOccurance; } + + if (typeof wordIndex === 'number' && wordIndex > incorrectLetters[letter]) { + return AffixStatus.Incorrect; + } } else { + if (typeof wordIndex === 'number') { + return wordIndex > incorrectLetters[letter] ? AffixStatus.Incorrect : AffixStatus.Unknown; + } + return AffixStatus.Incorrect; } } @@ -143,15 +160,17 @@ const getLetterState = ( return AffixStatus.Unknown; }; -export const selectLetterState = (letter: string) => createSelector( +export const selectLetterState = (letter: string, wordIndex?: number) => createSelector( selectWordToSubmit, selectWordToGuess, selectGameLanguageKeyboardInfo, selectCorrectLetters, selectIncorrectLetters, selectPositionLetters, - (wordToSubmit, wordToGuess, { specialCharacters }, correctLetters, incorrectLetter, positionLetters) => { - return getLetterState(letter, wordToSubmit, wordToGuess, correctLetters, incorrectLetter, positionLetters, specialCharacters); + (wordToSubmit, wordToGuess, { specialCharacters }, correctLetters, incorrectLetters, positionLetters) => { + return getLetterState({ + letter, wordToSubmit, wordToGuess, wordIndex, correctLetters, incorrectLetters, positionLetters, specialCharacters, + }); }, ); @@ -159,8 +178,8 @@ export const selectLetterSubreport = (letter: string) => createSelector( selectWordToSubmit, selectIncorrectLetters, selectPositionLetters, - (wordToSubmit, incorrectLetter, positionLetters): LetterSubreport => { - const isLimitKnown = Boolean(incorrectLetter[letter]); + (wordToSubmit, incorrectLetters, positionLetters): LetterSubreport => { + const isLimitKnown = typeof incorrectLetters[letter] === 'number'; const confirmedOccurrence = positionLetters[letter] ?? 0; if (confirmedOccurrence === 0) { @@ -219,19 +238,19 @@ export const selectWordState = (word: string) => createSelector( selectIncorrectLetters, selectPositionLetters, selectFlatAffixes, - (wordToSubmit, wordToGuess, { specialCharacters }, correctLetters, incorrectLetter, positionLetters, flatAffixes) => { + (wordToSubmit, wordToGuess, { specialCharacters }, correctLetters, incorrectLetters, positionLetters, flatAffixes) => { const uniqueLettersInWord = [...new Set(word.split(''))].filter(letter => ![' '].includes(letter)); const hasIncorrectLetterTyped = uniqueLettersInWord.some( - letter => getLetterState( + letter => getLetterState({ letter, wordToSubmit, wordToGuess, correctLetters, - incorrectLetter, + incorrectLetters, positionLetters, specialCharacters, - ) === AffixStatus.Incorrect, + }) === AffixStatus.Incorrect, ); if (hasIncorrectLetterTyped) { @@ -239,15 +258,15 @@ export const selectWordState = (word: string) => createSelector( } const hasTypedTooMuch = uniqueLettersInWord.some( - letter => getLetterState( + letter => getLetterState({ letter, wordToSubmit, wordToGuess, correctLetters, - incorrectLetter, + incorrectLetters, positionLetters, specialCharacters, - ) === AffixStatus.IncorrectOccurance, + }) === AffixStatus.IncorrectOccurance, ); if (hasTypedTooMuch) { @@ -279,9 +298,9 @@ export const selectKeyboardState = createSelector( selectIncorrectLetters, selectPositionLetters, selectFlatAffixes, - (wordToGuess, wordToSubmit, incorrectLetter, positionLetters, flatAffixes) => { + (wordToGuess, wordToSubmit, incorrectLetters, positionLetters, flatAffixes) => { return getKeyboardState({ - wordToGuess, wordToSubmit, incorrectLetter, positionLetters, flatAffixes, + wordToGuess, wordToSubmit, incorrectLetters, positionLetters, flatAffixes, }); }, ); @@ -291,10 +310,10 @@ export const selectKeyboardUsagePercentage = createSelector( selectCorrectLetters, selectIncorrectLetters, selectPositionLetters, - ({ characters }, correctLetters, incorrectLetter, positionLetters) => { + ({ characters }, correctLetters, incorrectLetters, positionLetters) => { const totalNumberOfLetters = characters.length; - const usedLetters = [...new Set([...Object.keys(correctLetters), ...Object.keys(incorrectLetter), ...Object.keys(positionLetters)])]; + const usedLetters = [...new Set([...Object.keys(correctLetters), ...Object.keys(incorrectLetters), ...Object.keys(positionLetters)])]; const totalNumberOfUsedLetters = usedLetters.length; return Math.round((totalNumberOfUsedLetters / totalNumberOfLetters) * 100); diff --git a/src/store/utils/getKeyboardState.test.ts b/src/store/utils/getKeyboardState.test.ts index ab9527f5e..b3a0a3769 100644 --- a/src/store/utils/getKeyboardState.test.ts +++ b/src/store/utils/getKeyboardState.test.ts @@ -10,7 +10,7 @@ describe('getKeyboardState', () => { expect(getKeyboardState({ wordToGuess: 'start', wordToSubmit: 'start', - incorrectLetter: {}, + incorrectLetters: {}, positionLetters: {}, flatAffixes: { start: '', diff --git a/src/store/utils/getKeyboardState.ts b/src/store/utils/getKeyboardState.ts index 209e9b1d4..08468f602 100644 --- a/src/store/utils/getKeyboardState.ts +++ b/src/store/utils/getKeyboardState.ts @@ -30,13 +30,13 @@ const getIsTextMatchingOrder = (text: string, order: string[]) => { export const getKeyboardState = ({ wordToGuess, wordToSubmit, - incorrectLetter, + incorrectLetters, positionLetters, flatAffixes, }: { wordToGuess: string, wordToSubmit: string, - incorrectLetter: UsedLetters, + incorrectLetters: UsedLetters, positionLetters: UsedLetters, flatAffixes: FlatAffixes, }) => { @@ -49,7 +49,7 @@ export const getKeyboardState = ({ const uniqueWordLetters = [...(new Set(wordToSubmit.split('')))].filter(letter => letter !== ' '); const incorrectTyppedLetters = uniqueWordLetters.filter((uniqueLetter) => { - const isIncorrect = incorrectLetter[uniqueLetter] > 0; + const isIncorrect = typeof incorrectLetters[uniqueLetter] === 'number'; if (!isIncorrect) { return false; } diff --git a/src/types.d.ts b/src/types.d.ts index 35d7d2d1f..355b730da 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -159,6 +159,7 @@ export enum AffixStatus { export type Affix = { type: AffixStatus, text: string, + wordIndex?: number, isStart?: boolean, isEnd?: boolean, isSubmitted?: boolean,