@scrabble-solver/scrabble-solver 2.10.3 → 2.10.5

package/src/components/{Sidebar/Sidebar.tsx → Modal/Modal.tsx}

@@ -1,16 +1,16 @@
 import classNames from 'classnames';
 import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
-import Modal from 'react-modal';
+import ReactModal from 'react-modal';
 import { useKey } from 'react-use';
 
-import { CrossFill } from 'icons';
+import { CrossSquareFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
 import { useTranslate } from 'state';
 
 import SquareButton from '../SquareButton';
 
 import { Section } from './components';
-import styles from './Sidebar.module.scss';
+import styles from './Modal.module.scss';
 
 export interface Props {
   children: ReactNode;
@@ -20,7 +20,7 @@ export interface Props {
   onClose: () => void;
 }
 
-const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
+const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
@@ -41,7 +41,7 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
   }, [isOpen]);
 
   return (
-    <Modal
+    <ReactModal
       className={{
         afterOpen: styles.afterOpen,
         base: styles.modal,
@@ -54,13 +54,13 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
       shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
       onRequestClose={onClose}
     >
-      <div className={classNames(styles.sidebar, className)}>
+      <div className={classNames(styles.container, className)}>
         <div className={styles.header}>
           <h1 className={styles.title}>{title}</h1>
 
           <SquareButton
             className={styles.closeButton}
-            Icon={CrossFill}
+            Icon={CrossSquareFill}
             tooltip={translate('common.close')}
             onClick={onClose}
           />
@@ -68,10 +68,10 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
 
         <div className={styles.content}>{children}</div>
       </div>
-    </Modal>
+    </ReactModal>
   );
 };
 
-export default Object.assign(Sidebar, {
+export default Object.assign(Modal, {
   Section,
 });

package/src/components/Modal/index.ts

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

package/src/components/NavButtons/NavButtons.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { useIsTouchDevice } from 'hooks';
-import { BookHalf, Cog, Eraser, Github, Keyboard, Sack } from 'icons';
+import { useIsTouchDevice, useMediaQuery } from 'hooks';
+import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
@@ -13,6 +13,7 @@ import styles from './NavButtons.module.scss';
 interface Props {
   onClear: () => void;
   onShowKeyMap: () => void;
+  onShowMenu: () => void;
   onShowRemainingTiles: () => void;
   onShowSettings: () => void;
   onShowWords: () => void;
@@ -21,6 +22,7 @@ interface Props {
 const NavButtons: FunctionComponent<Props> = ({
   onClear,
   onShowKeyMap,
+  onShowMenu,
   onShowRemainingTiles,
   onShowSettings,
   onShowWords,
@@ -29,6 +31,23 @@ const NavButtons: FunctionComponent<Props> = ({
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
   const isTouchDevice = useIsTouchDevice();
+  const isLessThanS = useMediaQuery('<s');
+
+  if (isLessThanS) {
+    return (
+      <div className={styles.navButtons}>
+        <div className={styles.group}>
+          <SquareButton 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} />
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className={styles.navButtons}>
@@ -52,7 +71,7 @@ const NavButtons: FunctionComponent<Props> = ({
           className={classNames(styles.button, {
             [styles.error]: hasInvalidWords,
           })}
-          Icon={BookHalf}
+          Icon={CardChecklist}
           tooltip={translate('words')}
           onClick={onShowWords}
         />

package/src/components/Progress/Progress.module.scss

@@ -0,0 +1,9 @@
+.progress {
+  width: 100%;
+  min-height: 1px;
+  border-radius: var(--border--radius);
+
+  [dir='rtl'] & {
+    transform: scaleX(-1);
+  }
+}

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+
+import { PROGRESS_COLOR_BACKGROUND, PROGRESS_COLOR_VALUE } from 'parameters';
+import { selectLocale, useTypedSelector } from 'state';
+
+import styles from './Progress.module.scss';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  max: number;
+  min?: number;
+  value: number;
+}
+
+const getGradient = (progress: number, color: string, background: string) => {
+  const percent = 100 * progress;
+  return `linear-gradient(90deg, ${color} 0%, ${color} ${percent}%, ${background} ${percent}%, ${background} 100%)`;
+};
+
+const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
+  const locale = useTypedSelector(selectLocale);
+  const progress = value / (max - min);
+  const percent = Math.round(100 * progress);
+
+  return (
+    <div
+      {...props}
+      className={classNames(styles.progress, className)}
+      style={{
+        ...style,
+        backgroundImage: getGradient(progress, PROGRESS_COLOR_VALUE, PROGRESS_COLOR_BACKGROUND),
+      }}
+      title={`${percent.toLocaleString(locale)}%`}
+    />
+  );
+};
+
+export default Progress;

package/src/components/Progress/index.ts

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

package/src/components/Rack/Rack.module.scss

@@ -7,4 +7,6 @@
 
 .tile {
   @include focus-effect;
+
+  --background-color: var(--color--background);
 }

package/src/components/Rack/Rack.tsx

@@ -18,9 +18,10 @@ import RackTile from './RackTile';
 
 interface Props {
   className?: string;
+  tileSize: number;
 }
 
-const Rack: FunctionComponent<Props> = ({ className }) => {
+const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
@@ -120,6 +121,7 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
           index={index}
           inputRef={tilesRefs[index]}
           key={index}
+          size={tileSize}
           tile={tile}
           onChange={handleChange}
           onKeyDown={handleKeyDown}

package/src/components/Rack/RackTile.tsx

@@ -13,7 +13,6 @@ import {
 import { useDispatch } from 'react-redux';
 
 import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
-import { TILE_SIZE } from 'parameters';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -32,6 +31,7 @@ interface Props {
   character: string | null;
   index: number;
   inputRef: RefObject<HTMLInputElement>;
+  size: number;
   tile: TileModel | null;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
@@ -42,6 +42,7 @@ const RackTile: FunctionComponent<Props> = ({
   character,
   index,
   inputRef,
+  size,
   tile,
   onChange,
   onKeyDown,
@@ -101,7 +102,7 @@ const RackTile: FunctionComponent<Props> = ({
       placeholder={translate('rack.placeholder')[index]}
       points={points}
       raised
-      size={TILE_SIZE}
+      size={size}
       tabIndex={index === 0 ? undefined : -1}
       onChange={handleChange}
       onFocus={handleFocus}

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

@@ -0,0 +1,76 @@
+@import 'styles/mixins';
+
+.resultCandidatePicker {
+  @include button-reset;
+  @include focus-effect;
+
+  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] {
+    opacity: var(--opacity--disabled);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+}
+
+.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);
+  }
+
+  [dir='rtl'] & {
+    border-left: var(--border);
+  }
+}
+
+.word {
+  @include ellipsis;
+
+  flex: 1;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.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);
+}

package/src/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+
+import { ChevronDown } from 'icons';
+import { selectAreResultsOutdated, selectLocale, selectResultCandidate, useTypedSelector } from 'state';
+
+import styles from './ResultCandidatePicker.module.scss';
+
+interface Props extends HTMLProps<HTMLButtonElement> {
+  type?: 'button' | 'submit' | 'reset' | undefined;
+}
+
+const ResultCandidatePicker: FunctionComponent<Props> = ({ className, ...props }) => {
+  const locale = useTypedSelector(selectLocale);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+
+  if (!resultCandidate) {
+    return null;
+  }
+
+  return (
+    <button
+      className={classNames(styles.resultCandidatePicker, className)}
+      disabled={isOutdated}
+      type="button"
+      {...props}
+    >
+      <div className={styles.points}>{resultCandidate.points.toLocaleString(locale)}</div>
+      <div className={styles.word}>{resultCandidate.word}</div>
+      <div className={styles.iconContainer}>
+        <ChevronDown className={styles.icon} />
+      </div>
+    </button>
+  );
+};
+
+export default ResultCandidatePicker;

package/src/components/ResultCandidatePicker/index.ts

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

package/src/components/Results/Result.tsx

@@ -1,49 +1,52 @@
-import { CSSProperties, ReactElement } from 'react';
-import { useDispatch } from 'react-redux';
+import classNames from 'classnames';
+import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useRef } from 'react';
 
 import { LOCALE_FEATURES } from 'i18n';
-import { resultsSlice, selectLocale, selectSortedFilteredResults, useTypedSelector } from 'state';
+import { noop } from 'lib';
+import { selectLocale, useTypedSelector } from 'state';
+import { ResultColumn } from 'types';
 
 import Cell from './Cell';
 import styles from './Results.module.scss';
+import { ResultData } from './types';
+import useColumns from './useColumns';
 
 interface Props {
+  data: ResultData;
   index: number;
   style?: CSSProperties;
 }
 
-const Result = ({ index, style }: Props): ReactElement => {
-  const dispatch = useDispatch();
+const Result = ({ data, index, style }: Props): ReactElement => {
+  const {
+    highlightedIndex,
+    results,
+    onBlur = noop,
+    onClick = noop,
+    onFocus = noop,
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+  } = data;
+  const ref = useRef<HTMLButtonElement>(null);
   const locale = useTypedSelector(selectLocale);
   const { consonants, vowels } = LOCALE_FEATURES[locale];
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const results = useTypedSelector(selectSortedFilteredResults)!;
   const result = results[index];
   const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
+  const columns = useColumns();
+  const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
 
-  const handleClick = () => {
-    dispatch(resultsSlice.actions.applyResult(result));
-  };
-
-  const handleMouseEnter = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(result));
-  };
-
-  const handleMouseLeave = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(null));
-  };
-
-  const handleFocus = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(result));
-  };
-
-  const handleBlur = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(null));
-  };
+  const handleClick: MouseEventHandler = (event) => onClick(result, event);
+  const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);
+  const handleMouseLeave: MouseEventHandler = (event) => onMouseLeave(result, event);
+  const handleBlur: FocusEventHandler = (event) => onBlur(result, event);
+  const handleFocus: FocusEventHandler = (event) => onFocus(result, event);
 
   return (
     <button
-      className={styles.result}
+      className={classNames(styles.result, {
+        [styles.highlighted]: index === highlightedIndex,
+      })}
+      ref={ref}
       style={style}
       type="button"
       onBlur={handleBlur}
@@ -53,24 +56,42 @@ const Result = ({ index, style }: Props): ReactElement => {
       onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
-        <Cell
-          className={styles.word}
-          translationKey="common.word"
-          value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
-        />
-        <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
-        {consonants && (
+        {enabledColumns[ResultColumn.Word] && (
+          <Cell
+            className={styles.word}
+            translationKey="common.word"
+            value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
+          />
+        )}
+
+        {enabledColumns[ResultColumn.TilesCount] && (
+          <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
+        )}
+
+        {enabledColumns[ResultColumn.ConsonantsCount] && consonants && (
           <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
         )}
-        {vowels && <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />}
-        <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
-        <Cell
-          className={styles.stat}
-          translationKey="common.words"
-          tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
-          value={result.wordsCount}
-        />
-        <Cell className={styles.points} translationKey="common.points" value={result.points} />
+
+        {enabledColumns[ResultColumn.VowelsCount] && vowels && (
+          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+        )}
+
+        {enabledColumns[ResultColumn.BlanksCount] && (
+          <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
+        )}
+
+        {enabledColumns[ResultColumn.WordsCount] && (
+          <Cell
+            className={styles.stat}
+            translationKey="common.words"
+            tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
+            value={result.wordsCount}
+          />
+        )}
+
+        {enabledColumns[ResultColumn.Points] && (
+          <Cell className={styles.points} translationKey="common.points" value={result.points} />
+        )}
       </span>
     </button>
   );

package/src/components/Results/Results.module.scss

@@ -8,7 +8,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   flex-direction: column;
   height: 100%;
   font-family: var(--font--family--title);
-  font-size: var(--font--size--s);
 }
 
 .emptyState {
@@ -16,6 +15,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .list {
+  flex: 1 1 auto;
   transition: var(--transition);
 
   &.outdated {
@@ -30,8 +30,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: space-between;
   border-bottom: var(--border);
-  font-size: var(--font--size--s);
   font-weight: 700;
+  overflow: auto;
 }
 
 .headerButton {
@@ -41,6 +41,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
+  padding: var(--spacing--s) 0;
 
   &:focus,
   &:hover {
@@ -69,7 +70,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   font-weight: 400;
 
   &:focus,
-  &:hover {
+  &:hover,
+  &.highlighted {
     &:not(:disabled) {
       background-color: var(--color--primary);
       color: white;
@@ -82,10 +84,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: space-between;
 
-  [dir='rtl'] & {
-    flex-direction: row-reverse;
-  }
-
   .word {
     @include ellipsis;
   }
@@ -95,7 +93,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing--s);
+  padding: 0 var(--spacing--s);
   gap: var(--spacing--s);
 
   .result &:first-child,
@@ -150,18 +148,13 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   font-weight: bold;
 }
 
-.outdatedButton {
+.solveButton {
   display: block;
-  margin: 0 auto;
-  margin-top: var(--spacing--xxl);
-
-  @include tablet {
-    margin-top: var(--spacing--l);
-  }
+  margin: var(--spacing--xl) auto 0;
 }
 
 .sortIcon {
-  $size: 15px;
+  $size: 19px;
 
   flex: 0 0 auto;
   width: $size;