@scrabble-solver/scrabble-solver 2.13.12 → 2.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.12",
+  "version": "2.14.0",
   "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.20",
     "@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.7",
+    "@scrabble-solver/configs": "^2.14.0",
+    "@scrabble-solver/constants": "^2.14.0",
+    "@scrabble-solver/dictionaries": "^2.14.0",
+    "@scrabble-solver/logger": "^2.14.0",
+    "@scrabble-solver/solver": "^2.14.0",
+    "@scrabble-solver/types": "^2.14.0",
+    "@scrabble-solver/word-definitions": "^2.14.0",
     "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",
@@ -52,7 +52,7 @@
     "react-window": "^1.8.10",
     "redux-saga": "^1.3.0",
     "store2": "^2.14.3",
-    "use-debounce": "^10.0.1",
+    "use-debounce": "^10.0.2",
     "workbox-expiration": "^7.1.0",
     "workbox-precaching": "^7.1.0",
     "workbox-routing": "^7.1.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": "013ecd9af1dcd04b1426358221c8131cdafd7331"
 }

package/src/components/Alert/Alert.tsx

@@ -32,7 +32,7 @@ const Alert: FunctionComponent<Props> = ({ children, className, variant, ...prop
       {...props}
     >
       <div className={styles.iconContainer}>
-        <Icon className={styles.icon} />
+        <Icon aria-hidden="true" className={styles.icon} role="img" />
       </div>
 
       <div className={styles.content}>{children}</div>

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,
@@ -107,7 +108,7 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
             }}
           >
             <div className={styles.iconBackground} />
-            <Icon className={styles.icon} />
+            <Icon aria-hidden="true" className={styles.icon} role="img" />
           </div>
         );
       })}
@@ -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/Button/Button.tsx

@@ -34,7 +34,7 @@ const Button: FunctionComponent<Props> = ({
         {...props}
       >
         <span className={styles.content}>
-          {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
+          {Icon && <Icon aria-hidden="true" className={classNames(styles.icon, iconClassName)} role="img" />}
           {children && <span className={styles.label}>{children}</span>}
         </span>
       </button>

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/IconButton/IconButton.tsx

@@ -19,7 +19,7 @@ const IconButton: FunctionComponent<Props> = ({ className, Icon, tooltip, ...pro
     <Tooltip tooltip={tooltip}>
       <button className={classNames(styles.iconButton, className)} type="button" {...props}>
         <span className={styles.content}>
-          <Icon className={styles.icon} />
+          <Icon aria-hidden="true" className={styles.icon} role="img" />
         </span>
       </button>
     </Tooltip>

package/src/components/IconButton/Link.tsx

@@ -18,7 +18,7 @@ const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props })
     <Tooltip tooltip={tooltip}>
       <a className={classNames(styles.iconButton, className)} {...props}>
         <span className={styles.content}>
-          <Icon className={styles.icon} />
+          <Icon aria-hidden="true" className={styles.icon} role="img" />
         </span>
       </a>
     </Tooltip>

package/src/components/Keys/Arrows/Arrows.tsx

@@ -14,16 +14,16 @@ interface Props {
 const Arrows: FunctionComponent<Props> = ({ className }) => (
   <div className={classNames(styles.arrows, className)}>
     <Key className={classNames(styles.arrow, styles.left)}>
-      <ArrowLeft />
+      <ArrowLeft aria-hidden="true" role="img" />
     </Key>
     <Key className={classNames(styles.arrow, styles.up)}>
-      <ArrowUp />
+      <ArrowUp aria-hidden="true" role="img" />
     </Key>
     <Key className={classNames(styles.arrow, styles.right)}>
-      <ArrowRight />
+      <ArrowRight aria-hidden="true" role="img" />
     </Key>
     <Key className={classNames(styles.arrow, styles.down)}>
-      <ArrowDown />
+      <ArrowDown aria-hidden="true" role="img" />
     </Key>
   </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/NotFound/NotFound.tsx

@@ -11,7 +11,7 @@ const CONTENT = [['HTTP', '404']];
 const NotFound: FunctionComponent = () => (
   <div className={styles.notFound}>
     <a className={styles.link} href="/">
-      <DashCircleFill className={styles.icon} />
+      <DashCircleFill aria-hidden="true" className={styles.icon} role="img" />
       <PlainTiles className={styles.tiles} content={CONTENT} />
     </a>
   </div>

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/Radio/Radio.tsx

@@ -30,7 +30,7 @@ const Radio: FunctionComponent<Props> = ({ checked, children, className, disable
       onChange={onChange}
     />
 
-    <div className={styles.icon} />
+    <div aria-hidden="true" className={styles.icon} role="img" />
 
     <div className={styles.content}>{children}</div>
   </label>

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;