scrabble-solver 2.10.5 → 2.10.7

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.tsx

@@ -6,7 +6,7 @@ import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons'
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
-import SquareButton from '../SquareButton';
+import IconButton from '../IconButton';
 
 import styles from './NavButtons.module.scss';
 
@@ -37,13 +37,25 @@ const NavButtons: FunctionComponent<Props> = ({
     return (
       <div className={styles.navButtons}>
         <div className={styles.group}>
-          <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+          <IconButton
+            aria-label={translate('common.clear')}
+            className={styles.button}
+            Icon={Eraser}
+            tooltip={translate('common.clear')}
+            onClick={onClear}
+          />
         </div>
 
         <div className={styles.separator} />
 
         <div className={styles.group}>
-          <SquareButton className={styles.button} Icon={List} tooltip={translate('menu')} onClick={onShowMenu} />
+          <IconButton
+            aria-label={translate('menu')}
+            className={styles.button}
+            Icon={List}
+            tooltip={translate('menu')}
+            onClick={onShowMenu}
+          />
         </div>
       </div>
     );
@@ -52,13 +64,20 @@ const NavButtons: FunctionComponent<Props> = ({
   return (
     <div className={styles.navButtons}>
       <div className={styles.group}>
-        <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+        <IconButton
+          aria-label={translate('common.clear')}
+          className={styles.button}
+          Icon={Eraser}
+          tooltip={translate('common.clear')}
+          onClick={onClear}
+        />
       </div>
 
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        <SquareButton
+        <IconButton
+          aria-label={translate('remaining-tiles')}
           className={classNames(styles.button, {
             [styles.error]: hasOverusedTiles,
           })}
@@ -67,7 +86,8 @@ const NavButtons: FunctionComponent<Props> = ({
           onClick={onShowRemainingTiles}
         />
 
-        <SquareButton
+        <IconButton
+          aria-label={translate('words')}
           className={classNames(styles.button, {
             [styles.error]: hasInvalidWords,
           })}
@@ -80,7 +100,8 @@ const NavButtons: FunctionComponent<Props> = ({
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        <SquareButton.Link
+        <IconButton.Link
+          aria-label={translate('github')}
           className={styles.button}
           href={GITHUB_PROJECT_URL}
           Icon={Github}
@@ -94,7 +115,8 @@ const NavButtons: FunctionComponent<Props> = ({
 
       <div className={styles.group}>
         {!isTouchDevice && (
-          <SquareButton
+          <IconButton
+            aria-label={translate('keyMap')}
             className={styles.button}
             Icon={Keyboard}
             tooltip={translate('keyMap')}
@@ -102,7 +124,13 @@ const NavButtons: FunctionComponent<Props> = ({
           />
         )}
 
-        <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
+        <IconButton
+          aria-label={translate('settings')}
+          className={styles.button}
+          Icon={Cog}
+          tooltip={translate('settings')}
+          onClick={onShowSettings}
+        />
       </div>
     </div>
   );

package/packages/scrabble-solver/src/components/Rack/RackTile.tsx

@@ -18,6 +18,7 @@ import {
   selectCharacterIsValid,
   selectCharacterPoints,
   selectConfig,
+  selectLocale,
   useTranslate,
   useTypedSelector,
 } from 'state';
@@ -49,6 +50,7 @@ const RackTile: FunctionComponent<Props> = ({
 }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const config = useTypedSelector(selectConfig);
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
   const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
@@ -91,6 +93,9 @@ const RackTile: FunctionComponent<Props> = ({
 
   return (
     <Tile
+      aria-label={translate('rack.tile.location', {
+        index: (index + 1).toLocaleString(locale),
+      })}
       autoFocus={index === 0}
       className={styles.tile}
       character={character === null ? undefined : character}

package/packages/scrabble-solver/src/components/Results/HeaderButton.tsx

@@ -34,6 +34,7 @@ const HeaderButton = ({ column }: Props): ReactElement => {
 
   return (
     <button
+      aria-label={translate(column.translationKey)}
       className={classNames(styles.headerButton, column.className)}
       key={column.id}
       type="button"

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -43,6 +43,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
 
   return (
     <button
+      aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
       })}

package/packages/scrabble-solver/src/components/Results/Results.module.scss

@@ -31,7 +31,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   justify-content: space-between;
   border-bottom: var(--border);
   font-weight: 700;
-  overflow: auto;
 }
 
 .headerButton {

package/packages/scrabble-solver/src/components/Results/SolveButton.tsx

@@ -31,6 +31,7 @@ const SolveButton: FunctionComponent<Props> = ({ className }) => {
 
   return (
     <Button
+      aria-label={translate('results.solve')}
       className={className}
       disabled={isLoading || !isOutdated || !hasTiles}
       Icon={Search}

package/packages/scrabble-solver/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,12 @@
   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;
+.emptyState {
+  margin-top: var(--spacing);
 }
 
 .solve {

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Solver/components/InsertButton/index.ts

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

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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';