@scrabble-solver/scrabble-solver 2.11.1 → 2.11.2

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

@@ -4,8 +4,17 @@
   --background-color: transparent;
 
   position: relative;
-  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background-color: var(--background-color);
   border-radius: var(--border--radius);
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  transition: var(--transition);
+  user-select: none;
 
   &.points1 {
     --background-color: var(--color--yellow);
@@ -24,13 +33,30 @@
     --background-color: var(--color--red);
   }
 
+  &.raised {
+    --shadow--size: 2px;
+    --shadow--blur: 2px;
+    --shadow--spread: -1px;
+    --shadow--color: rgba(34, 34, 34, 0.8);
+
+    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
+      var(--shadow--spread) var(--shadow--color);
+
+    @include media('<xs') {
+      --shadow--size: 1px;
+      --shadow--spread: 0;
+      --shadow--blur: 1px;
+    }
+  }
+
   &.blank {
     --background-color: var(--color--white);
 
-    .placeholder,
-    .character {
-      color: var(--color--foreground);
-    }
+    color: var(--color--foreground);
+  }
+
+  &.empty {
+    color: var(--color--inactive);
   }
 
   &.highlighted {
@@ -38,85 +64,28 @@
 
     color: var(--color--primary--opposite);
 
-    .placeholder,
-    .character {
-      color: inherit;
-    }
-
     .points {
       color: inherit;
     }
   }
-
-  &:not(.disabled) {
-    .input::selection {
-      --background--color: transparent;
-    }
-  }
-}
-
-.input,
-.character,
-.placeholder {
-  padding: 0;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-align: center;
-  caret-color: transparent;
-  box-sizing: border-box;
 }
 
 .input {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  color: transparent;
-  border: none;
-  font-size: 16px; // prevent iOS from automatically zooming in on focus
-}
-
-.character,
-.placeholder {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--background-color);
-  border-radius: inherit;
-  transition: var(--transition);
-  pointer-events: none;
-  user-select: none;
-
-  .empty & {
-    color: var(--color--inactive);
-  }
-
-  .raised & {
-    --shadow--size: 2px;
-    --shadow--blur: 2px;
-    --shadow--spread: -1px;
-    --shadow--color: rgba(34, 34, 34, 0.8);
-
-    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
-      var(--shadow--spread) var(--shadow--color);
-
-    @include media('<xs') {
-      --shadow--size: 1px;
-      --shadow--spread: 0;
-      --shadow--blur: 1px;
-    }
-  }
-}
-
-.character {
-  opacity: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
 
-  .empty & {
-    opacity: 0;
+  &::selection {
+    --background--color: transparent;
   }
 }
 

package/src/components/Tile/Tile.tsx

@@ -60,8 +60,10 @@ const Tile: FunctionComponent<Props> = ({
   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 style = useMemo(
+    () => ({ fontSize: tileFontSize, height: tileSize, width: tileSize }),
+    [tileSize, tileFontSize],
+  );
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
@@ -98,7 +100,6 @@ const Tile: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
-      characterStyle={characterStyle}
       className={className}
       disabled={disabled}
       highlighted={highlighted}

package/src/components/Tile/TilePure.tsx

@@ -18,7 +18,6 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
-  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
@@ -42,7 +41,6 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
-  characterStyle,
   className,
   disabled,
   highlighted,
@@ -66,15 +64,18 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.disabled]: disabled,
       [styles.empty]: !character,
       [styles.highlighted]: highlighted,
-      [styles.raised]: raised,
+      [styles.placeholder]: !character,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
       [styles.points3]: points === 3,
       [styles.points4]: points === 4,
       [styles.points5]: typeof points === 'number' && points >= 5,
+      [styles.raised]: raised,
     })}
     style={style}
   >
+    {character || placeholder}
+
     <input
       aria-label={ariaLabel}
       autoCapitalize="none"
@@ -92,16 +93,6 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
-    {placeholder && (
-      <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>
-        {placeholder}
-      </div>
-    )}
-
-    <div className={styles.character} style={characterStyle} tabIndex={-1}>
-      {character}
-    </div>
-
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

package/src/hooks/useAppLayout.ts

@@ -1,4 +1,4 @@
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL } from 'parameters';
+import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL, SOLVER_COLUMN_WIDTH } from 'parameters';
 
 import useIsTouchDevice from './useIsTouchDevice';
 import useMediaQuery from './useMediaQuery';
@@ -14,8 +14,10 @@ const useAppLayout = () => {
 
   return {
     animateTile: !isLessThanXs,
+    columnWidth: showColumn ? SOLVER_COLUMN_WIDTH : 0,
     componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
     isBoardFullWidth: isLessThanM,
+    isModalFullWidth: isLessThanS,
     showColumn,
     showCompactControls: !showColumn,
     showFloatingSolveButton: isTouchDevice,

package/src/i18n/de.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Ablage: Stein ({{index}})",
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
-  "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
   "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.uninitialized": "Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.",

package/src/i18n/en.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Rack: tile ({{index}})",
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
-  "results.empty-state.no-filtered-results": "No result matches this query.",
   "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.uninitialized": "Words generated from your letters will be shown here.",

package/src/i18n/es.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Estante: espacio ({{index}})",
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
-  "results.empty-state.no-filtered-results": "Ningún resultado coincide con esta consulta.",
   "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.uninitialized": "Aquí se mostrarán las palabras generadas a partir de sus letras.",

package/src/i18n/fa.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "({{index}}) کاشی: طاقچه",
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
-  "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
   "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
   "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",

package/src/i18n/fr.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Chevalet: la case ({{index}})",
   "remaining-tiles": "Cases restantes",
   "results": "Résultats",
-  "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
   "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.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",

package/src/i18n/pl.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Stojak: płytka ({{index}})",
   "remaining-tiles": "Pozostałe płytki",
   "results": "Wyniki",
-  "results.empty-state.no-filtered-results": "Żaden wynik nie pasuje do tej kwerendy.",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
   "results.empty-state.outdated": "Wyniki są nieaktualne. Kliknij poniżej, aby zaktualizować.",
   "results.empty-state.uninitialized": "Tu zostaną wyświetlone słowa wygenerowane z Twoich liter.",

package/src/lib/createRegExp.ts

@@ -0,0 +1,13 @@
+const createRegExp = (input: string): RegExp => {
+  if (input.trim().length === 0) {
+    return /.*/;
+  }
+
+  try {
+    return new RegExp(input, 'gi');
+  } catch {
+    return /.*/;
+  }
+};
+
+export default createRegExp;

package/src/lib/groupResults.ts

@@ -0,0 +1,38 @@
+import { Result } from '@scrabble-solver/types';
+
+import { Point } from 'types';
+
+import createRegExp from './createRegExp';
+
+interface GroupedResults {
+  matching: Result[];
+  other: Result[];
+}
+
+const groupResults = (
+  results: Result[] | undefined,
+  query: string,
+  cellFilter: Point[],
+): GroupedResults | undefined => {
+  if (typeof results === 'undefined') {
+    return results;
+  }
+
+  return results.reduce<GroupedResults>(
+    ({ matching, other }, result) => {
+      const matchesQuery = createRegExp(query).test(result.word);
+      const matchesCellFilter = cellFilter.every(({ x, y }) => {
+        return result.cells.some((cell) => cell.x === x && cell.y === y);
+      });
+      const isMatching = matchesQuery && matchesCellFilter;
+
+      return {
+        matching: isMatching ? [...matching, result] : matching,
+        other: isMatching ? other : [...other, result],
+      };
+    },
+    { matching: [], other: [] },
+  );
+};
+
+export default groupResults;

package/src/lib/guessLocale.ts

@@ -0,0 +1,22 @@
+import { Locale } from '@scrabble-solver/types';
+
+const guessLocale = (): Locale => {
+  if (!globalThis.navigator) {
+    return Locale.EN_US;
+  }
+
+  const locales = Object.values(Locale);
+  const exactMatch = locales.find((locale) => globalThis.navigator.language === locale);
+
+  if (exactMatch) {
+    return exactMatch;
+  }
+
+  const partialMatch = locales.find((locale) => {
+    return globalThis.navigator.language === locale.substring(0, 2);
+  });
+
+  return partialMatch || Locale.EN_US;
+};
+
+export default guessLocale;

package/src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as createGridOf } from './createGridOf';
 export { default as createKeyboardNavigation } from './createKeyboardNavigation';
 export { default as createKeyComparator } from './createKeyComparator';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
+export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
@@ -14,8 +15,10 @@ export { default as getCellSize } from './getCellSize';
 export { default as getRemainingTiles } from './getRemainingTiles';
 export { default as getRemainingTilesCount } from './getRemainingTilesCount';
 export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';
-export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
 export { default as getTileSizes } from './getTileSizes';
+export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
+export { default as groupResults } from './groupResults';
+export { default as guessLocale } from './guessLocale';
 export { default as inverseDirection } from './inverseDirection';
 export { default as isMac } from './isMac';
 export { default as isRegExp } from './isRegExp';

package/src/lib/sortResults.ts

@@ -1,6 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 
-import { Comparator, ResultColumn, SortDirection } from 'types';
+import { Comparator, ResultColumn, Sort, SortDirection } from 'types';
 
 import createKeyComparator from './createKeyComparator';
 import reverseComparator from './reverseComparator';
@@ -15,20 +15,16 @@ const comparators: Record<ResultColumn, (locale: string) => Comparator<Result>>
   [ResultColumn.WordsCount]: (locale: string) => createKeyComparator('wordsCount', locale),
 };
 
-const sortResults = (
-  results: Result[] | undefined,
-  column: ResultColumn,
-  sortDirection: SortDirection,
-  locale: string,
-): Result[] | undefined => {
+const sortResults = (results: Result[] | undefined, sort: Sort, locale: string): Result[] | undefined => {
   if (typeof results === 'undefined') {
     return results;
   }
 
-  const createComparator = comparators[column];
+  const createComparator = comparators[sort.column];
   const comparator = createComparator(locale);
-  const finalComparator = sortDirection === SortDirection.Descending ? reverseComparator(comparator) : comparator;
-  return [...results].sort(finalComparator);
+  const finalComparator = sort.direction === SortDirection.Descending ? reverseComparator(comparator) : comparator;
+  const sortedResults = [...results].sort(finalComparator);
+  return sortedResults;
 };
 
 export default sortResults;

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

@@ -5,7 +5,6 @@
   background-color: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  box-shadow: var(--box-shadow);
 }
 
 .dictionary {

package/src/modals/MenuModal/MenuModal.module.scss

@@ -4,6 +4,13 @@
   width: 100%;
   text-transform: none;
 
+  &,
+  &:active,
+  &:focus,
+  &:hover {
+    box-shadow: 0px 1px 1px 0px var(--box-shadow--color);
+  }
+
   & + & {
     margin-top: var(--spacing--l);
   }

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

@@ -9,15 +9,14 @@
 }
 
 .results {
-  flex: 1;
+  flex: 1 1 auto;
 }
 
 .dictionary {
-  flex: 0 0 calc(var(--dictionary--height) - var(--text-input--height));
+  flex: 0 1 calc(var(--dictionary--height) - var(--text-input--height));
   background-color: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  box-shadow: var(--box-shadow);
 
   @media (max-height: 600px) {
     display: none;

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,14 +2,9 @@ import { Result } from '@scrabble-solver/types';
 import { FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Dictionary, Modal, Results } from 'components';
-import {
-  resultsSlice,
-  selectResultCandidate,
-  selectSortedFilteredResults,
-  useTranslate,
-  useTypedSelector,
-} from 'state';
+import { Button, Dictionary, Modal, Results } from 'components';
+import { Check } from 'icons';
+import { resultsSlice, selectResultCandidate, selectResults, useTranslate, useTypedSelector } from 'state';
 
 import styles from './ResultsModal.module.scss';
 
@@ -22,9 +17,9 @@ interface Props {
 const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const results = useTypedSelector(selectSortedFilteredResults);
+  const results = useTypedSelector(selectResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const index = (results || []).findIndex((result) => result.id === resultCandidate?.id);
+  const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;
   const highlightedIndex = index === -1 ? undefined : index;
 
   const callbacks = useMemo(
@@ -43,7 +38,24 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   );
 
   return (
-    <Modal className={className} isOpen={isOpen} title={translate('results')} onClose={onClose}>
+    <Modal
+      className={className}
+      footer={
+        <Button
+          aria-label={translate('results.insert')}
+          disabled={!resultCandidate}
+          Icon={Check}
+          tooltip={translate('results.insert')}
+          variant="primary"
+          onClick={onClose}
+        >
+          {translate('results.insert')}
+        </Button>
+      }
+      isOpen={isOpen}
+      title={translate('results')}
+      onClose={onClose}
+    >
       <div className={styles.content}>
         <Results callbacks={callbacks} className={styles.results} highlightedIndex={highlightedIndex} />
         <Dictionary className={styles.dictionary} />

package/src/pages/api/dictionary/[locale]/[word].ts

@@ -37,7 +37,6 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('dictionary - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/api/dictionary/[locale]/index.ts

@@ -28,7 +28,6 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('dictionary - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/api/solve.ts

@@ -42,7 +42,6 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('solve - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/api/verify.ts

@@ -38,7 +38,6 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('verify - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/api/visit.ts

@@ -13,7 +13,6 @@ const visit = async (request: NextApiRequest, response: NextApiResponse): Promis
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('visit - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/index.tsx

@@ -18,7 +18,6 @@ import {
   SettingsModal,
   WordsModal,
 } from 'modals';
-import { INITIALIZATION_DURATION } from 'parameters';
 import { registerServiceWorker } from 'serviceWorkerManager';
 import { initialize, reset, selectLocale, useTypedSelector } from 'state';
 
@@ -44,7 +43,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const [showWords, setShowWords] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [indexRef, { height: indexHeight, width: indexWidth }] = useMeasure<HTMLDivElement>();
-  const [navRef, { height: navHeight }] = useMeasure<HTMLDivElement>();
+  const [navRef, { height: navHeight }] = useMeasure<HTMLElement>();
   const solverHeight = indexHeight - navHeight;
   const solverWidth = indexWidth;
   const [isClient, setIsClient] = useState(false);
@@ -60,10 +59,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   useEffectOnce(() => {
     setIsClient(true);
     dispatch(initialize());
-
-    globalThis.setTimeout(() => {
-      setIsInitialized(true);
-    }, INITIALIZATION_DURATION);
+    setIsInitialized(true);
   });
 
   useEffect(() => {
@@ -87,7 +83,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
       <SvgFontFix />
 
       <div className={classNames(styles.index, { [styles.initialized]: isInitialized })} ref={indexRef}>
-        <div className={styles.nav} ref={navRef}>
+        <nav className={styles.nav} ref={navRef}>
           <div className={styles.navContent}>
             <div className={styles.navLogo}>
               <a className={styles.logoContainer} href="/" title={version}>
@@ -104,14 +100,16 @@ const Index: FunctionComponent<Props> = ({ version }) => {
               onShowWords={() => setShowWords(true)}
             />
           </div>
-        </div>
-
-        <Solver
-          className={styles.solver}
-          height={solverHeight}
-          width={solverWidth}
-          onShowResults={() => setShowResults(true)}
-        />
+        </nav>
+
+        {solverHeight > 0 && solverWidth > 0 && (
+          <Solver
+            className={styles.solver}
+            height={solverHeight}
+            width={solverWidth}
+            onShowResults={() => setShowResults(true)}
+          />
+        )}
       </div>
 
       <MenuModal

package/src/parameters/index.ts

@@ -11,8 +11,6 @@ export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const INITIALIZATION_DURATION = 100;
-
 export const TRANSITION_DURATION = 100;
 export const TRANSITION_DURATION_LONG = 250;
 
@@ -71,6 +69,8 @@ export const REMAINING_TILES_TILE_SIZE = 50;
 
 export const RESULTS_ITEM_HEIGHT = 40;
 
+export const SOLVER_COLUMN_WIDTH = 580;
+
 export const TILE_APPEAR_DURATION = 200;
 
 export const TILE_APPEAR_KEYFRAMES = [

package/src/state/sagas.ts

@@ -116,6 +116,7 @@ function* onReset(): AnyGenerator {
   yield put(dictionarySlice.actions.reset());
   yield put(rackSlice.actions.reset());
   yield put(resultsSlice.actions.reset());
+  yield put(solveSlice.actions.reset());
   yield put(verifySlice.actions.submit());
 }