@scrabble-solver/scrabble-solver 2.10.11 → 2.11.0

package/src/hooks/useAppLayout.ts

@@ -0,0 +1,29 @@
+import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL } from 'parameters';
+
+import useIsTouchDevice from './useIsTouchDevice';
+import useMediaQuery from './useMediaQuery';
+
+const useAppLayout = () => {
+  const isTouchDevice = useIsTouchDevice();
+  const isLessThanXs = useMediaQuery('<xs');
+  const isLessThanS = useMediaQuery('<s');
+  const isLessThanM = useMediaQuery('<m');
+  const isLessThanL = useMediaQuery('<l');
+  const isLessThanXl = useMediaQuery('<xl');
+  const showColumn = !isLessThanL;
+
+  return {
+    animateTile: !isLessThanXs,
+    componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
+    isBoardFullWidth: isLessThanM,
+    showColumn,
+    showCompactControls: !showColumn,
+    showFloatingSolveButton: isTouchDevice,
+    showKeyMap: !isTouchDevice,
+    showResultsInModal: isLessThanL,
+    showShortNav: isLessThanS,
+    showTilePoints: !isLessThanXs,
+  };
+};
+
+export default useAppLayout;

package/src/i18n/de.json

@@ -17,6 +17,7 @@
   "common.vowels": "Vokale",
   "common.word": "Wort",
   "common.words": "Wörter",
+  "dictionary": "Wörterbuch",
   "dictionary.empty-state.no-definitions": "Wort existiert im Wörterbuch aber hat keine Definition.",
   "dictionary.empty-state.no-results": "Wort kann nicht im Wörterbuch gefunden werden.",
   "dictionary.empty-state.not-allowed": "Dieses Wort ist nicht erlaubt.",

package/src/i18n/en.json

@@ -17,6 +17,7 @@
   "common.vowels": "Vowels",
   "common.word": "Word",
   "common.words": "Words",
+  "dictionary": "Dictionary",
   "dictionary.empty-state.no-definitions": "Word exists in the dictionary but it does not have a definition.",
   "dictionary.empty-state.no-results": "Unable to find word definition in the dictionary.",
   "dictionary.empty-state.not-allowed": "This word is not allowed.",

package/src/i18n/es.json

@@ -17,6 +17,7 @@
   "common.vowels": "Vocales",
   "common.word": "Palabra",
   "common.words": "Palabras",
+  "dictionary": "Diccionario",
   "dictionary.empty-state.no-definitions": "La palabra existe en el diccionario pero no tiene una definición.",
   "dictionary.empty-state.no-results": "No se puede encontrar la definición de palabra en el diccionario.",
   "dictionary.empty-state.not-allowed": "Esta palabra no es aceptable.",

package/src/i18n/fa.json

@@ -17,6 +17,7 @@
   "common.vowels": "حروف مصوت",
   "common.word": "کلمه",
   "common.words": "کلمات",
+  "dictionary": "فرهنگ لغت",
   "dictionary.empty-state.no-definitions": "کلمه در فرهنگ لغت وجود دارد، ولی معنایی برای آن ثبت نشده است.",
   "dictionary.empty-state.no-results": "کلمه در فرهنگ لغت یافت نشد.",
   "dictionary.empty-state.not-allowed": "این کلمه مجاز نیست.",

package/src/i18n/fr.json

@@ -17,6 +17,7 @@
   "common.vowels": "Voyelles",
   "common.word": "Mot",
   "common.words": "Mots",
+  "dictionary": "Dictionnaire",
   "dictionary.empty-state.no-definitions": "Le mot existe dans le dictionary mais n'a pas de définition.",
   "dictionary.empty-state.no-results": "Impossible de trouver une définition pour ce mot dans le dictionaire.",
   "dictionary.empty-state.not-allowed": "Ce mot n'est pas pas acceptable.",

package/src/i18n/index.ts

@@ -1,2 +1,2 @@
-export { default } from './i18n';
 export * from './constants';
+export { default } from './i18n';

package/src/i18n/pl.json

@@ -17,6 +17,7 @@
   "common.vowels": "Samogłoski",
   "common.word": "Słowo",
   "common.words": "Słowa",
+  "dictionary": "Słownik",
   "dictionary.empty-state.no-definitions": "Słowo istnieje w słowniku ale nie posiada definicji.",
   "dictionary.empty-state.no-results": "Nie udało się znaleźć definicji słowa w słowniku.",
   "dictionary.empty-state.not-allowed": "To słowo nie jest dopuszczalne w grach.",

package/src/modals/DictionaryModal/DictionaryModal.module.scss

@@ -0,0 +1,18 @@
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color--background--element);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
+}
+
+.dictionary {
+  flex: 1;
+  border-bottom: var(--border);
+  max-height: initial;
+}
+
+.dictionaryInput {
+  flex: 0 0 auto;
+}

package/src/modals/DictionaryModal/DictionaryModal.tsx

@@ -0,0 +1,27 @@
+import { FunctionComponent } from 'react';
+
+import { Dictionary, DictionaryInput, Modal } from 'components';
+import { useTranslate } from 'state';
+
+import styles from './DictionaryModal.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const DictionaryModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+  const translate = useTranslate();
+
+  return (
+    <Modal className={className} isOpen={isOpen} title={translate('dictionary')} onClose={onClose}>
+      <div className={styles.content}>
+        <Dictionary className={styles.dictionary} />
+        <DictionaryInput className={styles.dictionaryInput} />
+      </div>
+    </Modal>
+  );
+};
+
+export default DictionaryModal;

package/src/modals/DictionaryModal/index.ts

@@ -0,0 +1 @@
+export { default } from './DictionaryModal';

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 
 import { Button, Modal } from 'components';
-import { CardChecklist, Cog, Github, Sack } from 'icons';
+import { BookHalf, CardChecklist, Cog, Github, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { useTranslate } from 'state';
 
@@ -11,6 +11,7 @@ interface Props {
   className?: string;
   isOpen: boolean;
   onClose: () => void;
+  onShowDictionary: () => void;
   onShowRemainingTiles: () => void;
   onShowSettings: () => void;
   onShowWords: () => void;
@@ -20,6 +21,7 @@ const Menu: FunctionComponent<Props> = ({
   className,
   isOpen,
   onClose,
+  onShowDictionary,
   onShowRemainingTiles,
   onShowSettings,
   onShowWords,
@@ -41,6 +43,10 @@ const Menu: FunctionComponent<Props> = ({
         {translate('words')}
       </Button>
 
+      <Button aria-label={translate('dictionary')} className={styles.button} Icon={BookHalf} onClick={onShowDictionary}>
+        {translate('dictionary')}
+      </Button>
+
       <Button.Link
         aria-label={translate('github')}
         className={styles.button}

package/src/modals/ResultsModal/ResultsModal.module.scss

@@ -1,6 +1,24 @@
+@import 'styles/mixins';
+
 .content {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
+  gap: var(--spacing--l);
+}
+
+.results {
+  flex: 1;
+}
+
+.dictionary {
+  flex: 0 0 calc(var(--dictionary--height) - var(--text-input--height));
+  background-color: var(--color--background--element);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
+
+  @media (max-height: 600px) {
+    display: none;
+  }
 }

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,8 +2,7 @@ import { Result } from '@scrabble-solver/types';
 import { FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Modal, Results } from 'components';
-import { useMediaQuery } from 'hooks';
+import { Dictionary, Modal, Results } from 'components';
 import {
   resultsSlice,
   selectResultCandidate,
@@ -23,7 +22,6 @@ interface Props {
 const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const isLessThanS = useMediaQuery('<s');
   const results = useTypedSelector(selectSortedFilteredResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = (results || []).findIndex((result) => result.id === resultCandidate?.id);
@@ -32,20 +30,23 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   const callbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
-        dispatch(resultsSlice.actions.changeResultCandidate(result));
+        const isSelected = result === resultCandidate;
 
-        if (isLessThanS) {
+        if (isSelected) {
           onClose();
+        } else {
+          dispatch(resultsSlice.actions.changeResultCandidate(result));
         }
       },
     }),
-    [dispatch, isLessThanS, onClose],
+    [dispatch, onClose, resultCandidate],
   );
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('results')} onClose={onClose}>
       <div className={styles.content}>
-        <Results callbacks={callbacks} highlightedIndex={highlightedIndex} />
+        <Results callbacks={callbacks} className={styles.results} highlightedIndex={highlightedIndex} />
+        <Dictionary className={styles.dictionary} />
       </div>
     </Modal>
   );

package/src/modals/index.ts

@@ -1,3 +1,4 @@
+export { default as DictionaryModal } from './DictionaryModal';
 export { default as KeyMapModal } from './KeyMapModal';
 export { default as MenuModal } from './MenuModal';
 export { default as RemainingTilesModal } from './RemainingTilesModal';

package/src/pages/api/solve.ts

@@ -57,30 +57,29 @@ const parseRequest = (request: NextApiRequest): RequestData => {
     throw new Error('Invalid "configId" parameter');
   }
 
-  const config = getLocaleConfig(configId, locale);
-
-  if (!isBoardJson(boardJson) || !isBoardValid(boardJson, config)) {
-    throw new Error('Invalid "board" parameter');
-  }
-
   if (!isStringArray(characters) || characters.length === 0) {
     throw new Error('Invalid "characters" parameter');
   }
 
+  const config = getLocaleConfig(configId, locale);
+
   for (const character of characters) {
     if (!config.hasCharacter(character) && character !== BLANK) {
       throw new Error('Invalid "characters" parameter');
     }
   }
-
-  const board = Board.fromJson(boardJson);
-  const blankTilesCount = characters.filter((character) => character === BLANK).length;
-  const blanksCount = board.getBlanksCount() + blankTilesCount;
+  const blanksCount = characters.filter((character) => character === BLANK).length;
 
   if (blanksCount > config.blanksCount) {
     throw new Error('Too many blank tiles passed');
   }
 
+  if (!isBoardJson(boardJson) || !isBoardValid(boardJson, config)) {
+    throw new Error('Invalid "board" parameter');
+  }
+
+  const board = Board.fromJson(boardJson);
+
   return {
     board,
     characters,

package/src/pages/index.tsx

@@ -1,18 +1,26 @@
 import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import { AnimationEvent, FunctionComponent, useEffect, useState } from 'react';
+import { FunctionComponent, useEffect, useState } from 'react';
 import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce, useMeasure } from 'react-use';
 
 import { Logo, LogoSplashScreen, NavButtons, Solver, SvgFontFix } from 'components';
-import { useDirection, useLanguage, useLocalStorage, useMediaQuery } from 'hooks';
+import { useAppLayout, useDirection, useLanguage, useLocalStorage } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { KeyMapModal, MenuModal, RemainingTilesModal, ResultsModal, SettingsModal, WordsModal } from 'modals';
+import {
+  DictionaryModal,
+  KeyMapModal,
+  MenuModal,
+  RemainingTilesModal,
+  ResultsModal,
+  SettingsModal,
+  WordsModal,
+} from 'modals';
 import { INITIALIZATION_DURATION } from 'parameters';
 import { registerServiceWorker } from 'serviceWorkerManager';
-import { initialize, localStorage, reset, selectLocale, useTypedSelector } from 'state';
+import { initialize, reset, selectLocale, useTypedSelector } from 'state';
 
 import styles from './index.module.scss';
 
@@ -26,7 +34,8 @@ interface Props {
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
-  const isLessThanL = useMediaQuery('<l');
+  const { showResultsInModal } = useAppLayout();
+  const [showDictionary, setShowDictionary] = useState(false);
   const [showKeyMap, setShowKeyMap] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
   const [showRemainingTiles, setShowRemainingTiles] = useState(false);
@@ -44,13 +53,6 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     dispatch(reset());
   };
 
-  const handleSplashAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget && !localStorage.getHasVisited()) {
-      setShowSettings(true);
-      localStorage.setHasVisited(true);
-    }
-  };
-
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
   useLocalStorage();
@@ -65,10 +67,10 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   });
 
   useEffect(() => {
-    if (!isLessThanL) {
+    if (!showResultsInModal) {
       setShowResults(false);
     }
-  }, [isLessThanL]);
+  }, [showResultsInModal]);
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
@@ -115,6 +117,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
       <MenuModal
         isOpen={showMenu}
         onClose={() => setShowMenu(false)}
+        onShowDictionary={() => setShowDictionary(true)}
         onShowRemainingTiles={() => setShowRemainingTiles(true)}
         onShowSettings={() => setShowSettings(true)}
         onShowWords={() => setShowWords(true)}
@@ -130,7 +133,9 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
       <ResultsModal isOpen={showResults} onClose={() => setShowResults(false)} />
 
-      <LogoSplashScreen forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />
+      <DictionaryModal isOpen={showDictionary} onClose={() => setShowDictionary(false)} />
+
+      <LogoSplashScreen forceShow={!isInitialized} />
     </>
   );
 };

package/src/state/localStorage.ts

@@ -3,7 +3,6 @@ import store2 from 'store2';
 
 const BOARD = 'board';
 const CONFIG_ID = 'config-id';
-const HAS_VISITED = 'has-visited';
 const LOCALE = 'locale';
 const RACK = 'rack';
 
@@ -28,14 +27,6 @@ const localStorage = {
     store.set(CONFIG_ID, configId, true);
   },
 
-  getHasVisited(): boolean {
-    return Boolean(store.get(HAS_VISITED));
-  },
-
-  setHasVisited(hasVisited: boolean): void {
-    store.set(HAS_VISITED, hasVisited, true);
-  },
-
   getLocale(): Locale | undefined {
     return store.get(LOCALE);
   },

package/src/styles/animations.scss

@@ -28,6 +28,16 @@
   }
 }
 
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 @keyframes pulse {
   0% {
     transform: scale(1);

package/src/styles/global.scss

@@ -54,5 +54,5 @@ h4 {
 
 [lang='fa-IR'] {
   --font--family: 'Vazirmatn', sans-serif;
-  --font--family--title: 'Vazirmatn', sans-serif;
+  --font--family--title: var(--font--family);
 }

package/src/styles/variables.scss

@@ -86,10 +86,10 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --z-index--close-button: 101;
   --z-index--tooltip: 102;
 
+  --button--icon--size: 24px;
   --dictionary--height: 260px;
   --modal--width: 370px;
   --solver-column--width: 580px;
   --square-button--size: 32px;
-  --button--icon--size: 24px;
   --text-input--height: 40px;
 }

package/src/types/index.ts

@@ -50,6 +50,7 @@ export type TranslationKey =
   | 'common.vowels'
   | 'common.word'
   | 'common.words'
+  | 'dictionary'
   | 'dictionary.empty-state.no-definitions'
   | 'dictionary.empty-state.no-results'
   | 'dictionary.empty-state.not-allowed'

package/.next/server/font-loader-manifest.js

@@ -1 +0,0 @@
-self.__FONT_LOADER_MANIFEST={pages:{},app:{},appUsingSizeAdjust:!1,pagesUsingSizeAdjust:!1};