scrabble-solver 2.18.0 → 2.18.2

package/packages/scrabble-solver/src/modals/WordsModal/components/WordsTable/WordsTable.tsx

@@ -0,0 +1,137 @@
+import { isSameBoardWord } from '@scrabble-solver/types';
+import classNames from 'classnames';
+import { type FunctionComponent, useCallback, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { List } from 'react-window';
+
+import { EmptyState } from '@/components/EmptyState';
+import { Header, HeaderButton, Search } from '@/components/Table';
+import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import GeoAlt from '@/icons/GeoAlt.svg';
+import QuestionSquare from '@/icons/QuestionSquare.svg';
+import { RESULTS_ITEM_HEIGHT, RESULTS_OVERSCAN_COUNT } from '@/parameters';
+import {
+  hoveredWordSlice,
+  selectHoveredWord,
+  selectLocale,
+  selectProcessedWords,
+  selectWordsQuery,
+  selectWordsSort,
+  useTranslate,
+  useTypedSelector,
+  verifySlice,
+} from '@/state';
+import { WordColumnId } from '@/types';
+
+import { WordRow, type WordRowData } from './WordRow';
+import styles from './WordsTable.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onPreview: () => void;
+}
+
+export const WordsTable: FunctionComponent<Props> = ({ className, isOpen, onPreview }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const isTouchDevice = useIsTouchDevice();
+  const isCompactLayout = useIsCompactLayout();
+  const highlightFollowsPointer = !isTouchDevice && !isCompactLayout;
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const words = useTypedSelector(selectProcessedWords);
+  const query = useTypedSelector(selectWordsQuery);
+  const sort = useTypedSelector(selectWordsSort);
+  const hoveredWord = useTypedSelector(selectHoveredWord);
+  const highlightedIndex = hoveredWord ? words.findIndex((word) => isSameBoardWord(word, hoveredWord)) : -1;
+  const rowProps = useMemo<WordRowData>(
+    () => ({ highlightFollowsPointer, highlightedIndex, isTouchDevice, words, onPreview }),
+    [highlightFollowsPointer, highlightedIndex, isTouchDevice, words, onPreview],
+  );
+
+  const handleSort = useCallback(
+    (columnId: WordColumnId) => {
+      dispatch(verifySlice.actions.sort(columnId));
+    },
+    [dispatch],
+  );
+
+  const handleQueryChange = useCallback(
+    (newQuery: string) => {
+      dispatch(verifySlice.actions.changeQuery(newQuery));
+    },
+    [dispatch],
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    dispatch(hoveredWordSlice.actions.clear());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isOpen && isCompactLayout && words.length > 0 && highlightedIndex === -1) {
+      dispatch(hoveredWordSlice.actions.set(words[0]));
+    }
+  }, [dispatch, highlightedIndex, isOpen, isCompactLayout, words]);
+
+  return (
+    <div
+      aria-label={translate('words')}
+      className={classNames(styles.words, className)}
+      data-testid="words"
+      role="region"
+    >
+      <Header>
+        <HeaderButton
+          className={styles.coordinates}
+          Icon={GeoAlt}
+          id={WordColumnId.Coordinates}
+          sort={sort}
+          translationKey="settings.showCoordinates"
+          onSort={handleSort}
+        />
+
+        <HeaderButton id={WordColumnId.Word} primary sort={sort} translationKey="common.word" onSort={handleSort} />
+
+        <HeaderButton
+          className={styles.stat}
+          Icon={QuestionSquare}
+          id={WordColumnId.Validity}
+          sort={sort}
+          translationKey="words.validity"
+          onSort={handleSort}
+        />
+      </Header>
+
+      <div aria-live="polite" className={styles.content}>
+        {words.length === 0 && <EmptyState variant="info">{translate('words.empty-state.no-words')}</EmptyState>}
+
+        {words.length > 0 && (
+          <div className={styles.listContainer}>
+            <List
+              className={styles.list}
+              dir={direction}
+              overscanCount={RESULTS_OVERSCAN_COUNT}
+              rowComponent={WordRow}
+              rowCount={words.length}
+              rowHeight={RESULTS_ITEM_HEIGHT}
+              rowProps={rowProps}
+              onMouseLeave={highlightFollowsPointer ? handleMouseLeave : undefined}
+            />
+          </div>
+        )}
+      </div>
+
+      {words.length > 0 && (
+        <Search
+          className={styles.input}
+          placeholder={translate('words.input.placeholder')}
+          value={query}
+          onChange={handleQueryChange}
+        />
+      )}
+    </div>
+  );
+};

package/packages/scrabble-solver/src/modals/WordsModal/components/WordsTable/index.ts

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

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

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

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

@@ -4,85 +4,49 @@ import Head from 'next/head';
 import { type FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
-import { SeoMessage } from '@/components/SeoMessage';
+import { SITE_DESCRIPTION, SITE_URL } from '@/parameters';
 import { store } from '@/state';
 
 import '../styles/global.scss';
 
-const DESCRIPTION =
-  'Scrabble Solver 2 - Free and open-source analysis tool for Scrabble, Scrabble Duel, Super Scrabble, Letter League, Crossplay, Literaki and Kelimelik. Quickly find top scoring words using given letters and board state. Available in English, French, German, Persian, Polish, Romanian, Spanish, and Turkish.';
-
-const KEYWORDS = [
-  'Scrabble Solver',
-  'Scrabble',
-  'Scrabble Duel',
-  'Solver',
-  'Super Scrabble',
-  'Kelimelik',
-  'Letter League',
-  'Crossplay',
-  'NYT Crossplay',
-  'Literaki',
-  'Board',
-  'Open-source',
-  'Open',
-  'Source',
-  'Word',
-  'Finder',
-  'Cheating',
-  'Word',
-  'English',
-  'Français',
-  'French',
-  'Deutsch',
-  'German',
-  'Polski',
-  'Polish',
-  'فارسی',
-  'Farsi',
-  'Español',
-  'Spanish',
-  'Română',
-  'Romanian',
-  'Türkçe',
-  'Turkish',
-  'SOWPODS',
-  'TWL06',
-  'SJP',
-  'FISE-2017',
-  'FISE-2',
-  'CNRTL',
-  'Kamil Mielnik',
-].join(',');
-
-const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
-  <>
-    <Head>
-      <title>Scrabble Solver 2</title>
-      <meta charSet="utf-8" />
-      <meta name="author" content="Kamil Mielnik" />
-      <meta name="description" content={DESCRIPTION} />
-      <meta name="keywords" content={KEYWORDS} />
-      <meta name="robots" content="index, follow, notranslate, noimageindex" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta property="og:title" content={DESCRIPTION} />
-      <meta property="og:type" content="website" />
-      <meta property="og:url" content="https://scrabble-solver.org" />
-      <meta property="og:image" content="https://scrabble-solver.org/og.png" />
-      <meta property="og:image:type" content="image/png" />
-      <meta property="og:image:width" content="1200" />
-      <meta property="og:image:height" content="630" />
-      <meta property="og:image:alt" content={DESCRIPTION} />
-    </Head>
-
-    <Provider store={store}>
-      <SeoMessage />
-
-      <FloatingDelayGroup delay={0}>
-        <Component {...pageProps} />
-      </FloatingDelayGroup>
-    </Provider>
-  </>
-);
+const TITLE = 'Scrabble Solver 2 - Board Solver & Word Finder';
+
+const App: FunctionComponent<AppProps> = ({ Component, pageProps, router }) => {
+  const isIndexable = router.pathname === '/';
+
+  return (
+    <>
+      <Head>
+        <title>{TITLE}</title>
+        <meta charSet="utf-8" />
+        <meta name="author" content="Kamil Mielnik" />
+        <meta name="description" content={SITE_DESCRIPTION} />
+        {isIndexable ? <link rel="canonical" href={`${SITE_URL}/`} /> : <meta name="robots" content="noindex" />}
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta property="og:site_name" content="Scrabble Solver" />
+        <meta property="og:title" content={TITLE} />
+        <meta property="og:description" content={SITE_DESCRIPTION} />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={`${SITE_URL}/`} />
+        <meta property="og:locale" content="en_US" />
+        <meta property="og:image" content={`${SITE_URL}/og.png`} />
+        <meta property="og:image:type" content="image/png" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta property="og:image:alt" content="Scrabble tiles spelling out Scrabble Solver 2" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={TITLE} />
+        <meta name="twitter:description" content={SITE_DESCRIPTION} />
+        <meta name="twitter:image" content={`${SITE_URL}/og.png`} />
+      </Head>
+
+      <Provider store={store}>
+        <FloatingDelayGroup delay={0}>
+          <Component {...pageProps} />
+        </FloatingDelayGroup>
+      </Provider>
+    </>
+  );
+};
 
 export default App;

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

@@ -70,27 +70,29 @@ export default class MyDocument extends Document {
         <InlineCssHead>
           {/* eslint-disable-next-line react/no-danger */}
           <script dangerouslySetInnerHTML={{ __html: preHydrationScript }} />
-          <link rel="apple-touch-icon-precomposed" sizes="57x57" href="icons/apple-touch-icon-57x57.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="144x144" href="icons/apple-touch-icon-144x144.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="60x60" href="icons/apple-touch-icon-60x60.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="120x120" href="icons/apple-touch-icon-120x120.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="76x76" href="icons/apple-touch-icon-76x76.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="152x152" href="icons/apple-touch-icon-152x152.png" />
-          <link rel="icon" type="image/png" href="icons/favicon-196x196.png" sizes="196x196" />
-          <link rel="icon" type="image/png" href="icons/favicon-96x96.png" sizes="96x96" />
-          <link rel="icon" type="image/png" href="icons/favicon-32x32.png" sizes="32x32" />
-          <link rel="icon" type="image/png" href="icons/favicon-16x16.png" sizes="16x16" />
-          <link rel="icon" type="image/png" href="icons/favicon-128.png" sizes="128x128" />
-          <link rel="icon" href="icons/favicon.svg" />
+          <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/icons/apple-touch-icon-57x57.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/icons/apple-touch-icon-114x114.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icons/apple-touch-icon-72x72.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icons/apple-touch-icon-144x144.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/icons/apple-touch-icon-60x60.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icons/apple-touch-icon-120x120.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icons/apple-touch-icon-76x76.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icons/apple-touch-icon-152x152.png" />
+          <link rel="icon" type="image/png" href="/icons/favicon-196x196.png" sizes="196x196" />
+          <link rel="icon" type="image/png" href="/icons/favicon-96x96.png" sizes="96x96" />
+          <link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32" />
+          <link rel="icon" type="image/png" href="/icons/favicon-16x16.png" sizes="16x16" />
+          <link rel="icon" type="image/png" href="/icons/favicon-128.png" sizes="128x128" />
+          <link rel="icon" href="/icons/favicon.svg" />
+          <link rel="manifest" href="/site.webmanifest" />
           <meta name="application-name" content="Scrabble Solver" />
+          <meta name="theme-color" content="#EFE3AE" />
           <meta name="msapplication-TileColor" content="#EFE3AE" />
-          <meta name="msapplication-TileImage" content="icons/mstile-144x144.png" />
-          <meta name="msapplication-square70x70logo" content="icons/mstile-70x70.png" />
-          <meta name="msapplication-square150x150logo" content="icons/mstile-150x150.png" />
-          <meta name="msapplication-wide310x150logo" content="icons/mstile-310x150.png" />
-          <meta name="msapplication-square310x310logo" content="icons/mstile-310x310.png" />
+          <meta name="msapplication-TileImage" content="/icons/mstile-144x144.png" />
+          <meta name="msapplication-square70x70logo" content="/icons/mstile-70x70.png" />
+          <meta name="msapplication-square150x150logo" content="/icons/mstile-150x150.png" />
+          <meta name="msapplication-wide310x150logo" content="/icons/mstile-310x150.png" />
+          <meta name="msapplication-square310x310logo" content="/icons/mstile-310x310.png" />
         </InlineCssHead>
 
         <body>

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

@@ -5,6 +5,7 @@ import { Board, type Config, type Game, type Locale, isBoardJson, isGame, isLoca
 import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData, isBoardValid } from '@/api';
+import { type VerifiedWord } from '@/types';
 
 interface RequestData {
   board: Board;
@@ -31,15 +32,15 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
     });
 
     const gaddag = await dictionaries.get(locale);
-    const words = board.getWords().sort((a, b) => a.localeCompare(b, locale));
-    const invalidWords: string[] = [];
-    const validWords: string[] = [];
+    const words = board.getWords().sort((a, b) => a.word.localeCompare(b.word, locale));
+    const invalidWords: VerifiedWord[] = [];
+    const validWords: VerifiedWord[] = [];
 
     for (const word of words) {
-      if (gaddag.has(word)) {
-        validWords.push(word);
+      if (gaddag.has(word.word)) {
+        validWords.push({ ...word, isValid: true });
       } else {
-        invalidWords.push(word);
+        invalidWords.push({ ...word, isValid: false });
       }
     }
 

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

@@ -6,7 +6,7 @@ import { execSync } from 'child_process';
 import fs from 'fs';
 import dynamic from 'next/dynamic';
 import path from 'path';
-import { type FunctionComponent, useCallback, useEffect, useState } from 'react';
+import { type FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Logo } from '@/components/Logo';
@@ -14,13 +14,23 @@ import { NavButtons } from '@/components/NavButtons';
 import { Solver } from '@/components/Solver';
 import { useDirection } from '@/hooks/useDirection';
 import { useEffectOnce } from '@/hooks/useEffectOnce';
+import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
 import { useLanguage } from '@/hooks/useLanguage';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
 import { LOCALE_FEATURES } from '@/i18n/constants';
 import { schedulePreloadModals } from '@/modals/preload';
-import { CONFIG_PENDING_CLASS } from '@/parameters';
+import { CONFIG_PENDING_CLASS, GITHUB_PROJECT_URL, NPM_PACKAGE_URL, SITE_DESCRIPTION, SITE_URL } from '@/parameters';
 import { registerServiceWorker } from '@/serviceWorkerManager';
-import { initialize, reset, selectConfig, selectIsHydrated, selectLocale, useTypedSelector } from '@/state';
+import {
+  hoveredWordSlice,
+  initialize,
+  reset,
+  resultsSlice,
+  selectConfig,
+  selectIsHydrated,
+  selectLocale,
+  useTypedSelector,
+} from '@/state';
 
 import styles from './index.module.scss';
 
@@ -49,6 +59,30 @@ const WordsModal = dynamic(() => import('@/modals/WordsModal').then((module) =>
   ssr: false,
 });
 
+const WEB_APPLICATION_JSON_LD = JSON.stringify({
+  '@context': 'https://schema.org',
+  '@type': 'WebApplication',
+  name: 'Scrabble Solver',
+  alternateName: 'Scrabble Solver 2',
+  url: `${SITE_URL}/`,
+  description: SITE_DESCRIPTION,
+  applicationCategory: 'GameApplication',
+  operatingSystem: 'Any',
+  browserRequirements: 'Requires JavaScript',
+  image: `${SITE_URL}/og.png`,
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: ['en-US', 'en-GB', 'de-DE', 'es-ES', 'fa-IR', 'fr-FR', 'pl-PL', 'ro-RO', 'tr-TR'],
+  featureList: [
+    'Finds the highest-scoring words for a given board and rack',
+    'Supports Scrabble, Super Scrabble, Scrabble Duel, Letter League, Crossplay, Literaki, and Kelimelik',
+    'Dictionaries and word definitions in 8 languages',
+    'Works offline once a dictionary is cached',
+    'Free, open source, no ads, no sign-up',
+  ],
+  sameAs: [GITHUB_PROJECT_URL, NPM_PACKAGE_URL],
+  author: { '@type': 'Person', name: 'Kamil Mielnik', url: 'https://kamilmielnik.com' },
+});
+
 interface Props {
   version: string;
 }
@@ -60,6 +94,8 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const isHydrated = useTypedSelector(selectIsHydrated);
+  const isCompactLayout = useIsCompactLayout();
+  const previousIsCompactLayout = useRef(isCompactLayout);
   const [modals, setModals] = useState<Record<Modal, boolean>>({
     dictionary: false,
     keyMap: false,
@@ -107,6 +143,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const handleCloseResults = useCallback(() => patchModals({ results: false }), [patchModals]);
   const handleCloseSettings = useCallback(() => patchModals({ settings: false }), [patchModals]);
   const handleCloseWords = useCallback(() => patchModals({ words: false }), [patchModals]);
+  const handlePreviewWord = useCallback(() => patchModals({ menu: false, words: false }), [patchModals]);
 
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
@@ -135,6 +172,16 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     }
   }, [isHydrated]);
 
+  useEffect(() => {
+    if (previousIsCompactLayout.current === isCompactLayout) {
+      return;
+    }
+
+    previousIsCompactLayout.current = isCompactLayout;
+    dispatch(resultsSlice.actions.changeResultCandidate(null));
+    dispatch(hoveredWordSlice.actions.clear());
+  }, [dispatch, isCompactLayout]);
+
   useEffectOnce(() => {
     if (process.env.NODE_ENV === 'production') {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -149,11 +196,11 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     <>
       <nav className={styles.nav}>
         <div className={styles.navContent}>
-          <div className={styles.navLogo}>
+          <h1 className={styles.navLogo}>
             <a className={styles.logoContainer} href="/" title={version}>
               <Logo className={styles.logo} />
             </a>
-          </div>
+          </h1>
 
           <NavButtons
             onClear={handleClear}
@@ -170,6 +217,9 @@ const Index: FunctionComponent<Props> = ({ version }) => {
         <Solver className={styles.solver} onShowResults={handleShowResults} />
       </main>
 
+      {/* eslint-disable-next-line react/no-danger */}
+      <script dangerouslySetInnerHTML={{ __html: WEB_APPLICATION_JSON_LD }} type="application/ld+json" />
+
       {mountedModals.menu && (
         <MenuModal
           isOpen={modals.menu}
@@ -185,7 +235,9 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
       {mountedModals.keyMap && <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />}
 
-      {mountedModals.words && <WordsModal isOpen={modals.words} onClose={handleCloseWords} />}
+      {mountedModals.words && (
+        <WordsModal isOpen={modals.words} onClose={handleCloseWords} onPreview={handlePreviewWord} />
+      )}
 
       {config.supportsRemainingTiles && mountedModals.remainingTiles && (
         <RemainingTilesModal isOpen={modals.remainingTiles} onClose={handleCloseRemainingTiles} />

package/packages/scrabble-solver/src/pages/not-found.tsx

@@ -1,5 +1,16 @@
-'use-client';
+import Head from 'next/head';
+import { type FunctionComponent } from 'react';
 
 import { NotFound } from '@/components/NotFound';
 
-export default NotFound;
+const NotFoundPage: FunctionComponent = () => (
+  <>
+    <Head>
+      <title>Page not found - Scrabble Solver</title>
+    </Head>
+
+    <NotFound />
+  </>
+);
+
+export default NotFoundPage;

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

@@ -8,8 +8,17 @@ export const BREAKPOINTS = {
   xl: Number(variables.breakpointXl),
 };
 
+export const BREAKPOINT_HEIGHT_L = Number(variables.breakpointHeightL);
+
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
+export const NPM_PACKAGE_URL = 'https://www.npmjs.com/package/scrabble-solver';
+
+export const SITE_URL = 'https://scrabble-solver.org';
+
+export const SITE_DESCRIPTION =
+  'Free, open-source board solver and word finder for Scrabble, Letter League, and Literaki. Enter your letters and board to get the highest-scoring words.';
+
 // Must match the class name in global.scss
 export const CONFIG_PENDING_CLASS = 'config-pending';
 

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

@@ -1,6 +1,7 @@
 import { type BoardJson, type Game, type Locale } from '@scrabble-solver/types';
 
 import { verifyLocally } from '@/solver-worker';
+import { type VerifiedWord } from '@/types';
 
 import { fetchJson } from './fetchJson';
 
@@ -11,8 +12,8 @@ interface Payload {
 }
 
 interface Response {
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  validWords: VerifiedWord[];
 }
 
 export const verify = async ({ board, game, locale }: Payload): Promise<Response> => {

package/packages/scrabble-solver/src/solver-worker/client.test.ts

@@ -2,7 +2,7 @@ import { type ResultJson } from '@scrabble-solver/types';
 import { afterAll, beforeEach, describe, expect, it } from 'bun:test';
 
 import type * as clientModule from './client';
-import { type SolverWorkerRequest, type SolverWorkerResponse } from './messages';
+import { type SolverWorkerRequest, type SolverWorkerResponse, type VerifyResult } from './messages';
 
 type Listener = (event: { data: SolverWorkerResponse }) => void;
 
@@ -102,9 +102,9 @@ describe('solver worker client', () => {
 
   it('resolves a verify with the worker words', async () => {
     const verify = verifyLocally(verifyPayload);
-    respond({ data: { invalidWords: ['zz'], validWords: ['ab'] }, id: lastRequestId(), outcome: 'answered' });
+    respond({ data: createVerifyResult(), id: lastRequestId(), outcome: 'answered' });
 
-    expect(await verify).toEqual({ invalidWords: ['zz'], validWords: ['ab'] });
+    expect(await verify).toEqual(createVerifyResult());
   });
 
   it('does not wait for a prefetch to answer', () => {
@@ -149,3 +149,10 @@ function lastRequestId(): number {
 function createResults(word: string): ResultJson[] {
   return [{ blankIndices: [], id: 0, isHorizontal: true, points: 1, tiles: word.split(''), x: 0, y: 0 }];
 }
+
+function createVerifyResult(): VerifyResult {
+  return {
+    invalidWords: [{ direction: 'horizontal', isValid: false, word: 'zz', x: 0, y: 0 }],
+    validWords: [{ direction: 'vertical', isValid: true, word: 'ab', x: 3, y: 5 }],
+  };
+}

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

@@ -5,7 +5,7 @@ import { BLANK } from '@scrabble-solver/constants';
 import { solve } from '@scrabble-solver/solver';
 import { Board, type Locale, Tile } from '@scrabble-solver/types';
 
-import { type SolveRequestPayload, type VerifyRequestPayload } from '@/types';
+import { type SolveRequestPayload, type VerifiedWord, type VerifyRequestPayload } from '@/types';
 
 import { revalidateDictionary } from './dictionaries';
 import { getGaddag } from './getGaddag';
@@ -64,15 +64,15 @@ async function handleVerify(
   }
 
   const board = Board.fromJson(boardJson);
-  const words = board.getWords().sort((a, b) => a.localeCompare(b, locale));
-  const invalidWords: string[] = [];
-  const validWords: string[] = [];
+  const words = board.getWords().sort((a, b) => a.word.localeCompare(b.word, locale));
+  const invalidWords: VerifiedWord[] = [];
+  const validWords: VerifiedWord[] = [];
 
   for (const word of words) {
-    if (gaddag.has(word)) {
-      validWords.push(word);
+    if (gaddag.has(word.word)) {
+      validWords.push({ ...word, isValid: true });
     } else {
-      invalidWords.push(word);
+      invalidWords.push({ ...word, isValid: false });
     }
   }
 

package/packages/scrabble-solver/src/solver-worker/messages.ts

@@ -1,10 +1,10 @@
 import { type Locale, type ResultJson } from '@scrabble-solver/types';
 
-import { type SolveRequestPayload, type VerifyRequestPayload } from '@/types';
+import { type SolveRequestPayload, type VerifiedWord, type VerifyRequestPayload } from '@/types';
 
 export interface VerifyResult {
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  validWords: VerifiedWord[];
 }
 
 export type SolverWorkerRequest =

package/packages/scrabble-solver/src/state/hoveredWord/index.ts

@@ -0,0 +1,4 @@
+export * from './initialState';
+export * from './selectors';
+export * from './slice';
+export * from './types';

package/packages/scrabble-solver/src/state/hoveredWord/initialState.ts

@@ -0,0 +1,5 @@
+import type { HoveredWordState } from './types';
+
+export const hoveredWordInitialState: HoveredWordState = {
+  word: null,
+};

package/packages/scrabble-solver/src/state/hoveredWord/selectors.ts

@@ -0,0 +1,5 @@
+import type { VerifiedWord } from '@/types';
+
+import type { RootState } from '../types';
+
+export const selectHoveredWord = (state: RootState): VerifiedWord | null => state.hoveredWord.word;