@scrabble-solver/scrabble-solver 2.17.0 → 2.18.0

package/src/components/Board/BoardPure.tsx

@@ -1,4 +1,11 @@
-import { type Cell as CellModel, type ShowCoordinates } from '@scrabble-solver/types';
+import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
+import {
+  type Cell as CellModel,
+  type Config,
+  type Locale,
+  type ShowCoordinates,
+  type TextDirection,
+} from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
   type CSSProperties,
@@ -12,10 +19,10 @@ import {
   memo,
 } from 'react';
 
-import { Ban, FlagFill } from '@/icons';
-import { getCoordinate } from '@/lib';
-import { BORDER_WIDTH } from '@/parameters';
-import { type CellFilter } from '@/types';
+import Ban from '@/icons/Ban.svg';
+import FlagFill from '@/icons/FlagFill.svg';
+import { getCoordinate } from '@/lib/getCoordinate';
+import { type CellFilter, type Translate } from '@/types';
 
 import styles from './Board.module.scss';
 import { Cell } from './components';
@@ -23,15 +30,16 @@ import { Cell } from './components';
 interface Props {
   className?: string;
   cellFilters: CellFilter[];
-  cellSize: number;
-  coordinatesFontSize: number;
-  coordinatesSize: number;
-  direction: 'ltr' | 'rtl';
+  config: Config;
+  direction: TextDirection;
+  hoveredCharacter: string | null;
   inputRefs: RefObject<HTMLInputElement | null>[][];
+  locale: Locale;
   reachableCells: boolean[][] | null;
   rows: CellModel[][];
   showCoordinates: ShowCoordinates;
   style?: CSSProperties;
+  translate: Translate;
   onBlur: FocusEventHandler;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onFocus: (x: number, y: number) => void;
@@ -43,16 +51,17 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
   (
     {
       className,
-      cellSize,
-      coordinatesFontSize,
-      coordinatesSize,
+      config,
       direction,
       cellFilters,
+      hoveredCharacter,
       inputRefs,
+      locale,
       reachableCells,
       rows,
       showCoordinates,
       style,
+      translate,
       onBlur,
       onChange,
       onFocus,
@@ -70,25 +79,13 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
       onKeyDown={onKeyDown}
       onPaste={onPaste}
     >
-      {showCoordinates !== 'hidden' && (
-        <>
-          <div style={{ width: coordinatesSize, height: coordinatesSize }} />
+      <div />
 
-          {rows[0].map((_column, index) => (
-            <div
-              className={styles.coordinate}
-              key={index}
-              style={{
-                width: cellSize,
-                height: coordinatesSize,
-                fontSize: coordinatesFontSize,
-              }}
-            >
-              {getCoordinate(index, showCoordinates === 'original' ? 'letter' : 'number')}
-            </div>
-          ))}
-        </>
-      )}
+      {rows[0].map((_column, index) => (
+        <div className={styles.coordinate} key={index}>
+          {getCoordinate(index, showCoordinates === 'original' ? 'letter' : 'number')}
+        </div>
+      ))}
 
       {/* The dynamic changes to the board presentation need to be outside of useBackgroundImage
         to prevent flickering on blob URL change (i.e. when flagging a field,
@@ -102,11 +99,11 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
             className={styles.iconContainer}
             key={[x, y].join('-')}
             style={{
-              height: cellSize,
-              width: cellSize,
-              left: direction === 'ltr' ? coordinatesSize + BORDER_WIDTH + x * (cellSize + BORDER_WIDTH) : undefined,
-              right: direction === 'rtl' ? coordinatesSize + BORDER_WIDTH + x * (cellSize + BORDER_WIDTH) : undefined,
-              top: coordinatesSize + BORDER_WIDTH + y * (cellSize + BORDER_WIDTH),
+              height: 'var(--cell-size)',
+              width: 'var(--cell-size)',
+              left: direction === 'ltr' ? inlineOffset(x) : undefined,
+              right: direction === 'rtl' ? inlineOffset(x) : undefined,
+              top: inlineOffset(y),
             }}
           >
             <div className={styles.iconBackground} />
@@ -117,31 +114,25 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
 
       {rows.map((cells, y) => (
         <Fragment key={y}>
-          {showCoordinates !== 'hidden' && (
-            <div
-              className={styles.coordinate}
-              style={{
-                width: coordinatesSize,
-                height: cellSize,
-                fontSize: coordinatesFontSize,
-              }}
-            >
-              {getCoordinate(y, showCoordinates === 'original' ? 'number' : 'letter')}
-            </div>
-          )}
+          <div className={styles.coordinate}>
+            {getCoordinate(y, showCoordinates === 'original' ? 'number' : 'letter')}
+          </div>
 
           {cells.map((cell, x) => (
             <Cell
-              className={styles.cell}
               cell={cell}
               cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
               cellLeft={x > 0 ? rows[y][x - 1] : undefined}
               cellRight={x < rows[y].length - 1 ? rows[y][x + 1] : undefined}
               cellTop={y > 0 ? rows[y - 1][x] : undefined}
+              config={config}
               inputRef={inputRefs[y][x]}
+              isHoverMatch={isHoverMatch(cell, hoveredCharacter)}
               isReachable={reachableCells ? reachableCells[y][x] : true}
               key={x}
-              size={cellSize}
+              locale={locale}
+              showCoordinates={showCoordinates}
+              translate={translate}
               onChange={onChange}
               onFocus={onFocus}
             />
@@ -153,3 +144,17 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
 );
 
 export const BoardPure = memo(BoardPureBase);
+
+function isHoverMatch(cell: CellModel, hoveredCharacter: string | null): boolean {
+  if (cell.tile.character === EMPTY_CELL || hoveredCharacter === null) {
+    return false;
+  }
+
+  return hoveredCharacter === BLANK
+    ? cell.tile.isBlank
+    : !cell.tile.isBlank && cell.tile.character === hoveredCharacter;
+}
+
+function inlineOffset(index: number) {
+  return `calc(var(--coordinate-size) + var(--border--width) + ${index} * (var(--cell-size) + var(--border--width)))`;
+}

package/src/components/Board/components/Actions/Actions.module.scss

@@ -6,28 +6,28 @@
   border-radius: var(--border--radius);
   transition: var(--transition);
   transition-property: opacity;
-}
 
-.action {
-  padding: var(--spacing--m);
-  box-shadow: none !important;
+  .action {
+    padding: var(--spacing--m);
+    box-shadow: none !important;
 
-  &:active,
-  &:hover {
-    color: var(--color--foreground);
-  }
+    &:active,
+    &:hover {
+      color: var(--color--foreground);
+    }
 
-  & + & {
-    border-inline-start: none;
-  }
+    + .action {
+      border-inline-start: none;
+    }
 
-  &:first-child {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
+    &:first-child {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
 
-  &:last-child {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
+    &:last-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
   }
 }

package/src/components/Board/components/Actions/Actions.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly action: string;
+  readonly actions: string;
+};
+
+export default styles;

package/src/components/Board/components/Actions/Actions.tsx

@@ -3,9 +3,12 @@ import { type Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { forwardRef, type HTMLProps, type MouseEventHandler } from 'react';
 
-import { useIsTouchDevice } from '@/hooks';
-import { Keyboard, Square, SquareFill } from '@/icons';
-import { findCell, isMac } from '@/lib';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+import Keyboard from '@/icons/Keyboard.svg';
+import Square from '@/icons/Square.svg';
+import SquareFill from '@/icons/SquareFill.svg';
+import { findCell } from '@/lib/findCell';
+import { isMac } from '@/lib/isMac';
 import { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from '@/state';
 import { type Direction } from '@/types';
 

package/src/components/Board/components/Actions/lib.ts

@@ -1,6 +1,8 @@
 import { type FunctionComponent, type SVGAttributes } from 'react';
 
-import { Ban, Eraser, FlagFill } from '@/icons';
+import Ban from '@/icons/Ban.svg';
+import Eraser from '@/icons/Eraser.svg';
+import FlagFill from '@/icons/FlagFill.svg';
 import { type CellFilter, type TranslationKey } from '@/types';
 
 export const getNextCellFilter = (

package/src/components/Board/components/Cell/Cell.module.scss.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly first3: string;
+  readonly last3: string;
+  readonly sharpBottomLeft: string;
+  readonly sharpBottomRight: string;
+  readonly sharpTopLeft: string;
+  readonly sharpTopRight: string;
+  readonly tile: string;
+  readonly unreachable: string;
+};
+
+export default styles;

package/src/components/Board/components/Cell/Cell.tsx

@@ -1,5 +1,5 @@
-import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
-import { type Cell as CellModel } from '@scrabble-solver/types';
+import { EMPTY_CELL } from '@scrabble-solver/constants';
+import { type Cell as CellModel, type Config, type Locale, type ShowCoordinates } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
   type ChangeEventHandler,
@@ -12,17 +12,9 @@ import {
   useCallback,
 } from 'react';
 
-import { getCoordinate } from '@/lib';
-import {
-  selectCellIsValid,
-  selectConfig,
-  selectHoveredCharacter,
-  selectInputMode,
-  selectShowCoordinates,
-  selectTilePoints,
-  useTranslate,
-  useTypedSelector,
-} from '@/state';
+import { getCoordinate } from '@/lib/getCoordinate';
+import { selectInputMode, useTypedStore } from '@/state';
+import type { Translate } from '@/types';
 
 import { Tile } from '../../../Tile';
 
@@ -35,13 +27,20 @@ interface Props {
   cellRight?: CellModel;
   cellTop?: CellModel;
   className?: string;
+  config: Config;
   inputRef: RefObject<HTMLInputElement | null>;
+  isHoverMatch: boolean;
   isReachable?: boolean;
-  size: number;
+  locale: Locale;
+  showCoordinates: ShowCoordinates;
+  translate: Translate;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onFocus: (x: number, y: number) => void;
 }
 
+/**
+ * Must not subscribe to the store - it can read the story only in event handlers.
+ */
 const CellBase: FunctionComponent<Props> = ({
   cell,
   cellBottom,
@@ -49,58 +48,54 @@ const CellBase: FunctionComponent<Props> = ({
   cellRight,
   cellTop,
   className,
+  config,
   inputRef,
+  isHoverMatch,
   isReachable = true,
-  size,
+  locale,
+  showCoordinates,
+  translate,
   onChange,
   onFocus,
 }) => {
   const { tile, x, y } = cell;
-  const translate = useTranslate();
-  const config = useTypedSelector(selectConfig);
-  const inputMode = useTypedSelector(selectInputMode);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
-  const isValid = useTypedSelector((state) => selectCellIsValid(state, cell));
-  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
+  const store = useTypedStore();
   const isEmpty = tile.character === EMPTY_CELL;
-  const isHoverMatch =
-    !isEmpty &&
-    hoveredCharacter !== null &&
-    (hoveredCharacter === BLANK ? tile.isBlank : !tile.isBlank && tile.character === hoveredCharacter);
+  const points = config.getTilePoints(tile);
+  const isValid = !cell.hasTile() || config.tiles.some(({ character }) => character === tile.character);
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
     (event) => {
-      if (inputMode === 'touchscreen') {
+      if (selectInputMode(store.getState()) === 'touchscreen') {
         event.preventDefault();
         event.target.blur();
       }
 
       onFocus(x, y);
     },
-    [inputMode, onFocus, x, y],
+    [store, onFocus, x, y],
   );
 
   const handleMouseDown: MouseEventHandler<HTMLInputElement> = useCallback(
     (event) => {
-      if (inputMode === 'touchscreen') {
+      if (selectInputMode(store.getState()) === 'touchscreen') {
         event.preventDefault();
       }
 
       onFocus(x, y);
     },
-    [inputMode, onFocus, x, y],
+    [store, onFocus, x, y],
   );
 
   const handleTouchStart: TouchEventHandler<HTMLInputElement> = useCallback(
     (event) => {
-      if (inputMode === 'touchscreen') {
+      if (selectInputMode(store.getState()) === 'touchscreen') {
         event.preventDefault();
       }
 
       onFocus(x, y);
     },
-    [inputMode, onFocus, x, y],
+    [store, onFocus, x, y],
   );
 
   return (
@@ -125,9 +120,9 @@ const CellBase: FunctionComponent<Props> = ({
       inputRef={inputRef}
       isBlank={tile.isBlank}
       isValid={isValid}
+      locale={locale}
       points={points}
       raised={!isEmpty}
-      size={size}
       tabIndex={cell.x === 0 && cell.y === 0 ? undefined : -1}
       onChange={onChange}
       onFocus={handleFocus}

package/src/components/Board/components/InputPrompt/InputPrompt.module.scss.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly input: string;
+  readonly inputPrompt: string;
+  readonly insert: string;
+  readonly insertIcon: string;
+  readonly toggleDirection: string;
+};
+
+export default styles;

package/src/components/Board/components/InputPrompt/InputPrompt.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from 'react';
 
-import { Check } from '@/icons';
+import Check from '@/icons/Check.svg';
 import { useTranslate } from '@/state';
 import { type Direction } from '@/types';
 

package/src/components/Board/components/ToggleDirectionButton/ToggleDirectionButton.module.scss.d.ts

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly button: string;
+  readonly icon: string;
+  readonly right: string;
+};
+
+export default styles;

package/src/components/Board/components/ToggleDirectionButton/ToggleDirectionButton.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { type ButtonHTMLAttributes, type FunctionComponent } from 'react';
 
-import { useIsTouchDevice } from '@/hooks';
-import { ArrowDown } from '@/icons';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+import ArrowDown from '@/icons/ArrowDown.svg';
 import { useTranslate } from '@/state';
 import { type Direction } from '@/types';
 

package/src/components/Board/getBoardBackground.ts

@@ -0,0 +1,175 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { type Bonus, type Config, type TextDirection } from '@scrabble-solver/types';
+
+import { BORDER_COLOR_LIGHT, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from '@/parameters';
+import { type Point } from '@/types';
+
+import { getBonusColor } from './lib';
+
+interface BoardBackgroundOptions {
+  config: Config;
+  direction: TextDirection;
+}
+
+interface Frame {
+  width: number;
+  height: number;
+  direction: TextDirection;
+}
+
+interface BonusesOptions {
+  config: Config;
+  getX: (point: Point) => number;
+  getY: (point: Point) => number;
+}
+
+const CELL_SIZE = 80;
+const COORDINATES_SIZE = CELL_SIZE / 2;
+const BORDER_RADIUS = CELL_SIZE * 0.1;
+const BONUS_SIZE = CELL_SIZE * 0.8;
+const BONUS_OFFSET = CELL_SIZE * 0.1;
+const ICON_SIZE = CELL_SIZE * 0.4;
+const ICON_OFFSET = (CELL_SIZE - ICON_SIZE) / 2;
+const FONT_SIZE = CELL_SIZE * 0.6 * 0.6;
+const FONT_OFFSET = CELL_SIZE / 2;
+const GRID_LINE_SIZE = 1;
+
+const BONUS_SYMBOL_ID = 'b';
+const BONUS_X2_SYMBOL_ID = 'b2';
+const BONUS_X3_SYMBOL_ID = 'b3';
+const BONUS_X4_SYMBOL_ID = 'b4';
+
+// https://icons.getbootstrap.com/icons/star-fill/
+const STAR_PATH =
+  'M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z';
+
+const cache = new WeakMap<Config, Map<TextDirection, string>>();
+
+export function getBoardBackground({ config, direction }: BoardBackgroundOptions): string {
+  const cached = cache.get(config)?.get(direction);
+
+  if (cached) {
+    return cached;
+  }
+
+  const dataUrl = `data:image/svg+xml,${encodeURIComponent(buildSvg({ config, direction }))}`;
+  const byDirection = cache.get(config) ?? new Map<TextDirection, string>();
+  byDirection.set(direction, dataUrl);
+  cache.set(config, byDirection);
+
+  return dataUrl;
+}
+
+function buildSvg({ config, direction }: BoardBackgroundOptions): string {
+  const width = COORDINATES_SIZE + (CELL_SIZE + BORDER_WIDTH) * config.boardWidth - BORDER_WIDTH;
+  const height = COORDINATES_SIZE + (CELL_SIZE + BORDER_WIDTH) * config.boardHeight - BORDER_WIDTH;
+  const getX = (point: Point) => (direction === 'ltr' ? COORDINATES_SIZE : 0) + point.x * (CELL_SIZE + BORDER_WIDTH);
+  const getY = (point: Point) => COORDINATES_SIZE + point.y * (CELL_SIZE + BORDER_WIDTH);
+  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
+
+  const frame: Frame = { direction, height, width };
+
+  return [
+    `<svg height="${height}" viewBox="0 0 ${width} ${height}" width="${width}" xmlns="http://www.w3.org/2000/svg">`,
+    buildDefs(),
+    buildBackground(frame),
+    buildGridLines(config, frame),
+    buildBonuses({ config, getX, getY }),
+    buildStartCell(getX(center), getY(center)),
+    '</svg>',
+  ].join('');
+}
+
+function buildDefs(): string {
+  const bonusRect = `<rect height="${BONUS_SIZE}" rx="${BORDER_RADIUS}" width="${BONUS_SIZE}" x="${BONUS_OFFSET}" y="${BONUS_OFFSET}"/>`;
+
+  return [
+    '<defs>',
+    `<symbol id="${BONUS_SYMBOL_ID}">${bonusRect}</symbol>`,
+    `<symbol id="${BONUS_X2_SYMBOL_ID}">${bonusRect}${multiplierText(2)}</symbol>`,
+    `<symbol id="${BONUS_X3_SYMBOL_ID}">${bonusRect}${multiplierText(3)}</symbol>`,
+    `<symbol id="${BONUS_X4_SYMBOL_ID}">${bonusRect}${multiplierText(4)}</symbol>`,
+    '</defs>',
+  ].join('');
+}
+
+function multiplierText(multiplier: number): string {
+  return `<text dominant-baseline="central" fill="white" font-family="system-ui, sans-serif" font-size="${FONT_SIZE}" font-weight="bold" text-anchor="middle" x="${FONT_OFFSET}" y="${FONT_OFFSET}">×${multiplier}</text>`;
+}
+
+function buildBackground({ direction, height, width }: Frame): string {
+  const cellsX = direction === 'ltr' ? COORDINATES_SIZE : 0;
+  const coordinatesColumnX = direction === 'ltr' ? 0 : width - COORDINATES_SIZE + BORDER_WIDTH;
+
+  return [
+    `<rect fill="${COLOR_BACKGROUND}" height="${height}" rx="${BORDER_RADIUS}" width="${width}" x="0" y="0"/>`,
+    `<rect fill="white" height="${height - COORDINATES_SIZE}" width="${width - COORDINATES_SIZE}" x="${cellsX}" y="${COORDINATES_SIZE}"/>`,
+    `<rect fill="${COLOR_BACKGROUND}" height="${COORDINATES_SIZE}" rx="${BORDER_RADIUS}" width="${width}" x="0" y="0"/>`,
+    `<rect fill="${COLOR_BACKGROUND}" height="${height}" rx="${BORDER_RADIUS}" width="${COORDINATES_SIZE}" x="${coordinatesColumnX}" y="0"/>`,
+  ].join('');
+}
+
+function buildGridLines(config: Config, { direction, height, width }: Frame): string {
+  const lines: string[] = [];
+
+  lines.push(horizontalLine(COORDINATES_SIZE - BORDER_WIDTH / 2, width));
+  lines.push(
+    verticalLine(
+      direction === 'ltr' ? COORDINATES_SIZE - BORDER_WIDTH / 2 : width - COORDINATES_SIZE + BORDER_WIDTH / 2,
+      height,
+    ),
+  );
+
+  for (let index = 1; index < config.boardHeight; ++index) {
+    lines.push(horizontalLine(COORDINATES_SIZE + index * (CELL_SIZE + BORDER_WIDTH) - BORDER_WIDTH / 2, width));
+  }
+
+  const cellsX = direction === 'ltr' ? COORDINATES_SIZE : 0;
+
+  for (let index = 1; index < config.boardWidth; ++index) {
+    lines.push(verticalLine(cellsX + index * (CELL_SIZE + BORDER_WIDTH) - BORDER_WIDTH / 2, height));
+  }
+
+  return lines.join('');
+}
+
+function horizontalLine(y: number, width: number): string {
+  return `<line stroke="${BORDER_COLOR_LIGHT}" stroke-width="${GRID_LINE_SIZE}" vector-effect="non-scaling-stroke" x1="0" x2="${width}" y1="${y}" y2="${y}"/>`;
+}
+
+function verticalLine(x: number, height: number): string {
+  return `<line stroke="${BORDER_COLOR_LIGHT}" stroke-width="${GRID_LINE_SIZE}" vector-effect="non-scaling-stroke" x1="${x}" x2="${x}" y1="0" y2="${height}"/>`;
+}
+
+function buildBonuses({ config, getX, getY }: BonusesOptions): string {
+  return config.bonuses
+    .map(
+      (bonus) =>
+        `<use fill="${getBonusColor(bonus)}" href="#${getSymbolId(bonus)}" x="${getX(bonus)}" y="${getY(bonus)}"/>`,
+    )
+    .join('');
+}
+
+function getSymbolId(bonus: Bonus): string {
+  if (bonus.type !== BONUS_WORD) {
+    return BONUS_SYMBOL_ID;
+  }
+
+  switch (bonus.multiplier) {
+    case 2:
+      return BONUS_X2_SYMBOL_ID;
+    case 3:
+      return BONUS_X3_SYMBOL_ID;
+    case 4:
+      return BONUS_X4_SYMBOL_ID;
+    default:
+      return BONUS_SYMBOL_ID;
+  }
+}
+
+function buildStartCell(x: number, y: number): string {
+  return [
+    `<rect fill="${COLOR_BONUS_START}" height="${BONUS_SIZE}" rx="${BORDER_RADIUS}" width="${BONUS_SIZE}" x="${x + BONUS_OFFSET}" y="${y + BONUS_OFFSET}"/>`,
+    `<svg height="${ICON_SIZE}" viewBox="0 0 16 16" width="${ICON_SIZE}" x="${x + ICON_OFFSET}" y="${y + ICON_OFFSET}"><path d="${STAR_PATH}" fill="white"/></svg>`,
+  ].join('');
+}

package/src/components/Board/hooks/index.ts

@@ -1,4 +1,3 @@
-export { useBackgroundImage } from './useBackgroundImage';
 export { useBoardStyle } from './useBoardStyle';
 export { useFloatingActions } from './useFloatingActions';
 export { useFloatingFocus } from './useFloatingFocus';

package/src/components/Board/hooks/useBoardStyle.ts

@@ -1,33 +1,23 @@
 import { type CSSProperties, useMemo } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { getTileSizes } from '@/lib';
-import { BORDER_WIDTH } from '@/parameters';
-import { selectConfig, selectShowCoordinates, useTypedSelector } from '@/state';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { selectConfig, selectLocale, useTypedSelector } from '@/state';
 
-import { useBackgroundImage } from './useBackgroundImage';
+import { getBoardBackground } from '../getBoardBackground';
 
+/**
+ * Everything here is derived from Redux state only, so the style on the server matches the client
+ */
 export const useBoardStyle = () => {
   const config = useTypedSelector(selectConfig);
-  const { cellSize } = useAppLayout();
-  const { tileFontSize } = getTileSizes(cellSize);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const backgroundImage = useBackgroundImage();
-  const coordinatesSize = 0.5 * cellSize - BORDER_WIDTH;
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const backgroundImage = getBoardBackground({ config, direction });
   const boardStyle = useMemo<CSSProperties>(
     () => ({
       backgroundImage: `url(${backgroundImage})`,
-      fontSize: tileFontSize,
-      gridTemplateColumns:
-        showCoordinates === 'hidden'
-          ? `repeat(${config.boardWidth}, 1fr)`
-          : `${coordinatesSize}px repeat(${config.boardWidth}, 1fr)`,
-      gridTemplateRows:
-        showCoordinates === 'hidden'
-          ? `repeat(${config.boardHeight}, 1fr)`
-          : `${coordinatesSize}px repeat(${config.boardHeight}, 1fr)`,
     }),
-    [backgroundImage, config.boardHeight, config.boardWidth, coordinatesSize, showCoordinates, tileFontSize],
+    [backgroundImage],
   );
 
   return boardStyle;