scrabble-solver 2.18.1 → 2.18.3

package/e2e/bugs/398-digraphs-in-created-words.spec.ts

@@ -17,7 +17,7 @@ test.describe('#398 - Solitary digraph tiles are recognised as created words', (
     const modal = Lib.getOpenModal(page);
     await expect(modal.getByText('ch', { exact: true })).toHaveCount(0);
     await expect(modal.getByText('chiclean', { exact: true })).toBeVisible();
-    await expect(modal.getByLabel('Incorrecto', { exact: true }).getByText('0', { exact: true })).toBeVisible();
-    await expect(modal.getByLabel('Correcto', { exact: true }).getByText('1', { exact: true })).toBeVisible();
+    await expect(modal.getByLabel('Incorrecto', { exact: true })).toHaveCount(0);
+    await expect(modal.getByLabel('Correcto', { exact: true })).toHaveCount(1);
   });
 });

package/e2e/bugs/445-tile-text-selection.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+/**
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/445
+ */
+test.describe('#445 - Text selection not disabled in tiles', () => {
+  test('Tile input declares user-select: none and a transparent selection highlight', async ({ page }) => {
+    await Lib.visitIndex(page);
+    const inputClass = await Lib.getBoardTile(page, 0, 0).getAttribute('class');
+
+    await expect(Lib.getRackTile(page, 0)).toHaveClass(inputClass ?? '');
+
+    const declarations = await page.evaluate((selector) => {
+      const styleBySelector = new Map<string, CSSStyleDeclaration>();
+
+      for (const sheet of Array.from(document.styleSheets)) {
+        for (const rule of Array.from(sheet.cssRules)) {
+          if (rule instanceof CSSStyleRule) {
+            for (const selectorPart of rule.selectorText.split(',')) {
+              styleBySelector.set(selectorPart.trim(), rule.style);
+            }
+          }
+        }
+      }
+
+      return {
+        userSelect: styleBySelector.get(selector)?.userSelect,
+        selectionBackground: styleBySelector.get(`${selector}::selection`)?.backgroundColor,
+      };
+    }, `.${inputClass}`);
+
+    expect(declarations.userSelect).toBe('none');
+    // The production build minifies "transparent" to "rgba(0, 0, 0, 0)".
+    expect(['transparent', 'rgba(0, 0, 0, 0)']).toContain(declarations.selectionBackground);
+  });
+});

package/e2e/bugs/451-results-list-gap-hover.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+/**
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/451
+ */
+test.describe('#451 - Stale highlight below a short results list', () => {
+  test('clears the highlight when the pointer moves into the gap below the last result', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeRack(page, 'qi');
+    await Lib.solve(page);
+
+    const results = Lib.getResults(page);
+    await expect(results.first()).toBeVisible();
+    await Lib.hoverResult(page, (await results.count()) - 1);
+
+    const highlightedTiles = page.locator('[role="mark"]');
+    await expect(highlightedTiles.first()).toBeVisible();
+
+    const list = Lib.getResultsContainer(page).locator('[role="list"]');
+    const listBox = await list.boundingBox();
+    const listContainerBox = await list.locator('..').boundingBox();
+
+    if (!listBox || !listContainerBox) {
+      throw new Error('Expected the results list and its container to be visible');
+    }
+
+    const gapY = listBox.y + listBox.height + 20;
+    expect(gapY).toBeLessThan(listContainerBox.y + listContainerBox.height);
+    await page.mouse.move(listBox.x + listBox.width / 2, gapY);
+
+    await expect(highlightedTiles).toHaveCount(0);
+  });
+});

package/e2e/bugs/452-stale-translations-cache.spec.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+/**
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/452
+ */
+test.describe('#452 - Stale translations cache', () => {
+  test('recovers when the cached translations are missing a newly added key', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await page.keyboard.press('Shift');
+    await page.waitForFunction(() => {
+      return Object.keys(localStorage).some((storageKey) => storageKey.includes('translations'));
+    });
+
+    await page.evaluate(() => {
+      const key = Object.keys(localStorage).find((storageKey) => storageKey.includes('translations'));
+
+      if (!key) {
+        throw new Error('Translations cache not found');
+      }
+
+      const stored = JSON.parse(localStorage.getItem(key) as string) as { translations: Record<string, string> };
+      delete stored.translations['words.validity'];
+      localStorage.setItem(key, JSON.stringify(stored));
+    });
+    await page.reload();
+
+    await page.getByLabel('Created words', { exact: true }).click();
+    await expect(Lib.getOpenModal(page).getByRole('button', { name: 'Validity', exact: true })).toBeVisible();
+  });
+});

package/e2e/features/427-highlight-created-words.spec.ts

@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/427
+ */
+test.describe('#427 - Highlight created words on board on hover', () => {
+  test('highlights the hovered word only at its own position', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'cat', 'horizontal', { x: 3, y: 3 });
+    await Lib.typeBoard(page, 'cat', 'vertical', { x: 8, y: 8 });
+    await Lib.openWordsModal(page);
+
+    await Lib.hoverWord(page, 3, 3, 'horizontal');
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 3, 3));
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 4, 3));
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 5, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 8));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 9));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 10));
+
+    await Lib.hoverWord(page, 8, 8, 'vertical');
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 3, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 4, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 5, 3));
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 8, 8));
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 8, 9));
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 8, 10));
+
+    await Lib.moveMouseAway(page);
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 3, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 4, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 5, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 8));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 9));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 10));
+  });
+
+  test('highlights a hovered invalid word', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'zvq', 'horizontal', { x: 5, y: 5 });
+    await Lib.openWordsModal(page);
+
+    await expect(page.getByTestId('word-5-5-horizontal').getByLabel('Invalid', { exact: true })).toBeVisible();
+    await Lib.hoverWord(page, 5, 5, 'horizontal');
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 5, 5));
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 6, 5));
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 7, 5));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 5));
+  });
+
+  test('clears the highlight when the modal closes', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'cat', 'horizontal', { x: 3, y: 3 });
+    await Lib.openWordsModal(page);
+
+    await Lib.hoverWord(page, 3, 3, 'horizontal');
+    await Lib.expectTileHighlighted(Lib.getBoardTile(page, 3, 3));
+
+    await page.keyboard.press('Escape');
+    await expect(Lib.getOpenModal(page)).toHaveCount(0);
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 3, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 4, 3));
+    await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 5, 3));
+  });
+
+  test.describe('narrow enough to select the first word', () => {
+    test.use({ viewport: { width: 800, height: 900 } });
+
+    test('highlights the clicked word and keeps it highlighted when the pointer leaves', async ({ page }) => {
+      await Lib.visitIndex(page);
+      await Lib.typeBoard(page, 'cat', 'horizontal', { x: 3, y: 3 });
+      await Lib.typeBoard(page, 'dog', 'horizontal', { x: 3, y: 5 });
+      await Lib.openWordsModal(page);
+
+      await page.getByTestId('word-3-5-horizontal').click();
+      await Lib.expectTileHighlighted(Lib.getBoardTile(page, 3, 5));
+      await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 3, 3));
+
+      await Lib.moveMouseAway(page);
+      await Lib.expectTileHighlighted(Lib.getBoardTile(page, 3, 5));
+      await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 3, 3));
+    });
+  });
+});

package/e2e/features/430-highlight-unreachable-cells-results.spec.ts

@@ -0,0 +1,75 @@
+import { expect, type Page, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+/*
+ * @see https://github.com/kamilmielnik/scrabble-solver/issues/430
+ */
+test.describe('#430 - Highlight unreachable cells includes current results', () => {
+  test('narrows the highlight to cells covered by results after solving', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'i', 'horizontal', { x: 7, y: 7 });
+    await Lib.typeRack(page, 'q');
+    await setHighlightUnreachableCells(page, 'On');
+
+    await expectReachable(page, 6, 7);
+    await expectReachable(page, 8, 7);
+    await expectReachable(page, 7, 6);
+    await expectReachable(page, 7, 8);
+
+    await Lib.solve(page);
+    await expect(Lib.getResults(page)).toHaveCount(2);
+
+    await expectReachable(page, 7, 7);
+    await expectReachable(page, 6, 7);
+    await expectReachable(page, 7, 6);
+
+    await expectUnreachable(page, 8, 7);
+    await expectUnreachable(page, 7, 8);
+    await expectUnreachable(page, 0, 0);
+  });
+
+  test('falls back to the heuristic when results become outdated', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'i', 'horizontal', { x: 7, y: 7 });
+    await Lib.typeRack(page, 'q');
+    await setHighlightUnreachableCells(page, 'On');
+    await Lib.solve(page);
+    await expectUnreachable(page, 8, 7);
+
+    await Lib.typeRack(page, 'a', 1);
+
+    await expectReachable(page, 8, 7);
+    await expectReachable(page, 7, 8);
+    await expectUnreachable(page, 0, 0);
+  });
+
+  test('dims all cells when fresh results are empty', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeRack(page, 'q');
+    await setHighlightUnreachableCells(page, 'On');
+    await expectReachable(page, 7, 7);
+
+    await Lib.solve(page);
+    await expect(Lib.getResults(page)).toHaveCount(0);
+
+    await expectUnreachable(page, 7, 7);
+    await expectUnreachable(page, 6, 7);
+    await expectUnreachable(page, 0, 0);
+  });
+});
+
+async function setHighlightUnreachableCells(page: Page, value: 'On' | 'Off') {
+  await Lib.getSettingsButton(page).click();
+  await expect(Lib.getOpenModal(page)).toBeVisible();
+  await Lib.getSettingOption(page, 'Highlight unreachable cells', value).check();
+  await Lib.closeModal(page);
+}
+
+async function expectUnreachable(page: Page, x: number, y: number) {
+  await expect(Lib.getBoardTile(page, x, y).locator('..')).toHaveClass(/unreachable/);
+}
+
+async function expectReachable(page: Page, x: number, y: number) {
+  await expect(Lib.getBoardTile(page, x, y).locator('..')).not.toHaveClass(/unreachable/);
+}

package/e2e/features/91-hover-remaining-tile-highlights.spec.ts

@@ -63,6 +63,22 @@ test.describe('#91 - Hovering remaining tile highlights all same tiles on the bo
     await expect(page.getByTestId('remaining-tile-a').locator('[role="mark"]')).not.toHaveCount(0);
     await Lib.expectTileHighlighted(Lib.getRackTile(page, 0));
   });
+
+  test.describe('full-viewport modal', () => {
+    test.use({ viewport: { width: 420, height: 900 } });
+
+    test('does not highlight anything when the modal covers the viewport', async ({ page }) => {
+      await Lib.visitIndex(page);
+      await Lib.typeBoard(page, 'cat', 'horizontal', { x: 7, y: 7 });
+      await Lib.typeRack(page, 'aab ');
+      await openRemainingTilesModalFromMenu(page);
+
+      await hoverRemainingTile(page, 'a');
+      await expect(page.getByTestId('remaining-tile-a').locator('[role="mark"]')).toHaveCount(0);
+      await Lib.expectTileNotHighlighted(Lib.getRackTile(page, 0));
+      await Lib.expectTileNotHighlighted(Lib.getBoardTile(page, 8, 7));
+    });
+  });
 });
 
 async function openRemainingTilesModal(page: Page) {
@@ -70,6 +86,12 @@ async function openRemainingTilesModal(page: Page) {
   await expect(Lib.getOpenModal(page)).toBeVisible();
 }
 
+async function openRemainingTilesModalFromMenu(page: Page) {
+  await page.getByRole('button', { name: 'Menu', exact: true }).click();
+  await Lib.getOpenModal(page).getByLabel('Remaining tiles', { exact: true }).click();
+  await expect(page.getByTestId('remaining-tile-a')).toBeVisible();
+}
+
 async function hoverRemainingTile(page: Page, character: string) {
   const testId = character === ' ' ? 'remaining-tile-blank' : `remaining-tile-${character}`;
   await page.getByTestId(testId).hover();

package/e2e/features/result-candidate-picker.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+test.describe('Result candidate picker', () => {
+  test.use({ viewport: { width: 800, height: 900 } });
+
+  test('shows a placeholder until a result candidate is picked', async ({ page }) => {
+    await Lib.visitIndex(page);
+
+    const picker = Lib.getResultCandidatePicker(page);
+    await expect(picker).toHaveText('Select...');
+
+    await Lib.typeBoard(page, 'i', 'horizontal', { x: 7, y: 7 });
+    await Lib.typeRack(page, 'q');
+    await Lib.solve(page);
+
+    await expect(picker).not.toContainText('Select...');
+    await expect(picker).toContainText('qi');
+  });
+});

package/e2e/features/results-interactions.spec.ts

@@ -0,0 +1,170 @@
+import { expect, type Page, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+test.describe('Results interactions', () => {
+  test.describe('compact, non-touch', () => {
+    test.use({ hasTouch: false, viewport: { width: 800, height: 900 } });
+
+    test('marks rows as clickable', expectModalRowsToBeClickable);
+
+    test('leaves the candidate untouched while the pointer travels over the list', async ({ page }) => {
+      await solveInSidebar(page);
+      await Lib.openResultsModal(page);
+      await expect(Lib.getModalResult(page, 0)).toHaveAttribute('aria-current', 'true');
+
+      await Lib.hoverModalResult(page, 1);
+      await expect(Lib.getModalResult(page, 0)).toHaveAttribute('aria-current', 'true');
+      await expect(Lib.getModalResult(page, 1)).not.toHaveAttribute('aria-current');
+
+      await Lib.moveMouseAway(page);
+      await expect(Lib.getModalResult(page, 0)).toHaveAttribute('aria-current', 'true');
+    });
+
+    test('picks the clicked result and keeps the modal open when it is clicked again', async ({ page }) => {
+      await solveInSidebar(page);
+      await Lib.openResultsModal(page);
+
+      await Lib.getModalResult(page, 1).click();
+      await expect(Lib.getModalResult(page, 1)).toHaveAttribute('aria-current', 'true');
+      await expect(Lib.getModalResult(page, 0)).not.toHaveAttribute('aria-current');
+
+      await Lib.getModalResult(page, 1).click();
+      await Lib.expectModalToStayOpen(page);
+      await expect(Lib.getModalResult(page, 1)).toHaveAttribute('aria-current', 'true');
+    });
+
+    test('previews the candidate', expectPreviewToKeepTheCandidate);
+
+    test('inserts the candidate', expectInsertToPlaceTheCandidate);
+  });
+
+  test.describe('compact, touch', () => {
+    test.use({ hasTouch: true, viewport: { width: 800, height: 900 } });
+
+    test('marks rows as clickable', expectModalRowsToBeClickable);
+
+    test('picks the tapped result and previews it when it is tapped again', async ({ page }) => {
+      await solveInSidebar(page);
+      await Lib.openResultsModal(page);
+
+      await Lib.getModalResult(page, 1).click();
+      await expect(Lib.getModalResult(page, 1)).toHaveAttribute('aria-current', 'true');
+      await Lib.expectModalToStayOpen(page);
+
+      await Lib.getModalResult(page, 1).click();
+      await expect(Lib.getModal(page)).toHaveCount(0);
+      await expect(Lib.getResultCandidatePicker(page)).toContainText('qi');
+      await expect(Lib.getRackTile(page)).toHaveValue('q');
+    });
+
+    test('previews the candidate', expectPreviewToKeepTheCandidate);
+
+    test('inserts the candidate', expectInsertToPlaceTheCandidate);
+  });
+
+  test.describe('desktop, non-touch', () => {
+    test.use({ hasTouch: false, viewport: { width: 1440, height: 900 } });
+
+    test('offers no preview or insert button', expectNoResultButtons);
+
+    test('marks rows as clickable', expectSidebarRowsToBeClickable);
+
+    test('previews the hovered result and drops it when the pointer leaves the list', async ({ page }) => {
+      await solveInSidebar(page);
+
+      await Lib.hoverResult(page, 0);
+      await expect(Lib.getResult(page, 0)).toHaveAttribute('aria-current', 'true');
+      await expect(page.locator('[role="mark"]').first()).toBeVisible();
+
+      await Lib.hoverResult(page, 1);
+      await expect(Lib.getResult(page, 1)).toHaveAttribute('aria-current', 'true');
+      await expect(Lib.getResult(page, 0)).not.toHaveAttribute('aria-current');
+
+      await Lib.moveMouseAway(page);
+      await expect(Lib.getResult(page, 1)).not.toHaveAttribute('aria-current');
+      await expect(page.locator('[role="mark"]')).toHaveCount(0);
+    });
+
+    test('places the clicked result on the board', async ({ page }) => {
+      await solveInSidebar(page);
+
+      await Lib.getResult(page, 0).click();
+      await Lib.expectBoardCharacters(page, ['q', 'i']);
+      await expect(Lib.getRackTile(page)).toHaveValue('');
+    });
+  });
+
+  test.describe('desktop, touch', () => {
+    test.use({ hasTouch: true, viewport: { width: 1440, height: 900 } });
+
+    test('offers no preview or insert button', expectNoResultButtons);
+
+    test('marks rows as clickable', expectSidebarRowsToBeClickable);
+
+    test('picks the tapped result and places it on the board when it is tapped again', async ({ page }) => {
+      await solveInSidebar(page);
+
+      await Lib.getResult(page, 0).click();
+      await expect(Lib.getResult(page, 0)).toHaveAttribute('aria-current', 'true');
+      await expect(Lib.getRackTile(page)).toHaveValue('q');
+
+      await Lib.getResult(page, 0).click();
+      await Lib.expectBoardCharacters(page, ['q', 'i']);
+      await expect(Lib.getRackTile(page)).toHaveValue('');
+    });
+  });
+});
+
+async function expectModalRowsToBeClickable({ page }: { page: Page }): Promise<void> {
+  await solveInSidebar(page);
+  await Lib.openResultsModal(page);
+
+  await Lib.expectRowClickable(Lib.getModalResult(page), true);
+}
+
+async function expectSidebarRowsToBeClickable({ page }: { page: Page }): Promise<void> {
+  await solveInSidebar(page);
+
+  await Lib.expectRowClickable(Lib.getResult(page), true);
+}
+
+async function expectPreviewToKeepTheCandidate({ page }: { page: Page }): Promise<void> {
+  await solveInSidebar(page);
+  await Lib.openResultsModal(page);
+  await Lib.getModalResult(page, 1).click();
+
+  await Lib.getOpenModal(page).getByRole('button', { name: 'Preview', exact: true }).click();
+  await expect(Lib.getModal(page)).toHaveCount(0);
+  await expect(Lib.getResultCandidatePicker(page)).toContainText('qi');
+  await expect(Lib.getRackTile(page)).toHaveValue('q');
+  await expect(page.locator('[role="mark"]').first()).toBeVisible();
+}
+
+async function expectNoResultButtons({ page }: { page: Page }): Promise<void> {
+  await solveInSidebar(page);
+
+  await expect(Lib.getResultsContainer(page)).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Preview', exact: true })).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Insert', exact: true })).toHaveCount(0);
+}
+
+async function expectInsertToPlaceTheCandidate({ page }: { page: Page }): Promise<void> {
+  await solveInSidebar(page);
+  await Lib.openResultsModal(page);
+  await expect(Lib.getModalResult(page, 0)).toHaveAttribute('aria-current', 'true');
+
+  await Lib.getOpenModal(page).getByRole('button', { name: 'Insert', exact: true }).click();
+  await expect(Lib.getModal(page)).toHaveCount(0);
+  await Lib.expectBoardCharacters(page, ['q', 'i']);
+  await expect(Lib.getRackTile(page)).toHaveValue('');
+  await expect(Lib.getResultCandidatePicker(page)).toHaveText('Select...');
+}
+
+async function solveInSidebar(page: Page): Promise<void> {
+  await Lib.preferKeyboardInput(page);
+  await Lib.visitIndex(page);
+  await Lib.typeBoard(page, 'i', 'horizontal', { x: 7, y: 7 });
+  await Lib.typeRack(page, 'q');
+  await Lib.solve(page);
+}

package/e2e/features/words-dictionary-search.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+test.describe('Words dictionary search', () => {
+  test('searches the hovered word and its collisions in the dictionary', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'cat', 'horizontal', { x: 3, y: 3 });
+    await Lib.typeBoard(page, 'od', 'vertical', { x: 3, y: 4 });
+    await Lib.typeBoard(page, 'dog', 'horizontal', { x: 8, y: 8 });
+    await Lib.openWordsModal(page);
+
+    await Lib.hoverWord(page, 3, 3, 'horizontal');
+    await expect(Lib.getDictionaryInput(page)).toHaveValue('cat, cod');
+
+    await Lib.hoverWord(page, 3, 3, 'vertical');
+    await expect(Lib.getDictionaryInput(page)).toHaveValue('cod, cat');
+
+    await Lib.hoverWord(page, 8, 8, 'horizontal');
+    await expect(Lib.getDictionaryInput(page)).toHaveValue('dog');
+
+    await expect(Lib.getModalDictionary(page)).toBeHidden();
+  });
+
+  test.describe('mobile', () => {
+    test.use({ viewport: { width: 800, height: 900 } });
+
+    test('shows the dictionary below the words table', async ({ page }) => {
+      await Lib.visitIndex(page);
+      await Lib.typeBoard(page, 'cat', 'horizontal', { x: 3, y: 3 });
+      await Lib.openWordsModal(page);
+
+      await expect(Lib.getModalDictionary(page)).toBeVisible();
+    });
+  });
+});

package/e2e/features/words-empty-state.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+
+import * as Lib from '../lib';
+
+test.describe('Words empty state', () => {
+  test('shows an empty state and no search input when the board holds no words', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.openWordsModal(page);
+    const modal = Lib.getOpenModal(page);
+
+    await expect(modal.getByText('No created words - the board is empty.', { exact: true })).toBeVisible();
+    await expect(Lib.getWordsFilterInput(page)).toHaveCount(0);
+    await expect(Lib.getWord(page, 0)).toHaveCount(0);
+  });
+
+  test('replaces the empty state with the table once a word exists', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'cat', 'horizontal', { x: 3, y: 3 });
+    await Lib.openWordsModal(page);
+    const modal = Lib.getOpenModal(page);
+
+    await expect(modal.getByText('No created words - the board is empty.', { exact: true })).toHaveCount(0);
+    await Lib.assertWord(page, 0, 'cat');
+    await expect(Lib.getWordsFilterInput(page)).toBeVisible();
+  });
+
+  test('returns to the empty state when the last word is removed from the board', async ({ page }) => {
+    await Lib.visitIndex(page);
+    await Lib.typeBoard(page, 'cat', 'horizontal', { x: 3, y: 3 });
+    await Lib.openWordsModal(page);
+    await Lib.assertWord(page, 0, 'cat');
+
+    for (const x of [3, 4, 5]) {
+      await Lib.getBoardTile(page, x, 3).focus();
+      await page.keyboard.press('Delete');
+    }
+
+    await expect(
+      Lib.getOpenModal(page).getByText('No created words - the board is empty.', { exact: true }),
+    ).toBeVisible();
+  });
+});