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,