scrabble-solver 2.18.10-alpha.0 → 2.18.10-alpha.2

package/packages/scrabble-solver/src/components/Board/hooks/useGrid.ts

@@ -0,0 +1,390 @@
+/* eslint-disable max-lines, max-statements */
+import { type PayloadAction } from '@reduxjs/toolkit';
+import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
+import { type Cell, Board } from '@scrabble-solver/types';
+import {
+  type ChangeEvent,
+  type ChangeEventHandler,
+  type ClipboardEventHandler,
+  type KeyboardEventHandler,
+  type RefObject,
+  createRef,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import { useDispatch } from 'react-redux';
+
+import { useLatest } from '@/hooks/useLatest';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
+import { boardSlice, cellFiltersSlice, selectConfig, selectLocale, useTypedSelector } from '@/state';
+import { type Direction, type Point } from '@/types';
+
+import { createGrid, getPositionInGrid } from '../lib';
+
+const toggleDirection = (direction: Direction) => (direction === 'vertical' ? 'horizontal' : 'vertical');
+
+interface State {
+  activeIndex: Point;
+  direction: Direction;
+  inputRefs: RefObject<HTMLInputElement | null>[][];
+}
+
+interface Actions {
+  insertValue: (position: Point, value: string) => void;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onDirectionToggle: () => void;
+  onFocus: (x: number, y: number) => void;
+  onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+  onPaste: ClipboardEventHandler<HTMLInputElement>;
+}
+
+export const useGrid = (rows: Cell[][]): [State, Actions] => {
+  const height = rows.length;
+  const width = rows[0].length;
+  const dispatch = useDispatch();
+  const config = useTypedSelector(selectConfig);
+  const locale = useTypedSelector(selectLocale);
+  const inputRefs = useMemo(
+    () => createGrid<RefObject<HTMLInputElement | null>>(width, height, () => createRef()),
+    [width, height],
+  );
+  const [activeIndex, setActiveIndex] = useState<Point>({ x: 0, y: 0 });
+  const [direction, setLastDirection] = useState<Direction>('horizontal');
+  const directionRef = useLatest(direction);
+  const rowsRef = useLatest(rows);
+
+  const safeActiveIndex = useMemo(
+    () => ({
+      x: Math.min(activeIndex.x, width - 1),
+      y: Math.min(activeIndex.y, height - 1),
+    }),
+    [activeIndex, width, height],
+  );
+
+  const changeActiveIndex = useCallback(
+    (offsetX: number, offsetY: number) => {
+      const x = Math.min(Math.max(safeActiveIndex.x + offsetX, 0), width - 1);
+      const y = Math.min(Math.max(safeActiveIndex.y + offsetY, 0), height - 1);
+      setActiveIndex({ x, y });
+      inputRefs[y][x].current?.focus();
+    },
+    [safeActiveIndex, height, inputRefs, width],
+  );
+
+  const getInputRefPosition = useCallback(
+    (inputRef: HTMLInputElement): Point | undefined => {
+      return getPositionInGrid(inputRefs, (ref) => ref.current === inputRef);
+    },
+    [inputRefs],
+  );
+
+  const moveFocus = useCallback(
+    (offset: number) => {
+      if (directionRef.current === 'horizontal') {
+        changeActiveIndex(offset, 0);
+      } else {
+        changeActiveIndex(0, offset);
+      }
+    },
+    [changeActiveIndex, directionRef],
+  );
+
+  const insertValue = useCallback(
+    (position: Point, value: string) => {
+      const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
+      const actions: PayloadAction<unknown>[] = [];
+      let board = new Board({ rows: rowsRef.current.map((row) => row.map((cell) => cell.clone())) });
+      let { x, y } = position;
+
+      const scheduleMoveFocus = () => {
+        if (directionRef.current === 'horizontal') {
+          ++x;
+        } else {
+          ++y;
+        }
+      };
+
+      characters.forEach((character) => {
+        if (x >= config.boardWidth || y >= config.boardHeight) {
+          return;
+        }
+
+        const canCheckUp = y - 1 > 0;
+        const canCheckLeft = x > 0;
+        const canCheckRight = x + 1 < width;
+        const canCheckDown = y + 1 < height;
+
+        if (canCheckUp) {
+          const cellUp = board.rows[y - 1][x];
+          const twoCharacterCandidate = cellUp.tile.character + character;
+
+          if (!cellUp.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            const action = boardSlice.actions.changeCellValue({ x, y: y - 1, value: twoCharacterCandidate });
+            board = boardSlice.reducer(board, action);
+            actions.push(action);
+            return;
+          }
+        }
+
+        if (canCheckDown) {
+          const cellDown = board.rows[y + 1][x];
+          const twoCharacterCandidate = character + cellDown.tile.character;
+
+          if (!cellDown.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            const action1 = boardSlice.actions.changeCellValue({ x, y, value: character });
+            const action2 = boardSlice.actions.changeCellValue({ x, y: y + 1, value: EMPTY_CELL });
+            board = boardSlice.reducer(boardSlice.reducer(board, action1), action2);
+            actions.push(action1, action2);
+            scheduleMoveFocus();
+            return;
+          }
+        }
+
+        if (canCheckLeft) {
+          const cellLeft = board.rows[y][x - 1];
+          const twoCharacterCandidate = cellLeft.tile.character + character;
+
+          if (!cellLeft.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            const action = boardSlice.actions.changeCellValue({ x: x - 1, y, value: twoCharacterCandidate });
+            board = boardSlice.reducer(board, action);
+            actions.push(action);
+            return;
+          }
+        }
+
+        if (canCheckRight) {
+          const cellRight = board.rows[y][x + 1];
+          const twoCharacterCandidate = character + cellRight.tile.character;
+
+          if (!cellRight.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            const action1 = boardSlice.actions.changeCellValue({ x, y, value: character });
+            const action2 = boardSlice.actions.changeCellValue({ x: x + 1, y, value: EMPTY_CELL });
+            board = boardSlice.reducer(boardSlice.reducer(board, action1), action2);
+            actions.push(action1, action2);
+            scheduleMoveFocus();
+            return;
+          }
+        }
+
+        if (!canCheckDown || !canCheckRight) {
+          const cell = board.rows[y][x];
+          const twoCharacterCandidate = cell.tile.character + character;
+
+          if (!cell.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            const action = boardSlice.actions.changeCellValue({ x, y, value: twoCharacterCandidate });
+            board = boardSlice.reducer(board, action);
+            actions.push(action);
+            return;
+          }
+        }
+
+        const action = boardSlice.actions.changeCellValue({ x, y, value: character });
+        board = boardSlice.reducer(board, action);
+        actions.push(action);
+        scheduleMoveFocus();
+      });
+
+      moveFocus(Math.abs(position.x - x) + Math.abs(position.y - y));
+      actions.forEach(dispatch);
+    },
+    [config, directionRef, dispatch, height, moveFocus, rowsRef, width],
+  );
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const position = getInputRefPosition(event.target);
+
+      if (!position) {
+        return;
+      }
+
+      const value = extractInputValue(event.target);
+
+      if (!value) {
+        dispatch(boardSlice.actions.changeCellValue({ ...position, value: EMPTY_CELL }));
+        moveFocus(-1);
+        return;
+      }
+
+      if (value === EMPTY_CELL) {
+        const { x, y } = position;
+        const cell = rowsRef.current[y][x];
+
+        if (cell.hasTile()) {
+          dispatch(boardSlice.actions.toggleCellIsBlank(position));
+          return;
+        }
+      }
+
+      insertValue(position, value);
+    },
+    [dispatch, insertValue, moveFocus, rowsRef, getInputRefPosition],
+  );
+
+  const onDirectionToggle = useCallback(() => setLastDirection(toggleDirection), []);
+
+  const onFocus = useCallback((x: number, y: number) => {
+    setActiveIndex({ x, y });
+  }, []);
+
+  const onKeyDown = useMemo(() => {
+    return createKeyboardNavigation({
+      onArrowDown: (event) => {
+        event.preventDefault();
+
+        if (direction === 'horizontal') {
+          onDirectionToggle();
+        } else {
+          changeActiveIndex(0, 1);
+        }
+      },
+      onArrowLeft: (event) => {
+        event.preventDefault();
+
+        if (direction === 'vertical') {
+          onDirectionToggle();
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? -1 : 0, 0);
+        } else {
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? -1 : 1, 0);
+        }
+      },
+      onArrowRight: (event) => {
+        event.preventDefault();
+
+        if (direction === 'vertical') {
+          onDirectionToggle();
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? 0 : -1, 0);
+        } else {
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? 1 : -1, 0);
+        }
+      },
+      onArrowUp: (event) => {
+        event.preventDefault();
+
+        if (direction === 'horizontal') {
+          onDirectionToggle();
+        }
+
+        changeActiveIndex(0, -1);
+      },
+      onBackspace: (event) => {
+        const position = getInputRefPosition(event.target as HTMLInputElement);
+
+        if (!position) {
+          return;
+        }
+
+        event.preventDefault();
+        dispatch(boardSlice.actions.changeCellValue({ ...position, value: EMPTY_CELL }));
+        moveFocus(-1);
+      },
+      onDelete: (event) => {
+        const position = getInputRefPosition(event.target as HTMLInputElement);
+
+        if (!position) {
+          return;
+        }
+
+        event.preventDefault();
+        dispatch(boardSlice.actions.changeCellValue({ ...position, value: EMPTY_CELL }));
+        moveFocus(1);
+      },
+      onKeyDown: (event) => {
+        const position = getInputRefPosition(event.target as HTMLInputElement);
+
+        if (!position) {
+          return;
+        }
+
+        const { x, y } = position;
+        const character = event.key.toLocaleLowerCase();
+        const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
+
+        if (isCtrl(event) && twoCharacterTile) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
+          moveFocus(1);
+          return;
+        }
+
+        const cell = rowsRef.current[y][x];
+
+        if (isCtrl(event) && character === 'g') {
+          event.preventDefault();
+
+          if (!cell.hasTile()) {
+            dispatch(cellFiltersSlice.actions.toggle(position));
+          }
+
+          return;
+        }
+
+        const twoCharacterCandidate = cell.tile.character + character;
+
+        if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.changeCellValue({ ...position, value: twoCharacterCandidate }));
+          moveFocus(1);
+          return;
+        }
+
+        if (event.target instanceof HTMLInputElement && event.target.value.toLocaleLowerCase() === character) {
+          // change event did not fire because the same character was typed over the current one
+          // but we still want to move the caret
+          event.preventDefault();
+          moveFocus(1);
+        }
+      },
+      onSpace: (event) => {
+        const position = getInputRefPosition(event.target as HTMLInputElement);
+
+        if (!position) {
+          return;
+        }
+
+        event.preventDefault();
+        dispatch(boardSlice.actions.toggleCellIsBlank(position));
+      },
+    });
+  }, [
+    changeActiveIndex,
+    config,
+    direction,
+    dispatch,
+    getInputRefPosition,
+    locale,
+    moveFocus,
+    onDirectionToggle,
+    rowsRef,
+  ]);
+
+  const onPaste = useCallback<ClipboardEventHandler>(
+    (event) => {
+      if (!(event.target instanceof HTMLInputElement)) {
+        return;
+      }
+
+      const position = getInputRefPosition(event.target);
+
+      if (!position) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const value = event.clipboardData.getData('text/plain').toLocaleLowerCase();
+      insertValue(position, value);
+    },
+    [getInputRefPosition, insertValue],
+  );
+
+  return [
+    { activeIndex: safeActiveIndex, direction, inputRefs },
+    { insertValue, onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
+  ];
+};

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

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

package/packages/scrabble-solver/src/components/Board/lib.test.ts

@@ -0,0 +1,106 @@
+import { Board, Cell, Result, Tile } from '@scrabble-solver/types';
+
+import { getReachableCellsFromResults, getWordCells } from './lib';
+
+describe('getReachableCellsFromResults', () => {
+  const board = Board.fromStringArray(['     ', '     ', '  i  ', '     ', '     ']);
+
+  it('marks only cells with tiles as reachable when there are no results', () => {
+    expect(getReachableCellsFromResults(board, [])).toEqual([
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, true, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('marks cells covered by any result as reachable and all other empty cells as unreachable', () => {
+    const results = [
+      createResult([createPlacedCell('q', 1, 2), board.rows[2][2]]),
+      createResult([createPlacedCell('q', 2, 1), board.rows[2][2]]),
+    ];
+
+    expect(getReachableCellsFromResults(board, results)).toEqual([
+      [false, false, false, false, false],
+      [false, false, true, false, false],
+      [false, true, true, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+});
+
+describe('getWordCells', () => {
+  const board = Board.fromStringArray(['     ', ' cat ', ' o   ', ' d  x', '     ']);
+
+  it('marks the cells of a horizontal word', () => {
+    expect(getWordCells(board, { direction: 'horizontal', word: 'cat', x: 1, y: 1 })).toEqual([
+      [false, false, false, false, false],
+      [false, true, true, true, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('marks the cells of a vertical word', () => {
+    expect(getWordCells(board, { direction: 'vertical', word: 'cod', x: 1, y: 1 })).toEqual([
+      [false, false, false, false, false],
+      [false, true, false, false, false],
+      [false, true, false, false, false],
+      [false, true, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('stops at the board edge', () => {
+    expect(getWordCells(board, { direction: 'horizontal', word: 'x', x: 4, y: 3 })).toEqual([
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, true],
+      [false, false, false, false, false],
+    ]);
+  });
+
+  it('marks the run of cells regardless of the word length in characters', () => {
+    const digraphBoard = new Board({
+      rows: [
+        [createFilledCell('ch', 0, 0), createFilledCell('e', 1, 0), createEmptyCell(2, 0)],
+        [createEmptyCell(0, 1), createEmptyCell(1, 1), createEmptyCell(2, 1)],
+      ],
+    });
+
+    expect(getWordCells(digraphBoard, { direction: 'horizontal', word: 'che', x: 0, y: 0 })).toEqual([
+      [true, true, false],
+      [false, false, false],
+    ]);
+  });
+
+  it('marks nothing when the starting cell is empty', () => {
+    expect(getWordCells(board, { direction: 'horizontal', word: 'gone', x: 0, y: 4 })).toEqual([
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+      [false, false, false, false, false],
+    ]);
+  });
+});
+
+function createResult(cells: Cell[]): Result {
+  return new Result({ cells, collisions: [], id: 0, points: 0 });
+}
+
+function createPlacedCell(character: string, x: number, y: number): Cell {
+  return new Cell({ isEmpty: true, tile: new Tile({ character }), x, y });
+}
+
+function createFilledCell(character: string, x: number, y: number): Cell {
+  return new Cell({ isEmpty: false, tile: new Tile({ character }), x, y });
+}
+
+function createEmptyCell(x: number, y: number): Cell {
+  return new Cell({ isEmpty: true, tile: Tile.Null, x, y });
+}

package/packages/scrabble-solver/src/components/Board/lib.ts

@@ -0,0 +1,149 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { type Board, type BoardWord, type Bonus, type Result } from '@scrabble-solver/types';
+
+import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from '@/parameters';
+import { type Direction, type Point } from '@/types';
+
+export const createGrid = <T>(width: number, height: number, getInitialValue: (x: number, y: number) => T): T[][] => {
+  return Array.from({ length: height }).map((_row, y) => {
+    return Array.from({ length: width }).map((_cell, x) => {
+      return getInitialValue(x, y);
+    });
+  });
+};
+
+export const getBonusColor = (bonus: Bonus): string => {
+  if (bonus.type === BONUS_WORD) {
+    return COLOR_BONUS_WORD[bonus.multiplier];
+  }
+
+  if (bonus.score) {
+    return COLOR_BONUS_CHARACTER[bonus.score];
+  }
+
+  return COLOR_BONUS_CHARACTER_MULTIPLIER[bonus.multiplier];
+};
+
+export const getPositionInGrid = <T>(grid: T[][], constraint: (value: T) => boolean): Point | undefined => {
+  for (let y = 0; y < grid.length; ++y) {
+    for (let x = 0; x < grid[0].length; ++x) {
+      if (constraint(grid[y][x])) {
+        return { x, y };
+      }
+    }
+  }
+
+  return undefined;
+};
+
+export const getReachableCells = (board: Board, charactersCount: number): boolean[][] => {
+  const boardHeight = board.rowsCount;
+  const boardWidth = board.columnsCount;
+  const reachable = createGrid(boardWidth, boardHeight, () => false);
+
+  if (charactersCount === 0) {
+    return reachable;
+  }
+
+  const isBoardEmpty = board.isEmpty();
+  const center = board.center;
+
+  const isAnchor = (x: number, y: number, playDirection: Direction): boolean => {
+    if (isBoardEmpty) {
+      return x === center.x && y === center.y;
+    }
+
+    if (playDirection === 'horizontal') {
+      const above = y > 0 && !board.rows[y - 1][x].isEmpty;
+      const below = y < boardHeight - 1 && !board.rows[y + 1][x].isEmpty;
+      return above || below;
+    }
+
+    const left = x > 0 && !board.rows[y][x - 1].isEmpty;
+    const right = x < boardWidth - 1 && !board.rows[y][x + 1].isEmpty;
+    return left || right;
+  };
+
+  const isReachableInDirection = (x: number, y: number, direction: Direction): boolean => {
+    const isHorizontal = direction === 'horizontal';
+    const length = isHorizontal ? boardWidth : boardHeight;
+    const startOffset = isHorizontal ? x : y;
+    const cellAt = (offset: number) => (isHorizontal ? board.rows[y][offset] : board.rows[offset][x]);
+
+    if (isAnchor(x, y, direction)) {
+      return true;
+    }
+
+    for (const step of [-1, 1] as const) {
+      let newTiles = 1;
+
+      for (let offset = startOffset + step; offset >= 0 && offset < length; offset += step) {
+        const cell = cellAt(offset);
+
+        if (cell.hasTile()) {
+          if (newTiles <= charactersCount) {
+            return true;
+          }
+          break;
+        }
+
+        newTiles += 1;
+
+        if (newTiles > charactersCount) {
+          break;
+        }
+
+        if (isAnchor(cell.x, cell.y, direction)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
+  for (let y = 0; y < boardHeight; ++y) {
+    for (let x = 0; x < boardWidth; ++x) {
+      if (board.rows[y][x].hasTile()) {
+        reachable[y][x] = true;
+        continue;
+      }
+
+      if (isReachableInDirection(x, y, 'horizontal') || isReachableInDirection(x, y, 'vertical')) {
+        reachable[y][x] = true;
+      }
+    }
+  }
+
+  return reachable;
+};
+
+export const getReachableCellsFromResults = (board: Board, results: Result[]): boolean[][] => {
+  const reachable = createGrid(board.columnsCount, board.rowsCount, (x, y) => board.rows[y][x].hasTile());
+
+  for (const result of results) {
+    for (const cell of result.cells) {
+      reachable[cell.y][cell.x] = true;
+    }
+  }
+
+  return reachable;
+};
+
+export const getWordCells = (board: Board, word: BoardWord): boolean[][] => {
+  const wordCells = createGrid(board.columnsCount, board.rowsCount, () => false);
+  const isHorizontal = word.direction === 'horizontal';
+  let { x, y } = word;
+
+  while (x < board.columnsCount && y < board.rowsCount && board.rows[y][x].hasTile()) {
+    wordCells[y][x] = true;
+
+    if (isHorizontal) {
+      x += 1;
+    } else {
+      y += 1;
+    }
+  }
+
+  return wordCells;
+};

package/packages/scrabble-solver/src/components/Board/selectors.ts

@@ -0,0 +1,39 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { findCell } from '@/lib/findCell';
+import {
+  selectBoard,
+  selectCharacters,
+  selectHighlightUnreachableCells,
+  selectResultCandidateCells,
+  selectUpToDateHoveredWord,
+  selectUpToDateResults,
+} from '@/state';
+
+import { getReachableCells, getReachableCellsFromResults, getWordCells } from './lib';
+
+export const selectRowsWithCandidate = createSelector([selectBoard, selectResultCandidateCells], (board, cells) => {
+  return board.rows.map((row, y) => row.map((cell, x) => findCell(cells, x, y) || cell));
+});
+
+export const selectHoveredWordCells = createSelector(
+  [selectBoard, selectUpToDateHoveredWord],
+  (board, hoveredWord): boolean[][] | null => {
+    return hoveredWord ? getWordCells(board, hoveredWord) : null;
+  },
+);
+
+export const selectReachableCells = createSelector(
+  [selectBoard, selectCharacters, selectHighlightUnreachableCells, selectUpToDateResults],
+  (board, characters, highlightUnreachableCells, upToDateResults): boolean[][] | null => {
+    if (!highlightUnreachableCells || characters.length === 0) {
+      return null;
+    }
+
+    if (upToDateResults) {
+      return getReachableCellsFromResults(board, upToDateResults);
+    }
+
+    return getReachableCells(board, characters.length);
+  },
+);