@scrabble-solver/scrabble-solver 2.10.7 → 2.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.7",
+  "version": "2.10.8",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,16 +31,17 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.10.7",
-    "@scrabble-solver/constants": "^2.10.7",
-    "@scrabble-solver/dictionaries": "^2.10.7",
-    "@scrabble-solver/logger": "^2.10.7",
-    "@scrabble-solver/solver": "^2.10.7",
-    "@scrabble-solver/types": "^2.10.7",
-    "@scrabble-solver/word-definitions": "^2.10.7",
+    "@scrabble-solver/configs": "^2.10.8",
+    "@scrabble-solver/constants": "^2.10.8",
+    "@scrabble-solver/dictionaries": "^2.10.8",
+    "@scrabble-solver/logger": "^2.10.8",
+    "@scrabble-solver/solver": "^2.10.8",
+    "@scrabble-solver/types": "^2.10.8",
+    "@scrabble-solver/word-definitions": "^2.10.8",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
+    "merge-refs": "^1.1.2",
     "next": "^13.1.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
@@ -76,5 +77,5 @@
     "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "4d40b64882d1b9866d70ebe6a239d7d018b0cd18"
+  "gitHead": "faa8a69c239fd14a2b07fe18744580e8713e93ea"
 }

package/src/components/Badge/Badge.module.scss

@@ -5,7 +5,7 @@
   padding: var(--spacing--xs) var(--spacing--m);
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: var(--color--background--overlay);
+  background-color: var(--color--background--element);
   line-height: var(--line-height);
   font-size: var(--font--size--m);
   font-weight: bold;

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

@@ -1,13 +1,11 @@
 @import 'styles/mixins';
 
-$icon-size: 16px;
-
 .cell {
   @include focus-effect;
 
   position: relative;
   display: table-cell;
-  background-color: white;
+  background-color: var(--color--white);
   border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
   background-clip: padding-box;
@@ -36,57 +34,57 @@ $icon-size: 16px;
 
   &.bonusStart {
     &::before {
-      background-color: var(--color--violet--light);
+      background-color: var(--color--bonus--start);
     }
   }
 
   &.bonusCharacter1 {
     &::before {
-      background-color: var(--color--yellow--light);
+      background-color: var(--color--bonus--character--1);
     }
   }
 
   &.bonusCharacter2 {
     &::before {
-      background-color: var(--color--green--light);
+      background-color: var(--color--bonus--character--2);
     }
   }
 
   &.bonusCharacter3 {
     &::before {
-      background-color: var(--color--blue--light);
+      background-color: var(--color--bonus--character--3);
     }
   }
 
   &.bonusCharacter5 {
     &::before {
-      background-color: var(--color--red--light);
+      background-color: var(--color--bonus--character--5);
     }
   }
 
   &.bonusCharacterMultiplier2 {
     &::before {
-      background-color: var(--color--light-blue--light);
+      background-color: var(--color--bonus--character-multiplier--2);
     }
   }
 
   &.bonusCharacterMultiplier3 {
     &::before {
-      background-color: var(--color--dark-blue--light);
+      background-color: var(--color--bonus--character-multiplier--3);
     }
   }
 
   &.bonusWord2 {
     &::before {
       content: 'x2';
-      background-color: var(--color--orange);
+      background-color: var(--color--bonus--word-multiplier--2);
     }
   }
 
   &.bonusWord3 {
     &::before {
       content: 'x3';
-      background-color: var(--color--pink);
+      background-color: var(--color--bonus--word-multiplier--3);
     }
   }
 
@@ -112,7 +110,7 @@ $icon-size: 16px;
     pointer-events: none;
     font-size: 60%;
     font-weight: bold;
-    color: white;
+    color: var(--color--white);
     content: ' ';
 
     [lang='fa-IR'] & {
@@ -121,7 +119,7 @@ $icon-size: 16px;
   }
 
   &:focus-within {
-    z-index: 1;
+    z-index: 2;
 
     .actions {
       display: flex;
@@ -135,9 +133,15 @@ $icon-size: 16px;
 }
 
 .actions {
+  --offset: var(--spacing--m);
+
+  @include media('<xs') {
+    --offset: var(--spacing--s);
+  }
+
   display: none;
   position: absolute;
-  top: -$icon-size;
+  bottom: calc(100% - var(--offset));
   z-index: 2;
   transition: var(--transition);
   pointer-events: none;
@@ -145,30 +149,17 @@ $icon-size: 16px;
   border-radius: var(--border--radius);
 
   [dir='ltr'] & {
-    left: calc(100% + var(--spacing--s) - #{$icon-size});
+    left: calc(100% - var(--offset));
   }
 
   [dir='rtl'] & {
-    right: calc(100% + var(--spacing--s) - #{$icon-size});
+    right: calc(100% - var(--offset));
   }
 }
 
 .action {
-  @include button-reset;
-
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing--s);
-  user-select: none;
-  pointer-events: none;
-  box-sizing: content-box;
-  background-color: white;
-  border: var(--border);
-  font-size: var(--font--size--m);
-  line-height: $icon-size;
-  color: var(--color--foreground--secondary);
-  transition: var(--transition);
-  cursor: pointer;
+  padding: var(--spacing--m);
+  box-shadow: none !important;
 
   & + & {
     [dir='ltr'] & {
@@ -182,35 +173,28 @@ $icon-size: 16px;
 
   [dir='ltr'] & {
     &:first-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
     &:last-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
   }
 
   [dir='rtl'] & {
     &:first-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
 
     &:last-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 
-  &,
-  .filterCell,
-  .toggleDirection {
-    width: $icon-size;
-    height: $icon-size;
-  }
-
   &:active,
   &:hover {
     color: var(--color--foreground);
@@ -229,22 +213,6 @@ $icon-size: 16px;
   }
 }
 
-.blank {
-  user-select: none;
-
-  &.active {
-    font-weight: bold;
-  }
-}
-
-.filterCell {
-  color: var(--color--inactive);
-
-  &.filtered {
-    color: var(--color--foreground--secondary);
-  }
-}
-
 .iconContainer {
   position: absolute;
   top: 0;
@@ -262,7 +230,7 @@ $icon-size: 16px;
 
 .flag,
 .star {
-  color: white;
+  color: var(--color--white);
 }
 
 .star {

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

@@ -10,12 +10,12 @@ import {
   RefObject,
 } from 'react';
 
-import { ArrowDown, Flag, Star } from 'icons';
+import { ArrowDown, Flag, FlagFill, Square, SquareFill, Star } from 'icons';
 import { Translate } from 'types';
 
+import Button from '../../../Button';
 import Tile from '../../../Tile';
 
-import Button from './Button';
 import styles from './Cell.module.scss';
 import { getBonusClassname } from './lib';
 
@@ -84,7 +84,7 @@ const CellPure: FunctionComponent<Props> = ({
 
     {isFiltered && (
       <div className={classNames(styles.iconContainer, styles.flagContainer)}>
-        <Flag className={styles.flag} />
+        <FlagFill className={styles.flag} />
       </div>
     )}
 
@@ -108,40 +108,33 @@ const CellPure: FunctionComponent<Props> = ({
       <div className={styles.actions}>
         <Button
           aria-label={translate('cell.toggle-direction')}
+          className={styles.action}
+          Icon={ArrowDown}
+          iconClassName={classNames(styles.toggleDirection, {
+            [styles.right]: direction === 'horizontal',
+          })}
           tooltip={translate('cell.toggle-direction')}
           onClick={onDirectionToggleClick}
-        >
-          <ArrowDown
-            className={classNames(styles.toggleDirection, {
-              [styles.right]: direction === 'horizontal',
-            })}
-          />
-        </Button>
+        />
 
         {isEmpty && (
           <Button
             aria-label={translate('cell.filter-cell')}
-            className={classNames(styles.filterCell, {
-              [styles.filtered]: isFiltered,
-            })}
+            className={classNames(styles.action)}
+            Icon={isFiltered ? Flag : FlagFill}
             tooltip={translate('cell.filter-cell')}
             onClick={onToggleFilterCellClick}
-          >
-            <Flag />
-          </Button>
+          />
         )}
 
         {!isEmpty && (
           <Button
             aria-label={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
-            className={classNames(styles.blank, {
-              [styles.active]: tile.isBlank,
-            })}
+            className={styles.action}
+            Icon={tile.isBlank ? SquareFill : Square}
             tooltip={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
             onClick={onToggleBlankClick}
-          >
-            B
-          </Button>
+          />
         )}
       </div>
     )}

package/src/components/Button/Button.module.scss

@@ -21,11 +21,11 @@
 
     &.primary {
       background-color: var(--color--primary);
-      color: white;
+      color: var(--color--primary--opposite);
     }
 
     &.default {
-      background-color: var(--color--background--overlay);
+      background-color: var(--color--background--element);
       color: var(--color--foreground);
 
       .icon {

package/src/components/Checkbox/Checkbox.tsx

@@ -10,23 +10,20 @@ interface Props {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
-  id: string;
   name: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
-const Checkbox: FunctionComponent<Props> = ({ checked, children, className, disabled, id, name, onChange }) => (
+const Checkbox: FunctionComponent<Props> = ({ checked, children, className, disabled, name, onChange }) => (
   <label
     className={classNames(styles.checkbox, className, {
       [styles.checked]: checked,
     })}
-    htmlFor={id}
   >
     <input
       checked={checked}
       className={styles.input}
       disabled={disabled}
-      id={id}
       name={name}
       type="checkbox"
       onChange={onChange}

package/src/components/Dictionary/Dictionary.tsx

@@ -27,6 +27,10 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
     >
       {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
 
+      {results.length === 0 && (
+        <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
+      )}
+
       {results.map(({ definitions, exists, isAllowed, word }) => (
         <div
           className={classNames(styles.result, {
@@ -35,40 +39,34 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
           })}
           key={word}
         >
-          {typeof word === 'undefined' && (
-            <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
-          )}
-
-          {typeof word !== 'undefined' && (
-            <div className={styles.content}>
-              {word && <h2 className={styles.word}>{word}</h2>}
+          <div className={styles.content}>
+            {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 && (
-                    <>
-                      {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
-                      {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
-                    </>
-                  )}
+            {isAllowed === true && (
+              <>
+                {definitions.length === 0 && (
+                  <>
+                    {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
+                    {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
+                  </>
+                )}
 
-                  {definitions.length > 0 && (
-                    <ul className={styles.definitions}>
-                      {definitions.map((result, index) => (
-                        <li key={index} className={styles.definition}>
-                          {result}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </>
-              )}
+                {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>}
-            </div>
-          )}
+            {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+          </div>
         </div>
       ))}
 

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,3 +1,4 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
@@ -28,8 +29,10 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
+        pattern={`.*[^\\s${COMMA_ARABIC}${COMMA_LATIN}].*`}
         placeholder={translate('dictionary.input.placeholder')}
         required
+        title={translate('dictionary.input.title')}
         type="text"
         value={input}
         onChange={handleChange}

package/src/components/Key/Key.module.scss

@@ -8,7 +8,7 @@ $icon-size: 15px;
   min-width: $key-size;
   height: $key-size;
   padding: var(--spacing--s) var(--spacing--m);
-  background-color: white;
+  background-color: var(--color--white);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);

package/src/components/LogoSplashScreen/LogoSplashScreen.module.scss

@@ -43,7 +43,7 @@ $hiding-duration: 200ms;
 
 .logoGrayscale {
   filter: grayscale(1);
-  opacity: 0.3;
+  opacity: var(--opacity--disabled);
 }
 
 .logoColor {

package/src/components/Modal/Modal.module.scss

@@ -60,12 +60,14 @@
 }
 
 .container {
+  --box-shadow--offset: 1px;
+  --box-shadow--offset--negative: calc(-1 * var(--box-shadow--offset));
+
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: var(--color--background);
-  transition: var(--transition);
-  transition-duration: var(--transition--duration--long);
+  transition: var(--transition--long);
   transform: translateX(var(--modal--width));
   opacity: 0;
 

package/src/components/Rack/Rack.module.scss

@@ -9,4 +9,8 @@
   @include focus-effect;
 
   --background-color: var(--color--background);
+
+  &:focus-within {
+    z-index: 1;
+  }
 }

package/src/components/Radio/Radio.tsx

@@ -8,24 +8,21 @@ interface Props {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
-  id: string;
   name: string;
   value: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
-const Radio: FunctionComponent<Props> = ({ checked, children, className, disabled, id, name, value, onChange }) => (
+const Radio: FunctionComponent<Props> = ({ checked, children, className, disabled, name, value, onChange }) => (
   <label
     className={classNames(styles.radio, className, {
       [styles.checked]: checked,
     })}
-    htmlFor={id}
   >
     <input
       checked={checked}
       className={styles.input}
       disabled={disabled}
-      id={id}
       name={name}
       type="radio"
       value={value}

package/src/components/Results/Results.module.scss

@@ -45,7 +45,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   &:focus,
   &:hover {
     background-color: var(--color--primary);
-    color: white;
+    color: var(--color--primary--opposite);
   }
 }
 
@@ -73,7 +73,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   &.highlighted {
     &:not(:disabled) {
       background-color: var(--color--primary);
-      color: white;
+      color: var(--color--primary--opposite);
     }
   }
 }

package/src/components/SeoMessage/SeoMessage.tsx

@@ -0,0 +1,19 @@
+import { CSSProperties, FunctionComponent } from 'react';
+
+const INVISIBLE_STYLE: CSSProperties = {
+  color: 'transparent',
+  pointerEvents: 'none',
+  position: 'absolute',
+  userSelect: 'none',
+  transform: 'translateY(-9999px)',
+};
+
+const SeoMessage: FunctionComponent = () => (
+  <p style={INVISIBLE_STYLE}>
+    Scrabble Solver 2 is a free and open-source analysis tool for Scrabble and Literaki. Quickly find top scoring words
+    using given letters and board state. Available in English, French, German, Polish & Spanish. Source code is
+    available on GitHub - contributions are welcome!
+  </p>
+);
+
+export default SeoMessage;

package/src/components/SeoMessage/index.ts

@@ -0,0 +1 @@
+export { default } from './SeoMessage';

package/src/components/Solver/components/EmptyState/EmptyState.module.scss

@@ -4,7 +4,7 @@
   width: 100%;
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: white;
+  background-color: var(--color--white);
   text-align: center;
 }
 

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss

@@ -2,7 +2,6 @@
 
 .resultCandidatePicker {
   display: flex;
-  align-items: center;
   gap: var(--spacing--l);
 
   @include media('<xs') {
@@ -14,6 +13,14 @@
   flex: 0 0 auto;
   display: flex;
   border-radius: var(--border--radius);
+
+  &.bothEnabled {
+    box-shadow: var(--box-shadow);
+
+    .button {
+      box-shadow: none;
+    }
+  }
 }
 
 .button {
@@ -50,7 +57,7 @@
   width: 100%;
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: white;
+  background-color: var(--color--white);
   box-shadow: var(--box-shadow);
   cursor: pointer;
 

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -34,6 +34,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const disabled = isOutdated || !resultCandidate;
   const isPreviousDisabled = index <= 0 || disabled;
   const isNextDisabled = index >= results.length - 1 || disabled;
+  const bothEnabled = !isPreviousDisabled && !isNextDisabled;
 
   const handleNextClick = () => {
     if (!isNextDisabled) {
@@ -51,7 +52,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
 
   return (
     <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
-      <div className={styles.buttons}>
+      <div className={classNames(styles.buttons, { [styles.bothEnabled]: bothEnabled })}>
         <Button
           aria-label={translate('common.previous')}
           className={styles.button}