@scrabble-solver/scrabble-solver 2.8.7 → 2.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.7",
+  "version": "2.8.9",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.5",
-    "@scrabble-solver/configs": "^2.8.7",
-    "@scrabble-solver/constants": "^2.8.7",
-    "@scrabble-solver/dictionaries": "^2.8.7",
-    "@scrabble-solver/logger": "^2.8.7",
-    "@scrabble-solver/solver": "^2.8.7",
-    "@scrabble-solver/types": "^2.8.7",
-    "@scrabble-solver/word-definitions": "^2.8.7",
+    "@scrabble-solver/configs": "^2.8.9",
+    "@scrabble-solver/constants": "^2.8.9",
+    "@scrabble-solver/dictionaries": "^2.8.9",
+    "@scrabble-solver/logger": "^2.8.9",
+    "@scrabble-solver/solver": "^2.8.9",
+    "@scrabble-solver/types": "^2.8.9",
+    "@scrabble-solver/word-definitions": "^2.8.9",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -68,5 +68,5 @@
     "env-cmd": "^10.1.0",
     "sass": "^1.55.0"
   },
-  "gitHead": "879bf9b68f27fa3d530d0582fd8fbbcd5c8b150b"
+  "gitHead": "8557cc2c5214e6689a5c59373b228b28f5dd8ed4"
 }

package/src/components/Badge/Badge.module.scss

@@ -0,0 +1,13 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing--xs) var(--spacing--s);
+  border-radius: var(--border--radius);
+  background-color: var(--color--violet--light);
+  box-shadow: va(--box-shadow);
+  line-height: var(--line-height);
+  font-size: var(--font--size--s);
+  font-weight: bold;
+  color: white;
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { FunctionComponent, ReactNode } from 'react';
+
+import styles from './Badge.module.scss';
+
+interface Props {
+  children?: ReactNode;
+  className?: string;
+}
+
+const Badge: FunctionComponent<Props> = ({ children, className }) => (
+  <div className={classNames(styles.badge, className)}>{children}</div>
+);
+
+export default Badge;

package/src/components/Badge/index.ts

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

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

@@ -13,7 +13,6 @@ $icon-size: 16px;
   transition: var(--transition);
   background-clip: padding-box;
 
-  &.bonusStart,
   &.bonusWord2,
   &.bonusWord3 {
     position: relative;
@@ -33,12 +32,7 @@ $icon-size: 16px;
   }
 
   &.bonusStart {
-    background-color: var(--color--red--light);
-
-    &:before {
-      content: '★';
-      color: var(--color--foreground--secondary);
-    }
+    background-color: var(--color--violet--light);
   }
 
   &.bonusCharacter1 {
@@ -168,6 +162,7 @@ $icon-size: 16px;
   }
 
   &,
+  .filterCell,
   .toggleDirection {
     width: $icon-size;
     height: $icon-size;
@@ -180,8 +175,6 @@ $icon-size: 16px;
 }
 
 .toggleDirection {
-  transition: var(--transition);
-
   &.right {
     transform: rotate(-90deg);
   }
@@ -194,3 +187,35 @@ $icon-size: 16px;
     font-weight: bold;
   }
 }
+
+.filterCell {
+  color: var(--color--inactive);
+
+  &.filtered {
+    color: var(--color--foreground--secondary);
+  }
+}
+
+.iconContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flagContainer {
+  background-color: var(--color--primary);
+}
+
+.flag,
+.star {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+  color: white;
+}

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

@@ -4,7 +4,15 @@ import { FunctionComponent, RefObject, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';
-import { boardSlice, selectCellBonus, selectTilePoints, useTranslate, useTypedSelector } from 'state';
+import {
+  boardSlice,
+  cellFilterSlice,
+  selectCellBonus,
+  selectCellIsFiltered,
+  selectTilePoints,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import CellPure from './CellPure';
 
@@ -34,10 +42,19 @@ const Cell: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
+  const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
   const { tileFontSize } = getTileSizes(size);
   const isEmpty = tile.character === EMPTY_CELL;
   const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
 
+  const handleDirectionToggleClick = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+
+    onDirectionToggle();
+  }, [onDirectionToggle]);
+
   const handleFocus = useCallback(() => onFocus(x, y), [x, y, onFocus]);
 
   const handleToggleBlankClick = useCallback(() => {
@@ -48,13 +65,13 @@ const Cell: FunctionComponent<Props> = ({
     dispatch(boardSlice.actions.toggleCellIsBlank({ x, y }));
   }, [dispatch, x, y]);
 
-  const handleDirectionToggleClick = useCallback(() => {
+  const handleToggleFilterCellClick = useCallback(() => {
     if (inputRef.current) {
       inputRef.current.focus();
     }
 
-    onDirectionToggle();
-  }, [onDirectionToggle]);
+    dispatch(cellFilterSlice.actions.toggle({ x, y }));
+  }, [dispatch, x, y]);
 
   return (
     <CellPure
@@ -65,6 +82,7 @@ const Cell: FunctionComponent<Props> = ({
       inputRef={inputRef}
       isCenter={isCenter}
       isEmpty={isEmpty}
+      isFiltered={isFiltered}
       points={points}
       size={size}
       style={style}
@@ -73,6 +91,7 @@ const Cell: FunctionComponent<Props> = ({
       onDirectionToggleClick={handleDirectionToggleClick}
       onFocus={handleFocus}
       onToggleBlankClick={handleToggleBlankClick}
+      onToggleFilterCellClick={handleToggleFilterCellClick}
     />
   );
 };

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

@@ -2,7 +2,7 @@ import { Bonus, Cell, Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, FunctionComponent, memo, MouseEventHandler, RefObject } from 'react';
 
-import { ArrowDown } from 'icons';
+import { ArrowDown, Flag, Star } from 'icons';
 import { Translate } from 'types';
 
 import Tile from '../../../Tile';
@@ -19,6 +19,7 @@ interface Props {
   inputRef: RefObject<HTMLInputElement>;
   isCenter: boolean;
   isEmpty: boolean;
+  isFiltered: boolean;
   points?: number;
   size: number;
   style?: CSSProperties;
@@ -27,6 +28,7 @@ interface Props {
   onDirectionToggleClick: MouseEventHandler<HTMLButtonElement>;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onToggleBlankClick: MouseEventHandler<HTMLButtonElement>;
+  onToggleFilterCellClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 const CellPure: FunctionComponent<Props> = ({
@@ -37,6 +39,7 @@ const CellPure: FunctionComponent<Props> = ({
   inputRef,
   isCenter,
   isEmpty,
+  isFiltered,
   points,
   size,
   style,
@@ -45,6 +48,7 @@ const CellPure: FunctionComponent<Props> = ({
   onDirectionToggleClick,
   onFocus,
   onToggleBlankClick,
+  onToggleFilterCellClick,
 }) => (
   <div
     className={classNames(styles.cell, getBonusClassname(cell, bonus, isCenter), className, {
@@ -52,6 +56,18 @@ const CellPure: FunctionComponent<Props> = ({
     })}
     style={style}
   >
+    {isCenter && (
+      <div className={classNames(styles.iconContainer)}>
+        <Star className={styles.star} />
+      </div>
+    )}
+
+    {isFiltered && (
+      <div className={classNames(styles.iconContainer, styles.flagContainer)}>
+        <Flag className={styles.flag} />
+      </div>
+    )}
+
     <Tile
       className={styles.tile}
       character={isEmpty ? undefined : tile.character}
@@ -74,6 +90,18 @@ const CellPure: FunctionComponent<Props> = ({
         />
       </Button>
 
+      {isEmpty && (
+        <Button
+          className={classNames(styles.filterCell, {
+            [styles.filtered]: isFiltered,
+          })}
+          tooltip={translate('cell.filter-cell')}
+          onClick={onToggleFilterCellClick}
+        >
+          <Flag />
+        </Button>
+      )}
+
       {!isEmpty && (
         <Button
           className={classNames(styles.blank, {

package/src/components/Board/hooks/useGrid.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines, max-statements */
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell } from '@scrabble-solver/types';
 import { createRef, KeyboardEventHandler, RefObject, useCallback, useMemo, useState, useRef } from 'react';

package/src/components/NavButtons/NavButtons.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { Cog, Eraser, Github, Keyboard, Sack } from 'icons';
+import { BookHalf, Cog, Eraser, Github, Keyboard, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
-import { selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
+import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
 import SquareButton from '../SquareButton';
 
@@ -14,27 +14,26 @@ interface Props {
   onShowKeyMap: () => void;
   onShowRemainingTiles: () => void;
   onShowSettings: () => void;
+  onShowWords: () => void;
 }
 
-const NavButtons: FunctionComponent<Props> = ({ onClear, onShowKeyMap, onShowRemainingTiles, onShowSettings }) => {
+const NavButtons: FunctionComponent<Props> = ({
+  onClear,
+  onShowKeyMap,
+  onShowRemainingTiles,
+  onShowSettings,
+  onShowWords,
+}) => {
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
+  const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
 
   return (
     <div className={styles.navButtons}>
-      <SquareButton.Link
-        className={styles.button}
-        href={GITHUB_PROJECT_URL}
-        Icon={Github}
-        rel="noopener noreferrer"
-        target="_blank"
-        tooltip={translate('github')}
-      />
+      <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
 
       <div className={styles.separator} />
 
-      <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
-
       <SquareButton
         className={classNames(styles.button, {
           [styles.error]: hasOverusedTiles,
@@ -44,9 +43,29 @@ const NavButtons: FunctionComponent<Props> = ({ onClear, onShowKeyMap, onShowRem
         onClick={onShowRemainingTiles}
       />
 
+      <SquareButton
+        className={classNames(styles.button, {
+          [styles.error]: hasInvalidWords,
+        })}
+        Icon={BookHalf}
+        tooltip={translate('words')}
+        onClick={onShowWords}
+      />
+
       <div className={styles.separator} />
 
-      <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+      <SquareButton.Link
+        className={styles.button}
+        href={GITHUB_PROJECT_URL}
+        Icon={Github}
+        rel="noopener noreferrer"
+        target="_blank"
+        tooltip={translate('github')}
+      />
+
+      <div className={styles.separator} />
+
+      <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
 
       <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
     </div>

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

@@ -1,11 +1,8 @@
-.group {
-  margin-bottom: var(--spacing--l);
-}
-
 .title {
-  margin-bottom: var(--spacing--m);
-  font-size: var(--font--size--h2);
-  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .content {
@@ -13,3 +10,7 @@
   grid-template-columns: repeat(5, 1fr);
   gap: var(--spacing--m);
 }
+
+.badge {
+  margin-left: var(--spacing--m);
+}

package/src/components/RemainingTiles/RemainingTiles.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent } from 'react';
 
 import { selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 
+import Badge from '../Badge';
 import Sidebar from '../Sidebar';
 
 import Character from './Character';
@@ -20,15 +21,23 @@ const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }
   return (
     <Sidebar className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
       {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => (
-        <div className={styles.group} key={translationKey}>
-          <h2 className={styles.title}>{`${translate(translationKey)} (${remainingCount} / ${totalCount})`}</h2>
-
+        <Sidebar.Section
+          key={translationKey}
+          title={
+            <span className={styles.title}>
+              <span>{translate(translationKey)}</span>
+              <Badge className={styles.badge}>
+                {remainingCount} / {totalCount}
+              </Badge>
+            </span>
+          }
+        >
           <div className={styles.content}>
             {tiles.map((tile) => {
               return <Character key={tile.character} tile={tile} />;
             })}
           </div>
-        </div>
+        </Sidebar.Section>
       ))}
     </Sidebar>
   );

package/src/components/Sidebar/Sidebar.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { FunctionComponent, ReactNode } from 'react';
 import Modal from 'react-modal';
 
-import { Cross } from 'icons';
+import { CrossFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
 import { useTranslate } from 'state';
 
@@ -41,7 +41,7 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
 
           <SquareButton
             className={styles.closeButton}
-            Icon={Cross}
+            Icon={CrossFill}
             tooltip={translate('common.close')}
             onClick={onClose}
           />

package/src/components/Sidebar/components/Section/Section.module.scss

@@ -7,6 +7,5 @@
 .heading {
   margin-bottom: var(--spacing--m);
   font-size: var(--font--size--h2);
-  font-family: var(--font--family--title);
   font-weight: 300;
 }

package/src/components/Sidebar/components/Section/Section.tsx

@@ -6,7 +6,7 @@ import styles from './Section.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
-  title: string;
+  title: ReactNode;
 }
 
 const Section: FunctionComponent<Props> = ({ children, className, title }) => (

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

@@ -18,6 +18,11 @@
   &:active {
     color: var(--color--foreground);
   }
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.25;
+  }
 }
 
 .content {

package/src/components/Words/Words.module.scss

@@ -0,0 +1,35 @@
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.badge {
+  margin-left: var(--spacing--m);
+}
+
+.word {
+  display: flex;
+  align-items: center;
+
+  & + & {
+    margin-top: var(--spacing--s);
+  }
+}
+
+.invalid {
+  color: var(--color--error);
+}
+
+.valid {
+  color: var(--color--success);
+}
+
+.icon {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+  margin-right: var(--spacing--s);
+}

package/src/components/Words/Words.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import { FunctionComponent } from 'react';
+
+import { Check, Cross } from 'icons';
+import { selectVerify, useTranslate, useTypedSelector } from 'state';
+
+import Badge from '../Badge';
+import Sidebar from '../Sidebar';
+
+import styles from './Words.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+  const translate = useTranslate();
+  const { invalidWords, validWords } = useTypedSelector(selectVerify);
+
+  return (
+    <Sidebar className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>
+      <Sidebar.Section
+        title={
+          <span className={styles.title}>
+            <span>{translate('words.invalid')}</span>
+            <Badge className={styles.badge}>{invalidWords.length}</Badge>
+          </span>
+        }
+      >
+        {invalidWords.map((word, index) => (
+          <div className={styles.word} key={index}>
+            <Cross className={classNames(styles.icon, styles.invalid)} /> {word}
+          </div>
+        ))}
+      </Sidebar.Section>
+
+      <Sidebar.Section
+        title={
+          <span className={styles.title}>
+            <span>{translate('words.valid')}</span>
+            <Badge className={styles.badge}>{validWords.length}</Badge>
+          </span>
+        }
+      >
+        {validWords.map((word, index) => (
+          <div className={styles.word} key={index}>
+            <Check className={classNames(styles.icon, styles.valid)} /> {word}
+          </div>
+        ))}
+      </Sidebar.Section>
+    </Sidebar>
+  );
+};
+
+export default Words;

package/src/components/Words/index.ts

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

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
@@ -25,3 +26,4 @@ export { default as SvgFontCss } from './SvgFontCss';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
 export { default as Well } from './Well';
+export { default as Words } from './Words';

package/src/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Zielort - klicken zum Wechseln",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.toggle-direction": "Schreibrichtung - klicken zum Wechseln",
@@ -48,5 +49,8 @@
   "settings.autoGroupTiles.right": "Rechte Seite",
   "settings.autoGroupTiles.null": "Nicht gruppieren",
   "settings.game": "Spiel",
-  "settings.language": "Sprache"
+  "settings.language": "Sprache",
+  "words": "Gebildete Wörter",
+  "words.invalid": "Falsch",
+  "words.valid": "Korrekt"
 }

package/src/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "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.toggle-direction": "Typing direction - click to toggle",
@@ -48,5 +49,8 @@
   "settings.autoGroupTiles.right": "On the right",
   "settings.autoGroupTiles.null": "Do not group",
   "settings.game": "Game",
-  "settings.language": "Language"
+  "settings.language": "Language",
+  "words": "Created words",
+  "words.invalid": "Invalid",
+  "words.valid": "Valid"
 }

package/src/i18n/es.json

@@ -1,4 +1,5 @@
 {
+  "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.toggle-direction": "Dirección de escritura: haga clic para alternar",
@@ -48,5 +49,8 @@
   "settings.autoGroupTiles.right": "A la derecha",
   "settings.autoGroupTiles.null": "No agrupar",
   "settings.game": "Juego",
-  "settings.language": "Idioma"
+  "settings.language": "Idioma",
+  "words": "Palabras creadas",
+  "words.invalid": "Incorrecto",
+  "words.valid": "Correcto"
 }

package/src/i18n/fr.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Destination cible - cliquer pour changer",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.toggle-direction": "Direction d'écriture - cliquer pour changer",
@@ -48,5 +49,8 @@
   "settings.autoGroupTiles.right": "Vers la gauche",
   "settings.autoGroupTiles.null": "Ne pas grouper",
   "settings.game": "Jeu",
-  "settings.language": "Langue"
+  "settings.language": "Langue",
+  "words": "Mots créés",
+  "words.invalid": "Incorrect",
+  "words.valid": "Corriger"
 }

package/src/i18n/pl.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.toggle-direction": "Kierunek wpisywania - kliknij aby zmienić",
@@ -48,5 +49,8 @@
   "settings.autoGroupTiles.right": "Po prawej",
   "settings.autoGroupTiles.null": "Nie grupuj",
   "settings.game": "Gra",
-  "settings.language": "Język"
+  "settings.language": "Język",
+  "words": "Utworzone słowa",
+  "words.invalid": "Niepoprawne",
+  "words.valid": "Poprawne"
 }