scrabble-solver 2.8.8 → 2.8.9

package/packages/scrabble-solver/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@scrabble-solver/scrabble-solver",
-      "version": "2.8.8",
+      "version": "2.8.9",
       "license": "CC BY-NC-ND 4.0",
       "dependencies": {
         "@popperjs/core": "^2.11.6",

package/packages/scrabble-solver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.5",
-    "@scrabble-solver/configs": "^2.8.8",
-    "@scrabble-solver/constants": "^2.8.8",
-    "@scrabble-solver/dictionaries": "^2.8.8",
-    "@scrabble-solver/logger": "^2.8.8",
-    "@scrabble-solver/solver": "^2.8.8",
-    "@scrabble-solver/types": "^2.8.8",
-    "@scrabble-solver/word-definitions": "^2.8.8",
+    "@scrabble-solver/configs": "^2.8.9",
+    "@scrabble-solver/constants": "^2.8.9",
+    "@scrabble-solver/dictionaries": "^2.8.9",
+    "@scrabble-solver/logger": "^2.8.9",
+    "@scrabble-solver/solver": "^2.8.9",
+    "@scrabble-solver/types": "^2.8.9",
+    "@scrabble-solver/word-definitions": "^2.8.9",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",

package/packages/scrabble-solver/src/components/Badge/Badge.module.scss

@@ -0,0 +1,13 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing--xs) var(--spacing--s);
+  border-radius: var(--border--radius);
+  background-color: var(--color--violet--light);
+  box-shadow: va(--box-shadow);
+  line-height: var(--line-height);
+  font-size: var(--font--size--s);
+  font-weight: bold;
+  color: white;
+}

package/packages/scrabble-solver/src/components/Badge/Badge.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { FunctionComponent, ReactNode } from 'react';
+
+import styles from './Badge.module.scss';
+
+interface Props {
+  children?: ReactNode;
+  className?: string;
+}
+
+const Badge: FunctionComponent<Props> = ({ children, className }) => (
+  <div className={classNames(styles.badge, className)}>{children}</div>
+);
+
+export default Badge;

package/packages/scrabble-solver/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export { default } from './Badge';

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { Cog, Eraser, Github, Keyboard, Sack } from 'icons';
+import { BookHalf, Cog, Eraser, Github, Keyboard, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
-import { selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
+import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
 import SquareButton from '../SquareButton';
 
@@ -14,27 +14,26 @@ interface Props {
   onShowKeyMap: () => void;
   onShowRemainingTiles: () => void;
   onShowSettings: () => void;
+  onShowWords: () => void;
 }
 
-const NavButtons: FunctionComponent<Props> = ({ onClear, onShowKeyMap, onShowRemainingTiles, onShowSettings }) => {
+const NavButtons: FunctionComponent<Props> = ({
+  onClear,
+  onShowKeyMap,
+  onShowRemainingTiles,
+  onShowSettings,
+  onShowWords,
+}) => {
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
+  const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
 
   return (
     <div className={styles.navButtons}>
-      <SquareButton.Link
-        className={styles.button}
-        href={GITHUB_PROJECT_URL}
-        Icon={Github}
-        rel="noopener noreferrer"
-        target="_blank"
-        tooltip={translate('github')}
-      />
+      <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
 
       <div className={styles.separator} />
 
-      <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
-
       <SquareButton
         className={classNames(styles.button, {
           [styles.error]: hasOverusedTiles,
@@ -44,9 +43,29 @@ const NavButtons: FunctionComponent<Props> = ({ onClear, onShowKeyMap, onShowRem
         onClick={onShowRemainingTiles}
       />
 
+      <SquareButton
+        className={classNames(styles.button, {
+          [styles.error]: hasInvalidWords,
+        })}
+        Icon={BookHalf}
+        tooltip={translate('words')}
+        onClick={onShowWords}
+      />
+
       <div className={styles.separator} />
 
-      <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+      <SquareButton.Link
+        className={styles.button}
+        href={GITHUB_PROJECT_URL}
+        Icon={Github}
+        rel="noopener noreferrer"
+        target="_blank"
+        tooltip={translate('github')}
+      />
+
+      <div className={styles.separator} />
+
+      <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
 
       <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
     </div>

package/packages/scrabble-solver/src/components/RemainingTiles/RemainingTiles.module.scss

@@ -1,11 +1,8 @@
-.group {
-  margin-bottom: var(--spacing--l);
-}
-
 .title {
-  margin-bottom: var(--spacing--m);
-  font-size: var(--font--size--h2);
-  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .content {
@@ -13,3 +10,7 @@
   grid-template-columns: repeat(5, 1fr);
   gap: var(--spacing--m);
 }
+
+.badge {
+  margin-left: var(--spacing--m);
+}

package/packages/scrabble-solver/src/components/RemainingTiles/RemainingTiles.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent } from 'react';
 
 import { selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 
+import Badge from '../Badge';
 import Sidebar from '../Sidebar';
 
 import Character from './Character';
@@ -20,15 +21,23 @@ const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }
   return (
     <Sidebar className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
       {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => (
-        <div className={styles.group} key={translationKey}>
-          <h2 className={styles.title}>{`${translate(translationKey)} (${remainingCount} / ${totalCount})`}</h2>
-
+        <Sidebar.Section
+          key={translationKey}
+          title={
+            <span className={styles.title}>
+              <span>{translate(translationKey)}</span>
+              <Badge className={styles.badge}>
+                {remainingCount} / {totalCount}
+              </Badge>
+            </span>
+          }
+        >
           <div className={styles.content}>
             {tiles.map((tile) => {
               return <Character key={tile.character} tile={tile} />;
             })}
           </div>
-        </div>
+        </Sidebar.Section>
       ))}
     </Sidebar>
   );

package/packages/scrabble-solver/src/components/Sidebar/Sidebar.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { FunctionComponent, ReactNode } from 'react';
 import Modal from 'react-modal';
 
-import { Cross } from 'icons';
+import { CrossFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
 import { useTranslate } from 'state';
 
@@ -41,7 +41,7 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
 
           <SquareButton
             className={styles.closeButton}
-            Icon={Cross}
+            Icon={CrossFill}
             tooltip={translate('common.close')}
             onClick={onClose}
           />

package/packages/scrabble-solver/src/components/Sidebar/components/Section/Section.module.scss

@@ -7,6 +7,5 @@
 .heading {
   margin-bottom: var(--spacing--m);
   font-size: var(--font--size--h2);
-  font-family: var(--font--family--title);
   font-weight: 300;
 }

package/packages/scrabble-solver/src/components/Sidebar/components/Section/Section.tsx

@@ -6,7 +6,7 @@ import styles from './Section.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
-  title: string;
+  title: ReactNode;
 }
 
 const Section: FunctionComponent<Props> = ({ children, className, title }) => (

package/packages/scrabble-solver/src/components/SquareButton/SquareButton.module.scss

@@ -18,6 +18,11 @@
   &:active {
     color: var(--color--foreground);
   }
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.25;
+  }
 }
 
 .content {

package/packages/scrabble-solver/src/components/Words/Words.module.scss

@@ -0,0 +1,35 @@
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.badge {
+  margin-left: var(--spacing--m);
+}
+
+.word {
+  display: flex;
+  align-items: center;
+
+  & + & {
+    margin-top: var(--spacing--s);
+  }
+}
+
+.invalid {
+  color: var(--color--error);
+}
+
+.valid {
+  color: var(--color--success);
+}
+
+.icon {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+  margin-right: var(--spacing--s);
+}

package/packages/scrabble-solver/src/components/Words/Words.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import { FunctionComponent } from 'react';
+
+import { Check, Cross } from 'icons';
+import { selectVerify, useTranslate, useTypedSelector } from 'state';
+
+import Badge from '../Badge';
+import Sidebar from '../Sidebar';
+
+import styles from './Words.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+  const translate = useTranslate();
+  const { invalidWords, validWords } = useTypedSelector(selectVerify);
+
+  return (
+    <Sidebar className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>
+      <Sidebar.Section
+        title={
+          <span className={styles.title}>
+            <span>{translate('words.invalid')}</span>
+            <Badge className={styles.badge}>{invalidWords.length}</Badge>
+          </span>
+        }
+      >
+        {invalidWords.map((word, index) => (
+          <div className={styles.word} key={index}>
+            <Cross className={classNames(styles.icon, styles.invalid)} /> {word}
+          </div>
+        ))}
+      </Sidebar.Section>
+
+      <Sidebar.Section
+        title={
+          <span className={styles.title}>
+            <span>{translate('words.valid')}</span>
+            <Badge className={styles.badge}>{validWords.length}</Badge>
+          </span>
+        }
+      >
+        {validWords.map((word, index) => (
+          <div className={styles.word} key={index}>
+            <Check className={classNames(styles.icon, styles.valid)} /> {word}
+          </div>
+        ))}
+      </Sidebar.Section>
+    </Sidebar>
+  );
+};
+
+export default Words;

package/packages/scrabble-solver/src/components/Words/index.ts

@@ -0,0 +1 @@
+export { default } from './Words';

package/packages/scrabble-solver/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
@@ -25,3 +26,4 @@ export { default as SvgFontCss } from './SvgFontCss';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
 export { default as Well } from './Well';
+export { default as Words } from './Words';

package/packages/scrabble-solver/src/i18n/de.json

@@ -49,5 +49,8 @@
   "settings.autoGroupTiles.right": "Rechte Seite",
   "settings.autoGroupTiles.null": "Nicht gruppieren",
   "settings.game": "Spiel",
-  "settings.language": "Sprache"
+  "settings.language": "Sprache",
+  "words": "Gebildete Wörter",
+  "words.invalid": "Falsch",
+  "words.valid": "Korrekt"
 }

package/packages/scrabble-solver/src/i18n/en.json

@@ -49,5 +49,8 @@
   "settings.autoGroupTiles.right": "On the right",
   "settings.autoGroupTiles.null": "Do not group",
   "settings.game": "Game",
-  "settings.language": "Language"
+  "settings.language": "Language",
+  "words": "Created words",
+  "words.invalid": "Invalid",
+  "words.valid": "Valid"
 }

package/packages/scrabble-solver/src/i18n/es.json

@@ -49,5 +49,8 @@
   "settings.autoGroupTiles.right": "A la derecha",
   "settings.autoGroupTiles.null": "No agrupar",
   "settings.game": "Juego",
-  "settings.language": "Idioma"
+  "settings.language": "Idioma",
+  "words": "Palabras creadas",
+  "words.invalid": "Incorrecto",
+  "words.valid": "Correcto"
 }

package/packages/scrabble-solver/src/i18n/fr.json

@@ -49,5 +49,8 @@
   "settings.autoGroupTiles.right": "Vers la gauche",
   "settings.autoGroupTiles.null": "Ne pas grouper",
   "settings.game": "Jeu",
-  "settings.language": "Langue"
+  "settings.language": "Langue",
+  "words": "Mots créés",
+  "words.invalid": "Incorrect",
+  "words.valid": "Corriger"
 }

package/packages/scrabble-solver/src/i18n/pl.json

@@ -49,5 +49,8 @@
   "settings.autoGroupTiles.right": "Po prawej",
   "settings.autoGroupTiles.null": "Nie grupuj",
   "settings.game": "Gra",
-  "settings.language": "Język"
+  "settings.language": "Język",
+  "words": "Utworzone słowa",
+  "words.invalid": "Niepoprawne",
+  "words.valid": "Poprawne"
 }

package/packages/scrabble-solver/src/icons/BookHalf.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/book-half/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/Check.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/check/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/Cross.svg

@@ -1,4 +1,4 @@
-<!-- https://icons.getbootstrap.com/icons/x-square-fill/ -->
+<!-- https://icons.getbootstrap.com/icons/x/ -->
 <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-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z" fill="currentColor" />
+  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"  fill="currentColor" />
 </svg>

package/packages/scrabble-solver/src/icons/CrossFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/x-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-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/index.ts

@@ -2,10 +2,13 @@ export { default as ArrowDown } from './ArrowDown.svg';
 export { default as ArrowLeft } from './ArrowLeft.svg';
 export { default as ArrowRight } from './ArrowRight.svg';
 export { default as ArrowUp } from './ArrowUp.svg';
+export { default as BookHalf } from './BookHalf.svg';
+export { default as Check } from './Check.svg';
 export { default as CheckboxChecked } from './CheckboxChecked.svg';
 export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
 export { default as Cog } from './Cog.svg';
 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 Flag } from './Flag.svg';

package/packages/scrabble-solver/src/pages/api/solve.ts

@@ -2,7 +2,7 @@ import { getLocaleConfig, isConfigId } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import logger from '@scrabble-solver/logger';
-import Solver from '@scrabble-solver/solver';
+import { solve as solveScrabble } from '@scrabble-solver/solver';
 import { Board, Config, isBoardJson, isLocale, Locale, Tile } from '@scrabble-solver/types';
 import { NextApiRequest, NextApiResponse } from 'next';
 
@@ -36,8 +36,7 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
 
     const trie = await dictionaries.get(locale);
     const tiles = characters.map((character) => new Tile({ character, isBlank: character === BLANK }));
-    const solver = new Solver(config, trie);
-    const results = solver.solve(board, tiles);
+    const results = solveScrabble(trie, config, board, tiles);
     response.status(200).send(results.map((result) => result.toJson()));
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/packages/scrabble-solver/src/pages/api/verify.ts

@@ -0,0 +1,71 @@
+import { getLocaleConfig, isConfigId } from '@scrabble-solver/configs';
+import { dictionaries } from '@scrabble-solver/dictionaries';
+import logger from '@scrabble-solver/logger';
+import { Board, Config, isBoardJson, isLocale, Locale } from '@scrabble-solver/types';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { getServerLoggingData, isBoardValid } from 'api';
+
+interface RequestData {
+  board: Board;
+  config: Config;
+  locale: Locale;
+}
+
+const verify = async (request: NextApiRequest, response: NextApiResponse): Promise<void> => {
+  const meta = getServerLoggingData(request);
+
+  try {
+    const { board, locale } = parseRequest(request);
+
+    logger.info('verify - request', {
+      meta,
+      payload: {
+        board: board.toString(),
+        boardBlanksCount: board.getBlanksCount(),
+        boardTilesCount: board.getTilesCount(),
+        configId: request.body.configId,
+        locale,
+      },
+    });
+
+    const trie = await dictionaries.get(locale);
+    const words = board.getWords().sort((a, b) => a.localeCompare(b));
+    const invalidWords = words.filter((word) => !trie.has(word));
+    const validWords = words.filter((word) => trie.has(word));
+    response.status(200).send({ invalidWords, validWords });
+  } catch (error) {
+    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;
+  }
+};
+
+const parseRequest = (request: NextApiRequest): RequestData => {
+  const { board: boardJson, configId, locale } = request.body;
+
+  if (!isLocale(locale)) {
+    throw new Error('Invalid "locale" parameter');
+  }
+
+  if (!isConfigId(configId)) {
+    throw new Error('Invalid "configId" parameter');
+  }
+
+  const config = getLocaleConfig(configId, locale);
+
+  if (!isBoardJson(boardJson) || !isBoardValid(boardJson, config)) {
+    throw new Error('Invalid "board" parameter');
+  }
+
+  const board = Board.fromJson(boardJson);
+
+  return {
+    board,
+    config,
+    locale,
+  };
+};
+
+export default verify;

package/packages/scrabble-solver/src/pages/index.tsx

@@ -19,6 +19,7 @@ import {
   Settings,
   Splash,
   Well,
+  Words,
 } from 'components';
 import { useIsTablet, useLocalStorage } from 'hooks';
 import { getCellSize } from 'lib';
@@ -39,6 +40,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   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 }] =
@@ -85,6 +87,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
             onShowKeyMap={() => setShowKeyMap(true)}
             onShowRemainingTiles={() => setShowRemainingTiles(true)}
             onShowSettings={() => setShowSettings(true)}
+            onShowWords={() => setShowWords(true)}
           />
         </div>
 
@@ -122,6 +125,8 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
       <KeyMap isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
 
+      <Words isOpen={showWords} onClose={() => setShowWords(false)} />
+
       <RemainingTiles isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
 
       <Splash forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />

package/packages/scrabble-solver/src/sdk/index.ts

@@ -1,3 +1,4 @@
 export { default as findWordDefinitions } from './findWordDefinitions';
 export { default as solve } from './solve';
+export { default as verify } from './verify';
 export { default as visit } from './visit';

package/packages/scrabble-solver/src/sdk/verify.ts

@@ -0,0 +1,24 @@
+import { BoardJson, Locale } from '@scrabble-solver/types';
+
+interface Payload {
+  board: BoardJson;
+  configId: string;
+  locale: Locale;
+}
+
+interface Response {
+  invalidWords: string[];
+  validWords: string[];
+}
+
+const verify = ({ board, configId, locale }: Payload): Promise<Response> => {
+  return fetch('/api/verify', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ board, configId, locale }),
+  }).then((response) => response.json());
+};
+
+export default verify;

package/packages/scrabble-solver/src/state/rootReducer.ts

@@ -8,6 +8,7 @@ import {
   resultsSlice,
   settingsSlice,
   solveSlice,
+  verifySlice,
 } from './slices';
 
 const rootReducer = combineReducers({
@@ -18,6 +19,7 @@ const rootReducer = combineReducers({
   results: resultsSlice.reducer,
   settings: settingsSlice.reducer,
   solve: solveSlice.reducer,
+  verify: verifySlice.reducer,
 });
 
 export default rootReducer;