@scrabble-solver/scrabble-solver 2.13.12 → 2.13.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.12",
+  "version": "2.13.13",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -27,21 +27,21 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.17",
+    "@floating-ui/react": "^0.26.19",
     "@kamilmielnik/trie": "^3.0.0",
-    "@reduxjs/toolkit": "^2.2.5",
-    "@scrabble-solver/configs": "^2.13.12",
-    "@scrabble-solver/constants": "^2.13.12",
-    "@scrabble-solver/dictionaries": "^2.13.12",
-    "@scrabble-solver/logger": "^2.13.12",
-    "@scrabble-solver/solver": "^2.13.12",
-    "@scrabble-solver/types": "^2.13.12",
-    "@scrabble-solver/word-definitions": "^2.13.12",
+    "@reduxjs/toolkit": "^2.2.6",
+    "@scrabble-solver/configs": "^2.13.13",
+    "@scrabble-solver/constants": "^2.13.13",
+    "@scrabble-solver/dictionaries": "^2.13.13",
+    "@scrabble-solver/logger": "^2.13.13",
+    "@scrabble-solver/solver": "^2.13.13",
+    "@scrabble-solver/types": "^2.13.13",
+    "@scrabble-solver/word-definitions": "^2.13.13",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^14.2.4",
+    "next": "^14.2.5",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
     "react-cool-onclickoutside": "^1.7.0",
@@ -71,7 +71,7 @@
     "@types/react-window": "^1.8.8",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "sass": "^1.77.5"
+    "sass": "^1.77.8"
   },
-  "gitHead": "092d0fb2988a32cfd29384d6d075e106e0042b11"
+  "gitHead": "8cfc206dec35314cd879a3ce8f9b0c60c3fd231a"
 }

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

@@ -5,6 +5,7 @@
   display: grid;
   gap: var(--border--width);
   box-shadow: var(--box-shadow);
+  background-color: white;
   border: var(--border);
   border-radius: var(--border--radius);
 }
@@ -64,16 +65,9 @@
   color: var(--color--white);
 }
 
-.coordinateColumn {
+.coordinate {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--font--size--h2);
-}
-
-.coordinateRow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font--size--h2);
 }

package/src/components/Board/Board.tsx

@@ -176,8 +176,8 @@ const Board: FunctionComponent<Props> = ({ className }) => {
           ref={floatingFocus.refs.setFloating}
           style={{
             position: floatingFocus.strategy,
-            top: (floatingFocus.y ? floatingFocus.y + cellSize : 0) - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
-            left: (floatingFocus.x ?? 0) - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
+            top: floatingFocus.y + cellSize - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
+            left: floatingFocus.x - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
             width: cellSize,
             height: cellSize,
             opacity: hasFocus ? 1 : 0,

package/src/components/Board/BoardPure.tsx

@@ -61,6 +61,7 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
   ) => (
     <div
       className={classNames(styles.board, className)}
+      data-testid="board"
       ref={ref}
       style={style}
       onBlur={onBlur}
@@ -73,7 +74,7 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
 
           {rows[0].map((_column, index) => (
             <div
-              className={styles.coordinateColumn}
+              className={styles.coordinate}
               key={index}
               style={{
                 width: cellSize,
@@ -116,7 +117,7 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
         <Fragment key={y}>
           {showCoordinates !== 'hidden' && (
             <div
-              className={styles.coordinateRow}
+              className={styles.coordinate}
               style={{
                 width: coordinatesSize,
                 height: cellSize,

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

@@ -23,6 +23,8 @@ const ToggleDirectionButton: FunctionComponent<Props> = ({ className, direction,
     <Button
       aria-label={translate('cell.toggle-direction')}
       className={classNames(styles.button, className)}
+      data-direction={direction}
+      data-testid="toggle-direction-button"
       Icon={ArrowDown}
       iconClassName={classNames(styles.icon, {
         [styles.right]: direction === 'horizontal',

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

@@ -8,7 +8,7 @@ import { Provider } from 'react-redux';
 import { useAppLayout, useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { Star } from 'icons';
-import { dataUrlToBlob, getTileSizes } from 'lib';
+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 { Point } from 'types';
@@ -211,11 +211,7 @@ const useBackgroundImage = () => {
 
   const encodedSvg = useMemo(() => globalThis.btoa(backgroundSvg), [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;
+  return dataUrl;
 };
 
 export default useBackgroundImage;

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

@@ -2,6 +2,7 @@ import { CSSProperties, useMemo } from 'react';
 
 import { useAppLayout } from 'hooks';
 import { getTileSizes } from 'lib';
+import { BORDER_WIDTH } from 'parameters';
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
 
 import useBackgroundImage from './useBackgroundImage';
@@ -10,16 +11,21 @@ const useBoardStyle = () => {
   const config = useTypedSelector(selectConfig);
   const { cellSize } = useAppLayout();
   const { tileFontSize } = getTileSizes(cellSize);
-  const backgroundImage = useBackgroundImage();
   const showCoordinates = useTypedSelector(selectShowCoordinates);
+  const backgroundImage = useBackgroundImage();
+  const coordinatesSize = 0.5 * cellSize - BORDER_WIDTH;
   const boardStyle = useMemo<CSSProperties>(
     () => ({
-      backgroundImage,
+      backgroundImage: `url(${backgroundImage})`,
       fontSize: tileFontSize,
       gridTemplateColumns:
-        showCoordinates === 'hidden' ? `repeat(${config.boardSize}, 1fr)` : `0.5fr repeat(${config.boardSize}, 1fr)`,
+        showCoordinates === 'hidden'
+          ? `repeat(${config.boardSize}, 1fr)`
+          : `${coordinatesSize}px repeat(${config.boardSize}, 1fr)`,
       gridTemplateRows:
-        showCoordinates === 'hidden' ? `repeat(${config.boardSize}, 1fr)` : `0.5fr repeat(${config.boardSize}, 1fr)`,
+        showCoordinates === 'hidden'
+          ? `repeat(${config.boardSize}, 1fr)`
+          : `${coordinatesSize}px repeat(${config.boardSize}, 1fr)`,
     }),
     [backgroundImage, config.boardSize, tileFontSize],
   );

package/src/components/Dictionary/Dictionary.module.scss

@@ -1,14 +1,10 @@
 @import 'styles/mixins';
 
 .dictionary {
-  @include scrollbars;
-
   position: relative;
-  max-height: var(--dictionary--height);
-  height: var(--dictionary--height);
-  overflow-y: auto;
-  word-break: break-word;
   transition: var(--transition);
+  word-break: break-word;
+  overflow: hidden;
 
   &.isAllowed {
     background-color: var(--color--green--light);
@@ -19,6 +15,13 @@
   }
 }
 
+.content {
+  @include scrollbars;
+
+  height: 100%;
+  overflow-y: auto;
+}
+
 .result {
   transition: var(--transition);
 
@@ -43,7 +46,7 @@
   }
 }
 
-.content {
+.resultContent {
   padding: var(--spacing--l);
 }
 

package/src/components/Dictionary/Dictionary.tsx

@@ -25,49 +25,51 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         [styles.isNotAllowed]: isLastAllowed === false,
       })}
     >
-      {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
+      <div className={styles.content}>
+        {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 
-      {typeof error === 'undefined' && !isLoading && results.length === 0 && (
-        <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
-      )}
+        {typeof error === 'undefined' && !isLoading && results.length === 0 && (
+          <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
+        )}
 
-      {results.map(({ definitions, exists, isAllowed, word }) => (
-        <div
-          className={classNames(styles.result, {
-            [styles.isAllowed]: isAllowed === true,
-            [styles.isNotAllowed]: isAllowed === false,
-          })}
-          key={word}
-        >
-          <div className={styles.content}>
-            {word && <h2 className={styles.word}>{word}</h2>}
+        {results.map(({ definitions, exists, isAllowed, word }) => (
+          <div
+            className={classNames(styles.result, {
+              [styles.isAllowed]: isAllowed === true,
+              [styles.isNotAllowed]: isAllowed === false,
+            })}
+            key={word}
+          >
+            <div className={styles.resultContent}>
+              {word && <h2 className={styles.word}>{word}</h2>}
 
-            {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
+              {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
 
-            {isAllowed === true && definitions.length === 0 && (
-              <>
-                <div>
-                  {exists
-                    ? translate('dictionary.empty-state.no-definitions')
-                    : translate('dictionary.empty-state.no-results')}
-                </div>
-              </>
-            )}
+              {isAllowed === true && definitions.length === 0 && (
+                <>
+                  <div>
+                    {exists
+                      ? translate('dictionary.empty-state.no-definitions')
+                      : translate('dictionary.empty-state.no-results')}
+                  </div>
+                </>
+              )}
 
-            {isAllowed === true && definitions.length > 0 && (
-              <ul className={styles.definitions}>
-                {definitions.map((result, index) => (
-                  <li key={index} className={styles.definition}>
-                    {result}
-                  </li>
-                ))}
-              </ul>
-            )}
+              {isAllowed === true && definitions.length > 0 && (
+                <ul className={styles.definitions}>
+                  {definitions.map((result, index) => (
+                    <li key={index} className={styles.definition}>
+                      {result}
+                    </li>
+                  ))}
+                </ul>
+              )}
 
-            {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+              {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
 
       {isLoading && <Loading />}
     </div>

package/src/components/Loading/Loading.module.scss

@@ -2,6 +2,7 @@
 .dim {
   position: absolute;
   inset: 0;
+  border-radius: inherit;
 }
 
 .loading {

package/src/components/Loading/Loading.tsx

@@ -29,7 +29,7 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const content = useMemo(() => prepareContent(message), [message]);
 
   return (
-    <div aria-label={translation} className={classNames(styles.loading, className)} role="status">
+    <div aria-label={translation} className={classNames(styles.loading, className)} data-testid="loading" role="status">
       <div className={styles.dim} />
       <div className={styles.text}>
         <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />

package/src/components/Modal/components/Section/Section.tsx

@@ -6,11 +6,12 @@ import styles from './Section.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
+  label: string;
   title: ReactNode;
 }
 
-const Section: FunctionComponent<Props> = ({ children, className, title }) => (
-  <section className={classNames(styles.section, className)}>
+const Section: FunctionComponent<Props> = ({ children, className, label, title }) => (
+  <section aria-label={label} className={classNames(styles.section, className)}>
     <h2 className={styles.heading}>{title}</h2>
     <div>{children}</div>
   </section>

package/src/components/NavButtons/NavButtons.tsx

@@ -125,6 +125,7 @@ const NavButtons: FunctionComponent<Props> = ({
 
         <IconButton
           aria-label={translate('settings')}
+          data-testid="settings-button"
           className={styles.button}
           Icon={Cog}
           tooltip={translate('settings')}

package/src/components/Rack/Rack.tsx

@@ -168,6 +168,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         className={classNames(styles.rack, className, {
           [styles.hidden]: showInputPrompt,
         })}
+        data-testid="rack"
         ref={ref}
         style={{ fontSize: tileFontSize }}
         onPaste={handlePaste}

package/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { CSSProperties, FunctionComponent, ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { TranslationKey } from 'types';
@@ -11,19 +11,23 @@ import styles from './Results.module.scss';
 interface Props {
   children?: ReactNode;
   className?: string;
+  dataTestId?: string;
+  style?: CSSProperties;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-const Cell: FunctionComponent<Props> = ({ children, className, translationKey, tooltip, value }) => {
+const Cell: FunctionComponent<Props> = ({ children, className, dataTestId, style, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
 
   return (
     <Tooltip tooltip={`${translate(translationKey)}: ${tooltip || formattedValue}`}>
-      <div className={classNames(styles.cell, className)}>{children || formattedValue}</div>
+      <div className={classNames(styles.cell, className)} data-testid={dataTestId} style={style}>
+        {children || formattedValue}
+      </div>
     </Tooltip>
   );
 };

package/src/components/Results/Header.tsx

@@ -0,0 +1,99 @@
+import { FunctionComponent } from 'react';
+
+import { useAppLayout, useColumns } from 'hooks';
+import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from 'icons';
+import { RESULTS_COLUMN_WIDTH } from 'parameters';
+import { ResultColumnId } from 'types';
+
+import HeaderButton from './HeaderButton';
+import styles from './Results.module.scss';
+
+const Results: FunctionComponent = () => {
+  const { resultWordWidth } = useAppLayout();
+  const columns = useColumns();
+
+  return (
+    <div className={styles.header}>
+      {columns[ResultColumnId.Coordinates] && (
+        <HeaderButton
+          className={styles.coordinates}
+          Icon={GeoAlt}
+          id={ResultColumnId.Coordinates}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Coordinates] }}
+          translationKey="settings.showCoordinates"
+        />
+      )}
+
+      {columns[ResultColumnId.Word] && (
+        <HeaderButton
+          className={styles.word}
+          id={ResultColumnId.Word}
+          style={{ flexBasis: resultWordWidth }}
+          translationKey="common.word"
+        />
+      )}
+
+      {columns[ResultColumnId.TilesCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Squares}
+          id={ResultColumnId.TilesCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.TilesCount] }}
+          translationKey="common.tiles"
+        />
+      )}
+
+      {columns[ResultColumnId.VowelsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={SquareA}
+          id={ResultColumnId.VowelsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.VowelsCount] }}
+          translationKey="common.vowels"
+        />
+      )}
+
+      {columns[ResultColumnId.ConsonantsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={SquareB}
+          id={ResultColumnId.ConsonantsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.ConsonantsCount] }}
+          translationKey="common.consonants"
+        />
+      )}
+
+      {columns[ResultColumnId.BlanksCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Square}
+          id={ResultColumnId.BlanksCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.BlanksCount] }}
+          translationKey="common.blanks"
+        />
+      )}
+
+      {columns[ResultColumnId.WordsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Words}
+          id={ResultColumnId.WordsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.WordsCount] }}
+          translationKey="common.words"
+        />
+      )}
+
+      {columns[ResultColumnId.Points] && (
+        <HeaderButton
+          className={styles.points}
+          Icon={OneTwoThree}
+          id={ResultColumnId.Points}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Points] }}
+          translationKey="common.points"
+        />
+      )}
+    </div>
+  );
+};
+
+export default Results;

package/src/components/Results/HeaderButton.tsx

@@ -1,42 +1,47 @@
 import classNames from 'classnames';
-import { ReactElement, useCallback } from 'react';
+import { CSSProperties, FunctionComponent, ReactElement, SVGAttributes, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
-import { SortDirection } from 'types';
+import { ResultColumnId, SortDirection, TranslationKey } from 'types';
 
 import { Tooltip } from '../Tooltip';
 
 import styles from './Results.module.scss';
-import { Column } from './types';
 
 interface Props {
-  column: Column;
+  className: string;
+  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
+  id: ResultColumnId;
+  translationKey: TranslationKey;
+  style?: CSSProperties;
 }
 
-const HeaderButton = ({ column }: Props): ReactElement => {
+const HeaderButton = ({ className, Icon, id, translationKey, style }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
 
   const handleClick = useCallback(() => {
-    dispatch(resultsSlice.actions.sort(column.id));
-  }, [column.id, dispatch]);
+    dispatch(resultsSlice.actions.sort(id));
+  }, [dispatch, id]);
 
   return (
-    <Tooltip tooltip={translate(column.translationKey)}>
+    <Tooltip tooltip={translate(translationKey)}>
       <button
-        aria-label={translate(column.translationKey)}
-        className={classNames(styles.headerButton, column.className)}
-        key={column.id}
+        aria-label={translate(translationKey)}
+        className={classNames(styles.headerButton, className)}
+        style={style}
         type="button"
         onClick={handleClick}
       >
         <span className={styles.cell}>
-          <span className={styles.headerButtonLabel}>{translate(column.translationKey)}</span>
+          {Icon && <Icon className={styles.headerButtonIcon} />}
 
-          {sort.column === column.id && (
+          {!Icon && <span className={styles.headerButtonLabel}>{translate(translationKey)}</span>}
+
+          {sort.column === id && (
             <>
               {sort.direction === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
               {sort.direction === SortDirection.Descending && <SortDown className={styles.sortIcon} />}