@scrabble-solver/scrabble-solver 2.10.1 → 2.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.1",
+  "version": "2.10.3",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,27 +30,27 @@
   "dependencies": {
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
-    "@reduxjs/toolkit": "^1.8.6",
-    "@scrabble-solver/configs": "^2.10.1",
-    "@scrabble-solver/constants": "^2.10.1",
-    "@scrabble-solver/dictionaries": "^2.10.1",
-    "@scrabble-solver/logger": "^2.10.1",
-    "@scrabble-solver/solver": "^2.10.1",
-    "@scrabble-solver/types": "^2.10.1",
-    "@scrabble-solver/word-definitions": "^2.10.1",
+    "@reduxjs/toolkit": "^1.9.2",
+    "@scrabble-solver/configs": "^2.10.3",
+    "@scrabble-solver/constants": "^2.10.3",
+    "@scrabble-solver/dictionaries": "^2.10.3",
+    "@scrabble-solver/logger": "^2.10.3",
+    "@scrabble-solver/solver": "^2.10.3",
+    "@scrabble-solver/types": "^2.10.3",
+    "@scrabble-solver/word-definitions": "^2.10.3",
     "classnames": "^2.3.2",
-    "next": "^12.3.1",
+    "next": "^13.1.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
-    "react-redux": "^8.0.4",
+    "react-redux": "^8.0.5",
     "react-use": "^17.4.0",
-    "react-window": "^1.8.7",
-    "redux": "^4.2.0",
-    "redux-saga": "^1.2.1",
+    "react-window": "^1.8.8",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.2",
     "store2": "^2.14.2",
     "uuid": "^9.0.0",
     "workbox-expiration": "^6.5.4",
@@ -59,20 +59,20 @@
     "workbox-window": "^6.5.4"
   },
   "devDependencies": {
-    "@svgr/webpack": "^6.5.0",
+    "@svgr/webpack": "^6.5.1",
     "@types/classnames": "^2.3.0",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/react-modal": "^3.13.1",
     "@types/react-portal": "^4.0.4",
-    "@types/react-redux": "^7.1.24",
+    "@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": "^8.3.4",
+    "@types/uuid": "^9.0.0",
     "env-cmd": "^10.1.0",
-    "sass": "^1.55.0",
+    "sass": "^1.57.1",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "506586e8bb9e71f9f784dabffae2229c587c5e5a"
+  "gitHead": "50a961d5f3fe68c6b646a3cd1a3fb28f9e9b5252"
 }

package/src/components/Board/Board.module.scss

@@ -1,8 +1,7 @@
 .board {
   display: table;
   box-shadow: var(--box-shadow);
-  border-top: var(--border);
-  border-left: var(--border);
+  border: var(--border);
 }
 
 .row {

package/src/components/Board/BoardPure.tsx

@@ -53,7 +53,9 @@ const BoardPure: FunctionComponent<Props> = ({
             cell={cell}
             direction={direction}
             inputRef={refs[y][x]}
+            isBottom={y === rows.length - 1}
             isCenter={center.x === x && center.y === y}
+            isRight={x === cells.length - 1}
             key={x}
             size={cellSize}
             onChange={onChange}

package/src/components/Board/components/Cell/Cell.module.scss

@@ -8,104 +8,115 @@ $icon-size: 16px;
   position: relative;
   display: table-cell;
   background-color: white;
-  border-right: var(--border);
-  border-bottom: var(--border);
+  border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
   background-clip: padding-box;
 
-  &.bonusWord2,
-  &.bonusWord3 {
-    position: relative;
+  [dir='ltr'] & {
+    border-right: var(--border--width) dotted var(--border--color--light);
+  }
 
-    &:before {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      font-weight: bold;
-      pointer-events: none;
+  [dir='rtl'] & {
+    border-left: var(--border--width) dotted var(--border--color--light);
+  }
+
+  &.bottom {
+    border-bottom: none;
+  }
+
+  &.right {
+    [dir='ltr'] & {
+      border-right: none;
+    }
+
+    [dir='rtl'] & {
+      border-left: none;
     }
   }
 
   &.bonusStart {
-    background-color: var(--color--violet--light);
+    &:before {
+      background-color: var(--color--violet--light);
+    }
   }
 
   &.bonusCharacter1 {
-    background-color: var(--color--yellow--light);
+    &:before {
+      background-color: var(--color--yellow--light);
+    }
   }
 
   &.bonusCharacter2 {
-    background-color: var(--color--green--light);
+    &:before {
+      background-color: var(--color--green--light);
+    }
   }
 
   &.bonusCharacter3 {
-    background-color: var(--color--blue--light);
+    &:before {
+      background-color: var(--color--blue--light);
+    }
   }
 
   &.bonusCharacter5 {
-    background-color: var(--color--red--light);
+    &:before {
+      background-color: var(--color--red--light);
+    }
   }
 
   &.bonusCharacterMultiplier2 {
-    background-color: var(--color--light-blue--light);
+    &:before {
+      background-color: var(--color--light-blue--light);
+    }
   }
 
   &.bonusCharacterMultiplier3 {
-    background-color: var(--color--dark-blue--light);
-  }
-
-  &.bonusWord2,
-  &.bonusWord3 {
-    background-color: var(--color--inactive);
-
     &:before {
-      font-size: 75%;
-      color: white;
-
-      [lang='fa-IR'] & {
-        font-family: 'Open Sans', sans-serif;
-      }
+      background-color: var(--color--dark-blue--light);
     }
   }
 
   &.bonusWord2 {
     &:before {
       content: 'x2';
+      background-color: var(--color--orange);
     }
   }
 
   &.bonusWord3 {
     &:before {
       content: 'x3';
+      background-color: var(--color--pink);
     }
   }
 
-  &.characterPoints1 {
-    background-color: var(--color--yellow);
-  }
-
-  &.characterPoints2 {
-    background-color: var(--color--green);
-  }
-
-  &.characterPoints3 {
-    background-color: var(--color--blue);
-  }
-
-  &.characterPoints5 {
-    background-color: var(--color--red);
+  &.candidate {
+    &:before {
+      content: ' ';
+      background-color: var(--color--primary);
+    }
   }
 
-  &.candidate {
-    background-color: var(--color--primary);
+  &:before {
+    $size: 80%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: (100% - $size) / 2;
+    left: (100% - $size) / 2;
+    width: $size;
+    height: $size;
+    border-radius: var(--border--radius);
+    pointer-events: none;
+    font-size: 60%;
+    font-weight: bold;
+    color: white;
+    content: ' ';
 
-    &:before {
-      display: none;
+    [lang='fa-IR'] & {
+      font-family: 'Open Sans', sans-serif;
     }
   }
 
@@ -207,6 +218,8 @@ $icon-size: 16px;
 }
 
 .toggleDirection {
+  transition: var(--transition);
+
   &.right {
     transform: rotate(-90deg);
 
@@ -249,9 +262,19 @@ $icon-size: 16px;
 
 .flag,
 .star {
+  color: white;
+}
+
+.star {
+  $size: 40%;
+
+  width: $size;
+  height: $size;
+}
+
+.flag {
   $size: 50%;
 
   width: $size;
   height: $size;
-  color: white;
 }

package/src/components/Board/components/Cell/Cell.tsx

@@ -9,6 +9,7 @@ import {
   cellFilterSlice,
   selectCellBonus,
   selectCellIsFiltered,
+  selectCellIsValid,
   selectTilePoints,
   useTranslate,
   useTypedSelector,
@@ -21,7 +22,9 @@ interface Props {
   className?: string;
   direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
+  isBottom: boolean;
   isCenter: boolean;
+  isRight: boolean;
   size: number;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
@@ -33,7 +36,9 @@ const Cell: FunctionComponent<Props> = ({
   className,
   direction,
   inputRef,
+  isBottom,
   isCenter,
+  isRight,
   size,
   onChange,
   onDirectionToggle,
@@ -45,6 +50,7 @@ const Cell: FunctionComponent<Props> = ({
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
   const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
+  const isValid = useTypedSelector((state) => selectCellIsValid(state, cell));
   const { tileFontSize } = getTileSizes(size);
   const isEmpty = tile.character === EMPTY_CELL;
   const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
@@ -82,9 +88,12 @@ const Cell: FunctionComponent<Props> = ({
       className={className}
       direction={direction}
       inputRef={inputRef}
+      isBottom={isBottom}
       isCenter={isCenter}
+      isRight={isRight}
       isEmpty={isEmpty}
       isFiltered={isFiltered}
+      isValid={isValid}
       points={points}
       size={size}
       style={style}

package/src/components/Board/components/Cell/CellPure.tsx

@@ -25,9 +25,12 @@ interface Props {
   className?: string;
   direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
+  isBottom: boolean;
   isCenter: boolean;
+  isRight: boolean;
   isEmpty: boolean;
   isFiltered: boolean;
+  isValid: boolean;
   points?: number;
   size: number;
   style?: CSSProperties;
@@ -46,9 +49,12 @@ const CellPure: FunctionComponent<Props> = ({
   className,
   direction,
   inputRef,
+  isBottom,
   isCenter,
+  isRight,
   isEmpty,
   isFiltered,
+  isValid,
   points,
   size,
   style,
@@ -61,12 +67,14 @@ const CellPure: FunctionComponent<Props> = ({
   onToggleFilterCellClick,
 }) => (
   <div
-    className={classNames(styles.cell, getBonusClassname(cell, bonus, isCenter), className, {
+    className={classNames(styles.cell, className, getBonusClassname(cell, bonus, isCenter), {
+      [styles.bottom]: isBottom,
       [styles.candidate]: cell.isCandidate(),
+      [styles.right]: isRight,
     })}
     style={style}
   >
-    {isCenter && (
+    {isCenter && isEmpty && (
       <div className={classNames(styles.iconContainer)}>
         <Star className={styles.star} />
       </div>
@@ -84,6 +92,7 @@ const CellPure: FunctionComponent<Props> = ({
       highlighted={cell.isCandidate()}
       inputRef={inputRef}
       isBlank={tile.isBlank}
+      isValid={isValid}
       points={points}
       raised={!isEmpty}
       size={size}

package/src/components/NavButtons/NavButtons.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
+import { useIsTouchDevice } from 'hooks';
 import { BookHalf, Cog, Eraser, Github, Keyboard, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
@@ -27,6 +28,7 @@ const NavButtons: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
+  const isTouchDevice = useIsTouchDevice();
 
   return (
     <div className={styles.navButtons}>
@@ -72,7 +74,15 @@ const NavButtons: FunctionComponent<Props> = ({
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
+        {!isTouchDevice && (
+          <SquareButton
+            className={styles.button}
+            Icon={Keyboard}
+            tooltip={translate('keyMap')}
+            onClick={onShowKeyMap}
+          />
+        )}
+
         <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
       </div>
     </div>

package/src/components/Rack/RackTile.tsx

@@ -14,7 +14,14 @@ import { useDispatch } from 'react-redux';
 
 import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { TILE_SIZE } from 'parameters';
-import { rackSlice, selectCharacterPoints, selectConfig, useTranslate, useTypedSelector } from 'state';
+import {
+  rackSlice,
+  selectCharacterIsValid,
+  selectCharacterPoints,
+  selectConfig,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import Tile from '../Tile';
 
@@ -43,6 +50,7 @@ const RackTile: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const config = useTypedSelector(selectConfig);
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
+  const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
 
   const handleFocus = useCallback(() => {
     activeIndexRef.current = index;
@@ -88,6 +96,7 @@ const RackTile: FunctionComponent<Props> = ({
       highlighted={tile !== null}
       inputRef={inputRef}
       isBlank={character === BLANK}
+      isValid={isValid}
       key={index}
       placeholder={translate('rack.placeholder')[index]}
       points={points}

package/src/components/RemainingTiles/Character.module.scss

@@ -9,7 +9,6 @@
   }
 
   &.overused {
-    color: red;
     opacity: 1;
 
     .tile {

package/src/components/RemainingTiles/Character.tsx

@@ -37,6 +37,7 @@ const Character: FunctionComponent<Props> = ({ tile }) => {
         className={styles.tile}
         disabled
         isBlank={character === BLANK}
+        isValid={remainingCount >= 0}
         points={points}
         raised
         size={REMAINING_TILES_TILE_SIZE}

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

@@ -0,0 +1,85 @@
+@import 'styles/mixins';
+
+.solver {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.contentWrapper {
+  $board-size: 15;
+  $tile-size-max: 60px;
+  $tile-border-size: 1px;
+
+  flex: 1;
+  padding: 0 var(--spacing--xl);
+  max-height: $board-size * ($tile-size-max + $tile-border-size) + $tile-border-size;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--spacing--xl);
+
+  @include tablet {
+    gap: var(--spacing--l);
+  }
+}
+
+.boardContainer {
+  display: flex;
+  position: relative;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 var(--sidebar--width);
+  gap: var(--spacing--xl);
+
+  @include tablet {
+    gap: var(--spacing--l);
+  }
+}
+
+.dictionary {
+  display: flex;
+  flex-direction: column;
+}
+
+.dictionaryOutput {
+  flex: 1;
+  border-bottom: var(--border);
+}
+
+.dictionaryInput {
+  flex: 0 0 auto;
+}
+
+.resultsContainer {
+  flex: 1;
+  position: relative;
+}
+
+.rackContainer {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: center;
+  margin: var(--spacing--xl) var(--spacing--l);
+
+  @include tablet {
+    margin: var(--spacing--l);
+  }
+}
+
+.rack {
+  border: var(--border);
+}
+
+.submitInput {
+  display: none;
+}

package/src/components/Solver/Solver.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { FormEvent, FunctionComponent } from 'react';
+import { useDispatch } from 'react-redux';
+import { useMeasure } from 'react-use';
+
+import { useIsTablet } from 'hooks';
+import { getCellSize } from 'lib';
+import { COMPONENTS_SPACING, COMPONENTS_SPACING_MOBILE, DICTIONARY_HEIGHT } from 'parameters';
+import { selectConfig, solveSlice, useTypedSelector } from 'state';
+
+import Board from '../Board';
+import Dictionary from '../Dictionary';
+import DictionaryInput from '../DictionaryInput';
+import Rack from '../Rack';
+import Results from '../Results';
+import Well from '../Well';
+
+import styles from './Solver.module.scss';
+
+interface Props {
+  className?: string;
+}
+
+const Solver: FunctionComponent<Props> = ({ className }) => {
+  const dispatch = useDispatch();
+  const isTablet = useIsTablet();
+  const [boardRef, { height: boardHeight }] = useMeasure<HTMLDivElement>();
+  const [contentRef, { height: contentHeight, width: contentWidth }] = useMeasure<HTMLDivElement>();
+  const [resultsContainerRef, { height: resultsContainerHeight, width: resultsContainerWidth }] =
+    useMeasure<HTMLDivElement>();
+  const config = useTypedSelector(selectConfig);
+  const cellSize = getCellSize(config, contentWidth - resultsContainerWidth, contentHeight);
+  const componentsSpacing = isTablet ? COMPONENTS_SPACING_MOBILE : COMPONENTS_SPACING;
+  const resultsHeight = boardHeight - DICTIONARY_HEIGHT - componentsSpacing;
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    dispatch(solveSlice.actions.submit());
+  };
+
+  return (
+    <div className={classNames(styles.solver, className)}>
+      <div className={styles.contentWrapper}>
+        <div className={styles.content} ref={contentRef}>
+          <form className={styles.boardContainer} onSubmit={handleSubmit}>
+            {contentWidth > 0 && <Board cellSize={cellSize} innerRef={boardRef} />}
+            <input className={styles.submitInput} tabIndex={-1} type="submit" />
+          </form>
+
+          <div className={styles.sidebar} style={{ height: boardHeight + 1 }}>
+            <Well className={styles.resultsContainer} ref={resultsContainerRef}>
+              {resultsContainerWidth > 0 && resultsContainerHeight > 0 && (
+                <Results height={resultsHeight} width={resultsContainerWidth} />
+              )}
+            </Well>
+
+            <Well>
+              <div className={styles.dictionary} style={{ height: DICTIONARY_HEIGHT }}>
+                <Dictionary className={styles.dictionaryOutput} />
+                <DictionaryInput className={styles.dictionaryInput} />
+              </div>
+            </Well>
+          </div>
+        </div>
+      </div>
+
+      <form className={styles.rackContainer} onSubmit={handleSubmit}>
+        <Rack className={styles.rack} />
+        <input className={styles.submitInput} tabIndex={-1} type="submit" />
+      </form>
+    </div>
+  );
+};
+
+export default Solver;

package/src/components/Solver/index.ts

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