@scrabble-solver/scrabble-solver 2.10.10 → 2.10.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.10",
+  "version": "2.10.11",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -32,17 +32,16 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.10.10",
-    "@scrabble-solver/constants": "^2.10.10",
-    "@scrabble-solver/dictionaries": "^2.10.10",
-    "@scrabble-solver/logger": "^2.10.10",
-    "@scrabble-solver/solver": "^2.10.10",
-    "@scrabble-solver/types": "^2.10.10",
-    "@scrabble-solver/word-definitions": "^2.10.10",
+    "@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",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "merge-refs": "^1.1.2",
     "next": "^13.2.1",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
@@ -78,5 +77,5 @@
     "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "42551ac84b78ed24543230c19b861e1543f7a50a"
+  "gitHead": "b070bc7baa92d64a480fd457ad8cc757af51efc0"
 }

package/src/components/Dictionary/Dictionary.tsx

@@ -27,7 +27,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
     >
       {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
 
-      {results.length === 0 && (
+      {typeof error === 'undefined' && results.length === 0 && (
         <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
       )}
 

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

@@ -7,6 +7,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   flex-direction: column;
   height: 100%;
+  background: var(--color--background--element);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
   font-family: var(--font--family--title);
 }
 
@@ -14,8 +17,20 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   flex: 1;
 }
 
+.content {
+  flex: 1;
+  position: relative;
+  height: 100%;
+  border-top: var(--border);
+  border-bottom: var(--border);
+}
+
+.listContainer {
+  position: absolute;
+  top: 0;
+}
+
 .list {
-  flex: 1 1 auto;
   transition: var(--transition);
 
   &.outdated {
@@ -29,7 +44,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: var(--border);
   font-weight: 700;
 }
 
@@ -159,7 +173,3 @@ $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,9 +1,10 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
+import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 
 import { LOCALE_FEATURES } from 'i18n';
-import { BORDER_WIDTH, RESULTS_HEADER_HEIGHT, RESULTS_INPUT_HEIGHT, RESULTS_ITEM_HEIGHT } from 'parameters';
+import { RESULTS_ITEM_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
@@ -18,6 +19,7 @@ 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';
@@ -28,12 +30,10 @@ import useColumns from './useColumns';
 
 interface Props {
   callbacks: ResultCallbacks;
-  height: number;
   highlightedIndex?: number;
-  width: number;
 }
 
-const Results: FunctionComponent<Props> = ({ callbacks, height, highlightedIndex, width }) => {
+const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
@@ -44,6 +44,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, height, highlightedIndex
   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;
@@ -70,65 +71,75 @@ const Results: FunctionComponent<Props> = ({ callbacks, height, highlightedIndex
         ))}
       </div>
 
-      {typeof error !== 'undefined' && (
-        <EmptyState className={styles.emptyState} variant="error">
-          {error.message}
-        </EmptyState>
-      )}
-
-      {typeof error === 'undefined' && typeof filteredResults === 'undefined' && (
-        <EmptyState className={styles.emptyState} variant="info">
-          {translate('results.empty-state.uninitialized')}
-
-          <SolveButton className={styles.solveButton} />
-        </EmptyState>
-      )}
+      <div className={styles.content}>
+        <Sizer ref={sizerRef} />
+
+        {typeof error !== 'undefined' && (
+          <EmptyState className={styles.emptyState} variant="error">
+            {error.message}
+          </EmptyState>
+        )}
+
+        {typeof error === 'undefined' && typeof filteredResults === 'undefined' && (
+          <EmptyState className={styles.emptyState} variant="info">
+            {translate('results.empty-state.uninitialized')}
+
+            <SolveButton className={styles.solveButton} />
+          </EmptyState>
+        )}
+
+        {typeof error === 'undefined' &&
+          typeof filteredResults !== 'undefined' &&
+          typeof allResults !== 'undefined' && (
+          <>
+            {isOutdated && (
+              <EmptyState className={styles.emptyState} variant="info">
+                {translate('results.empty-state.outdated')}
+
+                <SolveButton className={styles.solveButton} />
+              </EmptyState>
+            )}
+
+            {!isOutdated && (
+              <>
+                {allResults.length === 0 && (
+                  <EmptyState className={styles.emptyState} variant="warning">
+                    {translate('results.empty-state.no-results')}
+                  </EmptyState>
+                )}
+
+                {allResults.length > 0 && filteredResults.length === 0 && (
+                  <EmptyState className={styles.emptyState} variant="info">
+                    {translate('results.empty-state.no-filtered-results')}
+                  </EmptyState>
+                )}
+
+                {allResults.length > 0 && filteredResults.length > 0 && (
+                  <div className={styles.listContainer}>
+                    <FixedSizeList
+                      className={classNames(styles.list, {
+                        [styles.outdated]: isOutdated,
+                      })}
+                      direction={direction}
+                      height={height}
+                      itemCount={filteredResults.length}
+                      itemData={itemData}
+                      itemSize={RESULTS_ITEM_HEIGHT}
+                      ref={setListRef}
+                      width={width}
+                    >
+                      {Result}
+                    </FixedSizeList>
+                  </div>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
 
       {typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined' && (
-        <>
-          {isOutdated && (
-            <EmptyState className={styles.emptyState} variant="info">
-              {translate('results.empty-state.outdated')}
-
-              <SolveButton className={styles.solveButton} />
-            </EmptyState>
-          )}
-
-          {!isOutdated && (
-            <>
-              {allResults.length === 0 && (
-                <EmptyState className={styles.emptyState} variant="warning">
-                  {translate('results.empty-state.no-results')}
-                </EmptyState>
-              )}
-
-              {allResults.length > 0 && filteredResults.length === 0 && (
-                <EmptyState className={styles.emptyState} variant="info">
-                  {translate('results.empty-state.no-filtered-results')}
-                </EmptyState>
-              )}
-
-              {allResults.length > 0 && filteredResults.length > 0 && (
-                <FixedSizeList
-                  className={classNames(styles.list, {
-                    [styles.outdated]: isOutdated,
-                  })}
-                  direction={direction}
-                  height={height - RESULTS_HEADER_HEIGHT - RESULTS_INPUT_HEIGHT - 2 * BORDER_WIDTH}
-                  itemCount={filteredResults.length}
-                  itemData={itemData}
-                  itemSize={RESULTS_ITEM_HEIGHT}
-                  ref={setListRef}
-                  width={width}
-                >
-                  {Result}
-                </FixedSizeList>
-              )}
-
-              {allResults.length > 0 && <ResultsInput className={styles.input} />}
-            </>
-          )}
-        </>
+        <>{allResults.length > 0 && !isOutdated && <ResultsInput />}</>
       )}
 
       {isLoading && <Loading />}

package/src/components/ResultsInput/ResultsInput.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ChangeEvent, FunctionComponent, useState } from 'react';
+import { ChangeEvent, FormEventHandler, FunctionComponent, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { isRegExp } from 'lib';
@@ -27,8 +27,12 @@ const ResultsInput: FunctionComponent<Props> = ({ className }) => {
     }
   };
 
+  const handleSubmit: FormEventHandler = (event) => {
+    event.preventDefault();
+  };
+
   return (
-    <form className={classNames(styles.resultsInput, className)}>
+    <form className={classNames(styles.resultsInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
         placeholder={translate('results.input.placeholder')}

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

@@ -32,6 +32,7 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) var(--solver-column--width);
   gap: var(--spacing);
+  height: 100%;
   margin: 0 auto;
 
   @include media('<l') {
@@ -62,17 +63,17 @@
   }
 }
 
-.resultsContainer {
-  flex: 1;
-  position: relative;
-}
-
-.dictionary {
+.dictionaryContainer {
+  flex: 0 0 auto;
+  height: var(--dictionary--height);
   display: flex;
   flex-direction: column;
+  background-color: var(--color--background--element);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
 }
 
-.dictionaryOutput {
+.dictionary {
   flex: 1;
   border-bottom: var(--border);
 }

package/src/components/Solver/Solver.tsx

@@ -9,10 +9,8 @@ import {
   BOARD_TILE_SIZE_MAX,
   BOARD_TILE_SIZE_MIN,
   BORDER_WIDTH,
-  COLUMN_MIN_HEIGHT,
   COMPONENTS_SPACING,
   COMPONENTS_SPACING_SMALL,
-  DICTIONARY_HEIGHT,
   RACK_TILE_SIZE_MAX,
 } from 'parameters';
 import {
@@ -33,7 +31,6 @@ import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
-import Well from '../Well';
 
 import { EmptyState, ResultCandidatePicker, SolveButton } from './components';
 import styles from './Solver.module.scss';
@@ -51,17 +48,13 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
-  const [resultsContainerRef, { width: resultsContainerWidth }] = 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 - resultsContainerWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
-  const maxBoardHeight = Math.max(
-    height - bottomContainerHeight,
-    isLessThanL ? 0 : COLUMN_MIN_HEIGHT,
-    isLessThanM ? Number.POSITIVE_INFINITY : 0,
-  );
+  const maxBoardWidth = width - columnWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
+  const maxBoardHeight = Math.max(height - bottomContainerHeight, isLessThanM ? Number.POSITIVE_INFINITY : 0);
   const config = useTypedSelector(selectConfig);
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
@@ -74,8 +67,6 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   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 boardSize = (cellSizeSafe + BORDER_WIDTH) * Math.max(config.boardWidth, config.boardHeight) + BORDER_WIDTH;
-  const resultsHeight = boardSize - DICTIONARY_HEIGHT - componentsSpacing - 4 * BORDER_WIDTH;
   const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
   const touchCallbacks = useMemo(
     () => ({
@@ -138,19 +129,13 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          <div className={styles.column}>
-            <Well className={styles.resultsContainer} ref={resultsContainerRef}>
-              {resultsContainerWidth > 0 && resultsHeight > 0 && (
-                <Results callbacks={callbacks} height={resultsHeight} width={resultsContainerWidth} />
-              )}
-            </Well>
-
-            <Well>
-              <div className={styles.dictionary} style={{ height: DICTIONARY_HEIGHT }}>
-                <Dictionary className={styles.dictionaryOutput} />
-                <DictionaryInput className={styles.dictionaryInput} />
-              </div>
-            </Well>
+          <div className={styles.column} ref={columnRef}>
+            <Results callbacks={callbacks} />
+
+            <div className={styles.dictionaryContainer}>
+              <Dictionary className={styles.dictionary} />
+              <DictionaryInput className={styles.dictionaryInput} />
+            </div>
           </div>
         </div>
       </div>

package/src/components/Tile/Tile.tsx

@@ -1,11 +1,11 @@
+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,
@@ -25,7 +25,7 @@ interface Props {
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
-  inputRef?: RefObject<HTMLInputElement>;
+  inputRef?: Ref<HTMLInputElement>;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -63,7 +63,7 @@ const Tile: FunctionComponent<Props> = ({
   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;

package/src/components/index.ts

@@ -27,4 +27,3 @@ 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/modals/ResultsModal/ResultsModal.module.scss

@@ -3,5 +3,4 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--color--white);
 }

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -1,9 +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 { Modal, Results } from 'components';
 import { useMediaQuery } from 'hooks';
 import {
   resultsSlice,
@@ -24,7 +23,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);
@@ -46,11 +44,9 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
 
   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} highlightedIndex={highlightedIndex} />
+      </div>
     </Modal>
   );
 };

package/src/parameters/index.ts

@@ -38,10 +38,6 @@ export const BOARD_TILE_SIZE_MIN = 20;
 
 export const BORDER_WIDTH = 1;
 
-export const COLUMN_MIN_HEIGHT = 588.5;
-
-export const DICTIONARY_HEIGHT = 260;
-
 export const TILE_SIZE = 80;
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
@@ -73,9 +69,7 @@ export const RACK_TILE_SIZE_MAX = 80;
 
 export const REMAINING_TILES_TILE_SIZE = 50;
 
-export const RESULTS_HEADER_HEIGHT = 34;
 export const RESULTS_ITEM_HEIGHT = 40;
-export const RESULTS_INPUT_HEIGHT = 40;
 
 export const TILE_APPEAR_DURATION = 200;
 

package/src/service-worker/routeSolveRequests.ts

@@ -23,7 +23,10 @@ const isSlowDevice = (): boolean | undefined => {
   }
 
   const count = Math.min(localDurations.length, serverDurations.length);
-  return average(localDurations.slice(0, count)) > average(serverDurations.slice(0, count));
+  const local = localDurations.slice(0, count).sort().slice(1, -1);
+  const server = serverDurations.slice(0, count).sort().slice(1, -1);
+
+  return average(local) > average(server);
 };
 
 const routeSolveRequests = () => {