@scrabble-solver/scrabble-solver 2.10.10 → 2.11.0

package/src/components/Solver/components/{SolveButton/SolveButton.tsx → FloatingSolveButton/FloatingSolveButton.tsx}

@@ -14,15 +14,16 @@ import {
 } from 'state';
 
 import Button from '../../../Button';
+import Spinner from '../../../Spinner';
 
-import styles from './SolveButton.module.scss';
+import styles from './FloatingSolveButton.module.scss';
 
 interface Props {
   className?: string;
   onClick?: MouseEventHandler;
 }
 
-const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) => {
+const FloatingSolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isLoading = useTypedSelector(selectIsLoading);
@@ -38,10 +39,9 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
   return (
     <Button
       aria-label={translate('results.solve')}
-      className={classNames(styles.solveButton, className)}
+      className={classNames(styles.floatingSolveButton, className)}
       disabled={isLoading || !isOutdated || !hasTiles}
-      Icon={Search}
-      iconClassName={styles.icon}
+      Icon={isLoading ? Spinner : Search}
       tooltip={translate('results.solve')}
       type="submit"
       variant="primary"
@@ -50,4 +50,4 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
   );
 };
 
-export default SolveButton;
+export default FloatingSolveButton;

package/src/components/Solver/components/FloatingSolveButton/index.ts

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

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss

@@ -1,6 +1,7 @@
 @import 'styles/mixins';
 
 .resultCandidatePicker {
+  position: relative;
   display: flex;
   gap: var(--spacing--l);
 
@@ -137,14 +138,28 @@
   }
 }
 
-.icon {
-  $size: 20px;
+.spinnerContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  width: $size;
-  height: $size;
+.loading,
+.icon {
+  width: var(--button--icon--size);
+  height: var(--button--icon--size);
   color: var(--color--inactive);
 }
 
+.loading {
+  border-color: var(--color--inactive);
+}
+
 .insert {
   flex: 0 0 auto;
 }

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -2,10 +2,12 @@ import classNames from 'classnames';
 import { FunctionComponent, HTMLProps, MouseEventHandler } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { useAppLayout } from 'hooks';
 import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
 import {
   resultsSlice,
   selectAreResultsOutdated,
+  selectIsLoading,
   selectLocale,
   selectResultCandidate,
   selectSortedResults,
@@ -14,6 +16,7 @@ import {
 } from 'state';
 
 import Button from '../../../Button';
+import Spinner from '../../../Spinner';
 import InsertButton from '../InsertButton';
 
 import styles from './ResultCandidatePicker.module.scss';
@@ -26,6 +29,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
+  const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const sortedResults = useTypedSelector(selectSortedResults);
   const results = sortedResults || [];
@@ -35,6 +39,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const isPreviousDisabled = index <= 0 || disabled;
   const isNextDisabled = index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
+  const { showFloatingSolveButton } = useAppLayout();
 
   const handleNextClick = () => {
     if (!isNextDisabled) {
@@ -87,7 +92,14 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
         {!resultCandidate && <div className={styles.word}> </div>}
 
         <div className={styles.iconContainer}>
-          <ChevronDown className={styles.icon} />
+          {showFloatingSolveButton && <ChevronDown className={styles.icon} />}
+
+          {!showFloatingSolveButton && (
+            <>
+              {isLoading && <Spinner className={styles.loading} />}
+              {!isLoading && <ChevronDown className={styles.icon} />}
+            </>
+          )}
         </div>
       </button>
 

package/src/components/Solver/components/index.ts

@@ -1,4 +1,4 @@
 export { default as EmptyState } from './EmptyState';
+export { default as FloatingSolveButton } from './FloatingSolveButton';
 export { default as InsertButton } from './InsertButton';
 export { default as ResultCandidatePicker } from './ResultCandidatePicker';
-export { default as SolveButton } from './SolveButton';

package/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,11 @@
+@import 'styles/animations';
+
+.spinner {
+  width: var(--button--icon--size);
+  height: var(--button--icon--size);
+  border: var(--border);
+  border-width: 2px;
+  border-radius: 50%;
+  border-right-color: transparent !important;
+  animation: 750ms linear infinite rotate;
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import { FunctionComponent } from 'react';
+
+import { useTranslate } from 'state';
+
+import styles from './Spinner.module.scss';
+
+interface Props {
+  className?: string;
+}
+
+const Spinner: FunctionComponent<Props> = ({ className }) => {
+  const translate = useTranslate();
+  const translation = translate('common.loading');
+
+  return <div aria-label={translation} className={classNames(styles.spinner, className)} role="status" />;
+};
+
+export default Spinner;

package/src/components/Spinner/index.ts

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

package/src/components/Tile/Tile.tsx

@@ -1,17 +1,17 @@
+import { useMergeRefs } from '@floating-ui/react';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
-import mergeRefs from 'merge-refs';
 import {
   ChangeEventHandler,
   FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
-  RefObject,
+  Ref,
   useEffect,
   useMemo,
   useRef,
 } from 'react';
 
-import { useMediaQuery } from 'hooks';
+import { useAppLayout } from 'hooks';
 import { getTileSizes, noop } from 'lib';
 import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
@@ -25,7 +25,7 @@ interface Props {
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
-  inputRef?: RefObject<HTMLInputElement>;
+  inputRef?: Ref<HTMLInputElement>;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -58,15 +58,15 @@ const Tile: FunctionComponent<Props> = ({
   onKeyDown = noop,
 }) => {
   const locale = useTypedSelector(selectLocale);
+  const { animateTile, showTilePoints } = useAppLayout();
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const ref = useRef<HTMLInputElement>(null);
-  const mergedRef = inputRef ? mergeRefs(ref, inputRef) : ref;
+  const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
   const isEmpty = !character || character === EMPTY_CELL;
-  const isLessThanXs = useMediaQuery('<xs');
-  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined' && !isLessThanXs;
+  const canShowPoints = showTilePoints && (!isEmpty || isBlank) && typeof points !== 'undefined';
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
@@ -81,7 +81,7 @@ const Tile: FunctionComponent<Props> = ({
   }, [autoFocus, ref]);
 
   useEffect(() => {
-    if (!ref.current?.parentElement || !character || isLessThanXs) {
+    if (!ref.current?.parentElement || !character || !animateTile) {
       return;
     }
 
@@ -90,7 +90,7 @@ const Tile: FunctionComponent<Props> = ({
       easing: EASE_OUT_CUBIC,
       fill: 'forwards',
     });
-  }, [character, isLessThanXs]);
+  }, [character, animateTile]);
 
   return (
     <TilePure

package/src/components/index.ts

@@ -22,9 +22,9 @@ export { default as ResultsInput } from './ResultsInput';
 export { default as SeoMessage } from './SeoMessage';
 export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
+export { default as Spinner } from './Spinner';
 export { default as SplashScreen } from './SplashScreen';
 export { default as SvgFontCss } from './SvgFontCss';
 export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
-export { default as Well } from './Well';

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
+export { default as useAppLayout } from './useAppLayout';
 export { default as useDirection } from './useDirection';
 export { default as useIsTouchDevice } from './useIsTouchDevice';
 export { default as useLanguage } from './useLanguage';

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,7 +1,24 @@
+@import 'styles/mixins';
+
 .content {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--color--white);
+  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

@@ -1,10 +1,8 @@
 import { Result } from '@scrabble-solver/types';
 import { FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useMeasure } from 'react-use';
 
-import { Modal, Results, Sizer, Well } from 'components';
-import { useMediaQuery } from 'hooks';
+import { Dictionary, Modal, Results } from 'components';
 import {
   resultsSlice,
   selectResultCandidate,
@@ -24,8 +22,6 @@ interface Props {
 const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const [sizerRef, { height, width }] = useMeasure<HTMLDivElement>();
-  const isLessThanS = useMediaQuery('<s');
   const results = useTypedSelector(selectSortedFilteredResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = (results || []).findIndex((result) => result.id === resultCandidate?.id);
@@ -34,23 +30,24 @@ 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}>
-      <Well className={styles.content}>
-        <Sizer ref={sizerRef} />
-
-        <Results callbacks={callbacks} height={height} highlightedIndex={highlightedIndex} width={width} />
-      </Well>
+      <div className={styles.content}>
+        <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} />
     </>
   );
 };