@scrabble-solver/scrabble-solver 2.10.5 → 2.10.7

package/src/components/Solver/Solver.tsx

@@ -32,11 +32,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 { EmptyState, ResultCandidatePicker, SolveButton } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -55,14 +54,19 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   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 error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const resultCandidate = useTypedSelector(selectResultCandidate);
   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;
@@ -120,10 +124,10 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   };
 
   useEffect(() => {
-    if (bestResult) {
+    if (isLessThanL && bestResult && !isOutdated) {
       dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
     }
-  }, [bestResult, dispatch]);
+  }, [bestResult, dispatch, isLessThanL, isOutdated]);
 
   return (
     <div className={classNames(styles.solver, className)}>
@@ -160,41 +164,19 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
           {isLessThanL && (
             <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
-              {typeof error !== 'undefined' && (
-                <EmptyState variant="error" onClick={onShowResults}>
+              <ResultCandidatePicker onResultClick={onShowResults} />
+
+              {error && (
+                <EmptyState className={styles.emptyState} variant="error">
                   {error.message}
                 </EmptyState>
               )}
 
-              {typeof error === 'undefined' && typeof results === 'undefined' && (
-                <EmptyState variant="info" onClick={onShowResults}>
-                  {translate('results.empty-state.uninitialized')}
+              {allResults && allResults.length === 0 && !isOutdated && (
+                <EmptyState className={styles.emptyState} variant="warning">
+                  {translate('results.empty-state.no-results')}
                 </EmptyState>
               )}
-
-              {typeof error === 'undefined' && typeof results !== '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 className={styles.resultCandidatePicker} onClick={onShowResults} />
-                  )}
-                </>
-              )}
-
-              {allResults && allResults.length > 0 && !isOutdated && resultCandidate && (
-                <ApplyButton className={classNames(styles.submit, styles.apply)} />
-              )}
             </div>
           )}
         </div>

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

@@ -5,8 +5,6 @@
   border: var(--border);
   border-radius: var(--border--radius);
   background-color: white;
-  box-shadow: var(--box-shadow);
-  cursor: pointer;
   text-align: center;
 }
 

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

@@ -0,0 +1,15 @@
+@import 'styles/mixins';
+
+.insertButton {
+  @include media('>=s') {
+    padding: var(--spacing--m) var(--spacing--xl);
+  }
+
+  @include media('<xs') {
+    padding: var(--spacing--m);
+  }
+}
+
+.icon {
+  transform: scale(1.5);
+}

package/src/components/Solver/components/{ApplyButton/ApplyButton.tsx → InsertButton/InsertButton.tsx}

@@ -1,20 +1,23 @@
+import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Check } from 'icons';
-import { resultsSlice, selectResultCandidate, useTypedSelector } from 'state';
+import { resultsSlice, selectAreResultsOutdated, selectResultCandidate, useTranslate, useTypedSelector } from 'state';
 
 import Button from '../../../Button';
 
-import styles from './ApplyButton.module.scss';
+import styles from './InsertButton.module.scss';
 
 interface Props {
   className?: string;
 }
 
-const ApplyButton: FunctionComponent<Props> = ({ className }) => {
+const InsertButton: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
+  const translate = useTranslate();
   const resultCandidate = useTypedSelector(selectResultCandidate);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
 
   const handleClick = () => {
     if (resultCandidate) {
@@ -24,8 +27,9 @@ const ApplyButton: FunctionComponent<Props> = ({ className }) => {
 
   return (
     <Button
-      className={className}
-      disabled={!resultCandidate}
+      aria-label={translate('results.insert')}
+      className={classNames(styles.insertButton, className)}
+      disabled={isOutdated || !resultCandidate}
       Icon={Check}
       iconClassName={styles.icon}
       type="submit"
@@ -35,4 +39,4 @@ const ApplyButton: FunctionComponent<Props> = ({ className }) => {
   );
 };
 
-export default ApplyButton;
+export default InsertButton;

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

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

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

@@ -0,0 +1,143 @@
+@import 'styles/mixins';
+
+.resultCandidatePicker {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing--l);
+
+  @include media('<xs') {
+    gap: var(--spacing--m);
+  }
+}
+
+.buttons {
+  flex: 0 0 auto;
+  display: flex;
+  border-radius: var(--border--radius);
+}
+
+.button {
+  padding: var(--spacing--m);
+
+  &: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;
+  width: 100%;
+  border: var(--border);
+  border-radius: var(--border--radius);
+  background-color: white;
+  box-shadow: var(--box-shadow);
+  cursor: pointer;
+
+  &[disabled] {
+    @include disabled;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.points,
+.word {
+  padding: var(--spacing--m) var(--spacing--l);
+}
+
+.points {
+  flex: 0 0 auto;
+  font-weight: bold;
+
+  [dir='ltr'] & {
+    border-right: var(--border);
+
+    @include media('<xs') {
+      border-right: none;
+      padding-right: var(--spacing--xs);
+    }
+  }
+
+  [dir='rtl'] & {
+    border-left: var(--border);
+
+    @include media('<xs') {
+      border-left: none;
+      padding-left: var(--spacing--xs);
+    }
+  }
+}
+
+.word {
+  @include ellipsis;
+
+  flex: 1;
+  text-transform: uppercase;
+  text-align: center;
+  white-space: pre-wrap;
+
+  [dir='ltr'] & {
+    @include media('<xs') {
+      padding: var(--spacing--m);
+      text-align: left;
+    }
+  }
+
+  [dir='rtl'] & {
+    @include media('<xs') {
+      padding: var(--spacing--m);
+      text-align: right;
+    }
+  }
+}
+
+.iconContainer {
+  flex: 0 0 auto;
+  display: flex;
+
+  [dir='ltr'] & {
+    padding-right: var(--spacing--l);
+  }
+
+  [dir='rtl'] & {
+    padding-left: var(--spacing--l);
+  }
+}
+
+.icon {
+  $size: 20px;
+
+  width: $size;
+  height: $size;
+  color: var(--color--inactive);
+}
+
+.insert {
+  flex: 0 0 auto;
+}

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

@@ -0,0 +1,98 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps, MouseEventHandler } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
+import {
+  resultsSlice,
+  selectAreResultsOutdated,
+  selectLocale,
+  selectResultCandidate,
+  selectSortedResults,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
+
+import Button from '../../../Button';
+import InsertButton from '../InsertButton';
+
+import styles from './ResultCandidatePicker.module.scss';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  onResultClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultClick, ...props }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const sortedResults = useTypedSelector(selectSortedResults);
+  const results = sortedResults || [];
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+  const index = resultCandidate ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
+  const disabled = isOutdated || !resultCandidate;
+  const isPreviousDisabled = index <= 0 || disabled;
+  const isNextDisabled = index >= results.length - 1 || disabled;
+
+  const handleNextClick = () => {
+    if (!isNextDisabled) {
+      const nextResult = results[index + 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(nextResult));
+    }
+  };
+
+  const handlePreviousClick = () => {
+    if (!isPreviousDisabled) {
+      const previousResult = results[index - 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(previousResult));
+    }
+  };
+
+  return (
+    <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
+      <div className={styles.buttons}>
+        <Button
+          aria-label={translate('common.previous')}
+          className={styles.button}
+          disabled={isPreviousDisabled}
+          Icon={ChevronLeft}
+          onClick={handlePreviousClick}
+        />
+
+        <Button
+          aria-label={translate('common.next')}
+          className={styles.button}
+          disabled={isNextDisabled}
+          Icon={ChevronRight}
+          onClick={handleNextClick}
+        />
+      </div>
+
+      <button
+        aria-label={translate('results')}
+        className={styles.resultCandidate}
+        disabled={disabled}
+        type="button"
+        onClick={onResultClick}
+      >
+        {resultCandidate && (
+          <>
+            <div className={styles.points}>{resultCandidate.points.toLocaleString(locale)}</div>
+            <div className={styles.word}>{resultCandidate.word}</div>
+          </>
+        )}
+
+        {!resultCandidate && <div className={styles.word}> </div>}
+
+        <div className={styles.iconContainer}>
+          <ChevronDown className={styles.icon} />
+        </div>
+      </button>
+
+      <InsertButton className={styles.insert} />
+    </div>
+  );
+};
+
+export default ResultCandidatePicker;

package/src/components/Solver/components/SolveButton/SolveButton.tsx

@@ -4,7 +4,14 @@ import { useDispatch } from 'react-redux';
 
 import { Search } from 'icons';
 import { noop } from 'lib';
-import { selectAreResultsOutdated, selectIsLoading, selectRack, solveSlice, useTypedSelector } from 'state';
+import {
+  selectAreResultsOutdated,
+  selectIsLoading,
+  selectRack,
+  solveSlice,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import Button from '../../../Button';
 
@@ -17,6 +24,7 @@ interface Props {
 
 const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) => {
   const dispatch = useDispatch();
+  const translate = useTranslate();
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const rack = useTypedSelector(selectRack);
@@ -29,10 +37,12 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
 
   return (
     <Button
+      aria-label={translate('results.solve')}
       className={classNames(styles.solveButton, className)}
       disabled={isLoading || !isOutdated || !hasTiles}
       Icon={Search}
       iconClassName={styles.icon}
+      tooltip={translate('results.solve')}
       type="submit"
       variant="primary"
       onClick={handleClick}

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

@@ -1,3 +1,4 @@
-export { default as ApplyButton } from './ApplyButton';
 export { default as EmptyState } from './EmptyState';
+export { default as InsertButton } from './InsertButton';
+export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as SolveButton } from './SolveButton';

package/src/components/Tile/Tile.tsx

@@ -16,6 +16,7 @@ import { selectLocale, useTypedSelector } from 'state';
 import TilePure from './TilePure';
 
 interface Props {
+  'aria-label': string;
   autoFocus?: boolean;
   character?: string;
   className?: string;
@@ -35,6 +36,7 @@ interface Props {
 }
 
 const Tile: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   autoFocus,
   className,
   character = '',
@@ -75,6 +77,7 @@ const Tile: FunctionComponent<Props> = ({
 
   return (
     <TilePure
+      aria-label={ariaLabel}
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}

package/src/components/Tile/TilePure.tsx

@@ -14,6 +14,7 @@ import { ExclamationSquareFill } from 'icons';
 import styles from './Tile.module.scss';
 
 interface Props {
+  'aria-label': string;
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
@@ -37,6 +38,7 @@ interface Props {
 }
 
 const TilePure: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   autoFocus,
   canShowPoints,
   character,
@@ -75,6 +77,7 @@ const TilePure: FunctionComponent<Props> = ({
     style={style}
   >
     <input
+      aria-label={ariaLabel}
       autoCapitalize="none"
       autoComplete="off"
       autoCorrect="off"

package/src/components/Tooltip/useTooltip.tsx

@@ -12,7 +12,7 @@ import {
 import { usePopper } from 'react-popper';
 import { useMountedState, useRafLoop } from 'react-use';
 
-import { usePortal, useUniqueId } from 'hooks';
+import { useIsTouchDevice, usePortal, useUniqueId } from 'hooks';
 import { noop } from 'lib';
 
 import { MODIFIERS } from './constants';
@@ -36,11 +36,13 @@ interface TriggerProps {
   onMouseOver?: MouseEventHandler;
 }
 
+// eslint-disable-next-line max-statements
 const useTooltip = (
   tooltip: ReactNode,
   { className, placement = 'top', onBlur = noop, onFocus = noop, onMouseOut = noop, onMouseOver = noop }: Props = {},
 ): TriggerProps => {
   const id = useUniqueId();
+  const isTouchDevice = useIsTouchDevice();
   const isEnabled = Boolean(tooltip) || tooltip === 0;
   const isMounted = useMountedState();
   const [isShown, setIsShown] = useState<boolean>(false);
@@ -90,7 +92,7 @@ const useTooltip = (
     [onMouseOver],
   );
 
-  const triggerProps = useMemo(
+  const mouseTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
       ref: setReferenceElement,
@@ -102,6 +104,16 @@ const useTooltip = (
     [ariaAttributes, handleBlur, handleFocus, handleMouseOut, handleMouseOver],
   );
 
+  const touchTriggerProps = useMemo(
+    () => ({
+      ...ariaAttributes,
+      ref: setReferenceElement,
+    }),
+    [ariaAttributes],
+  );
+
+  const triggerProps = isTouchDevice ? touchTriggerProps : mouseTriggerProps;
+
   useRafLoop(() => {
     if (isMounted() && update) {
       update();

package/src/components/index.ts

@@ -5,6 +5,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dictionary } from './Dictionary';
 export { default as DictionaryInput } from './DictionaryInput';
 export { default as EmptyState } from './EmptyState';
+export { default as IconButton } from './IconButton';
 export { default as Key } from './Key';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
@@ -16,13 +17,11 @@ export { default as PlainTiles } from './PlainTiles';
 export { default as Progress } from './Progress';
 export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
-export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
 export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
 export { default as SplashScreen } from './SplashScreen';
-export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';
 export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';

package/src/i18n/de.json

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Zielort - klicken zum Wechseln",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
+  "cell.tile.location": "Brett: Stein ({{x}}, {{y}})",
   "cell.toggle-direction": "Schreibrichtung - klicken zum Wechseln",
   "common.blanks": "Blankos",
   "common.clear": "Löschen",
   "common.close": "Schließen",
   "common.consonants": "Konsonanten",
   "common.loading": "Laden",
+  "common.next": "Weiter",
   "common.points": "Punkte",
+  "common.previous": "Zurück",
   "common.tiles": "Steine",
   "common.two-letter-tiles": "Zwei-Buchstaben",
   "common.vowels": "Vokale",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Blanko hinzufügen (Leertaste)",
   "menu": "Menü",
   "rack.placeholder": "Steine…",
+  "rack.tile.location": "Ablage: Stein ({{index}})",
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
   "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",
   "results.empty-state.uninitialized": "Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.",
   "results.input.placeholder": "Suchergebnisse... (RegExp)",
+  "results.insert": "Hinzufügen",
   "results.solve": "Lösen",
   "settings": "Einstellungen",
   "settings.autoGroupTiles": "Restliche Steine gruppieren",

package/src/i18n/en.json

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Target destination - click to toggle",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
+  "cell.tile.location": "Board: tile ({{x}}, {{y}})",
   "cell.toggle-direction": "Typing direction - click to toggle",
   "common.blanks": "Blanks",
   "common.clear": "Clear",
   "common.close": "Close",
   "common.consonants": "Consonants",
   "common.loading": "Loading",
+  "common.next": "Next",
   "common.points": "Points",
+  "common.previous": "Previous",
   "common.tiles": "Tiles",
   "common.two-letter-tiles": "Two-letter",
   "common.vowels": "Vowels",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Insert blank (spacebar)",
   "menu": "Menu",
   "rack.placeholder": "Letters",
+  "rack.tile.location": "Rack: tile ({{index}})",
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
   "results.empty-state.no-filtered-results": "No result matches this query.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Results are outdated. Click below to update.",
   "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",
   "results.input.placeholder": "Search results... (RegExp)",
+  "results.insert": "Insert",
   "results.solve": "Solve",
   "settings": "Settings",
   "settings.autoGroupTiles": "Group remaining tiles",

package/src/i18n/es.json

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Destino objetivo: haga clic para alternar",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
+  "cell.tile.location": "Tablero: espacio ({{x}}, {{y}})",
   "cell.toggle-direction": "Dirección de escritura: haga clic para alternar",
   "common.blanks": "Blancos",
   "common.clear": "Borrar",
   "common.close": "Cerrar",
   "common.consonants": "Consonantes",
   "common.loading": "Cargando",
+  "common.next": "Siguiente",
   "common.points": "Puntos",
+  "common.previous": "Anterior",
   "common.tiles": "Longitud",
   "common.two-letter-tiles": "Dos letras",
   "common.vowels": "Vocales",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Insertar espacio en blanco (barra espaciadora)",
   "menu": "Menú",
   "rack.placeholder": "Letras…",
+  "rack.tile.location": "Estante: espacio ({{index}})",
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
   "results.empty-state.no-filtered-results": "Ningún resultado coincide con esta consulta.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Los resultados están desactualizados. Haga clic a continuación para actualizar.",
   "results.empty-state.uninitialized": "Aquí se mostrarán las palabras generadas a partir de sus letras.",
   "results.input.placeholder": "Busque una solución... (RegExp)",
+  "results.insert": "Insertar",
   "results.solve": "Resolver",
   "settings": "Configuración",
   "settings.autoGroupTiles": "Agrupar casillas restantes",