PoC user game

src/api/getWordReport.ts

@@ -24,18 +24,20 @@ 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: '' };
       }
     }
 
     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;

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);

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);
 

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}

src/components/Words/Words.tsx

@@ -107,9 +107,9 @@ const Words = () => {
   return (
       <div className={clsx('words', { narrow: shouldBeNarrower, shorter: shouldBeShorter })}>
           <WordTip />
-          {guesses.map((guess) => {
+          {guesses.map((guess, index) => {
             return (
-                <Word key={`guess-${guess.word}`} guess={guess} isSubmitted />
+                <Word key={`guess-${guess.word}`} guess={guess} wordIndex={index} isSubmitted />
             );
           })}
           {isGameEnded ? <EndResult /> : <Word guess={submitGuess} />}

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,

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,24 +160,26 @@ 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,
+    });
   },
 );
 
 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,35 +238,35 @@ 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) {
       return AffixStatus.Incorrect;
     }
 
     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);

src/store/utils/getKeyboardState.test.ts

@@ -10,7 +10,7 @@ describe('getKeyboardState', () => {
       expect(getKeyboardState({
         wordToGuess: 'start',
         wordToSubmit: 'start',
-        incorrectLetter: {},
+        incorrectLetters: {},
         positionLetters: {},
         flatAffixes: {
           start: '',

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;
     }

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,