@scrabble-solver/scrabble-solver 2.10.1 → 2.10.2

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

@@ -1,6 +1,10 @@
+@import 'styles/mixins';
+
 .tile {
+  --background-color: transparent;
+
   position: relative;
-  background-color: transparent;
+  background-color: var(--background-color);
   transition: var(--transition);
 
   &.raised {
@@ -8,24 +12,34 @@
   }
 
   &.points1 {
-    background-color: var(--color--yellow);
+    --background-color: var(--color--yellow);
+
+    background-color: var(--background-color);
   }
 
   &.points2 {
-    background-color: var(--color--green);
+    --background-color: var(--color--green);
+
+    background-color: var(--background-color);
   }
 
   &.points3,
   &.points4 {
-    background-color: var(--color--blue);
+    --background-color: var(--color--blue);
+
+    background-color: var(--background-color);
   }
 
   &.points5 {
-    background-color: var(--color--red);
+    --background-color: var(--color--red);
+
+    background-color: var(--background-color);
   }
 
   &.blank {
-    background-color: white;
+    --background-color: white;
+
+    background-color: var(--background-color);
 
     .character {
       color: black;
@@ -33,7 +47,9 @@
   }
 
   &.highlighted {
-    background-color: var(--color--primary);
+    --background-color: var(--color--primary);
+
+    background-color: var(--background-color);
     color: white;
 
     .character {
@@ -44,6 +60,13 @@
       color: inherit;
     }
   }
+
+  &.invalid {
+    --background-color: var(--color--red--light);
+
+    background-color: var(--background-color);
+    color: var(--color--error);
+  }
 }
 
 .character {
@@ -52,6 +75,7 @@
   padding: 0;
   box-sizing: border-box;
   background-color: transparent;
+  color: inherit;
   border: none;
   font-weight: bold;
   text-transform: uppercase;
@@ -72,6 +96,8 @@
 }
 
 .points {
+  @include text-stroke(var(--background-color), 1px);
+
   position: absolute;
   font-weight: bold;
   user-select: none;
@@ -88,3 +114,21 @@
     left: 9%;
   }
 }
+
+.alert {
+  $size: 30%;
+
+  position: absolute;
+  width: $size;
+  height: $size;
+
+  [dir='ltr'] & {
+    top: 0;
+    right: 0;
+  }
+
+  [dir='rtl'] & {
+    bottom: 0;
+    right: 0;
+  }
+}

package/src/components/Tile/Tile.tsx

@@ -23,6 +23,7 @@ interface Props {
   highlighted?: boolean;
   inputRef?: RefObject<HTMLInputElement>;
   isBlank?: boolean;
+  isValid?: boolean;
   placeholder?: string;
   points?: number;
   raised?: boolean;
@@ -41,6 +42,7 @@ const Tile: FunctionComponent<Props> = ({
   highlighted,
   inputRef: ref,
   isBlank,
+  isValid,
   placeholder,
   points,
   raised,
@@ -82,6 +84,7 @@ const Tile: FunctionComponent<Props> = ({
       inputRef={inputRef}
       inputStyle={inputStyle}
       isBlank={isBlank}
+      isValid={isValid}
       placeholder={placeholder}
       points={points}
       pointsFormatted={pointsFormatted}

package/src/components/Tile/TilePure.tsx

@@ -9,6 +9,8 @@ import {
   RefObject,
 } from 'react';
 
+import { ExclamationSquareFill } from 'icons';
+
 import styles from './Tile.module.scss';
 
 interface Props {
@@ -21,6 +23,7 @@ interface Props {
   inputRef: RefObject<HTMLInputElement>;
   inputStyle?: CSSProperties;
   isBlank?: boolean;
+  isValid?: boolean;
   placeholder?: string;
   points?: number;
   pointsFormatted?: string;
@@ -43,6 +46,7 @@ const TilePure: FunctionComponent<Props> = ({
   inputRef,
   inputStyle,
   isBlank,
+  isValid,
   placeholder,
   points,
   pointsFormatted,
@@ -56,8 +60,9 @@ const TilePure: FunctionComponent<Props> = ({
 }) => (
   <div
     className={classNames(styles.tile, className, {
-      [styles.highlighted]: highlighted,
       [styles.blank]: isBlank,
+      [styles.highlighted]: highlighted,
+      [styles.invalid]: !isValid,
       [styles.raised]: raised,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
@@ -90,6 +95,8 @@ const TilePure: FunctionComponent<Props> = ({
         {pointsFormatted}
       </span>
     )}
+
+    {!isValid && <ExclamationSquareFill className={styles.alert} />}
   </div>
 );
 

package/src/components/index.ts

@@ -20,6 +20,7 @@ export { default as ResultsInput } from './ResultsInput';
 export { default as Screen } from './Screen';
 export { default as Settings } from './Settings';
 export { default as Sidebar } from './Sidebar';
+export { default as Solver } from './Solver';
 export { default as Splash } from './Splash';
 export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export { default as useDirection } from './useDirection';
 export { default as useIsTablet } from './useIsTablet';
+export { default as useIsTouchDevice } from './useIsTouchDevice';
 export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as usePortal } from './usePortal';

package/src/hooks/useIsTouchDevice.ts

@@ -0,0 +1,7 @@
+import { useMedia } from 'react-use';
+
+const useIsTouchDevice = () => {
+  return useMedia('(hover: none)', false);
+};
+
+export default useIsTouchDevice;

package/src/icons/ExclamationSquareFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/exclamation-square-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -11,6 +11,7 @@ export { default as Cross } from './Cross.svg';
 export { default as CrossFill } from './CrossFill.svg';
 export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
+export { default as ExclamationSquareFill } from './ExclamationSquareFill.svg';
 export { default as Flag } from './Flag.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';

package/src/pages/index.module.scss

@@ -43,80 +43,6 @@
   }
 }
 
-.contentWrapper {
-  $board-size: 15;
-  $tile-size-max: 60px;
-  $tile-border-size: 1px;
-
-  flex: 1;
-  padding: 0 var(--spacing--xl);
-  max-height: $board-size * ($tile-size-max + $tile-border-size) + $tile-border-size;
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: var(--spacing--xl);
-
-  @include tablet {
-    gap: var(--spacing--l);
-  }
-}
-
-.boardContainer {
-  display: flex;
-  position: relative;
-}
-
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 var(--sidebar--width);
-  gap: var(--spacing--xl);
-
-  @include tablet {
-    gap: var(--spacing--l);
-  }
-}
-
-.dictionary {
-  display: flex;
-  flex-direction: column;
-}
-
-.dictionaryOutput {
-  flex: 1;
-  border-bottom: var(--border);
-}
-
-.dictionaryInput {
-  flex: 0 0 auto;
-}
-
-.resultsContainer {
+.solver {
   flex: 1;
-  position: relative;
-}
-
-.rackContainer {
-  position: relative;
-  z-index: 1;
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: center;
-  margin: var(--spacing--xl) var(--spacing--l);
-
-  @include tablet {
-    margin: var(--spacing--l);
-  }
-}
-
-.rack {
-  border: var(--border);
-}
-
-.submitInput {
-  display: none;
 }

package/src/pages/index.tsx

@@ -1,33 +1,17 @@
 import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import { AnimationEvent, FormEvent, FunctionComponent, useEffect, useState } from 'react';
+import { AnimationEvent, FunctionComponent, useEffect, useState } from 'react';
 import Modal from 'react-modal';
 import { useDispatch } from 'react-redux';
-import { useEffectOnce, useMeasure } from 'react-use';
-
-import {
-  Board,
-  Dictionary,
-  DictionaryInput,
-  KeyMap,
-  Logo,
-  NavButtons,
-  Rack,
-  RemainingTiles,
-  Results,
-  Settings,
-  Splash,
-  SvgFontFix,
-  Well,
-  Words,
-} from 'components';
-import { useDirection, useIsTablet, useLanguage, useLocalStorage } from 'hooks';
+import { useEffectOnce } from 'react-use';
+
+import { KeyMap, Logo, NavButtons, RemainingTiles, Settings, Solver, Splash, SvgFontFix, Words } from 'components';
+import { useDirection, useLanguage, useLocalStorage } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { getCellSize } from 'lib';
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_MOBILE, DICTIONARY_HEIGHT } from 'parameters';
+import { INITIALIZATION_DURATION } from 'parameters';
 import { registerServiceWorker } from 'serviceWorkerManager';
-import { initialize, localStorage, reset, selectConfig, selectLocale, solveSlice, useTypedSelector } from 'state';
+import { initialize, localStorage, reset, selectLocale, useTypedSelector } from 'state';
 
 import styles from './index.module.scss';
 
@@ -40,30 +24,16 @@ interface Props {
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
-  const isTablet = useIsTablet();
   const [showKeyMap, setShowKeyMap] = useState(false);
   const [showRemainingTiles, setShowRemainingTiles] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showWords, setShowWords] = useState(false);
-  const [boardRef, { height: boardHeight }] = useMeasure<HTMLDivElement>();
-  const [contentRef, { height: contentHeight, width: contentWidth }] = useMeasure<HTMLDivElement>();
-  const [resultsContainerRef, { height: resultsContainerHeight, width: resultsContainerWidth }] =
-    useMeasure<HTMLDivElement>();
-  const config = useTypedSelector(selectConfig);
-  const cellSize = getCellSize(config, contentWidth - resultsContainerWidth, contentHeight);
-  const isInitializedInitial = contentWidth > 0 && boardHeight > 0 && resultsContainerWidth > 0;
-  const [isInitialized, setIsInitialized] = useState(isInitializedInitial);
-  const resultsHeight = boardHeight - DICTIONARY_HEIGHT - (isTablet ? COMPONENTS_SPACING_MOBILE : COMPONENTS_SPACING);
+  const [isInitialized, setIsInitialized] = useState(false);
 
   const handleClear = () => {
     dispatch(reset());
   };
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    dispatch(solveSlice.actions.submit());
-  };
-
   const handleSplashAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget && !localStorage.getHasVisited()) {
       setShowSettings(true);
@@ -71,8 +41,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     }
   };
 
-  const { direction } = LOCALE_FEATURES[locale];
-  useDirection(direction);
+  useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
   useLocalStorage();
 
@@ -81,7 +50,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
     setTimeout(() => {
       setIsInitialized(true);
-    }, 100);
+    }, INITIALIZATION_DURATION);
   });
 
   useEffect(() => {
@@ -111,44 +80,13 @@ const Index: FunctionComponent<Props> = ({ version }) => {
           />
         </div>
 
-        <div className={styles.contentWrapper}>
-          <div className={styles.content} ref={contentRef}>
-            <form className={styles.boardContainer} onSubmit={handleSubmit}>
-              {contentWidth > 0 && <Board cellSize={cellSize} innerRef={boardRef} />}
-              <input className={styles.submitInput} tabIndex={-1} type="submit" />
-            </form>
-
-            <div className={styles.sidebar} style={{ height: boardHeight + 1 }}>
-              <Well className={styles.resultsContainer} ref={resultsContainerRef}>
-                {resultsContainerWidth > 0 && resultsContainerHeight > 0 && (
-                  <Results 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>
-          </div>
-        </div>
-
-        <form className={styles.rackContainer} onSubmit={handleSubmit}>
-          <Rack className={styles.rack} />
-          <input className={styles.submitInput} tabIndex={-1} type="submit" />
-        </form>
+        <Solver className={styles.solver} />
       </div>
 
       <Settings isOpen={showSettings} onClose={() => setShowSettings(false)} />
-
       <KeyMap isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
-
       <Words isOpen={showWords} onClose={() => setShowWords(false)} />
-
       <RemainingTiles isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
-
       <Splash forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />
     </>
   );

package/src/parameters/index.ts

@@ -1,5 +1,7 @@
 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;
 

package/src/service-worker/average.ts

@@ -0,0 +1,9 @@
+const average = (numbers: number[]): number => {
+  if (numbers.length === 0) {
+    return 0;
+  }
+
+  return numbers.reduce((sum, value) => sum + value, 0) / numbers.length;
+};
+
+export default average;

package/src/service-worker/routeSolveRequests.ts

@@ -1,9 +1,11 @@
+import { Trie } from '@kamilmielnik/trie';
 import { getConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
 import { solve } from '@scrabble-solver/solver';
 import { Board, Locale, Tile } from '@scrabble-solver/types';
 import { registerRoute } from 'workbox-routing';
 
+import average from './average';
 import { revalidateDictionary } from './dictionaries';
 import getTrie from './getTrie';
 
@@ -11,24 +13,61 @@ const headers = {
   'Content-Type': 'application/json; charset=utf-8',
 };
 
+const MIN_MEASUREMENTS = 5;
+const localDurations: number[] = [];
+const serverDurations: number[] = [];
+
+const isSlowDevice = (): boolean | undefined => {
+  if (localDurations.length < MIN_MEASUREMENTS || serverDurations.length < MIN_MEASUREMENTS) {
+    return undefined;
+  }
+
+  const count = Math.min(localDurations.length, serverDurations.length);
+  return average(localDurations.slice(0, count)) > average(serverDurations.slice(0, count));
+};
+
 const routeSolveRequests = () => {
   registerRoute(
     ({ url }) => url.origin === location.origin && url.pathname === '/api/solve',
     async ({ request }) => {
       const { board, characters, configId, locale } = await request.clone().json();
+
+      const solveLocal = async (trie: Trie) => {
+        const config = getConfig(configId)[locale as Locale];
+        const tiles = characters.map((character: string) => new Tile({ character, isBlank: character === BLANK }));
+        const resultsJson = solve(trie, config, Board.fromJson(board), tiles);
+        const json = JSON.stringify(resultsJson);
+        return new Response(json, { headers });
+      };
+
+      const solveServer = () => fetch(request);
+
       const trie = await getTrie(locale);
 
-      if (!trie) {
-        const response = await fetch(request);
+      if (trie && typeof isSlowDevice() === 'undefined') {
+        const response = await Promise.race([
+          (async () => {
+            const start = Date.now();
+            const result = await solveLocal(trie);
+            localDurations.push(Date.now() - start);
+            return result;
+          })(),
+          (async () => {
+            const start = Date.now();
+            const result = await solveServer();
+            serverDurations.push(Date.now() - start);
+            return result;
+          })(),
+        ]);
+
         revalidateDictionary(locale);
         return response;
       }
 
-      const config = getConfig(configId)[locale as Locale];
-      const tiles = characters.map((character: string) => new Tile({ character, isBlank: character === BLANK }));
-      const resultsJson = solve(trie, config, Board.fromJson(board), tiles);
-      const json = JSON.stringify(resultsJson);
-      return new Response(json, { headers });
+      const handleSolve = trie && !isSlowDevice() ? () => solveLocal(trie) : () => solveServer();
+      const response = await handleSolve();
+      revalidateDictionary(locale);
+      return response;
     },
     'POST',
   );

package/src/state/selectors.ts

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getLocaleConfig } from '@scrabble-solver/configs';
+import { BLANK } from '@scrabble-solver/constants';
 import { Cell, Config, isError, Result, Tile } from '@scrabble-solver/types';
 
 import i18n, { LOCALE_FEATURES } from 'i18n';
@@ -62,6 +63,14 @@ export const selectCellIsFiltered = createSelector([selectCellFilter, selectPoin
   return cellFilter.some((cell) => cell.x === x && cell.y === y);
 });
 
+export const selectCellIsValid = createSelector([selectConfig, selectCell], (config, cell) => {
+  if (!cell.hasTile()) {
+    return true;
+  }
+
+  return config.tiles.some((tile) => tile.character === cell.tile.character);
+});
+
 export const selectResults = createSelector([selectResultsRoot], (results) => results.results);
 
 export const selectResultsQuery = createSelector([selectResultsRoot], (results) => results.query);
@@ -140,6 +149,17 @@ export const selectCharacterPoints = createSelector(
   },
 );
 
+export const selectCharacterIsValid = createSelector(
+  [selectConfig, selectCharacter],
+  (config: Config, character: string | null) => {
+    if (character === null || character === BLANK) {
+      return true;
+    }
+
+    return config.tiles.some((tile) => tile.character === character);
+  },
+);
+
 export const selectTilePoints = createSelector([selectConfig, selectTile], (config: Config, tile: Tile | null) => {
   return config.getTilePoints(tile);
 });

package/src/state/slices/boardInitialState.ts

@@ -7,4 +7,31 @@ const { configId, locale } = settingsInitialState;
 const { boardHeight, boardWidth } = getLocaleConfig(configId, locale);
 const boardInitialState: Board = Board.create(boardWidth, boardHeight);
 
+// const createOxyphenbutazone = () => {
+//   // Tiles: oypbaze
+
+//   const board = Board.fromStringArray([
+//     ' x  hen ut  on ',
+//     'puer  or amas j',
+//     'a led  a  er  a',
+//     'c ki   i elf  c',
+//     'i snot n  is  u',
+//     'f  t o w do   l',
+//     'y  e moa er   a',
+//     'i  r   solar  t',
+//     'n  v   h  t   i',
+//     'g  i   i bitten',
+//     '   e   n  v   g',
+//     '   w   g  e    ',
+//     '   e           ',
+//     '   d           ',
+//     '               ',
+//   ]);
+
+//   board.rows[4][3].tile.isBlank = true;
+//   board.rows[9][11].tile.isBlank = true;
+
+//   return board;
+// };
+
 export default boardInitialState;

package/src/styles/mixins.scss

@@ -1,4 +1,4 @@
-@mixin tablet() {
+@mixin tablet {
   @media (max-width: 1024px) {
     @content;
   }
@@ -73,3 +73,8 @@
   font-size: var(--font--size--s);
   font-family: var(--font--family);
 }
+
+@mixin text-stroke($color, $size: 1px) {
+  text-shadow: $size 0 $color, (-$size) 0 $color, 0 $size $color, 0 (-$size) $color, (-$size) (-$size) $color,
+    (-$size) $size $color, $size (-$size) $color, $size $size $color;
+}

package/src/styles/variables.scss

@@ -2,6 +2,7 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
 
 :root {
   --border--color: #cdcdcd;
+  --border--color--light: #d9d9d9;
   --border--radius: 5px;
   --border--width: 1px;
   --border: var(--border--width) solid var(--border--color);
@@ -41,13 +42,15 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --color--blue: #c7d8f9;
   --color--blue--light: #dde4f6;
   --color--light-blue: #7bb5e5;
-  --color--light-blue--light: #{rgba(#7bb5e5, 0.5)};
+  --color--light-blue--light: #b8d5ed;
   --color--dark-blue: #1868ad;
-  --color--dark-blue--light: #{rgba(#1868ad, 0.5)};
+  --color--dark-blue--light: #86aed1;
   --color--red: #f7c2aa;
   --color--red--light: #fbe0d4;
   --color--violet: #78387f;
-  --color--violet--light: #{rgba(#78387f, 0.5)};
+  --color--violet--light: #b284b8;
+  --color--orange: #fbc997;
+  --color--pink: #f19393;
 
   --font--family: 'Open Sans', sans-serif;
   --font--family--title: 'Lato', sans-serif;

package/.next/InjectManifest.js.nft.json

@@ -1 +0,0 @@
-{"version":1,"files":["../public/service-worker.js","../public/service-worker.js.map","../package.json"]}