@scrabble-solver/scrabble-solver 2.11.3 → 2.11.5

package/src/components/Results/Results.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
-import { useLatest, useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 
+import { useAppLayout, useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { RESULTS_ITEM_HEIGHT } from 'parameters';
+import { BORDER_WIDTH, RESULTS_HEADER_HEIGHT, RESULTS_ITEM_HEIGHT, TEXT_INPUT_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
@@ -18,7 +18,6 @@ import {
 import EmptyState from '../EmptyState';
 import Loading from '../Loading';
 import ResultsInput from '../ResultsInput';
-import Sizer from '../Sizer';
 
 import HeaderButton from './HeaderButton';
 import Result from './Result';
@@ -35,6 +34,7 @@ interface Props {
 
 const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
   const translate = useTranslate();
+  const { resultsHeight, resultsWidth } = useAppLayout();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
   const results = useTypedSelector(selectResults);
@@ -42,12 +42,14 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
-  const [sizerRef, { height, width }] = useMeasure<HTMLDivElement>();
   const [listRef, setListRef] = useState<FixedSizeList<ResultData> | null>(null);
   const columns = useColumns();
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
   const scrollToIndexRef = useLatest(scrollToIndex);
   const hasResults = typeof error === 'undefined' && typeof results !== 'undefined';
+  const showInput = hasResults && results.length > 0 && !isOutdated;
+  const height = resultsHeight - RESULTS_HEADER_HEIGHT - (showInput ? TEXT_INPUT_HEIGHT : 0) - 2 * BORDER_WIDTH;
+  const width = resultsWidth - 2 * BORDER_WIDTH;
 
   useEffect(() => {
     // without setTimeout, the initial scrolling offset is calculated
@@ -72,8 +74,6 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
       </div>
 
       <div className={styles.content}>
-        <Sizer ref={sizerRef} />
-
         {typeof error !== 'undefined' && (
           <EmptyState className={styles.emptyState} variant="error">
             {error.message}
@@ -126,7 +126,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
         )}
       </div>
 
-      {hasResults && results.length > 0 && !isOutdated && <ResultsInput className={styles.input} />}
+      {showInput && <ResultsInput className={styles.input} />}
 
       {isLoading && <Loading />}
     </div>

package/src/components/Results/useColumns.ts

@@ -1,4 +1,4 @@
-import { useMediaQuery } from 'hooks';
+import { useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { selectLocale, useTypedSelector } from 'state';
 import { ResultColumn } from 'types';
@@ -17,10 +17,7 @@ const COLUMNS_L = [...COLUMNS_XS];
 const useColumns = (): Column[] => {
   const locale = useTypedSelector(selectLocale);
   const localeColumns = getLocaleColumns(LOCALE_FEATURES[locale]);
-  const isLessThanXs = useMediaQuery('<xs');
-  const isLessThanS = useMediaQuery('<s');
-  const isLessThanM = useMediaQuery('<m');
-  const isLessThanL = useMediaQuery('<l');
+  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL } = useMediaQueries();
 
   if (isLessThanXs) {
     return localeColumns.filter((column) => COLUMNS_XS.includes(column.id));

package/src/components/Solver/Solver.tsx

@@ -1,15 +1,12 @@
 import { Result } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
+import { FunctionComponent, memo, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { useMeasure } from 'react-use';
 
 import { useAppLayout, useIsTouchDevice } from 'hooks';
-import { BOARD_TILE_SIZE_MAX, BOARD_TILE_SIZE_MIN, BORDER_WIDTH, RACK_TILE_SIZE_MAX } from 'parameters';
 import {
   resultsSlice,
   selectAreResultsOutdated,
-  selectConfig,
   selectResultCandidate,
   selectResults,
   selectSolveError,
@@ -30,33 +27,19 @@ import styles from './Solver.module.scss';
 
 interface Props {
   className?: string;
-  height: number;
-  width: number;
   onShowResults: () => void;
 }
 
-// eslint-disable-next-line max-statements
-const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
+const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { columnWidth, componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
-    useAppLayout();
-  const config = useTypedSelector(selectConfig);
+  const { cellSize, maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const results = useTypedSelector(selectResults);
-  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
-  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
-  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const [bestResult] = results || [];
-  const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
-  const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
-  const cellSize = Math.min(cellWidth, cellHeight);
-  const cellSizeSafe = Math.min(Math.max(cellSize, BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX);
-  const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.maximumCharactersCount, RACK_TILE_SIZE_MAX);
-  const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
   const touchCallbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
@@ -110,7 +93,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
       <div className={styles.container}>
         <div className={styles.content}>
           <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            <Board cellSize={cellSizeSafe} className={styles.board} />
+            <Board cellSize={cellSize} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
@@ -125,7 +108,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
         </div>
       </div>
 
-      <div className={styles.bottomContainer} ref={bottomContainerRef}>
+      <div className={styles.bottomContainer}>
         <div className={styles.bottomContent}>
           <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
@@ -157,4 +140,4 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   );
 };
 
-export default Solver;
+export default memo(Solver);

package/src/components/Tile/Tile.module.scss

@@ -14,6 +14,7 @@
   text-transform: uppercase;
   text-align: center;
   transition: var(--transition);
+  transition-property: background-color, color, box-shadow;
   user-select: none;
 
   &.points1 {
@@ -130,7 +131,7 @@
   [dir='ltr'] & {
     top: 0;
     right: 0;
-    border-bottom-right-radius: inherit;
+    border-top-right-radius: inherit;
   }
 
   [dir='rtl'] & {

package/src/components/Tile/Tile.tsx

@@ -6,6 +6,7 @@ import {
   FunctionComponent,
   KeyboardEventHandler,
   Ref,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -68,10 +69,13 @@ const Tile: FunctionComponent<Props> = ({
   const canShowPoints = showTilePoints && (!isEmpty || isBlank) && typeof points !== 'undefined';
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
-  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
-    ref.current?.select();
-    onKeyDown(event);
-  };
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      ref.current?.select();
+      onKeyDown(event);
+    },
+    [onKeyDown],
+  );
 
   useEffect(() => {
     if (autoFocus && ref.current) {

package/src/components/index.ts

@@ -10,7 +10,6 @@ export { default as IconButton } from './IconButton';
 export { default as Key } from './Key';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
-export { default as LogoSplashScreen } from './LogoSplashScreen';
 export { default as Modal } from './Modal';
 export { default as NavButtons } from './NavButtons';
 export { default as NotFound } from './NotFound';
@@ -21,10 +20,8 @@ export { default as Radio } from './Radio';
 export { default as Results } from './Results';
 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';

package/src/hooks/index.ts

@@ -1,7 +1,13 @@
 export { default as useAppLayout } from './useAppLayout';
 export { default as useDirection } from './useDirection';
+export { default as useEffectOnce } from './useEffectOnce';
 export { default as useIsTouchDevice } from './useIsTouchDevice';
 export { default as useLanguage } from './useLanguage';
+export { default as useLatest } from './useLatest';
 export { default as useLocalStorage } from './useLocalStorage';
+export { default as useMedia } from './useMedia';
+export { default as useMediaQueries } from './useMediaQueries';
 export { default as useMediaQuery } from './useMediaQuery';
+export { default as useOnWindowResize } from './useOnWindowResize';
 export { default as usePortal } from './usePortal';
+export { default as useViewportSize } from './useViewportSize';

package/src/hooks/useAppLayout.ts

@@ -1,30 +1,80 @@
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL, SOLVER_COLUMN_WIDTH } from 'parameters';
+/* eslint-disable max-statements */
+
+import {
+  BOARD_TILE_SIZE_MAX,
+  BOARD_TILE_SIZE_MIN,
+  BORDER_WIDTH,
+  BUTTON_HEIGHT,
+  COMPONENTS_SPACING,
+  COMPONENTS_SPACING_SMALL,
+  DICTIONARY_HEIGHT,
+  DICTIONARY_HEIGHT_MOBILE,
+  LOGO_ASPECT_RATIO,
+  LOGO_HEIGHT,
+  LOGO_HEIGHT_SMALL,
+  MODAL_HEADER_HEIGHT,
+  MODAL_WIDTH,
+  NAV_PADDING,
+  RACK_TILE_SIZE_MAX,
+  SOLVER_COLUMN_WIDTH,
+} from 'parameters';
+import { selectConfig, useTypedSelector } from 'state';
 
 import useIsTouchDevice from './useIsTouchDevice';
-import useMediaQuery from './useMediaQuery';
+import useMediaQueries from './useMediaQueries';
+import useViewportSize from './useViewportSize';
 
 const useAppLayout = () => {
+  const { viewportHeight, viewportWidth } = useViewportSize();
+  const config = useTypedSelector(selectConfig);
   const isTouchDevice = useIsTouchDevice();
-  const isLessThanXs = useMediaQuery('<xs');
-  const isLessThanS = useMediaQuery('<s');
-  const isLessThanM = useMediaQuery('<m');
-  const isLessThanL = useMediaQuery('<l');
-  const isLessThanXl = useMediaQuery('<xl');
+  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl } = useMediaQueries();
+  const isBoardFullWidth = isLessThanM;
+  const showResultCandidatePicker = isLessThanL;
+  const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
   const showColumn = !isLessThanL;
+  const columnWidth = showColumn ? SOLVER_COLUMN_WIDTH : 0;
+  const logoHeight = isLessThanL ? LOGO_HEIGHT_SMALL : LOGO_HEIGHT;
+  const navHeight = 2 * NAV_PADDING + logoHeight;
+  const solverHeight = viewportHeight - navHeight;
+  const solverWidth = viewportWidth;
+  const maxBoardWidth = solverWidth - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.maximumCharactersCount, RACK_TILE_SIZE_MAX);
+  const candidatePickerHeight = showResultCandidatePicker ? BUTTON_HEIGHT + componentsSpacing : 0;
+  const bottomContainerHeight = candidatePickerHeight + tileSize + 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth
+    ? Number.POSITIVE_INFINITY
+    : Math.max(solverHeight - bottomContainerHeight, 0);
+  const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
+  const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
+  const cellSize = Math.min(Math.max(Math.min(cellWidth, cellHeight), BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX);
+  const boardSize = (cellSize + BORDER_WIDTH) * config.boardWidth + BORDER_WIDTH;
+  const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
+  const showResultsInModal = isLessThanL;
+  const dictionaryHeight = showResultsInModal ? DICTIONARY_HEIGHT_MOBILE : DICTIONARY_HEIGHT;
+  const modalWidth = isLessThanS ? viewportWidth : MODAL_WIDTH;
+  const resultsHeight = isLessThanL
+    ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
+    : boardSize - componentsSpacing - dictionaryHeight;
 
   return {
+    actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
     animateTile: !isLessThanXs,
-    columnWidth: showColumn ? SOLVER_COLUMN_WIDTH : 0,
-    componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
-    isBoardFullWidth: isLessThanM,
+    cellSize,
+    dictionaryHeight,
     isModalFullWidth: isLessThanS,
-    showColumn,
+    logoHeight,
+    logoWidth: logoHeight * LOGO_ASPECT_RATIO,
+    maxControlsWidth,
+    resultsHeight,
+    resultsWidth: isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH,
     showCompactControls: !showColumn,
     showFloatingSolveButton: isTouchDevice,
     showKeyMap: !isTouchDevice,
-    showResultsInModal: isLessThanL,
+    showResultsInModal,
     showShortNav: isLessThanS,
     showTilePoints: !isLessThanXs,
+    tileSize,
   };
 };
 

package/src/hooks/useEffectOnce.ts

@@ -0,0 +1,5 @@
+import { EffectCallback, useEffect } from 'react';
+
+const useEffectOnce = (effect: EffectCallback) => useEffect(effect, []);
+
+export default useEffectOnce;

package/src/hooks/useIsTouchDevice.ts

@@ -1,4 +1,4 @@
-import { useMedia } from 'react-use';
+import useMedia from './useMedia';
 
 const useIsTouchDevice = () => {
   return useMedia('(hover: none)', false);

package/src/hooks/useLatest.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+interface Latest<T> {
+  readonly current: T;
+}
+
+const useLatest = <T>(value: T): Latest<T> => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};
+
+export default useLatest;

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+
+import {
+  localStorage,
+  selectAutoGroupTiles,
+  selectBoard,
+  selectConfigId,
+  selectLocale,
+  selectRack,
+  useTypedSelector,
+} from 'state';
+
+const useLocalStorage = () => {
+  const autoGroupTiles = useTypedSelector(selectAutoGroupTiles);
+  const board = useTypedSelector(selectBoard);
+  const configId = useTypedSelector(selectConfigId);
+  const locale = useTypedSelector(selectLocale);
+  const rack = useTypedSelector(selectRack);
+
+  useEffect(() => {
+    if (autoGroupTiles) {
+      localStorage.setAutoGroupTiles(autoGroupTiles);
+    }
+  }, [autoGroupTiles]);
+
+  useEffect(() => {
+    if (board) {
+      localStorage.setBoard(board);
+    }
+  }, [board]);
+
+  useEffect(() => {
+    if (configId) {
+      localStorage.setConfigId(configId);
+    }
+  }, [configId]);
+
+  useEffect(() => {
+    if (locale) {
+      localStorage.setLocale(locale);
+    }
+  }, [locale]);
+
+  useEffect(() => {
+    if (rack) {
+      localStorage.setRack(rack);
+    }
+  }, [rack]);
+};
+
+export default useLocalStorage;

package/src/hooks/useMedia.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+const getInitialState = (query: string, defaultState?: boolean) => {
+  if (typeof defaultState !== 'undefined') {
+    return defaultState;
+  }
+
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  return window.matchMedia(query).matches;
+};
+
+const useMedia = (query: string, defaultState?: boolean) => {
+  const [state, setState] = useState(getInitialState(query, defaultState));
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+
+    const handleChange = () => {
+      setState(mediaQuery.matches);
+    };
+
+    setState(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return state;
+};
+
+export default useMedia;

package/src/hooks/useMediaQueries.ts

@@ -0,0 +1,13 @@
+import useMediaQuery from './useMediaQuery';
+
+const useMediaQueries = () => {
+  const isLessThanXs = useMediaQuery('<xs');
+  const isLessThanS = useMediaQuery('<s');
+  const isLessThanM = useMediaQuery('<m');
+  const isLessThanL = useMediaQuery('<l');
+  const isLessThanXl = useMediaQuery('<xl');
+
+  return { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl };
+};
+
+export default useMediaQueries;

package/src/hooks/useMediaQuery.ts

@@ -1,8 +1,9 @@
 import { buildMediaQuery } from 'include-media-query-builder';
-import { useMedia } from 'react-use';
 
 import { BREAKPOINTS } from 'parameters';
 
+import useMedia from './useMedia';
+
 const useMediaQuery = (query: string | string[], defaultState?: boolean | undefined): boolean => {
   const mediaQuery = buildMediaQuery(BREAKPOINTS, query);
   return useMedia(mediaQuery, defaultState);

package/src/hooks/useOnWindowResize.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+const useOnWindowResize = (onResize: (event: Event) => void) => {
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, [onResize]);
+};
+
+export default useOnWindowResize;

package/src/hooks/useViewportSize.ts

@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+
+import useOnWindowResize from './useOnWindowResize';
+
+const useViewportSize = () => {
+  const [viewportHeight, setViewportHeight] = useState(typeof window === 'undefined' ? 0 : window.innerHeight);
+  const [viewportWidth, setViewportWidth] = useState(typeof window === 'undefined' ? 0 : window.innerWidth);
+
+  const handleWindowResize = useCallback(() => {
+    setViewportHeight(window.innerHeight);
+    setViewportWidth(window.innerWidth);
+  }, []);
+
+  useOnWindowResize(handleWindowResize);
+
+  return { viewportHeight, viewportWidth };
+};
+
+export default useViewportSize;

package/src/i18n/constants.ts

@@ -66,6 +66,13 @@ interface Flag {
 }
 
 export const LOCALE_FLAGS: Record<Locale, Flag> = {
+  [Locale.DE_DE]: {
+    className: styles.de,
+    Icon: FlagDe,
+    label: 'Deutsch',
+    name: 'German',
+    value: Locale.DE_DE,
+  },
   [Locale.EN_GB]: {
     className: styles.gb,
     Icon: FlagGb,
@@ -80,6 +87,13 @@ export const LOCALE_FLAGS: Record<Locale, Flag> = {
     name: 'English (US)',
     value: Locale.EN_US,
   },
+  [Locale.ES_ES]: {
+    className: styles.es,
+    Icon: FlagEs,
+    label: 'Español',
+    name: 'Spanish',
+    value: Locale.ES_ES,
+  },
   [Locale.FA_IR]: {
     className: styles.fa,
     Icon: FlagFa,
@@ -94,13 +108,6 @@ export const LOCALE_FLAGS: Record<Locale, Flag> = {
     name: 'French',
     value: Locale.FR_FR,
   },
-  [Locale.DE_DE]: {
-    className: styles.de,
-    Icon: FlagDe,
-    label: 'Deutsch',
-    name: 'German',
-    value: Locale.DE_DE,
-  },
   [Locale.PL_PL]: {
     className: styles.pl,
     Icon: FlagPl,
@@ -108,11 +115,4 @@ export const LOCALE_FLAGS: Record<Locale, Flag> = {
     name: 'Polish',
     value: Locale.PL_PL,
   },
-  [Locale.ES_ES]: {
-    className: styles.es,
-    Icon: FlagEs,
-    label: 'Español',
-    name: 'Spanish',
-    value: Locale.ES_ES,
-  },
 };

package/src/i18n/de.json

@@ -21,7 +21,7 @@
   "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.",
-  "dictionary.empty-state.uninitialized": "Die Wörterbuchdefinition des letzten markierten Wortes wird hier angezeigt.",
+  "dictionary.empty-state.uninitialized": "Die Wörterbuchdéfinition wird hier angezeigt.",
   "dictionary.input.placeholder": "Durchsuche Wörterbuch...",
   "dictionary.input.title": "Durch Kommas getrennte Wörter",
   "empty-state.error": "Fehler",
@@ -46,7 +46,7 @@
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
-  "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",
+  "results.empty-state.outdated": "Ergebnisse sind alt.",
   "results.empty-state.uninitialized": "Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.",
   "results.input.placeholder": "Suchergebnisse... (RegExp)",
   "results.insert": "Hinzufügen",

package/src/i18n/en.json

@@ -21,7 +21,7 @@
   "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.",
-  "dictionary.empty-state.uninitialized": "Dictionary definition of the most recently highlighted word will be shown here.",
+  "dictionary.empty-state.uninitialized": "Word definition will be shown here.",
   "dictionary.input.placeholder": "Search dictionary...",
   "dictionary.input.title": "Comma-separated words",
   "empty-state.error": "Error",
@@ -46,7 +46,7 @@
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
   "results.empty-state.no-results": "No results - unable to generate any words.",
-  "results.empty-state.outdated": "Results are outdated. Click below to update.",
+  "results.empty-state.outdated": "Results are outdated.",
   "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",
   "results.input.placeholder": "Search results... (RegExp)",
   "results.insert": "Insert",

package/src/i18n/es.json

@@ -21,7 +21,7 @@
   "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.",
-  "dictionary.empty-state.uninitialized": "Aquí se mostrará la definición del diccionario de la última palabra resaltada.",
+  "dictionary.empty-state.uninitialized": "Aquí se mostrará la definición del diccionario.",
   "dictionary.input.placeholder": "Busca el diccionario...",
   "dictionary.input.title": "Palabras separadas por comas",
   "empty-state.error": "Error",
@@ -46,7 +46,7 @@
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
   "results.empty-state.no-results": "No hay resultados; no se pueden generar palabras",
-  "results.empty-state.outdated": "Los resultados están desactualizados. Haga clic a continuación para actualizar.",
+  "results.empty-state.outdated": "Los resultados están desactualizados.",
   "results.empty-state.uninitialized": "Aquí se mostrarán las palabras generadas a partir de sus letras.",
   "results.input.placeholder": "Busque una solución... (RegExp)",
   "results.insert": "Insertar",

package/src/i18n/fa.json

@@ -46,7 +46,7 @@
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
-  "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
+  "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز.",
   "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",
   "results.input.placeholder": "جستجو در نتایج (RegExp)",
   "results.insert": "وارد کردن",

package/src/i18n/fr.json

@@ -21,7 +21,7 @@
   "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.",
-  "dictionary.empty-state.uninitialized": "La définition dictionaire du dernier mot surligné sera affichée ici.",
+  "dictionary.empty-state.uninitialized": "La définition dictionaire sera affichée ici.",
   "dictionary.input.placeholder": "Rechercher dans le dictionnaire...",
   "dictionary.input.title": "Mots séparées par des virgules",
   "empty-state.error": "Erreur",
@@ -46,7 +46,7 @@
   "remaining-tiles": "Cases restantes",
   "results": "Résultats",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
-  "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",
+  "results.empty-state.outdated": "Les résultats sont dépassé.",
   "results.empty-state.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",
   "results.input.placeholder": "Rechercher les résultats... (RegExp)",
   "results.insert": "Inserer",