scrabble-solver 2.18.9 → 2.18.10-alpha.1

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

@@ -1,390 +0,0 @@
-/* eslint-disable max-lines, max-statements */
-import { type PayloadAction } from '@reduxjs/toolkit';
-import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
-import { Board, type Cell } 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

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

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

@@ -1,106 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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);
-  },
-);