@scrabble-solver/scrabble-solver 2.10.0 → 2.10.2

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';

package/src/components/Tile/Tile.module.scss

@@ -1,6 +1,10 @@
+@import 'styles/mixins';
+
 .tile {
+  --background-color: transparent;
+
   position: relative;
-  background-color: transparent;
+  background-color: var(--background-color);
   transition: var(--transition);
 
   &.raised {
@@ -8,24 +12,34 @@
   }
 
   &.points1 {
-    background-color: var(--color--yellow);
+    --background-color: var(--color--yellow);
+
+    background-color: var(--background-color);
   }
 
   &.points2 {
-    background-color: var(--color--green);
+    --background-color: var(--color--green);
+
+    background-color: var(--background-color);
   }
 
   &.points3,
   &.points4 {
-    background-color: var(--color--blue);
+    --background-color: var(--color--blue);
+
+    background-color: var(--background-color);
   }
 
   &.points5 {
-    background-color: var(--color--red);
+    --background-color: var(--color--red);
+
+    background-color: var(--background-color);
   }
 
   &.blank {
-    background-color: white;
+    --background-color: white;
+
+    background-color: var(--background-color);
 
     .character {
       color: black;
@@ -33,7 +47,9 @@
   }
 
   &.highlighted {
-    background-color: var(--color--primary);
+    --background-color: var(--color--primary);
+
+    background-color: var(--background-color);
     color: white;
 
     .character {
@@ -44,6 +60,13 @@
       color: inherit;
     }
   }
+
+  &.invalid {
+    --background-color: var(--color--red--light);
+
+    background-color: var(--background-color);
+    color: var(--color--error);
+  }
 }
 
 .character {
@@ -52,6 +75,7 @@
   padding: 0;
   box-sizing: border-box;
   background-color: transparent;
+  color: inherit;
   border: none;
   font-weight: bold;
   text-transform: uppercase;
@@ -72,6 +96,8 @@
 }
 
 .points {
+  @include text-stroke(var(--background-color), 1px);
+
   position: absolute;
   font-weight: bold;
   user-select: none;
@@ -88,3 +114,21 @@
     left: 9%;
   }
 }
+
+.alert {
+  $size: 30%;
+
+  position: absolute;
+  width: $size;
+  height: $size;
+
+  [dir='ltr'] & {
+    top: 0;
+    right: 0;
+  }
+
+  [dir='rtl'] & {
+    bottom: 0;
+    right: 0;
+  }
+}

package/src/components/Tile/Tile.tsx

@@ -23,6 +23,7 @@ interface Props {
   highlighted?: boolean;
   inputRef?: RefObject<HTMLInputElement>;
   isBlank?: boolean;
+  isValid?: boolean;
   placeholder?: string;
   points?: number;
   raised?: boolean;
@@ -41,6 +42,7 @@ const Tile: FunctionComponent<Props> = ({
   highlighted,
   inputRef: ref,
   isBlank,
+  isValid,
   placeholder,
   points,
   raised,
@@ -82,6 +84,7 @@ const Tile: FunctionComponent<Props> = ({
       inputRef={inputRef}
       inputStyle={inputStyle}
       isBlank={isBlank}
+      isValid={isValid}
       placeholder={placeholder}
       points={points}
       pointsFormatted={pointsFormatted}

package/src/components/Tile/TilePure.tsx

@@ -9,6 +9,8 @@ import {
   RefObject,
 } from 'react';
 
+import { ExclamationSquareFill } from 'icons';
+
 import styles from './Tile.module.scss';
 
 interface Props {
@@ -21,6 +23,7 @@ interface Props {
   inputRef: RefObject<HTMLInputElement>;
   inputStyle?: CSSProperties;
   isBlank?: boolean;
+  isValid?: boolean;
   placeholder?: string;
   points?: number;
   pointsFormatted?: string;
@@ -43,6 +46,7 @@ const TilePure: FunctionComponent<Props> = ({
   inputRef,
   inputStyle,
   isBlank,
+  isValid,
   placeholder,
   points,
   pointsFormatted,
@@ -56,8 +60,9 @@ const TilePure: FunctionComponent<Props> = ({
 }) => (
   <div
     className={classNames(styles.tile, className, {
-      [styles.highlighted]: highlighted,
       [styles.blank]: isBlank,
+      [styles.highlighted]: highlighted,
+      [styles.invalid]: !isValid,
       [styles.raised]: raised,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
@@ -90,6 +95,8 @@ const TilePure: FunctionComponent<Props> = ({
         {pointsFormatted}
       </span>
     )}
+
+    {!isValid && <ExclamationSquareFill className={styles.alert} />}
   </div>
 );
 

package/src/components/index.ts

@@ -20,6 +20,7 @@ export { default as ResultsInput } from './ResultsInput';
 export { default as Screen } from './Screen';
 export { default as Settings } from './Settings';
 export { default as Sidebar } from './Sidebar';
+export { default as Solver } from './Solver';
 export { default as Splash } from './Splash';
 export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export { default as useDirection } from './useDirection';
 export { default as useIsTablet } from './useIsTablet';
+export { default as useIsTouchDevice } from './useIsTouchDevice';
 export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as usePortal } from './usePortal';

package/src/hooks/useIsTouchDevice.ts

@@ -0,0 +1,7 @@
+import { useMedia } from 'react-use';
+
+const useIsTouchDevice = () => {
+  return useMedia('(hover: none)', false);
+};
+
+export default useIsTouchDevice;

package/src/i18n/fr.json

@@ -40,7 +40,7 @@
   "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
   "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",
-  "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",
+  "results.empty-state.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",
   "results.input.placeholder": "Rechercher les résultats... (RegExp)",
   "results.solve": "Résoudre",
   "settings": "Options",

package/src/icons/ExclamationSquareFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/exclamation-square-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -11,6 +11,7 @@ export { default as Cross } from './Cross.svg';
 export { default as CrossFill } from './CrossFill.svg';
 export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
+export { default as ExclamationSquareFill } from './ExclamationSquareFill.svg';
 export { default as Flag } from './Flag.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';

package/src/lib/getRemainingTilesGroups.ts

@@ -8,32 +8,29 @@ import getTotalRemainingTilesCount from './getTotalRemainingTilesCount';
 const getRemainingTilesGroups = (remainingTiles: RemainingTile[]): RemainingTilesGroup[] => {
   const consonants = remainingTiles.filter(isConsonant);
   const vowels = remainingTiles.filter(isVowel);
+  const other = remainingTiles.filter(isOther);
   const groups: RemainingTilesGroup[] = [];
 
-  if (consonants.length + vowels.length > 0) {
-    groups.push({
-      remainingCount: getRemainingTilesCount(vowels),
-      tiles: vowels,
-      translationKey: 'common.vowels',
-      totalCount: getTotalRemainingTilesCount(vowels),
-    });
-
-    groups.push({
-      remainingCount: getRemainingTilesCount(consonants),
-      tiles: consonants,
-      translationKey: 'common.consonants',
-      totalCount: getTotalRemainingTilesCount(consonants),
-    });
-  } else {
-    const tiles = remainingTiles.filter(isLetter);
-
-    groups.push({
-      remainingCount: getRemainingTilesCount(tiles),
-      tiles,
-      translationKey: 'common.tiles',
-      totalCount: getTotalRemainingTilesCount(tiles),
-    });
-  }
+  groups.push({
+    remainingCount: getRemainingTilesCount(vowels),
+    tiles: vowels,
+    translationKey: 'common.vowels',
+    totalCount: getTotalRemainingTilesCount(vowels),
+  });
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(consonants),
+    tiles: consonants,
+    translationKey: 'common.consonants',
+    totalCount: getTotalRemainingTilesCount(consonants),
+  });
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(other),
+    tiles: other,
+    translationKey: 'common.tiles',
+    totalCount: getTotalRemainingTilesCount(other),
+  });
 
   const twoCharacterTiles = remainingTiles.filter(isTwoCharacter);
   const blanks = remainingTiles.filter(isBlank);
@@ -59,10 +56,11 @@ const isConsonant = (tile: RemainingTile): boolean => CONSONANTS.includes(tile.c
 
 const isVowel = (tile: RemainingTile): boolean => VOWELS.includes(tile.character);
 
-const isLetter = (tile: RemainingTile): boolean => !isBlank(tile) && !isTwoCharacter(tile);
-
 const isTwoCharacter = (tile: RemainingTile): boolean => tile.character.length === 2;
 
 const isBlank = (tile: RemainingTile): boolean => tile.character === BLANK;
 
+const isOther = (tile: RemainingTile) =>
+  !isConsonant(tile) && !isVowel(tile) && !isBlank(tile) && !isTwoCharacter(tile);
+
 export default getRemainingTilesGroups;

package/src/pages/index.module.scss

@@ -43,80 +43,6 @@
   }
 }
 
-.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 {
+.solver {
   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/pages/index.tsx

@@ -1,33 +1,17 @@
 import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import { AnimationEvent, FormEvent, FunctionComponent, useEffect, useState } from 'react';
+import { AnimationEvent, FunctionComponent, useEffect, useState } from 'react';
 import Modal from 'react-modal';
 import { useDispatch } from 'react-redux';
-import { useEffectOnce, useMeasure } from 'react-use';
-
-import {
-  Board,
-  Dictionary,
-  DictionaryInput,
-  KeyMap,
-  Logo,
-  NavButtons,
-  Rack,
-  RemainingTiles,
-  Results,
-  Settings,
-  Splash,
-  SvgFontFix,
-  Well,
-  Words,
-} from 'components';
-import { useDirection, useIsTablet, useLanguage, useLocalStorage } from 'hooks';
+import { useEffectOnce } from 'react-use';
+
+import { KeyMap, Logo, NavButtons, RemainingTiles, Settings, Solver, Splash, SvgFontFix, Words } from 'components';
+import { useDirection, useLanguage, useLocalStorage } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { getCellSize } from 'lib';
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_MOBILE, DICTIONARY_HEIGHT } from 'parameters';
+import { INITIALIZATION_DURATION } from 'parameters';
 import { registerServiceWorker } from 'serviceWorkerManager';
-import { initialize, localStorage, reset, selectConfig, selectLocale, solveSlice, useTypedSelector } from 'state';
+import { initialize, localStorage, reset, selectLocale, useTypedSelector } from 'state';
 
 import styles from './index.module.scss';
 
@@ -40,30 +24,16 @@ interface Props {
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
-  const isTablet = useIsTablet();
   const [showKeyMap, setShowKeyMap] = useState(false);
   const [showRemainingTiles, setShowRemainingTiles] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showWords, setShowWords] = useState(false);
-  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 isInitializedInitial = contentWidth > 0 && boardHeight > 0 && resultsContainerWidth > 0;
-  const [isInitialized, setIsInitialized] = useState(isInitializedInitial);
-  const resultsHeight = boardHeight - DICTIONARY_HEIGHT - (isTablet ? COMPONENTS_SPACING_MOBILE : COMPONENTS_SPACING);
+  const [isInitialized, setIsInitialized] = useState(false);
 
   const handleClear = () => {
     dispatch(reset());
   };
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    dispatch(solveSlice.actions.submit());
-  };
-
   const handleSplashAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget && !localStorage.getHasVisited()) {
       setShowSettings(true);
@@ -71,8 +41,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     }
   };
 
-  const { direction } = LOCALE_FEATURES[locale];
-  useDirection(direction);
+  useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
   useLocalStorage();
 
@@ -81,7 +50,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
     setTimeout(() => {
       setIsInitialized(true);
-    }, 100);
+    }, INITIALIZATION_DURATION);
   });
 
   useEffect(() => {
@@ -111,44 +80,13 @@ const Index: FunctionComponent<Props> = ({ version }) => {
           />
         </div>
 
-        <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>
+        <Solver className={styles.solver} />
       </div>
 
       <Settings isOpen={showSettings} onClose={() => setShowSettings(false)} />
-
       <KeyMap isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
-
       <Words isOpen={showWords} onClose={() => setShowWords(false)} />
-
       <RemainingTiles isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
-
       <Splash forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />
     </>
   );