scrabble-solver 2.15.22 → 2.15.23

package/packages/scrabble-solver/src/components/Board/hooks/useBackgroundImage.tsx

@@ -1,7 +1,7 @@
 /* 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';
 
@@ -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,233 @@ 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}
+                >
+                  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}
+                />
+
+                <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;base64,${globalThis.btoa(backgroundSvg)}`, [backgroundSvg]);
   return dataUrl;
 };

package/packages/solver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/solver",
-  "version": "2.15.22",
+  "version": "2.15.23",
   "description": "Scrabble Solver 2 - Solver",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "@kamilmielnik/trie": "^4.0.0",
-    "@scrabble-solver/types": "^2.15.22"
+    "@scrabble-solver/types": "^2.15.23"
   },
   "devDependencies": {
-    "@scrabble-solver/configs": "^2.15.22",
-    "@scrabble-solver/constants": "^2.15.22",
-    "@scrabble-solver/dictionaries": "^2.15.22"
+    "@scrabble-solver/configs": "^2.15.23",
+    "@scrabble-solver/constants": "^2.15.23",
+    "@scrabble-solver/dictionaries": "^2.15.23"
   },
   "gitHead": "1e2d1ad49a288d4a44196d8e3336740da132c637"
 }

package/packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/types",
-  "version": "2.15.22",
+  "version": "2.15.23",
   "description": "Scrabble Solver 2 - Types",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,7 +23,7 @@
     "clean": "rimraf build/"
   },
   "dependencies": {
-    "@scrabble-solver/constants": "^2.15.22"
+    "@scrabble-solver/constants": "^2.15.23"
   },
   "gitHead": "1e2d1ad49a288d4a44196d8e3336740da132c637"
 }

package/packages/word-definitions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/word-definitions",
-  "version": "2.15.22",
+  "version": "2.15.23",
   "description": "Scrabble Solver 2 - Word definitions",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,7 +23,7 @@
     "clean": "rimraf build/"
   },
   "dependencies": {
-    "@scrabble-solver/types": "^2.15.22",
+    "@scrabble-solver/types": "^2.15.23",
     "cheerio": "^1.2.0",
     "follow-redirects": "^1.15.11",
     "striptags": "^3.2.0"

package/packages/word-lists/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/word-lists",
-  "version": "2.15.22",
+  "version": "2.15.23",
   "description": "Scrabble Solver 2 - Word lists",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,7 +23,7 @@
     "clean": "rimraf build/"
   },
   "dependencies": {
-    "@scrabble-solver/types": "^2.15.22",
+    "@scrabble-solver/types": "^2.15.23",
     "cheerio": "^1.2.0",
     "follow-redirects": "^1.15.11",
     "transliteration": "^2.6.1",