@scrabble-solver/scrabble-solver 2.10.7 → 2.10.9

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

@@ -7,6 +7,11 @@
 
 .tile {
   @include focus-effect;
+  @include lighthouse-input-size-hack;
 
   --background-color: var(--color--background);
+
+  &:focus-within {
+    z-index: 2;
+  }
 }

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/Solver.module.scss

@@ -96,11 +96,6 @@
   min-width: 0;
 }
 
-.rackContainer {
-  display: flex;
-  justify-content: center;
-}
-
 .rack {
   border: var(--border);
 }

package/src/components/Solver/Solver.tsx

@@ -157,7 +157,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form className={styles.rackContainer} onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>

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}

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

@@ -24,18 +24,20 @@
   }
 
   &.blank {
-    --background-color: white;
+    --background-color: var(--color--white);
 
+    .placeholder,
     .character {
-      color: black;
+      color: var(--color--foreground);
     }
   }
 
   &.highlighted {
     --background-color: var(--color--primary);
 
-    color: white;
+    color: var(--color--primary--opposite);
 
+    .placeholder,
     .character {
       color: inherit;
     }
@@ -45,12 +47,6 @@
     }
   }
 
-  &.invalid {
-    --background-color: var(--color--red--light);
-
-    color: var(--color--error);
-  }
-
   &:not(.disabled) {
     .input::selection {
       --background--color: transparent;
@@ -59,7 +55,8 @@
 }
 
 .input,
-.character {
+.character,
+.placeholder {
   padding: 0;
   font-weight: bold;
   text-transform: uppercase;
@@ -77,7 +74,8 @@
   font-size: 16px; // prevent iOS from automatically zooming in on focus
 }
 
-.character {
+.character,
+.placeholder {
   position: absolute;
   top: 0;
   right: 0;
@@ -97,6 +95,18 @@
 
   .raised & {
     box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
+
+    @include media('<xs') {
+      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
+    }
+  }
+}
+
+.character {
+  opacity: 1;
+
+  .empty & {
+    opacity: 0;
   }
 }
 
@@ -130,6 +140,8 @@
   position: absolute;
   width: $size;
   height: $size;
+  background-color: var(--color--error--opposite);
+  color: var(--color--error);
 
   [dir='ltr'] & {
     top: 0;

package/src/components/Tile/Tile.tsx

@@ -1,16 +1,19 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
+import mergeRefs from 'merge-refs';
 import {
   ChangeEventHandler,
-  createRef,
   FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
   RefObject,
   useEffect,
   useMemo,
+  useRef,
 } from 'react';
 
+import { useMediaQuery } from 'hooks';
 import { getTileSizes, noop } from 'lib';
+import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
 
 import TilePure from './TilePure';
@@ -42,7 +45,7 @@ const Tile: FunctionComponent<Props> = ({
   character = '',
   disabled,
   highlighted,
-  inputRef: ref,
+  inputRef,
   isBlank,
   isValid,
   placeholder,
@@ -59,21 +62,35 @@ const Tile: FunctionComponent<Props> = ({
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
-  const inputRef = useMemo<RefObject<HTMLInputElement>>(() => ref || createRef(), [ref]);
+  const ref = useRef<HTMLInputElement>(null);
+  const mergedRef = inputRef ? mergeRefs(ref, inputRef) : ref;
   const isEmpty = !character || character === EMPTY_CELL;
-  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined';
+  const isLessThanXs = useMediaQuery('<xs');
+  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined' && !isLessThanXs;
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
-    inputRef.current?.select();
+    ref.current?.select();
     onKeyDown(event);
   };
 
   useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
+    if (autoFocus && ref.current) {
+      ref.current.focus();
     }
-  }, [autoFocus, inputRef]);
+  }, [autoFocus, ref]);
+
+  useEffect(() => {
+    if (!ref.current?.parentElement || !character) {
+      return;
+    }
+
+    ref.current.parentElement.animate(TILE_APPEAR_KEYFRAMES, {
+      duration: TILE_APPEAR_DURATION,
+      easing: EASE_OUT_CUBIC,
+      fill: 'forwards',
+    });
+  }, [character]);
 
   return (
     <TilePure
@@ -85,7 +102,7 @@ const Tile: FunctionComponent<Props> = ({
       className={className}
       disabled={disabled}
       highlighted={highlighted}
-      inputRef={inputRef}
+      inputRef={mergedRef}
       isBlank={isBlank}
       isValid={isValid}
       placeholder={placeholder}

package/src/components/Tile/TilePure.tsx

@@ -6,7 +6,7 @@ import {
   FunctionComponent,
   KeyboardEventHandler,
   memo,
-  RefObject,
+  Ref,
 } from 'react';
 
 import { ExclamationSquareFill } from 'icons';
@@ -22,7 +22,7 @@ interface Props {
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
-  inputRef: RefObject<HTMLInputElement>;
+  inputRef: Ref<HTMLInputElement>;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -66,7 +66,6 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.disabled]: disabled,
       [styles.empty]: !character,
       [styles.highlighted]: highlighted,
-      [styles.invalid]: !isValid,
       [styles.raised]: raised,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
@@ -93,8 +92,14 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
+    {placeholder && (
+      <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>
+        {placeholder}
+      </div>
+    )}
+
     <div className={styles.character} style={characterStyle} tabIndex={-1}>
-      {character || placeholder}
+      {character}
     </div>
 
     {canShowPoints && (

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

@@ -10,9 +10,9 @@ $arrow-size: 4px;
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
-  background-color: var(--tooltip--background);
-  color: var(--tooltip--foreground);
-  z-index: 200;
+  background-color: var(--color--tooltip--background);
+  color: var(--color--tooltip--foreground);
+  z-index: var(--z-index--tooltip);
 
   &.top {
     .arrow {
@@ -21,7 +21,7 @@ $arrow-size: 4px;
       &::after {
         left: 0;
         bottom: 0;
-        border-top-color: var(--tooltip--background);
+        border-top-color: var(--color--tooltip--background);
         border-bottom: none;
       }
     }
@@ -34,7 +34,7 @@ $arrow-size: 4px;
       &::after {
         left: 0;
         top: 0;
-        border-right-color: var(--tooltip--background);
+        border-right-color: var(--color--tooltip--background);
         border-left: none;
       }
     }
@@ -47,7 +47,7 @@ $arrow-size: 4px;
       &::after {
         top: 0;
         left: 0;
-        border-bottom-color: var(--tooltip--background);
+        border-bottom-color: var(--color--tooltip--background);
         border-top: none;
       }
     }
@@ -60,7 +60,7 @@ $arrow-size: 4px;
       &::after {
         right: 0;
         top: 0;
-        border-left-color: var(--tooltip--background);
+        border-left-color: var(--color--tooltip--background);
         border-right: none;
       }
     }

package/src/components/index.ts

@@ -19,6 +19,7 @@ export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
+export { default as SeoMessage } from './SeoMessage';
 export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
 export { default as SplashScreen } from './SplashScreen';

package/src/hooks/useLocalStorage/useLocalStorageBoard.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { boardSlice, localStorage, selectBoard, useTypedSelector } from 'state';
 const useLocalStorageBoard = (): void => {
   const dispatch = useDispatch();
   const board = useTypedSelector(selectBoard);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedBoard = localStorage.getBoard();
@@ -14,13 +15,15 @@ const useLocalStorageBoard = (): void => {
     if (persistedBoard) {
       dispatch(boardSlice.actions.init(persistedBoard));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (board) {
+    if (board && isLoaded) {
       localStorage.setBoard(board);
     }
-  }, [board]);
+  }, [board, isLoaded]);
 };
 
 export default useLocalStorageBoard;

package/src/hooks/useLocalStorage/useLocalStorageConfigId.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { localStorage, selectConfigId, settingsSlice, useTypedSelector } from 's
 const useLocalStorageConfigId = (): void => {
   const dispatch = useDispatch();
   const configId = useTypedSelector(selectConfigId);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedConfigId = localStorage.getConfigId();
@@ -14,13 +15,15 @@ const useLocalStorageConfigId = (): void => {
     if (persistedConfigId) {
       dispatch(settingsSlice.actions.init({ configId: persistedConfigId }));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (configId) {
+    if (configId && isLoaded) {
       localStorage.setConfigId(configId);
     }
-  }, [configId]);
+  }, [configId, isLoaded]);
 };
 
 export default useLocalStorageConfigId;

package/src/hooks/useLocalStorage/useLocalStorageLocale.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -8,6 +8,7 @@ import { localStorage, selectLocale, settingsSlice, useTypedSelector } from 'sta
 const useLocalStorageLocale = (): void => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedLocale = localStorage.getLocale();
@@ -17,13 +18,15 @@ const useLocalStorageLocale = (): void => {
     } else {
       dispatch(settingsSlice.actions.init({ locale: detectLocale() }));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (locale) {
+    if (locale && isLoaded) {
       localStorage.setLocale(locale);
     }
-  }, [locale]);
+  }, [locale, isLoaded]);
 };
 
 export default useLocalStorageLocale;