Interfaces to types

src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { Pane as PaneInterface } from '@common-types';
+import { Pane as PaneType } from '@common-types';
 
 import { LOCAL_STORAGE } from '@const';
 
@@ -73,11 +73,11 @@ function App() {
           <Header />
           <main>
               <Toast />
-              {pane === PaneInterface.Help && <Help />}
-              {pane === PaneInterface.Game && <Game />}
-              {pane === PaneInterface.Settings && <Settings />}
-              {pane === PaneInterface.Statistics && <Statistics />}
-              {pane === PaneInterface.AboutLanguage && <AboutLanguage />}
+              {pane === PaneType.Help && <Help />}
+              {pane === PaneType.Game && <Game />}
+              {pane === PaneType.Settings && <Settings />}
+              {pane === PaneType.Statistics && <Statistics />}
+              {pane === PaneType.AboutLanguage && <AboutLanguage />}
           </main>
           <CookiesPopup />
       </div>

src/api/getDoesWordExist.ts

@@ -67,10 +67,10 @@ export const getDoesWordExist = async (word: string, lang: string): Promise<GetD
   };
 };
 
-interface KeyWithIndex {
+type KeyWithIndex = {
   key: string,
   index: number,
-}
+};
 
 export const getWordsFromKeysWithIndexes = async (keysWithIndexes: KeyWithIndex[], lang: string): Promise<string[]> => {
   const words = [];

src/api/getWordReport.ts

@@ -7,15 +7,15 @@ import compareWords from '@api/utils/compareWords';
 
 import { mergeLettersData } from '@utils/statistics';
 
-export interface PatternReport {
+export type PatternReport = {
   affixes: Affix[],
   wordLetters: {
     correct: UsedLetters,
     incorrect: UsedLetters,
     position: UsedLetters,
   },
   current?: Affix
-}
+};
 
 export const temporaryTranslatorPatterns = (word: string, pattern: number[]): PatternReport => {
   const letters = Array.from(word);
@@ -79,7 +79,7 @@ export const temporaryTranslatorPatterns = (word: string, pattern: number[]): Pa
   return { affixes, wordLetters };
 };
 
-export interface WordReport {
+export type WordReport = {
   isError: boolean,
   type?: string,
   isWon: boolean,
@@ -90,7 +90,7 @@ export interface WordReport {
     incorrect: UsedLetters,
     position: UsedLetters,
   },
-}
+};
 
 export const getWordReport = async (
   wordToGuess: string,

src/api/utils/compareWords.ts

@@ -1,9 +1,9 @@
 // Taken fron original: https://github.com/hedalu244/diffle/blob/main/main.ts
-interface DiffleResult {
+type DiffleResult = {
   pattern: (0 | 1 | 2 | 3)[],
   start: boolean,
   end: boolean,
-}
+};
 
 export const compareWords = (answer: string, guess: string) => {
   const table = Array.from({ length: answer.length + 1 }, () => Array.from({ length: guess.length + 1 }, () => (
@@ -31,17 +31,17 @@ export const compareWords = (answer: string, guess: string) => {
     }
   }
 
-  let best_score = -Infinity;
-  let best_results: DiffleResult[] = [];
+  let bestScore = -Infinity;
+  let bestResults: DiffleResult[] = [];
 
   table[answer.length][guess.length].paths.forEach((path) => {
-    const start = path[0] == '>';
-    const end = path[path.length - 1] == '>';
+    const start = path[0] === '>';
+    const end = path[path.length - 1] === '>';
     const pattern: (0 | 1 | 2 | 3)[] = Array.from({ length: guess.length }, () => 0);
-    const unused_letter: string[] = Array.from(answer);
+    const unusedLetter: string[] = Array.from(answer);
 
-    let accept_count = 0;
-    let streak_length = 0;
+    let acceptCount = 0;
+    let streakLength = 0;
     let score = 0;
     // Custom diffle-lang start and end should always win over coupling
     if (start) score += 1000;
@@ -52,48 +52,48 @@ export const compareWords = (answer: string, guess: string) => {
     for (let i = 0; i < path.length; i++) {
       switch (path[i]) {
         case '>':
-          accept_count++;
-          streak_length++;
-          pattern[b] = streak_length == 1 ? 2 : 3;
-          unused_letter.splice(unused_letter.indexOf(guess[b]), 1);
-          score += 3 * streak_length;
+          acceptCount++;
+          streakLength++;
+          pattern[b] = streakLength == 1 ? 2 : 3;
+          unusedLetter.splice(unusedLetter.indexOf(guess[b]), 1);
+          score += 3 * streakLength;
           a++;
           b++;
           break;
         case '+':
-          streak_length = 0;
+          streakLength = 0;
           a++;
           break;
         case '-':
-          streak_length = 0;
+          streakLength = 0;
           b++;
           break;
       }
     }
 
     // Yellow
     for (let i = 0; i < guess.length; i++) {
-      if (pattern[i] == 0 && unused_letter.includes(guess[i])) {
+      if (pattern[i] == 0 && unusedLetter.includes(guess[i])) {
         pattern[i] = 1;
-        unused_letter.splice(unused_letter.indexOf(guess[i]), 1);
+        unusedLetter.splice(unusedLetter.indexOf(guess[i]), 1);
       }
     }
 
     // If green in the middle the only marked character it turns it yellow
-    // if (accept_count == 1 && !start && !end) {
+    // if (acceptCount == 1 && !start && !end) {
     //     pattern[pattern.indexOf(2)] = 1;
     // }
 
-    if (best_score == score) {
-      best_results.push({ pattern, start, end });
-    } else if (best_score < score) {
-      best_score = score;
-      best_results = [{ pattern, start, end }];
+    if (bestScore == score) {
+      bestResults.push({ pattern, start, end });
+    } else if (bestScore < score) {
+      bestScore = score;
+      bestResults = [{ pattern, start, end }];
     }
   });
 
-  best_results.sort((a, b) => (a.pattern.join() < b.pattern.join() ? 1 : -1));
-  return best_results[0];
+  bestResults.sort((a, b) => (a.pattern.join() < b.pattern.join() ? 1 : -1));
+  return bestResults[0];
 };
 
 export default compareWords;

src/components/Charts/KeyboardHeatmapKeyCap.tsx

@@ -4,14 +4,14 @@ import CircleScale from '@components/CircleScale/CircleScale';
 
 import './KeyboardHeatmapKeyCap.scss';
 
-interface Props {
+type Props = {
   text: string,
   value: number,
   max: number,
   all: number,
   hasCircle?: boolean,
   hasTooltip?: boolean,
-}
+};
 
 function KeyboardHeatmapKeyCap({
   text,

src/components/EndResult/EndResultSummary.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Word as WordInterface, AffixStatus, GameStatus } from '@common-types';
+import { Word as WordType, AffixStatus, GameStatus } from '@common-types';
 
 import IconFancyCheck from '@components/Icons/IconFancyCheck';
 import IconFancyThumbDown from '@components/Icons/IconFancyThumbDown';
@@ -15,7 +15,7 @@ import './EndResult.scss';
 type Props = {
   status: GameStatus,
   wordToGuess: string,
-  guesses: WordInterface[],
+  guesses: WordType[],
   words: number,
   letters: number,
   subtotals: {
@@ -36,7 +36,7 @@ function EndResultSummary({
 }: Props) {
   const { t } = useTranslation();
 
-  const lostWord: WordInterface = useMemo(() => {
+  const lostWord: WordType = useMemo(() => {
     const affixes = [{
       type: AffixStatus.Incorrect,
       text: wordToGuess,

src/components/Language/LanguagePicker.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Pane as PaneInterface } from '@common-types';
+import { Pane as PaneType } from '@common-types';
 
 import { SUPPORTED_LANGS, SUPPORTED_DICTIONARY_BY_LANG } from '@const';
 
@@ -67,8 +67,8 @@ const LanguagePicker = ({ children, className, place }: Props) => {
   };
 
   const handleGoToAboutLanguage = () => {
-    if (pane !== PaneInterface.AboutLanguage) {
-      changePane(PaneInterface.AboutLanguage);
+    if (pane !== PaneType.AboutLanguage) {
+      changePane(PaneType.AboutLanguage);
     }
 
     setIsOpen(value => !value);

src/components/Panes/Help/Help.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Pane, Word as WordInterface } from '@common-types';
+import { Pane, Word as WordType } from '@common-types';
 
 import { SUPPORTED_LANGS } from '@const';
 
@@ -22,7 +22,7 @@ import HelpWords from './HelpWords';
 import './Help.scss';
 
 const Help = () => {
-  const [helpGuesses, setHelpGuesses] = useState<WordInterface[]>([]);
+  const [helpGuesses, setHelpGuesses] = useState<WordType[]>([]);
   const [isAlt, setIsAlt] = useState(false);
 
   const { t, i18n } = useTranslation();

src/components/Panes/Help/HelpWords.tsx

@@ -1,14 +1,14 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { AffixStatus, Word as WordInterface } from '@common-types';
+import { AffixStatus, Word as WordType } from '@common-types';
 
 import Word from '@components/Words/Word';
 
 import './Help.scss';
 
 type Props = {
-  helpGuesses: WordInterface[],
+  helpGuesses: WordType[],
   tEnd?: string,
 };
 

src/components/Panes/Statistics/StatisticsCard.tsx

@@ -14,12 +14,12 @@ import StatisticsCardActiveFilters from './StatisticsCardActiveFilters';
 
 import './StatisticsCard.scss';
 
-interface StatisticForCard extends StatisticDataForCard, Filters {
+type StatisticForCard = StatisticDataForCard & Filters & {
   wonStreak?: number,
   lostStreak?: number,
   bestStreak?: number,
   worstStreak?: number,
-}
+};
 
 const BREAKPOINTS = {
   LETTERS: [90, 75, 60, 45, 35, 25],

src/components/Share/SharedContent.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
-  Pane, GameStatus, GameMode, Word as WordInterface,
+  Pane, GameStatus, GameMode, Word as WordType,
 } from '@common-types';
 
 import { WORD_IS_CONSIDER_LONG_AFTER_X_LETTERS } from '@const';
@@ -43,10 +43,10 @@ import EndResultSummary from '@components/EndResult/EndResultSummary';
 
 import './SharedContent.scss';
 
-interface SharedContentResult {
+type SharedContentResult = {
   isWon: boolean,
   wordToGuess: string,
-  guesses: WordInterface[],
+  guesses: WordType[],
   hasLongGuesses: boolean,
   words: number,
   letters: number,
@@ -56,7 +56,7 @@ interface SharedContentResult {
     incorrect: number,
     typedKnownIncorrect: number,
   }
-}
+};
 
 const EMPTY_SHARED_CONTENT_RESULT = {
   isWon: false,

src/components/Words/Affix.tsx

@@ -2,13 +2,13 @@ import clsx from 'clsx';
 
 import { useSelector } from '@store';
 import { selectLetterState } from '@store/selectors';
-import { AffixStatus, Affix as AffixInterface } from '@common-types';
+import { AffixStatus, Affix as AffixType } from '@common-types';
 
 import './Affix.scss';
 
 const Affix = ({
   type, text, isStart, isEnd, hasCaretBefore, onClick,
-}: AffixInterface) => {
+}: AffixType) => {
   const keyCapType = useSelector(selectLetterState(text));
 
   const isKnownIncorrectTyped = keyCapType === AffixStatus.Incorrect;

src/components/Words/Word.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Word as WordInterface, AffixStatus } from '@common-types';
+import { Word as WordType, AffixStatus } from '@common-types';
 
 import { useDispatch } from '@store';
 import { setCaretShift } from '@store/gameSlice';
@@ -8,7 +8,7 @@ import Affix from '@components/Words/Affix';
 
 import './Words.scss';
 
-const Word = ({ guess }: { guess: WordInterface }) => {
+const Word = ({ guess }: { guess: WordType }) => {
   const dispatch = useDispatch();
 
   const handleClickGenerator = (letterIndex: number) => () => {

src/components/Words/WordSandboxLive.tsx

@@ -3,7 +3,7 @@ import {
 } from 'react';
 import clsx from 'clsx';
 
-import { Word as WordInterface, AffixStatus } from '@common-types';
+import { Word as WordType, AffixStatus } from '@common-types';
 
 import { getWordReport } from '@api/getWordReport';
 
@@ -16,7 +16,7 @@ import Word from './Word';
 
 import './WordSandboxLive.scss';
 
-const EMPY_WORD: WordInterface = {
+const EMPY_WORD: WordType = {
   word: ' ',
   affixes: [{ type: AffixStatus.New, text: ' ' }],
 };
@@ -28,7 +28,7 @@ const WordSandboxLive = () => {
   const setTimeoutDebounce = useRef<ReturnType<typeof setTimeout> | null>(null);
   const setTimeoutThrottle = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [delayedWord, setDelayedWord] = useState(wordToSubmit || ' ');
-  const [guess, setGuess] = useState<WordInterface>(EMPY_WORD);
+  const [guess, setGuess] = useState<WordType>(EMPY_WORD);
 
   useEffect(() => {
     (async () => {

src/components/Words/Words.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { Suspense, lazy, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Word as WordInterface, AffixStatus, GameMode } from '@common-types';
+import { Word as WordType, AffixStatus, GameMode } from '@common-types';
 
 import { WORD_IS_CONSIDER_LONG_AFTER_X_LETTERS } from '@const';
 
@@ -42,7 +42,7 @@ const Words = () => {
 
   const { t } = useTranslation();
 
-  const submitGuess: WordInterface = useMemo(() => {
+  const submitGuess: WordType = useMemo(() => {
     const affixes = (wordToSubmit || ' ').split('').map(letter => ({ type: AffixStatus.New, text: letter }));
 
     return {