@scrabble-solver/scrabble-solver 2.10.4 → 2.10.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.4",
+  "version": "2.10.5",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@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",
+    "@scrabble-solver/configs": "^2.10.5",
+    "@scrabble-solver/constants": "^2.10.5",
+    "@scrabble-solver/dictionaries": "^2.10.5",
+    "@scrabble-solver/logger": "^2.10.5",
+    "@scrabble-solver/solver": "^2.10.5",
+    "@scrabble-solver/types": "^2.10.5",
+    "@scrabble-solver/word-definitions": "^2.10.5",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -76,5 +76,5 @@
     "sass": "^1.57.1",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "7cce9fa637f3c346b1772d0a2b401d3e271b8e67"
+  "gitHead": "c998db150c41bf76febd1c9a2650950cd0b449c4"
 }

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,8 @@
   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 +17,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 {
+      .icon {
+        color: var(--color--foreground--secondary);
+      }
+    }
   }
 
   &:active {
@@ -42,15 +63,16 @@
 .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.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';
 
@@ -109,9 +109,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());
   };
 
@@ -170,29 +174,25 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
               {typeof error === 'undefined' && typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
                 <>
-                  {isOutdated && (
+                  {(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>
-                      )}
-
-                      {allResults.length > 0 && resultCandidate && (
-                        <ResultCandidatePicker className={styles.resultCandidatePicker} onClick={onShowResults} />
-                      )}
-                    </>
+                  {!isOutdated && allResults.length === 0 && (
+                    <EmptyState variant="warning" onClick={onShowResults}>
+                      {translate('results.empty-state.no-results')}
+                    </EmptyState>
+                  )}
+
+                  {!isOutdated && allResults.length > 0 && resultCandidate && (
+                    <ResultCandidatePicker className={styles.resultCandidatePicker} onClick={onShowResults} />
                   )}
                 </>
               )}
 
-              {allResults && allResults.length > 0 && !isOutdated && (
+              {allResults && allResults.length > 0 && !isOutdated && resultCandidate && (
                 <ApplyButton className={classNames(styles.submit, styles.apply)} />
               )}
             </div>
@@ -200,7 +200,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
         </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/SolveButton/SolveButton.tsx

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

package/src/components/SquareButton/SquareButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactNode, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
@@ -9,7 +9,7 @@ import styles from './SquareButton.module.scss';
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: never;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  tooltip: string;
+  tooltip: ReactNode;
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 

package/src/components/Tile/Tile.module.scss

@@ -4,13 +4,8 @@
   --background-color: transparent;
 
   position: relative;
-  background-color: var(--background-color);
   transition: var(--transition);
 
-  &.raised {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
-  }
-
   &.points1 {
     --background-color: var(--color--yellow);
   }
@@ -55,31 +50,53 @@
 
     color: var(--color--error);
   }
+
+  &:not(.disabled) {
+    .input::selection {
+      --background--color: transparent;
+    }
+  }
 }
 
+.input,
 .character {
-  width: 100%;
-  height: 100%;
   padding: 0;
-  box-sizing: border-box;
-  background-color: transparent;
-  color: inherit;
-  border: none;
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
   caret-color: transparent;
+  box-sizing: border-box;
+}
 
-  &::placeholder {
-    color: var(--color--inactive);
-  }
+.input {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  color: transparent;
+  border: none;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
+}
 
-  &:not(:disabled)::selection {
-    --background--color: transparent;
+.character {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-color);
+  transition: var(--transition);
+  pointer-events: none;
+  user-select: none;
+
+  .empty & {
+    color: var(--color--inactive);
   }
 
-  &[disabled] {
-    color: inherit;
+  .raised & {
+    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
   }
 }
 

package/src/components/Tile/Tile.tsx

@@ -55,7 +55,7 @@ const Tile: FunctionComponent<Props> = ({
   const locale = useTypedSelector(selectLocale);
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
-  const inputStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
+  const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const inputRef = useMemo<RefObject<HTMLInputElement>>(() => ref || createRef(), [ref]);
   const isEmpty = !character || character === EMPTY_CELL;
@@ -78,11 +78,11 @@ const Tile: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
+      characterStyle={characterStyle}
       className={className}
       disabled={disabled}
       highlighted={highlighted}
       inputRef={inputRef}
-      inputStyle={inputStyle}
       isBlank={isBlank}
       isValid={isValid}
       placeholder={placeholder}

package/src/components/Tile/TilePure.tsx

@@ -17,11 +17,11 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
+  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
   inputRef: RefObject<HTMLInputElement>;
-  inputStyle?: CSSProperties;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -40,11 +40,11 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
+  characterStyle,
   className,
   disabled,
   highlighted,
   inputRef,
-  inputStyle,
   isBlank,
   isValid,
   placeholder,
@@ -61,6 +61,8 @@ const TilePure: FunctionComponent<Props> = ({
   <div
     className={classNames(styles.tile, className, {
       [styles.blank]: isBlank,
+      [styles.disabled]: disabled,
+      [styles.empty]: !character,
       [styles.highlighted]: highlighted,
       [styles.invalid]: !isValid,
       [styles.raised]: raised,
@@ -77,12 +79,10 @@ const TilePure: FunctionComponent<Props> = ({
       autoComplete="off"
       autoCorrect="off"
       autoFocus={autoFocus}
-      className={styles.character}
+      className={styles.input}
       disabled={disabled}
-      placeholder={placeholder}
       ref={inputRef}
       spellCheck={false}
-      style={inputStyle}
       tabIndex={tabIndex}
       value={character || ''}
       onChange={onChange}
@@ -90,6 +90,10 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
+    <div className={styles.character} style={characterStyle} tabIndex={-1}>
+      {character || placeholder}
+    </div>
+
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

package/src/components/Tooltip/Tooltip.module.scss

@@ -18,7 +18,7 @@ $arrow-size: 4px;
     .arrow {
       bottom: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         bottom: 0;
         border-top-color: var(--tooltip--background);
@@ -31,7 +31,7 @@ $arrow-size: 4px;
     .arrow {
       left: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         top: 0;
         border-right-color: var(--tooltip--background);
@@ -44,7 +44,7 @@ $arrow-size: 4px;
     .arrow {
       top: -$arrow-size;
 
-      &:after {
+      &::after {
         top: 0;
         left: 0;
         border-bottom-color: var(--tooltip--background);
@@ -57,7 +57,7 @@ $arrow-size: 4px;
     .arrow {
       right: -$arrow-size;
 
-      &:after {
+      &::after {
         right: 0;
         top: 0;
         border-left-color: var(--tooltip--background);
@@ -72,7 +72,7 @@ $arrow-size: 4px;
   width: 2 * $arrow-size;
   height: 2 * $arrow-size;
 
-  &:after {
+  &::after {
     content: ' ';
     position: absolute;
     height: 0;

package/src/modals/MenuModal/MenuModal.module.scss

@@ -1,46 +1,11 @@
 @import 'styles/mixins';
 
 .button {
-  @include button-reset;
-  @include focus-effect;
-
   width: 100%;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing--l);
   margin-bottom: var(--spacing--m);
-  padding: var(--spacing--m);
-  border: var(--border);
-  border-radius: var(--border--radius);
-  background-color: var(--color--background--overlay);
-  transition: var(--transition);
-  cursor: pointer;
+  text-transform: none;
 
   &:last-child {
     margin-bottom: 0;
   }
-
-  &:focus,
-  &:hover {
-    text-decoration: none;
-
-    .icon {
-      color: var(--color--foreground--secondary);
-    }
-  }
-}
-
-.icon {
-  $size: 24px;
-
-  width: $size;
-  height: $size;
-  flex: 0 0 auto;
-  color: var(--color--inactive);
-  transition: var(--transition);
-}
-
-.content {
-  flex: 1;
-  text-align: left;
 }