@scrabble-solver/scrabble-solver 2.10.5 → 2.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.5",
+  "version": "2.10.6",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,14 +30,14 @@
   "dependencies": {
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
-    "@reduxjs/toolkit": "^1.9.2",
-    "@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",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@scrabble-solver/configs": "^2.10.6",
+    "@scrabble-solver/constants": "^2.10.6",
+    "@scrabble-solver/dictionaries": "^2.10.6",
+    "@scrabble-solver/logger": "^2.10.6",
+    "@scrabble-solver/solver": "^2.10.6",
+    "@scrabble-solver/types": "^2.10.6",
+    "@scrabble-solver/word-definitions": "^2.10.6",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -63,18 +63,18 @@
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",
     "@types/classnames": "^2.3.0",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.13.1",
     "@types/react-portal": "^4.0.4",
     "@types/react-redux": "^7.1.25",
     "@types/react-window": "^1.8.5",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "@types/uuid": "^9.0.0",
+    "@types/uuid": "^9.0.1",
     "env-cmd": "^10.1.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "c998db150c41bf76febd1c9a2650950cd0b449c4"
+  "gitHead": "188bb77933a4e88af88b05063a4977c50c788071"
 }

package/src/components/Button/Button.module.scss

@@ -8,7 +8,6 @@
   padding: var(--spacing--m) var(--spacing--l);
   border: var(--border);
   border-radius: var(--border--radius);
-  color: var(--color--inactive);
   text-transform: uppercase;
   transition: var(--transition);
   cursor: pointer;
@@ -37,7 +36,7 @@
 
   &:focus,
   &:hover {
-    &.default {
+    &.default:not(:disabled) {
       .icon {
         color: var(--color--foreground--secondary);
       }
@@ -54,9 +53,7 @@
   }
 
   &[disabled] {
-    opacity: var(--opacity--disabled);
-    box-shadow: none;
-    cursor: not-allowed;
+    @include disabled;
   }
 }
 

package/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,8 @@
   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;
 }
 
 .solve {

package/src/components/Solver/Solver.tsx

@@ -17,14 +17,10 @@ import {
 } from 'parameters';
 import {
   resultsSlice,
-  selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
-  selectSolveError,
   selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
-  useTranslate,
   useTypedSelector,
 } from 'state';
 
@@ -32,11 +28,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 { MobileControls, SolveButton } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -49,20 +44,21 @@ interface Props {
 // eslint-disable-next-line max-statements
 const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
   const dispatch = useDispatch();
-  const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
   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 isOutdated = useTypedSelector(selectAreResultsOutdated);
-  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;
@@ -159,43 +155,11 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
           </form>
 
           {isLessThanL && (
-            <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
-              {typeof error !== 'undefined' && (
-                <EmptyState variant="error" onClick={onShowResults}>
-                  {error.message}
-                </EmptyState>
-              )}
-
-              {typeof error === 'undefined' && typeof results === 'undefined' && (
-                <EmptyState variant="info" onClick={onShowResults}>
-                  {translate('results.empty-state.uninitialized')}
-                </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>
+            <MobileControls
+              className={styles.controls}
+              style={{ maxWidth: maxControlsWidth }}
+              onShowResults={onShowResults}
+            />
           )}
         </div>
       </div>

package/src/components/Solver/components/MobileControls/MobileControls.tsx

@@ -0,0 +1,62 @@
+import { FunctionComponent, HTMLProps } from 'react';
+
+import {
+  selectAreResultsOutdated,
+  selectResultCandidate,
+  selectSolveError,
+  selectSortedResults,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
+
+import EmptyState from '../EmptyState';
+import ResultCandidatePicker from '../ResultCandidatePicker';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  onShowResults: () => void;
+}
+
+// eslint-disable-next-line max-statements
+const MobileControls: FunctionComponent<Props> = ({ onShowResults, ...props }) => {
+  const translate = useTranslate();
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const allResults = useTypedSelector(selectSortedResults);
+  const error = useTypedSelector(selectSolveError);
+
+  return (
+    <div {...props}>
+      {typeof error !== 'undefined' && (
+        <EmptyState variant="error" onClick={onShowResults}>
+          {error.message}
+        </EmptyState>
+      )}
+
+      {typeof error === 'undefined' && typeof allResults === 'undefined' && (
+        <EmptyState variant="info" onClick={onShowResults}>
+          {translate('results.empty-state.uninitialized')}
+        </EmptyState>
+      )}
+
+      {typeof error === '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 onClick={onShowResults} />}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MobileControls;

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

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

package/src/components/{ResultCandidatePicker → Solver/components/ResultCandidatePicker}/ResultCandidatePicker.module.scss

@@ -1,9 +1,51 @@
 @import 'styles/mixins';
 
 .resultCandidatePicker {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing--l);
+}
+
+.buttons {
+  flex: 0 0 auto;
+  display: flex;
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
+
+  @include media('<xs') {
+    display: none;
+  }
+}
+
+.button {
+  padding: var(--spacing--m);
+  box-shadow: none;
+
+  &: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;
@@ -15,9 +57,7 @@
   cursor: pointer;
 
   &[disabled] {
-    opacity: var(--opacity--disabled);
-    box-shadow: none;
-    cursor: not-allowed;
+    @include disabled;
   }
 }
 
@@ -74,3 +114,7 @@
   height: $size;
   color: var(--color--inactive);
 }
+
+.apply {
+  flex: 0 0 auto;
+}

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

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
+import {
+  resultsSlice,
+  selectAreResultsOutdated,
+  selectLocale,
+  selectResultCandidate,
+  selectSortedResults,
+  useTypedSelector,
+} from 'state';
+
+import Button from '../../../Button';
+import ApplyButton from '../ApplyButton';
+
+import styles from './ResultCandidatePicker.module.scss';
+
+const ResultCandidatePicker: FunctionComponent<HTMLProps<HTMLDivElement>> = ({ className, ...props }) => {
+  const dispatch = useDispatch();
+  const locale = useTypedSelector(selectLocale);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const sortedResults = useTypedSelector(selectSortedResults);
+  const results = sortedResults || [];
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+
+  if (!resultCandidate) {
+    return null;
+  }
+
+  const index = results.findIndex((result) => result.id === resultCandidate.id);
+  const isPreviousDisabled = index <= 0;
+  const isNextDisabled = index >= results.length - 1;
+
+  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
+          className={styles.button}
+          disabled={isPreviousDisabled}
+          Icon={ChevronLeft}
+          onClick={handlePreviousClick}
+        />
+        <Button className={styles.button} disabled={isNextDisabled} Icon={ChevronRight} onClick={handleNextClick} />
+      </div>
+
+      <button className={styles.resultCandidate} disabled={isOutdated} type="button">
+        <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>
+
+      <ApplyButton className={styles.apply} />
+    </div>
+  );
+};
+
+export default ResultCandidatePicker;

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

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

package/src/components/SquareButton/SquareButton.module.scss

@@ -20,8 +20,7 @@
   }
 
   &[disabled] {
-    pointer-events: none;
-    opacity: var(--opacity--disabled);
+    @include disabled;
   }
 }
 

package/src/components/index.ts

@@ -16,7 +16,6 @@ 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';

package/src/icons/ChevronLeft.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-left/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill="currentColor" fill-rule="evenodd" />
+</svg>

package/src/icons/ChevronRight.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-right/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" fill="currentColor" fill-rule="evenodd" />
+</svg>

package/src/icons/index.ts

@@ -8,6 +8,8 @@ export { default as Check } from './Check.svg';
 export { default as CheckboxChecked } from './CheckboxChecked.svg';
 export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
 export { default as ChevronDown } from './ChevronDown.svg';
+export { default as ChevronLeft } from './ChevronLeft.svg';
+export { default as ChevronRight } from './ChevronRight.svg';
 export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
 export { default as CrossCircleFill } from './CrossCircleFill.svg';

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

@@ -2,10 +2,9 @@
 
 .button {
   width: 100%;
-  margin-bottom: var(--spacing--m);
   text-transform: none;
 
-  &:last-child {
-    margin-bottom: 0;
+  & + & {
+    margin-top: var(--spacing--l);
   }
 }

package/src/styles/mixins.scss

@@ -44,6 +44,12 @@ $media-expressions: (
   }
 }
 
+@mixin disabled {
+  opacity: var(--opacity--disabled);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 @mixin ellipsis {
   display: block;
   text-overflow: ellipsis;

package/.next/static/WILX-RgqlLTd4ZoPs8C_E/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,e,c){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,e,c,"static/css/d80ffccf2315791a.css","static/chunks/pages/index-1a6bbb880f28606a.js"],"/404":[s,e,c,"static/chunks/pages/404-7619583a9e7188b1.js"],"/_error":["static/chunks/pages/_error-8353112a01355ec2.js"],sortedPages:["/","/404","/_app","/_error"]}}("static/chunks/490-d29992f1c264d70e.js","static/css/e737d5d7fbed2434.css","static/chunks/144-6768fe9a92865ec8.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();