@scrabble-solver/scrabble-solver 2.10.11 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.11",
+  "version": "2.11.0",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -28,21 +28,21 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.19.2",
+    "@floating-ui/react": "^0.20.1",
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.10.11",
-    "@scrabble-solver/constants": "^2.10.11",
-    "@scrabble-solver/dictionaries": "^2.10.11",
-    "@scrabble-solver/logger": "^2.10.11",
-    "@scrabble-solver/solver": "^2.10.11",
-    "@scrabble-solver/types": "^2.10.11",
-    "@scrabble-solver/word-definitions": "^2.10.11",
+    "@scrabble-solver/configs": "^2.11.0",
+    "@scrabble-solver/constants": "^2.11.0",
+    "@scrabble-solver/dictionaries": "^2.11.0",
+    "@scrabble-solver/logger": "^2.11.0",
+    "@scrabble-solver/solver": "^2.11.0",
+    "@scrabble-solver/types": "^2.11.0",
+    "@scrabble-solver/word-definitions": "^2.11.0",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^13.2.1",
+    "next": "^13.2.4",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -74,8 +74,8 @@
     "@types/redux-saga": "^0.10.5",
     "@types/uuid": "^9.0.1",
     "env-cmd": "^10.1.0",
-    "sass": "^1.58.3",
+    "sass": "^1.59.2",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "b070bc7baa92d64a480fd457ad8cc757af51efc0"
+  "gitHead": "493dd931e7f16c34c425295a0f048756d6c192c8"
 }

package/src/components/Board/components/Cell/Cell.module.scss

@@ -112,6 +112,7 @@
     font-size: 60%;
     font-weight: bold;
     color: var(--color--white);
+    transition: var(--transition);
     content: ' ';
 
     [lang='fa-IR'] & {

package/src/components/Board/hooks/useGrid.ts

@@ -333,7 +333,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, dispatch, locale, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, dispatch, locale, moveFocus, onDirectionToggle, rows]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

package/src/components/Dictionary/Dictionary.module.scss

@@ -1,15 +1,26 @@
 .dictionary {
   position: relative;
+  max-height: var(--dictionary--height);
   height: var(--dictionary--height);
   overflow-y: auto;
   word-break: break-word;
   transition: var(--transition);
+
+  &.isAllowed {
+    background-color: var(--color--green--light);
+  }
+
+  &.isNotAllowed {
+    background-color: var(--color--red--light);
+  }
 }
 
 .result {
   transition: var(--transition);
 
   &.isAllowed {
+    background-color: var(--color--green--light);
+
     & + & {
       .content {
         padding-top: 0;
@@ -18,6 +29,8 @@
   }
 
   &.isNotAllowed {
+    background-color: var(--color--red--light);
+
     & + & {
       .content {
         padding-top: 0;
@@ -37,14 +50,6 @@
   text-transform: uppercase;
 }
 
-.isAllowed {
-  background-color: var(--color--green--light);
-}
-
-.isNotAllowed {
-  background-color: var(--color--red--light);
-}
-
 .definitions {
   margin: 0;
 

package/src/components/Dictionary/Dictionary.tsx

@@ -16,18 +16,18 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
   const { results, isLoading } = useTypedSelector(selectDictionary);
   const error = useTypedSelector(selectDictionaryError);
-  const isFirstAllowed = results.length > 0 ? results[0].isAllowed : undefined;
+  const isLastAllowed = results.length > 0 ? results[results.length - 1].isAllowed : undefined;
 
   return (
     <div
       className={classNames(styles.dictionary, className, {
-        [styles.isAllowed]: isFirstAllowed === true,
-        [styles.isNotAllowed]: isFirstAllowed === false,
+        [styles.isAllowed]: isLastAllowed === true,
+        [styles.isNotAllowed]: isLastAllowed === false,
       })}
     >
-      {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
+      {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 
-      {typeof error === 'undefined' && results.length === 0 && (
+      {typeof error === 'undefined' && !isLoading && results.length === 0 && (
         <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
       )}
 

package/src/components/Loading/Loading.tsx

@@ -29,7 +29,7 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const content = useMemo(() => prepareContent(message), [message]);
 
   return (
-    <div className={classNames(styles.loading, className)}>
+    <div aria-label={translation} className={classNames(styles.loading, className)} role="status">
       <div className={styles.dim} />
       <div className={styles.logo}>
         <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />

package/src/components/Modal/Modal.module.scss

@@ -115,7 +115,6 @@
   position: relative;
   flex: 1;
   min-height: 0;
-  margin-top: calc(-1 * var(--spacing--l));
   padding: var(--spacing--l);
   overflow: auto;
 }

package/src/components/NavButtons/NavButtons.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { useIsTouchDevice, useMediaQuery } from 'hooks';
+import { useAppLayout } from 'hooks';
 import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
@@ -30,10 +30,9 @@ const NavButtons: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
-  const isTouchDevice = useIsTouchDevice();
-  const isLessThanS = useMediaQuery('<s');
+  const { showKeyMap, showShortNav } = useAppLayout();
 
-  if (isLessThanS) {
+  if (showShortNav) {
     return (
       <div className={styles.navButtons}>
         <div className={styles.group}>
@@ -114,7 +113,7 @@ const NavButtons: FunctionComponent<Props> = ({
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        {!isTouchDevice && (
+        {showKeyMap && (
           <IconButton
             aria-label={translate('keyMap')}
             className={styles.button}

package/src/components/Results/Results.module.scss

@@ -21,8 +21,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   flex: 1;
   position: relative;
   height: 100%;
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 .listContainer {
@@ -45,6 +43,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: space-between;
   font-weight: 700;
+  border-bottom: var(--border);
 }
 
 .headerButton {
@@ -173,3 +172,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   width: $size;
   height: $size;
 }
+
+.input {
+  border-top: var(--border);
+}

package/src/components/Results/Results.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
+import { useLatest, useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 
 import { LOCALE_FEATURES } from 'i18n';
@@ -30,10 +30,11 @@ import useColumns from './useColumns';
 
 interface Props {
   callbacks: ResultCallbacks;
+  className?: string;
   highlightedIndex?: number;
 }
 
-const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
+const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
@@ -48,23 +49,26 @@ const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
   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 filteredResults !== 'undefined' && typeof allResults !== 'undefined';
 
   useEffect(() => {
     // without setTimeout, the initial scrolling offset is calculated
     // incorrectly, as the list is not fully rendered by the browser yet
     const timeout = globalThis.setTimeout(() => {
       if (listRef) {
-        listRef.scrollToItem(scrollToIndex, 'center');
+        listRef.scrollToItem(scrollToIndexRef.current, 'center');
       }
     }, 0);
 
     return () => {
       globalThis.clearTimeout(timeout);
     };
-  }, [listRef, scrollToIndex]);
+  }, [allResults, listRef, scrollToIndexRef]);
 
   return (
-    <div className={styles.results}>
+    <div className={classNames(styles.results, className)}>
       <div className={styles.header}>
         {columns.map((column) => (
           <HeaderButton column={column} key={column.id} />
@@ -88,9 +92,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
           </EmptyState>
         )}
 
-        {typeof error === 'undefined' &&
-          typeof filteredResults !== 'undefined' &&
-          typeof allResults !== 'undefined' && (
+        {hasResults && (
           <>
             {isOutdated && (
               <EmptyState className={styles.emptyState} variant="info">
@@ -138,9 +140,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
         )}
       </div>
 
-      {typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined' && (
-        <>{allResults.length > 0 && !isOutdated && <ResultsInput />}</>
-      )}
+      {hasResults && allResults.length > 0 && !isOutdated && <ResultsInput className={styles.input} />}
 
       {isLoading && <Loading />}
     </div>

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

@@ -114,6 +114,7 @@
 
   position: fixed;
   bottom: var(--spacing);
+  z-index: 1;
 
   @include media('<xs') {
     --spacing: var(--spacing--m);

package/src/components/Solver/Solver.tsx

@@ -4,15 +4,8 @@ import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useMeasure } from 'react-use';
 
-import { useIsTouchDevice, useMediaQuery } from 'hooks';
-import {
-  BOARD_TILE_SIZE_MAX,
-  BOARD_TILE_SIZE_MIN,
-  BORDER_WIDTH,
-  COMPONENTS_SPACING,
-  COMPONENTS_SPACING_SMALL,
-  RACK_TILE_SIZE_MAX,
-} from 'parameters';
+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,
@@ -32,7 +25,7 @@ import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
 
-import { EmptyState, ResultCandidatePicker, SolveButton } from './components';
+import { EmptyState, FloatingSolveButton, ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -47,14 +40,12 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
+  const { componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
+    useAppLayout();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
   const [columnRef, { width: columnWidth }] = useMeasure<HTMLDivElement>();
-  const isLessThanXl = useMediaQuery('<xl');
-  const isLessThanL = useMediaQuery('<l');
-  const isLessThanM = useMediaQuery('<m');
-  const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
-  const maxBoardWidth = width - columnWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
-  const maxBoardHeight = Math.max(height - bottomContainerHeight, isLessThanM ? Number.POSITIVE_INFINITY : 0);
+  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const config = useTypedSelector(selectConfig);
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
@@ -107,24 +98,20 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const handleSubmit = (event: SyntheticEvent) => {
     event.preventDefault();
 
-    if (isLessThanL) {
-      onShowResults();
-    }
-
     dispatch(solveSlice.actions.submit());
   };
 
   useEffect(() => {
-    if (isLessThanL && bestResult && !isOutdated) {
+    if (showCompactControls && bestResult && !isOutdated) {
       dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
     }
-  }, [bestResult, dispatch, isLessThanL, isOutdated]);
+  }, [bestResult, dispatch, showCompactControls, isOutdated]);
 
   return (
     <div className={classNames(styles.solver, className)}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <form className={styles.boardContainer} onSubmit={handleSubmit}>
+          <form id="a" className={styles.boardContainer} onSubmit={handleSubmit}>
             <Board cellSize={cellSizeSafe} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
@@ -142,12 +129,12 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form onSubmit={handleSubmit}>
+          <form id="b" onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          {isLessThanL && (
+          {showCompactControls && (
             <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
               <ResultCandidatePicker onResultClick={onShowResults} />
 
@@ -167,7 +154,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
         </div>
       </div>
 
-      {isTouchDevice && <SolveButton className={styles.solve} onClick={handleSubmit} />}
+      {showFloatingSolveButton && <FloatingSolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

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

@@ -0,0 +1,7 @@
+@import 'styles/animations';
+
+.floatingSolveButton {
+  padding: var(--spacing--l);
+  border-radius: 50%;
+  box-shadow: var(--box-shadow) !important;
+}

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

@@ -11,7 +11,7 @@ import {
   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';
@@ -58,6 +58,7 @@ 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]);
@@ -65,8 +66,7 @@ const Tile: FunctionComponent<Props> = ({
   const ref = useRef<HTMLInputElement>(null);
   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,6 +22,7 @@ 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';

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';