@scrabble-solver/scrabble-solver 2.11.5 → 2.11.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.5",
+  "version": "2.11.7",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@floating-ui/react": "^0.21.1",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.5",
-    "@scrabble-solver/constants": "^2.11.5",
-    "@scrabble-solver/dictionaries": "^2.11.5",
-    "@scrabble-solver/logger": "^2.11.5",
-    "@scrabble-solver/solver": "^2.11.5",
-    "@scrabble-solver/types": "^2.11.5",
-    "@scrabble-solver/word-definitions": "^2.11.5",
+    "@scrabble-solver/configs": "^2.11.7",
+    "@scrabble-solver/constants": "^2.11.7",
+    "@scrabble-solver/dictionaries": "^2.11.7",
+    "@scrabble-solver/logger": "^2.11.7",
+    "@scrabble-solver/solver": "^2.11.7",
+    "@scrabble-solver/types": "^2.11.7",
+    "@scrabble-solver/word-definitions": "^2.11.7",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -71,5 +71,5 @@
     "sass": "^1.59.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "6b881cf1208c9d8ea93d61086179bd813f4d2788"
+  "gitHead": "2d485c8578e634628fa627d0c140ff9656a7375b"
 }

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

@@ -1,70 +1,13 @@
 @import 'styles/animations';
 
 .board {
-  display: table;
+  display: grid;
+  gap: var(--border--width);
   box-shadow: var(--box-shadow);
   border: var(--border);
   border-radius: var(--border--radius);
 }
 
-.row {
-  display: table-row;
-
-  &:first-child {
-    border-top-left-radius: var(--border--radius);
-    border-top-right-radius: var(--border--radius);
-
-    .cell {
-      &:first-child {
-        [dir='ltr'] & {
-          border-top-left-radius: var(--border--radius);
-        }
-
-        [dir='rtl'] & {
-          border-top-right-radius: var(--border--radius);
-        }
-      }
-
-      &:last-child {
-        [dir='ltr'] & {
-          border-top-right-radius: var(--border--radius);
-        }
-
-        [dir='rtl'] & {
-          border-top-left-radius: var(--border--radius);
-        }
-      }
-    }
-  }
-
-  &:last-child {
-    border-bottom-left-radius: var(--border--radius);
-    border-bottom-right-radius: var(--border--radius);
-
-    .cell {
-      &:first-child {
-        [dir='ltr'] & {
-          border-bottom-left-radius: var(--border--radius);
-        }
-
-        [dir='rtl'] & {
-          border-bottom-right-radius: var(--border--radius);
-        }
-      }
-
-      &:last-child {
-        [dir='ltr'] & {
-          border-bottom-right-radius: var(--border--radius);
-        }
-
-        [dir='rtl'] & {
-          border-bottom-left-radius: var(--border--radius);
-        }
-      }
-    }
-  }
-}
-
 .actions {
   position: absolute;
   z-index: var(--z-index--actions);

package/src/components/Board/Board.tsx

@@ -1,33 +1,45 @@
 import { autoUpdate, FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, FunctionComponent, useCallback, useState } from 'react';
+import { CSSProperties, FocusEventHandler, FunctionComponent, useCallback, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { useAppLayout } from 'hooks';
+import { getTileSizes } from 'lib';
 import { BOARD_CELL_ACTIONS_OFFSET, TRANSITION } from 'parameters';
-import { boardSlice, cellFilterSlice, selectBoard, selectRowsWithCandidate, useTypedSelector } from 'state';
+import { boardSlice, cellFilterSlice, selectConfig, selectRowsWithCandidate, useTypedSelector } from 'state';
 
 import styles from './Board.module.scss';
 import BoardPure from './BoardPure';
 import { Actions } from './components';
-import { useGrid } from './hooks';
+import { useBackgroundImage, useGrid } from './hooks';
 
 interface Props {
-  cellSize: number;
   className?: string;
 }
 
-const Board: FunctionComponent<Props> = ({ cellSize, className }) => {
+const Board: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const rows = useTypedSelector(selectRowsWithCandidate);
-  const board = useTypedSelector(selectBoard);
-  const { actionsWidth } = useAppLayout();
+  const config = useTypedSelector(selectConfig);
+  const { actionsWidth, cellSize } = useAppLayout();
+  const { tileFontSize } = getTileSizes(cellSize);
+
   const [{ activeIndex, direction, inputRefs }, { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste }] =
     useGrid(rows);
-  const inputRef = inputRefs[activeIndex.y][activeIndex.x];
-  const cell = rows[activeIndex.y][activeIndex.x];
+  const backgroundImage = useBackgroundImage();
+  const boardStyle = useMemo<CSSProperties>(
+    () => ({
+      backgroundImage,
+      fontSize: tileFontSize,
+      gridTemplateColumns: `repeat(${config.boardWidth}, 1fr)`,
+      gridTemplateRows: `repeat(${config.boardHeight}, 1fr)`,
+    }),
+    [backgroundImage, config.boardHeight, config.boardWidth, tileFontSize],
+  );
   const [showActions, setShowActions] = useState(false);
   const [transition, setTransition] = useState<CSSProperties['transition']>(TRANSITION);
+  const inputRef = inputRefs[activeIndex.y][activeIndex.x];
+  const cell = rows[activeIndex.y][activeIndex.x];
 
   const { x, y, strategy, refs } = useFloating({
     middleware: [
@@ -98,9 +110,9 @@ const Board: FunctionComponent<Props> = ({ cellSize, className }) => {
       <BoardPure
         className={className}
         cellSize={cellSize}
-        center={board.center}
         inputRefs={inputRefs}
         rows={rows}
+        style={boardStyle}
         onBlur={handleBlur}
         onChange={onChange}
         onFocus={handleFocus}

package/src/components/Board/BoardPure.tsx

@@ -3,7 +3,9 @@ import classNames from 'classnames';
 import {
   ChangeEventHandler,
   ClipboardEventHandler,
+  CSSProperties,
   FocusEventHandler,
+  Fragment,
   FunctionComponent,
   KeyboardEventHandler,
   memo,
@@ -16,9 +18,9 @@ import { Cell } from './components';
 interface Props {
   className?: string;
   cellSize: number;
-  center: CellModel;
   inputRefs: RefObject<HTMLInputElement>[][];
   rows: CellModel[][];
+  style?: CSSProperties;
   onBlur: FocusEventHandler;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onFocus: (x: number, y: number) => void;
@@ -29,18 +31,24 @@ interface Props {
 const BoardPure: FunctionComponent<Props> = ({
   className,
   cellSize,
-  center,
   inputRefs,
   rows,
+  style,
   onBlur,
   onChange,
   onFocus,
   onKeyDown,
   onPaste,
 }) => (
-  <div className={classNames(styles.board, className)} onBlur={onBlur} onKeyDown={onKeyDown} onPaste={onPaste}>
+  <div
+    className={classNames(styles.board, className)}
+    style={style}
+    onBlur={onBlur}
+    onKeyDown={onKeyDown}
+    onPaste={onPaste}
+  >
     {rows.map((cells, y) => (
-      <div className={styles.row} key={y}>
+      <Fragment key={y}>
         {cells.map((cell, x) => (
           <Cell
             className={styles.cell}
@@ -50,16 +58,13 @@ const BoardPure: FunctionComponent<Props> = ({
             cellRight={x < rows.length - 1 ? rows[y][x + 1] : undefined}
             cellTop={y > 0 ? rows[y - 1][x] : undefined}
             inputRef={inputRefs[y][x]}
-            isBottom={y === rows.length - 1}
-            isCenter={center.x === x && center.y === y}
-            isRight={x === cells.length - 1}
             key={x}
             size={cellSize}
             onChange={onChange}
             onFocus={onFocus}
           />
         ))}
-      </div>
+      </Fragment>
     ))}
   </div>
 );

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

@@ -59,139 +59,11 @@
   }
 }
 
-.cell {
+.tile {
   @include focus-effect;
   @include lighthouse-input-size-hack;
 
-  position: relative;
-  display: table-cell;
-  vertical-align: middle;
-  background-color: var(--color--white);
-  border-bottom: var(--border--width) dotted var(--border--color--light);
-  background-clip: padding-box;
-
-  [dir='ltr'] & {
-    border-right: var(--border--width) dotted var(--border--color--light);
-  }
-
-  [dir='rtl'] & {
-    border-left: var(--border--width) dotted var(--border--color--light);
-  }
-
-  &.bottom {
-    border-bottom: none;
-  }
-
-  &.right {
-    [dir='ltr'] & {
-      border-right: none;
-    }
-
-    [dir='rtl'] & {
-      border-left: none;
-    }
-  }
-
-  &.bonusStart {
-    &::before {
-      content: '';
-      background-color: var(--color--bonus--start);
-    }
-  }
-
-  &.bonusCharacter1 {
-    &::before {
-      content: '';
-      background-color: var(--color--bonus--character--1);
-    }
-  }
-
-  &.bonusCharacter2 {
-    &::before {
-      content: '';
-      background-color: var(--color--bonus--character--2);
-    }
-  }
-
-  &.bonusCharacter3 {
-    &::before {
-      content: '';
-      background-color: var(--color--bonus--character--3);
-    }
-  }
-
-  &.bonusCharacter5 {
-    &::before {
-      content: '';
-      background-color: var(--color--bonus--character--5);
-    }
-  }
-
-  &.bonusCharacterMultiplier2 {
-    &::before {
-      content: '';
-      background-color: var(--color--bonus--character-multiplier--2);
-    }
-  }
-
-  &.bonusCharacterMultiplier3 {
-    &::before {
-      content: '';
-      background-color: var(--color--bonus--character-multiplier--3);
-    }
-  }
-
-  &.bonusWord2 {
-    &::before {
-      content: 'x2';
-      background-color: var(--color--bonus--word-multiplier--2);
-    }
-  }
-
-  &.bonusWord3 {
-    &::before {
-      content: 'x3';
-      background-color: var(--color--bonus--word-multiplier--3);
-    }
-  }
-
-  &.filtered {
-    &::before {
-      content: '';
-      background-color: var(--color--foreground--secondary);
-    }
-  }
-
-  &::before {
-    $size: 80%;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: (100% - $size) / 2;
-    left: (100% - $size) / 2;
-    width: $size;
-    height: $size;
-    border-radius: var(--border--radius);
-    pointer-events: none;
-    font-size: 60%;
-    font-weight: bold;
-    color: var(--color--white);
-    transition: var(--transition);
-
-    [lang='fa-IR'] & {
-      font-family: var(--font--family--latin);
-    }
-  }
-
-  &:focus-within {
-    z-index: 2;
-  }
-}
-
-.tile {
-  .sharpTopLeft & {
+  &.sharpTopLeft {
     [dir='ltr'] & {
       border-top-left-radius: 0;
     }
@@ -201,7 +73,7 @@
     }
   }
 
-  .sharpTopRight & {
+  &.sharpTopRight {
     [dir='ltr'] & {
       border-top-right-radius: 0;
     }
@@ -211,7 +83,7 @@
     }
   }
 
-  .sharpBottomLeft & {
+  &.sharpBottomLeft {
     [dir='ltr'] & {
       border-bottom-left-radius: 0;
     }
@@ -221,7 +93,7 @@
     }
   }
 
-  .sharpBottomRight & {
+  &.sharpBottomRight {
     [dir='ltr'] & {
       border-bottom-right-radius: 0;
     }
@@ -230,16 +102,8 @@
       border-bottom-left-radius: 0;
     }
   }
-}
-
-.icon {
-  $size: 40%;
 
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: $size;
-  height: $size;
-  transform: translate(-50%, -50%);
-  color: var(--color--white);
+  &:focus-within {
+    z-index: 2;
+  }
 }

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

@@ -1,19 +1,13 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell as CellModel } from '@scrabble-solver/types';
-import { ChangeEventHandler, FunctionComponent, RefObject, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { ChangeEventHandler, FunctionComponent, RefObject, useCallback } from 'react';
 
-import { getTileSizes } from 'lib';
-import {
-  selectCellBonus,
-  selectCellIsFiltered,
-  selectCellIsValid,
-  selectLocale,
-  selectTilePoints,
-  useTranslate,
-  useTypedSelector,
-} from 'state';
+import { selectCellIsValid, selectLocale, selectTilePoints, useTranslate, useTypedSelector } from 'state';
 
-import CellPure from './CellPure';
+import Tile from '../../../Tile';
+
+import styles from './Cell.module.scss';
 
 interface Props {
   cell: CellModel;
@@ -23,9 +17,6 @@ interface Props {
   cellTop?: CellModel;
   className?: string;
   inputRef: RefObject<HTMLInputElement>;
-  isBottom: boolean;
-  isCenter: boolean;
-  isRight: boolean;
   size: number;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onFocus: (x: number, y: number) => void;
@@ -39,9 +30,6 @@ const Cell: FunctionComponent<Props> = ({
   cellTop,
   className,
   inputRef,
-  isBottom,
-  isCenter,
-  isRight,
   size,
   onChange,
   onFocus,
@@ -49,40 +37,33 @@ const Cell: FunctionComponent<Props> = ({
   const { tile, x, y } = cell;
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
-  const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
-  const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
   const isValid = useTypedSelector((state) => selectCellIsValid(state, cell));
-  const { tileFontSize } = getTileSizes(size);
   const isEmpty = tile.character === EMPTY_CELL;
-  const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
 
   const handleFocus = useCallback(() => onFocus(x, y), [x, y, onFocus]);
 
   return (
-    <CellPure
+    <Tile
       aria-label={translate('cell.tile.location', {
         x: (x + 1).toLocaleString(locale),
         y: (y + 1).toLocaleString(locale),
       })}
-      bonus={bonus}
-      cell={cell}
-      cellBottom={cellBottom}
-      cellLeft={cellLeft}
-      cellRight={cellRight}
-      cellTop={cellTop}
-      className={className}
+      className={classNames(styles.tile, className, {
+        [styles.sharpTopLeft]: cellTop?.hasTile() || cellLeft?.hasTile(),
+        [styles.sharpTopRight]: cellTop?.hasTile() || cellRight?.hasTile(),
+        [styles.sharpBottomLeft]: cellBottom?.hasTile() || cellLeft?.hasTile(),
+        [styles.sharpBottomRight]: cellBottom?.hasTile() || cellRight?.hasTile(),
+      })}
+      character={isEmpty ? undefined : tile.character}
+      highlighted={cell.isCandidate()}
       inputRef={inputRef}
-      isBottom={isBottom}
-      isCenter={isCenter}
-      isRight={isRight}
-      isEmpty={isEmpty}
-      isFiltered={isFiltered}
+      isBlank={tile.isBlank}
       isValid={isValid}
       points={points}
+      raised={!isEmpty}
       size={size}
-      style={style}
-      tile={tile}
+      tabIndex={cell.x === 0 && cell.y === 0 ? undefined : -1}
       onChange={onChange}
       onFocus={handleFocus}
     />

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

@@ -1 +1,2 @@
+export { default as useBackgroundImage } from './useBackgroundImage';
 export { default as useGrid } from './useGrid';

package/src/components/Board/hooks/useBackgroundImage.tsx

@@ -0,0 +1,170 @@
+/* eslint-disable max-statements */
+
+import { BONUS_CHARACTER, BONUS_WORD } from '@scrabble-solver/constants';
+import { useMemo } from 'react';
+import { renderToString } from 'react-dom/server';
+import { Provider } from 'react-redux';
+
+import { useAppLayout } from 'hooks';
+import { FlagFill, Star } from 'icons';
+import { dataUrlToBlob, getTileSizes } from 'lib';
+import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BONUS_START, COLOR_FILTERED } from 'parameters';
+import { selectCellFilter, selectConfig, store, useTypedSelector } from 'state';
+import { Point } from 'types';
+
+import { getBonusColor } from '../lib';
+
+const HORIZONTAL_LINE = 'h';
+const VERTICAL_LINE = 'v';
+const BONUS = 'b';
+const BONUS_WORD_2 = 'b2';
+const BONUS_WORD_3 = 'b3';
+const CELL_FILTER = 'c';
+
+const useBackgroundImage = () => {
+  const { boardSize, cellSize } = useAppLayout();
+  const config = useTypedSelector(selectConfig);
+  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
+  const cellFilter = useTypedSelector(selectCellFilter);
+  const viewBoxHeight = boardSize;
+  const viewBoxWidth = boardSize;
+  const bonusSize = cellSize * 0.8;
+  const bonusOffset = cellSize * 0.1;
+  const iconSize = cellSize * 0.4;
+  const iconOffset = (cellSize - iconSize) / 2;
+  const { tileFontSize } = getTileSizes(cellSize);
+  const fontSize = tileFontSize * 0.6;
+  const fontOffset = cellSize / 2;
+  const characterBonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER);
+  const word2Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2);
+  const word3Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3);
+
+  const getX = (point: Point): number => point.x * (cellSize + BORDER_WIDTH);
+
+  const getY = (point: Point): number => point.y * (cellSize + BORDER_WIDTH);
+
+  const backgroundSvg = renderToString(
+    <Provider store={store}>
+      <svg
+        height={viewBoxHeight}
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        width={viewBoxWidth}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <symbol id={HORIZONTAL_LINE}>
+            <rect fill={BORDER_COLOR_LIGHT} height={1} width={viewBoxWidth} />
+          </symbol>
+
+          <symbol id={VERTICAL_LINE}>
+            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={1} />
+          </symbol>
+
+          <symbol id={BONUS}>
+            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+          </symbol>
+
+          <symbol id={BONUS_WORD_2}>
+            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+            <text
+              dominantBaseline="central"
+              fill="white"
+              fontFamily="system-ui, sans-serif"
+              fontSize={fontSize}
+              fontWeight="bold"
+              textAnchor="middle"
+              x={fontOffset}
+              y={fontOffset}
+            >
+              x2
+            </text>
+          </symbol>
+
+          <symbol id={BONUS_WORD_3}>
+            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+            <text
+              dominantBaseline="central"
+              fill="white"
+              fontFamily="system-ui, sans-serif"
+              fontSize={fontSize}
+              fontWeight="bold"
+              textAnchor="middle"
+              x={fontOffset}
+              y={fontOffset}
+            >
+              x3
+            </text>
+          </symbol>
+
+          <symbol id={CELL_FILTER}>
+            <rect
+              fill={COLOR_FILTERED}
+              height={bonusSize}
+              rx={BORDER_RADIUS}
+              width={bonusSize}
+              x={bonusOffset}
+              y={bonusOffset}
+            />
+
+            <FlagFill color="white" height={iconSize} width={iconSize} x={iconOffset} y={iconOffset} />
+          </symbol>
+        </defs>
+
+        <rect fill="white" height={viewBoxHeight} rx={BORDER_RADIUS} width={viewBoxWidth} x="0" y="0" />
+
+        {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
+          <use key={index} href={`#${HORIZONTAL_LINE}`} y={(index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH} />
+        ))}
+
+        {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
+          <use key={index} href={`#${VERTICAL_LINE}`} x={(index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH} />
+        ))}
+
+        {characterBonuses.map((bonus, index) => (
+          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS}`} x={getX(bonus)} y={getY(bonus)} />
+        ))}
+
+        {word2Bonuses.map((bonus, index) => (
+          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_2}`} x={getX(bonus)} y={getY(bonus)} />
+        ))}
+
+        {word3Bonuses.map((bonus, index) => (
+          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_3}`} x={getX(bonus)} y={getY(bonus)} />
+        ))}
+
+        <rect
+          fill={COLOR_BONUS_START}
+          height={bonusSize}
+          rx={BORDER_RADIUS}
+          width={bonusSize}
+          x={getX(center) + bonusOffset}
+          y={getY(center) + bonusOffset}
+        />
+
+        <Star
+          color="white"
+          height={iconSize}
+          width={iconSize}
+          x={getX(center) + iconOffset}
+          y={getY(center) + iconOffset}
+        />
+
+        {cellFilter.map((cell, index) => (
+          <use key={index} href={`#${CELL_FILTER}`} x={getX(cell)} y={getY(cell)} />
+        ))}
+      </svg>
+    </Provider>,
+  );
+
+  const encodedSvg = globalThis.btoa(backgroundSvg);
+  const dataUrl = `data:image/svg+xml;base64,${encodedSvg}`;
+  const blob = useMemo(() => dataUrlToBlob(dataUrl), [dataUrl]);
+  const blobUrl = useMemo(() => URL.createObjectURL(blob), [blob]);
+  const url = `url(${blobUrl})`;
+
+  return url;
+};
+
+export default useBackgroundImage;