@scrabble-solver/scrabble-solver 2.10.4 → 2.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.4",
+  "version": "2.10.6",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,14 +30,14 @@
   "dependencies": {
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
-    "@reduxjs/toolkit": "^1.9.2",
-    "@scrabble-solver/configs": "^2.10.4",
-    "@scrabble-solver/constants": "^2.10.4",
-    "@scrabble-solver/dictionaries": "^2.10.4",
-    "@scrabble-solver/logger": "^2.10.4",
-    "@scrabble-solver/solver": "^2.10.4",
-    "@scrabble-solver/types": "^2.10.4",
-    "@scrabble-solver/word-definitions": "^2.10.4",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@scrabble-solver/configs": "^2.10.6",
+    "@scrabble-solver/constants": "^2.10.6",
+    "@scrabble-solver/dictionaries": "^2.10.6",
+    "@scrabble-solver/logger": "^2.10.6",
+    "@scrabble-solver/solver": "^2.10.6",
+    "@scrabble-solver/types": "^2.10.6",
+    "@scrabble-solver/word-definitions": "^2.10.6",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -63,18 +63,18 @@
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",
     "@types/classnames": "^2.3.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.13.1",
     "@types/react-portal": "^4.0.4",
     "@types/react-redux": "^7.1.25",
     "@types/react-window": "^1.8.5",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "@types/uuid": "^9.0.0",
+    "@types/uuid": "^9.0.1",
     "env-cmd": "^10.1.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "7cce9fa637f3c346b1772d0a2b401d3e271b8e67"
+  "gitHead": "188bb77933a4e88af88b05063a4977c50c788071"
 }

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

@@ -35,69 +35,69 @@ $icon-size: 16px;
   }
 
   &.bonusStart {
-    &:before {
+    &::before {
       background-color: var(--color--violet--light);
     }
   }
 
   &.bonusCharacter1 {
-    &:before {
+    &::before {
       background-color: var(--color--yellow--light);
     }
   }
 
   &.bonusCharacter2 {
-    &:before {
+    &::before {
       background-color: var(--color--green--light);
     }
   }
 
   &.bonusCharacter3 {
-    &:before {
+    &::before {
       background-color: var(--color--blue--light);
     }
   }
 
   &.bonusCharacter5 {
-    &:before {
+    &::before {
       background-color: var(--color--red--light);
     }
   }
 
   &.bonusCharacterMultiplier2 {
-    &:before {
+    &::before {
       background-color: var(--color--light-blue--light);
     }
   }
 
   &.bonusCharacterMultiplier3 {
-    &:before {
+    &::before {
       background-color: var(--color--dark-blue--light);
     }
   }
 
   &.bonusWord2 {
-    &:before {
+    &::before {
       content: 'x2';
       background-color: var(--color--orange);
     }
   }
 
   &.bonusWord3 {
-    &:before {
+    &::before {
       content: 'x3';
       background-color: var(--color--pink);
     }
   }
 
   &.candidate {
-    &:before {
+    &::before {
       content: ' ';
       background-color: var(--color--primary);
     }
   }
 
-  &:before {
+  &::before {
     $size: 80%;
 
     display: flex;

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

@@ -8,8 +8,7 @@
   padding: var(--spacing--m) var(--spacing--l);
   border: var(--border);
   border-radius: var(--border--radius);
-  box-shadow: none;
-  color: var(--color--inactive);
+  text-transform: uppercase;
   transition: var(--transition);
   cursor: pointer;
 
@@ -17,10 +16,31 @@
   &:active,
   &:focus,
   &:hover {
-    text-decoration: none;
-    background-color: var(--color--primary);
     box-shadow: var(--box-shadow);
-    color: white;
+    text-decoration: none;
+
+    &.primary {
+      background-color: var(--color--primary);
+      color: white;
+    }
+
+    &.default {
+      background-color: var(--color--background--overlay);
+      color: var(--color--foreground);
+
+      .icon {
+        color: var(--color--inactive);
+      }
+    }
+  }
+
+  &:focus,
+  &:hover {
+    &.default:not(:disabled) {
+      .icon {
+        color: var(--color--foreground--secondary);
+      }
+    }
   }
 
   &:active {
@@ -33,24 +53,23 @@
   }
 
   &[disabled] {
-    opacity: var(--opacity--disabled);
-    box-shadow: none;
-    cursor: not-allowed;
+    @include disabled;
   }
 }
 
 .content {
   display: flex;
   align-items: center;
-  gap: var(--spacing--m);
+  gap: 20px;
 }
 
 .icon {
   width: var(--button--icon--size);
   height: var(--button--icon--size);
+  transition: var(--transition);
 }
 
 .label {
   font-size: var(--font--size--h3);
-  text-transform: uppercase;
+  transition: var(--transition);
 }

package/src/components/Button/Button.tsx

@@ -1,22 +1,39 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactNode, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, ReactNode, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
 import styles from './Button.module.scss';
+import Link from './Link';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
   iconClassName?: string;
   tooltip?: ReactNode;
-  onClick: MouseEventHandler<HTMLButtonElement>;
+  variant?: 'default' | 'primary';
 }
 
-const Button: FunctionComponent<Props> = ({ children, className, Icon, iconClassName, tooltip, ...props }) => {
+const Button: FunctionComponent<Props> = ({
+  children,
+  className,
+  Icon,
+  iconClassName,
+  tooltip,
+  variant = 'default',
+  ...props
+}) => {
   const triggerProps = useTooltip(tooltip, props);
 
   return (
-    <button className={classNames(styles.button, className)} type="button" {...props} {...triggerProps}>
+    <button
+      className={classNames(styles.button, className, {
+        [styles.default]: variant === 'default',
+        [styles.primary]: variant === 'primary',
+      })}
+      type="button"
+      {...props}
+      {...triggerProps}
+    >
       <span className={styles.content}>
         {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
         {children && <span className={styles.label}>{children}</span>}
@@ -25,4 +42,6 @@ const Button: FunctionComponent<Props> = ({ children, className, Icon, iconClass
   );
 };
 
-export default Button;
+export default Object.assign(Button, {
+  Link,
+});

package/src/components/Button/Link.tsx

@@ -0,0 +1,44 @@
+import classNames from 'classnames';
+import { AnchorHTMLAttributes, FunctionComponent, ReactNode, SVGAttributes } from 'react';
+
+import { useTooltip } from '../Tooltip';
+
+import styles from './Button.module.scss';
+
+interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
+  iconClassName?: string;
+  tooltip?: ReactNode;
+  variant?: 'default' | 'primary';
+}
+
+const Link: FunctionComponent<Props> = ({
+  children,
+  className,
+  Icon,
+  iconClassName,
+  tooltip,
+  variant = 'default',
+  ...props
+}) => {
+  const triggerProps = useTooltip(tooltip, props);
+
+  return (
+    <a
+      className={classNames(styles.button, className, {
+        [styles.default]: variant === 'default',
+        [styles.primary]: variant === 'primary',
+      })}
+      {...props}
+      {...triggerProps}
+    >
+      <span className={styles.content}>
+        {Icon && <Icon className={classNames(styles.icon, iconClassName)} />}
+        {children && <span className={styles.label}>{children}</span>}
+      </span>
+    </a>
+  );
+};
+
+export default Link;

package/src/components/Radio/Radio.module.scss

@@ -24,7 +24,7 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
 
   &.checked {
     .icon {
-      &:after {
+      &::after {
         background-color: var(--color--primary);
       }
     }
@@ -51,7 +51,7 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   box-shadow: var(--box-shadow--null);
   pointer-events: none;
 
-  &:after {
+  &::after {
     content: ' ';
     position: absolute;
     top: $radio-inner-border;

package/src/components/Results/SolveButton.tsx

@@ -35,6 +35,7 @@ const SolveButton: FunctionComponent<Props> = ({ className }) => {
       disabled={isLoading || !isOutdated || !hasTiles}
       Icon={Search}
       type="submit"
+      variant="primary"
       onClick={handleClick}
     >
       {translate('results.solve')}

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

@@ -47,6 +47,10 @@
   margin: 0 auto;
 }
 
+.submitInput {
+  display: none;
+}
+
 .column {
   display: flex;
   flex-direction: column;
@@ -58,6 +62,11 @@
   }
 }
 
+.resultsContainer {
+  flex: 1;
+  position: relative;
+}
+
 .dictionary {
   display: flex;
   flex-direction: column;
@@ -72,11 +81,6 @@
   flex: 0 0 auto;
 }
 
-.resultsContainer {
-  flex: 1;
-  position: relative;
-}
-
 .bottomContainer {
   flex: 0 0 auto;
   display: flex;
@@ -101,24 +105,8 @@
   border: var(--border);
 }
 
-.submitInput {
-  display: none;
-}
-
 .controls {
   width: 100%;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--spacing--l);
-}
-
-.resultCandidatePicker {
-  flex: 1;
-}
-
-.apply {
-  flex: 0 0 auto;
 }
 
 .solve {

package/src/components/Solver/Solver.tsx

@@ -1,6 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FormEvent, FunctionComponent, useEffect, useMemo } from 'react';
+import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useMeasure } from 'react-use';
 
@@ -17,14 +17,10 @@ import {
 } from 'parameters';
 import {
   resultsSlice,
-  selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
-  selectSolveError,
   selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
-  useTranslate,
   useTypedSelector,
 } from 'state';
 
@@ -32,11 +28,10 @@ import Board from '../Board';
 import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
-import ResultCandidatePicker from '../ResultCandidatePicker';
 import Results from '../Results';
 import Well from '../Well';
 
-import { ApplyButton, EmptyState, SolveButton } from './components';
+import { MobileControls, SolveButton } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -49,20 +44,21 @@ interface Props {
 // eslint-disable-next-line max-statements
 const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
   const dispatch = useDispatch();
-  const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
   const [resultsContainerRef, { width: resultsContainerWidth }] = useMeasure<HTMLDivElement>();
   const isLessThanXl = useMediaQuery('<xl');
   const isLessThanL = useMediaQuery('<l');
+  const isLessThanM = useMediaQuery('<m');
   const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
   const maxBoardWidth = width - resultsContainerWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
-  const maxBoardHeight = Math.max(height - bottomContainerHeight, isLessThanL ? 0 : COLUMN_MIN_HEIGHT);
+  const maxBoardHeight = Math.max(
+    height - bottomContainerHeight,
+    isLessThanL ? 0 : COLUMN_MIN_HEIGHT,
+    isLessThanM ? Number.POSITIVE_INFINITY : 0,
+  );
   const config = useTypedSelector(selectConfig);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const allResults = useTypedSelector(selectSortedResults);
-  const error = useTypedSelector(selectSolveError);
   const results = useTypedSelector(selectSortedFilteredResults);
   const [bestResult] = results || [];
   const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
@@ -109,9 +105,13 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   );
   const callbacks = isTouchDevice ? touchCallbacks : mouseCallbacks;
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: SyntheticEvent) => {
     event.preventDefault();
-    onShowResults();
+
+    if (isLessThanL) {
+      onShowResults();
+    }
+
     dispatch(solveSlice.actions.submit());
   };
 
@@ -155,52 +155,16 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
           </form>
 
           {isLessThanL && (
-            <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
-              {typeof error !== 'undefined' && (
-                <EmptyState variant="error" onClick={onShowResults}>
-                  {error.message}
-                </EmptyState>
-              )}
-
-              {typeof error === 'undefined' && typeof results === 'undefined' && (
-                <EmptyState variant="info" onClick={onShowResults}>
-                  {translate('results.empty-state.uninitialized')}
-                </EmptyState>
-              )}
-
-              {typeof error === 'undefined' && typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
-                <>
-                  {isOutdated && (
-                    <EmptyState variant="info" onClick={onShowResults}>
-                      {translate('results.empty-state.outdated')}
-                    </EmptyState>
-                  )}
-
-                  {!isOutdated && (
-                    <>
-                      {allResults.length === 0 && (
-                        <EmptyState variant="warning" onClick={onShowResults}>
-                          {translate('results.empty-state.no-results')}
-                        </EmptyState>
-                      )}
-
-                      {allResults.length > 0 && resultCandidate && (
-                        <ResultCandidatePicker className={styles.resultCandidatePicker} onClick={onShowResults} />
-                      )}
-                    </>
-                  )}
-                </>
-              )}
-
-              {allResults && allResults.length > 0 && !isOutdated && (
-                <ApplyButton className={classNames(styles.submit, styles.apply)} />
-              )}
-            </div>
+            <MobileControls
+              className={styles.controls}
+              style={{ maxWidth: maxControlsWidth }}
+              onShowResults={onShowResults}
+            />
           )}
         </div>
       </div>
 
-      {isTouchDevice && <SolveButton className={styles.solve} onClick={onShowResults} />}
+      {isTouchDevice && <SolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

package/src/components/Solver/components/ApplyButton/ApplyButton.tsx

@@ -29,6 +29,7 @@ const ApplyButton: FunctionComponent<Props> = ({ className }) => {
       Icon={Check}
       iconClassName={styles.icon}
       type="submit"
+      variant="primary"
       onClick={handleClick}
     />
   );

package/src/components/Solver/components/MobileControls/MobileControls.tsx

@@ -0,0 +1,62 @@
+import { FunctionComponent, HTMLProps } from 'react';
+
+import {
+  selectAreResultsOutdated,
+  selectResultCandidate,
+  selectSolveError,
+  selectSortedResults,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
+
+import EmptyState from '../EmptyState';
+import ResultCandidatePicker from '../ResultCandidatePicker';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  onShowResults: () => void;
+}
+
+// eslint-disable-next-line max-statements
+const MobileControls: FunctionComponent<Props> = ({ onShowResults, ...props }) => {
+  const translate = useTranslate();
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const allResults = useTypedSelector(selectSortedResults);
+  const error = useTypedSelector(selectSolveError);
+
+  return (
+    <div {...props}>
+      {typeof error !== 'undefined' && (
+        <EmptyState variant="error" onClick={onShowResults}>
+          {error.message}
+        </EmptyState>
+      )}
+
+      {typeof error === 'undefined' && typeof allResults === 'undefined' && (
+        <EmptyState variant="info" onClick={onShowResults}>
+          {translate('results.empty-state.uninitialized')}
+        </EmptyState>
+      )}
+
+      {typeof error === 'undefined' && typeof allResults !== 'undefined' && (
+        <>
+          {(isOutdated || !resultCandidate) && (
+            <EmptyState variant="info" onClick={onShowResults}>
+              {translate('results.empty-state.outdated')}
+            </EmptyState>
+          )}
+
+          {!isOutdated && allResults.length === 0 && (
+            <EmptyState variant="warning" onClick={onShowResults}>
+              {translate('results.empty-state.no-results')}
+            </EmptyState>
+          )}
+
+          {!isOutdated && allResults.length > 0 && resultCandidate && <ResultCandidatePicker onClick={onShowResults} />}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MobileControls;

package/src/components/Solver/components/MobileControls/index.ts

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

package/src/components/{ResultCandidatePicker → Solver/components/ResultCandidatePicker}/ResultCandidatePicker.module.scss

@@ -1,9 +1,51 @@
 @import 'styles/mixins';
 
 .resultCandidatePicker {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing--l);
+}
+
+.buttons {
+  flex: 0 0 auto;
+  display: flex;
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
+
+  @include media('<xs') {
+    display: none;
+  }
+}
+
+.button {
+  padding: var(--spacing--m);
+  box-shadow: none;
+
+  &:focus-within {
+    z-index: 1;
+  }
+
+  &:first-child {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    transform: rotate(180deg);
+  }
+}
+
+.resultCandidate {
   @include button-reset;
   @include focus-effect;
 
+  flex: 1;
   display: flex;
   align-items: center;
   min-width: 0;
@@ -15,9 +57,7 @@
   cursor: pointer;
 
   &[disabled] {
-    opacity: var(--opacity--disabled);
-    box-shadow: none;
-    cursor: not-allowed;
+    @include disabled;
   }
 }
 
@@ -74,3 +114,7 @@
   height: $size;
   color: var(--color--inactive);
 }
+
+.apply {
+  flex: 0 0 auto;
+}