scrabble-solver 2.16.7 → 2.18.0

package/packages/scrabble-solver/src/components/Alert/Alert.module.scss.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly alert: string;
+  readonly content: string;
+  readonly error: string;
+  readonly icon: string;
+  readonly iconContainer: string;
+  readonly info: string;
+  readonly success: string;
+  readonly warning: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Alert/Alert.tsx

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

package/packages/scrabble-solver/src/components/Badge/Badge.module.scss.d.ts

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

package/packages/scrabble-solver/src/components/Board/Board.module.scss

@@ -2,12 +2,19 @@
 @use 'styles/mixins' as *;
 
 .board {
+  --tile-size: var(--cell-size);
+  --coordinate-track-size: calc(var(--coordinate-size) - var(--border--width));
+
   display: grid;
+  grid-template-columns: var(--coordinate-track-size) repeat(var(--board-cols), var(--cell-size));
+  grid-template-rows: var(--coordinate-track-size) repeat(var(--board-rows), var(--cell-size));
   gap: var(--border--width);
   box-shadow: var(--box-shadow);
   background-color: white;
+  background-size: 100% 100%;
   border: var(--border);
   border-radius: var(--border--radius);
+  font-size: max(14px, calc(var(--cell-size) * 0.6));
 }
 
 .floating {
@@ -21,6 +28,8 @@
 .focus {
   @include focus-effect;
 
+  width: var(--cell-size);
+  height: var(--cell-size);
   cursor: text;
 
   &::after {
@@ -70,4 +79,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: calc(0.3 * var(--cell-size));
 }

package/packages/scrabble-solver/src/components/Board/Board.module.scss.d.ts

@@ -0,0 +1,17 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly board: string;
+  readonly coordinate: string;
+  readonly floating: string;
+  readonly focus: string;
+  readonly hidden: string;
+  readonly hide: string;
+  readonly icon: string;
+  readonly iconBackground: string;
+  readonly iconContainer: string;
+  readonly rotate: string;
+  readonly show: string;
+  readonly wave: string;
+};
+
+export default styles;

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

@@ -3,21 +3,22 @@
 import { FloatingPortal, type ReferenceType } from '@floating-ui/react';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import { type CSSProperties, type FocusEventHandler, type FunctionComponent, useCallback, useState } from 'react';
+import { type FocusEventHandler, type FunctionComponent, useCallback, useState } from 'react';
 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 { LOCALE_FEATURES } from '@/i18n/constants';
 import {
   boardSlice,
   cellFiltersSlice,
   selectCellFilters,
+  selectConfig,
+  selectHoveredCharacter,
   selectInputMode,
   selectLocale,
   selectShowCoordinates,
   solveSlice,
+  useTranslate,
   useTypedSelector,
 } from '@/state';
 
@@ -33,13 +34,15 @@ interface Props {
 
 export const Board: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
+  const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
+  const config = useTypedSelector(selectConfig);
   const rows = useTypedSelector(selectRowsWithCandidate);
   const reachableCells = useTypedSelector(selectReachableCells);
   const inputMode = useTypedSelector(selectInputMode);
   const cellFilters = useTypedSelector(selectCellFilters);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const { cellSize, coordinatesFontSize, coordinatesSize } = useAppLayout();
+  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
   const [
     { activeIndex, direction, inputRefs },
     { insertValue, onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
@@ -47,7 +50,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
   const boardStyle = useBoardStyle();
   const [hasFocus, setHasFocus] = useState(false);
   const [showInputPrompt, setShowInputPrompt] = useState(false);
-  const [transition, setTransition] = useState<CSSProperties['transition']>(TRANSITION);
   const inputRef = inputRefs[activeIndex.y][activeIndex.x];
   const cell = rows[activeIndex.y][activeIndex.x];
   const floatingActions = useFloatingActions();
@@ -80,8 +82,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
 
   const handleFocus: typeof onFocus = useCallback(
     (newX, newY) => {
-      const isFirstFocus = !hasFocus;
-      const originalTransition = floatingActions.refs.floating.current?.style.transition || '';
       const newInputRef = inputRefs[newY][newX].current;
       const newTileElement = newInputRef?.parentElement || null;
 
@@ -89,16 +89,8 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
       onFocus(newX, newY);
       setHasFocus(true);
       setShowInputPrompt(false);
-
-      if (isFirstFocus) {
-        setTransition('none');
-
-        globalThis.setTimeout(() => {
-          setTransition(originalTransition);
-        }, 0);
-      }
     },
-    [floatingActions.refs.floating, hasFocus, inputRefs, onFocus, updateFloatingReference],
+    [inputRefs, onFocus, updateFloatingReference],
   );
 
   const handleEnterWord = useCallback(() => {
@@ -153,16 +145,17 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
       <BoardPure
         className={className}
         cellFilters={cellFilters}
-        cellSize={cellSize}
-        coordinatesFontSize={coordinatesFontSize}
-        coordinatesSize={coordinatesSize}
+        config={config}
         direction={LOCALE_FEATURES[locale].direction}
+        hoveredCharacter={hoveredCharacter}
         inputRefs={inputRefs}
+        locale={locale}
         reachableCells={reachableCells}
         ref={ref}
         rows={rows}
         showCoordinates={showCoordinates}
         style={boardStyle}
+        translate={translate}
         onBlur={handleBlur}
         onChange={onChange}
         onFocus={handleFocus}
@@ -178,14 +171,11 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
           ref={floatingFocus.refs.setFloating}
           style={{
             position: floatingFocus.strategy,
-            top: floatingFocus.y + cellSize,
+            top: `calc(${floatingFocus.y ?? 0}px + var(--cell-size))`,
             left: floatingFocus.x,
             display: floatingFocus.isPositioned ? 'block' : 'none',
-            width: cellSize,
-            height: cellSize,
             opacity: hasFocus ? 1 : 0,
             visibility: floatingFocus.x === null || floatingFocus.y === null ? 'hidden' : 'visible',
-            transition,
           }}
           tabIndex={0}
         />
@@ -200,7 +190,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
               position: floatingActions.strategy,
               top: floatingActions.y ?? 0,
               left: floatingActions.x ?? 0,
-              transition,
             }}
             onDirectionToggle={handleToggleDirection}
             onEnterWord={handleEnterWord}
@@ -219,7 +208,6 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
               position: floatingInputPrompt.strategy,
               top: floatingInputPrompt.y ?? 0,
               left: floatingInputPrompt.x ?? 0,
-              transition,
             }}
             onDirectionToggle={handleToggleDirection}
             onSubmit={handleInsertWord}

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Board/components/Cell/Cell.tsx

@@ -1,27 +1,20 @@
-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,
   type FocusEventHandler,
   type FunctionComponent,
+  memo,
   type MouseEventHandler,
   type RefObject,
   type TouchEventHandler,
   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';
 
@@ -34,72 +27,75 @@ 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;
 }
 
-export const Cell: FunctionComponent<Props> = ({
+/**
+ * Must not subscribe to the store - it can read the story only in event handlers.
+ */
+const CellBase: FunctionComponent<Props> = ({
   cell,
   cellBottom,
   cellLeft,
   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 (
@@ -124,9 +120,9 @@ export const Cell: 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}
@@ -135,3 +131,5 @@ export const Cell: FunctionComponent<Props> = ({
     />
   );
 };
+
+export const Cell = memo(CellBase);

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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;