@scrabble-solver/scrabble-solver 2.15.22 → 2.15.24

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-typescript","duration":1892271,"timestamp":10741325368,"id":13,"parentId":1,"tags":{},"startTime":1775397253884,"traceId":"142e972b1da52edc"},{"name":"run-webpack","duration":6166870,"timestamp":10743220826,"id":15,"parentId":1,"tags":{},"startTime":1775397255780,"traceId":"142e972b1da52edc"},{"name":"static-check","duration":176351,"timestamp":10749456101,"id":2016,"parentId":1,"tags":{},"startTime":1775397262015,"traceId":"142e972b1da52edc"},{"name":"static-generation","duration":820346,"timestamp":10749640404,"id":2034,"parentId":1,"tags":{},"startTime":1775397262199,"traceId":"142e972b1da52edc"},{"name":"collect-build-traces","duration":3624593,"timestamp":10749632918,"id":2031,"parentId":1,"tags":{},"startTime":1775397262192,"traceId":"142e972b1da52edc"},{"name":"telemetry-flush","duration":17,"timestamp":10753258582,"id":2046,"parentId":1,"tags":{},"startTime":1775397265817,"traceId":"142e972b1da52edc"},{"name":"next-build","duration":12173853,"timestamp":10741084749,"id":1,"tags":{"buildMode":"default","version":"16.2.2","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1775397253644,"traceId":"142e972b1da52edc"}]
+[{"name":"run-typescript","duration":1924166,"timestamp":5612708199,"id":13,"parentId":1,"tags":{},"startTime":1776200797413,"traceId":"a247f46abd30b936"},{"name":"run-webpack","duration":6261220,"timestamp":5614634557,"id":15,"parentId":1,"tags":{},"startTime":1776200799339,"traceId":"a247f46abd30b936"},{"name":"static-check","duration":185822,"timestamp":5620982865,"id":2016,"parentId":1,"tags":{},"startTime":1776200805688,"traceId":"a247f46abd30b936"},{"name":"static-generation","duration":834210,"timestamp":5621177262,"id":2034,"parentId":1,"tags":{},"startTime":1776200805882,"traceId":"a247f46abd30b936"},{"name":"collect-build-traces","duration":3625253,"timestamp":5621169330,"id":2031,"parentId":1,"tags":{},"startTime":1776200805874,"traceId":"a247f46abd30b936"},{"name":"telemetry-flush","duration":18,"timestamp":5624795666,"id":2046,"parentId":1,"tags":{},"startTime":1776200809500,"traceId":"a247f46abd30b936"},{"name":"next-build","duration":12329041,"timestamp":5612466647,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1776200797171,"traceId":"a247f46abd30b936"}]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.15.22",
+  "version": "2.15.24",
   "description": "Scrabble Solver 2 - App",
   "repository": {
     "type": "git",
@@ -28,22 +28,22 @@
     "@floating-ui/react": "^0.27.19",
     "@kamilmielnik/trie": "^4.0.0",
     "@reduxjs/toolkit": "^2.11.2",
-    "@scrabble-solver/configs": "^2.15.22",
-    "@scrabble-solver/constants": "^2.15.22",
-    "@scrabble-solver/dictionaries": "^2.15.22",
-    "@scrabble-solver/logger": "^2.15.22",
-    "@scrabble-solver/solver": "^2.15.22",
-    "@scrabble-solver/types": "^2.15.22",
-    "@scrabble-solver/word-definitions": "^2.15.22",
+    "@scrabble-solver/configs": "^2.15.24",
+    "@scrabble-solver/constants": "^2.15.24",
+    "@scrabble-solver/dictionaries": "^2.15.24",
+    "@scrabble-solver/logger": "^2.15.24",
+    "@scrabble-solver/solver": "^2.15.24",
+    "@scrabble-solver/types": "^2.15.24",
+    "@scrabble-solver/word-definitions": "^2.15.24",
     "classnames": "^2.5.1",
     "env-cmd": "^11.0.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^16.2.2",
+    "next": "^16.2.3",
     "normalize.css": "^8.0.1",
-    "react": "^19.2.4",
+    "react": "^19.2.5",
     "react-cool-onclickoutside": "^1.7.0",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.5",
     "react-highlight-words": "^0.21.0",
     "react-modal": "^3.16.3",
     "react-redux": "^9.2.0",
@@ -69,5 +69,5 @@
     "@types/redux": "^3.6.31",
     "sass": "^1.99.0"
   },
-  "gitHead": "6d8b6b51e3cad36844454d3564b90b1e14e9fcf8"
+  "gitHead": "28330eeb094266d16a0e2c80f3333f534c70dea1"
 }

package/src/app-layout/useAppLayoutValue.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-statements */
 
-import { useColumns, useIsTouchDevice, useMediaQueries, useViewportSize } from 'hooks';
+import { useColumns, useIsTouchDevice, useMediaQueries, useViewportSize } from '@/hooks';
 import {
   BOARD_TILE_SIZE_MAX,
   BORDER_WIDTH,
@@ -19,9 +19,9 @@ import {
   RESULTS_COLUMN_WIDTH,
   SOLVER_COLUMN_WIDTH,
   TEXT_INPUT_HEIGHT,
-} from 'parameters';
-import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
-import { type ResultColumnId } from 'types';
+} from '@/parameters';
+import { selectConfig, selectShowCoordinates, useTypedSelector } from '@/state';
+import { type ResultColumnId } from '@/types';
 
 export const useAppLayoutValue = () => {
   const { viewportHeight, viewportWidth } = useViewportSize();

package/src/components/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent, type HTMLProps, type ReactNode, type SVGAttributes } from 'react';
 
-import { Check, CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from 'icons';
+import { Check, CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from '@/icons';
 
 import styles from './Alert.module.scss';
 

package/src/components/Board/Board.tsx

@@ -7,9 +7,9 @@ import { type CSSProperties, type FocusEventHandler, type FunctionComponent, use
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'app-layout';
-import { LOCALE_FEATURES } from 'i18n';
-import { TRANSITION } from 'parameters';
+import { useAppLayout } from '@/app-layout';
+import { LOCALE_FEATURES } from '@/i18n';
+import { TRANSITION } from '@/parameters';
 import {
   boardSlice,
   cellFiltersSlice,
@@ -19,7 +19,7 @@ import {
   selectShowCoordinates,
   solveSlice,
   useTypedSelector,
-} from 'state';
+} from '@/state';
 
 import styles from './Board.module.scss';
 import { BoardPure } from './BoardPure';

package/src/components/Board/BoardPure.tsx

@@ -12,10 +12,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, FlagFill } from '@/icons';
+import { getCoordinate } from '@/lib';
+import { BORDER_WIDTH } from '@/parameters';
+import { type CellFilter } from '@/types';
 
 import styles from './Board.module.scss';
 import { Cell } from './components';

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

@@ -3,11 +3,11 @@ 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 { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from 'state';
-import { type Direction } from 'types';
+import { useIsTouchDevice } from '@/hooks';
+import { Keyboard, Square, SquareFill } from '@/icons';
+import { findCell, isMac } from '@/lib';
+import { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from '@/state';
+import { type Direction } from '@/types';
 
 import { Button } from '../../../Button';
 import { ToggleDirectionButton } from '../ToggleDirectionButton';

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

@@ -1,7 +1,7 @@
 import { type FunctionComponent, type SVGAttributes } from 'react';
 
-import { Ban, Eraser, FlagFill } from 'icons';
-import { type CellFilter, type TranslationKey } from 'types';
+import { Ban, Eraser, FlagFill } from '@/icons';
+import { type CellFilter, type TranslationKey } from '@/types';
 
 export const getNextCellFilter = (
   filter: CellFilter | undefined,

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

@@ -19,7 +19,7 @@ import {
   selectTilePoints,
   useTranslate,
   useTypedSelector,
-} from 'state';
+} from '@/state';
 
 import { Tile } from '../../../Tile';
 

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

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

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

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

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

@@ -1,18 +1,18 @@
 /* eslint-disable max-lines, max-statements */
 
 import { BONUS_CHARACTER, BONUS_WORD } from '@scrabble-solver/constants';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
-import { useAppLayout } from 'app-layout';
-import { useMediaQueries } from 'hooks';
-import { LOCALE_FEATURES } from 'i18n';
-import { Star } from 'icons';
-import { getTileSizes } from 'lib';
-import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from 'parameters';
-import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from 'state';
-import { type Point } from 'types';
+import { useAppLayout } from '@/app-layout';
+import { useMediaQueries } from '@/hooks';
+import { LOCALE_FEATURES } from '@/i18n';
+import { Star } from '@/icons';
+import { getTileSizes } from '@/lib';
+import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from '@/parameters';
+import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from '@/state';
+import { type Point } from '@/types';
 
 import { getBonusColor } from '../lib';
 
@@ -33,7 +33,10 @@ export const useBackgroundImage = () => {
   const { isLessThanXs } = useMediaQueries();
   const borderRadius = isLessThanXs ? BORDER_RADIUS_XS : BORDER_RADIUS;
   const config = useTypedSelector(selectConfig);
-  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
+  const center = useMemo(
+    () => ({ x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) }),
+    [config.boardHeight, config.boardWidth],
+  );
   const viewBoxHeight = boardHeight;
   const viewBoxWidth = boardWidth;
   const bonusSize = cellSize * 0.8;
@@ -43,174 +46,234 @@ export const useBackgroundImage = () => {
   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 word4Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4);
-
-  const getX = (point: Point): number =>
-    (direction === 'ltr' ? coordinatesSize : 0) + point.x * (cellSize + BORDER_WIDTH);
-
-  const getY = (point: Point): number => coordinatesSize + 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={GRID_LINE_SIZE} width={viewBoxWidth} />
-          </symbol>
-
-          <symbol id={VERTICAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
-          </symbol>
-
-          <symbol id={BONUS}>
-            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
-          </symbol>
-
-          <symbol id={BONUS_WORD_2}>
-            <rect height={bonusSize} rx={borderRadius} 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={borderRadius} 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={BONUS_WORD_4}>
-            <rect height={bonusSize} rx={borderRadius} 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}
-            >
-              x4
-            </text>
-          </symbol>
-        </defs>
-
-        {showCoordinates === 'hidden' && (
-          <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
-        )}
-
-        {showCoordinates !== 'hidden' && (
-          <>
-            <rect fill={COLOR_BACKGROUND} height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
-            <rect
-              fill="white"
-              height={viewBoxHeight - coordinatesSize}
-              width={viewBoxWidth - coordinatesSize}
-              x={direction === 'ltr' ? coordinatesSize : 0}
-              y={coordinatesSize}
-            />
+  const characterBonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER),
+    [config.bonuses],
+  );
+  const word2Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2),
+    [config.bonuses],
+  );
+  const word3Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3),
+    [config.bonuses],
+  );
+  const word4Bonuses = useMemo(
+    () => config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4),
+    [config.bonuses],
+  );
+
+  const getX = useCallback(
+    (point: Point): number => (direction === 'ltr' ? coordinatesSize : 0) + point.x * (cellSize + BORDER_WIDTH),
+    [coordinatesSize, cellSize, direction],
+  );
+
+  const getY = useCallback(
+    (point: Point): number => coordinatesSize + point.y * (cellSize + BORDER_WIDTH),
+    [coordinatesSize, cellSize],
+  );
+
+  const backgroundSvg = useMemo(
+    () =>
+      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={GRID_LINE_SIZE} width={viewBoxWidth} />
+              </symbol>
+
+              <symbol id={VERTICAL_LINE}>
+                <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
+              </symbol>
+
+              <symbol id={BONUS}>
+                <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+              </symbol>
+
+              <symbol id={BONUS_WORD_2}>
+                <rect height={bonusSize} rx={borderRadius} 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}
+                >
+                  ×2
+                </text>
+              </symbol>
+
+              <symbol id={BONUS_WORD_3}>
+                <rect height={bonusSize} rx={borderRadius} 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}
+                >
+                  ×3
+                </text>
+              </symbol>
+
+              <symbol id={BONUS_WORD_4}>
+                <rect height={bonusSize} rx={borderRadius} 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}
+                >
+                  ×4
+                </text>
+              </symbol>
+            </defs>
+
+            {showCoordinates === 'hidden' && (
+              <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+            )}
+
+            {showCoordinates !== 'hidden' && (
+              <>
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={viewBoxHeight}
+                  rx={borderRadius}
+                  width={viewBoxWidth}
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill="white"
+                  height={viewBoxHeight - coordinatesSize}
+                  width={viewBoxWidth - coordinatesSize}
+                  x={direction === 'ltr' ? coordinatesSize : 0}
+                  y={coordinatesSize}
+                />
+
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={coordinatesSize}
+                  rx={borderRadius}
+                  width={viewBoxWidth}
+                  x="0"
+                  y="0"
+                />
+                <rect
+                  fill={COLOR_BACKGROUND}
+                  height={viewBoxHeight}
+                  rx={borderRadius}
+                  x={direction === 'ltr' ? 0 : viewBoxWidth - coordinatesSize}
+                  y="0"
+                  width={coordinatesSize}
+                />
+                <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
+                <use
+                  href={`#${VERTICAL_LINE}`}
+                  x={
+                    direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH
+                  }
+                />
+              </>
+            )}
+
+            {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
+              <use
+                key={index}
+                href={`#${HORIZONTAL_LINE}`}
+                y={coordinatesSize + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
+              />
+            ))}
+
+            {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
+              <use
+                key={index}
+                href={`#${VERTICAL_LINE}`}
+                x={(direction === 'ltr' ? coordinatesSize : 0) + (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)} />
+            ))}
+
+            {word4Bonuses.map((bonus, index) => (
+              <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_4}`} x={getX(bonus)} y={getY(bonus)} />
+            ))}
 
-            <rect fill={COLOR_BACKGROUND} height={coordinatesSize} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
             <rect
-              fill={COLOR_BACKGROUND}
-              height={viewBoxHeight}
+              fill={COLOR_BONUS_START}
+              height={bonusSize}
               rx={borderRadius}
-              x={direction === 'ltr' ? 0 : viewBoxWidth - coordinatesSize}
-              y="0"
-              width={coordinatesSize}
+              width={bonusSize}
+              x={getX(center) + bonusOffset}
+              y={getY(center) + bonusOffset}
             />
-            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
-            <use
-              href={`#${VERTICAL_LINE}`}
-              x={direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
+
+            <Star
+              color="white"
+              height={iconSize}
+              width={iconSize}
+              x={getX(center) + iconOffset}
+              y={getY(center) + iconOffset}
             />
-          </>
-        )}
-
-        {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
-          <use
-            key={index}
-            href={`#${HORIZONTAL_LINE}`}
-            y={coordinatesSize + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
-          />
-        ))}
-
-        {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
-          <use
-            key={index}
-            href={`#${VERTICAL_LINE}`}
-            x={(direction === 'ltr' ? coordinatesSize : 0) + (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)} />
-        ))}
-
-        {word4Bonuses.map((bonus, index) => (
-          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_4}`} x={getX(bonus)} y={getY(bonus)} />
-        ))}
-
-        <rect
-          fill={COLOR_BONUS_START}
-          height={bonusSize}
-          rx={borderRadius}
-          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}
-        />
-      </svg>
-    </Provider>,
+          </svg>
+        </Provider>,
+      ),
+    [
+      bonusOffset,
+      bonusSize,
+      borderRadius,
+      cellSize,
+      center,
+      characterBonuses,
+      config.boardHeight,
+      config.boardWidth,
+      coordinatesSize,
+      direction,
+      fontOffset,
+      fontSize,
+      getX,
+      getY,
+      iconOffset,
+      iconSize,
+      showCoordinates,
+      viewBoxHeight,
+      viewBoxWidth,
+      word2Bonuses,
+      word3Bonuses,
+      word4Bonuses,
+    ],
   );
 
-  const encodedSvg = useMemo(() => globalThis.btoa(backgroundSvg), [backgroundSvg]);
-  const dataUrl = `data:image/svg+xml;base64,${encodedSvg}`;
+  const dataUrl = useMemo(() => `data:image/svg+xml,${encodeURIComponent(backgroundSvg)}`, [backgroundSvg]);
+
   return dataUrl;
 };

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

@@ -1,9 +1,9 @@
 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 { useAppLayout } from '@/app-layout';
+import { getTileSizes } from '@/lib';
+import { BORDER_WIDTH } from '@/parameters';
+import { selectConfig, selectShowCoordinates, useTypedSelector } from '@/state';
 
 import { useBackgroundImage } from './useBackgroundImage';