scrabble-solver 2.10.2 → 2.10.4

package/packages/scrabble-solver/src/pages/index.tsx

@@ -2,33 +2,42 @@ import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
 import { AnimationEvent, FunctionComponent, useEffect, useState } from 'react';
-import Modal from 'react-modal';
+import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
-import { useEffectOnce } from 'react-use';
+import { useEffectOnce, useMeasure } from 'react-use';
 
-import { KeyMap, Logo, NavButtons, RemainingTiles, Settings, Solver, Splash, SvgFontFix, Words } from 'components';
-import { useDirection, useLanguage, useLocalStorage } from 'hooks';
+import { Logo, LogoSplashScreen, NavButtons, Solver, SvgFontFix } from 'components';
+import { useDirection, useLanguage, useLocalStorage, useMediaQuery } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
+import { KeyMapModal, MenuModal, RemainingTilesModal, ResultsModal, SettingsModal, WordsModal } from 'modals';
 import { INITIALIZATION_DURATION } from 'parameters';
 import { registerServiceWorker } from 'serviceWorkerManager';
 import { initialize, localStorage, reset, selectLocale, useTypedSelector } from 'state';
 
 import styles from './index.module.scss';
 
-Modal.setAppElement('#__next');
+ReactModal.setAppElement('#__next');
 
 interface Props {
   version: string;
 }
 
+// eslint-disable-next-line max-statements
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
+  const isLessThanL = useMediaQuery('<l');
   const [showKeyMap, setShowKeyMap] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
   const [showRemainingTiles, setShowRemainingTiles] = useState(false);
+  const [showResults, setShowResults] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showWords, setShowWords] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
+  const [indexRef, { height: indexHeight, width: indexWidth }] = useMeasure<HTMLDivElement>();
+  const [navRef, { height: navHeight }] = useMeasure<HTMLDivElement>();
+  const solverHeight = indexHeight - navHeight;
+  const solverWidth = indexWidth;
 
   const handleClear = () => {
     dispatch(reset());
@@ -48,11 +57,17 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   useEffectOnce(() => {
     dispatch(initialize());
 
-    setTimeout(() => {
+    globalThis.setTimeout(() => {
       setIsInitialized(true);
     }, INITIALIZATION_DURATION);
   });
 
+  useEffect(() => {
+    if (!isLessThanL) {
+      setShowResults(false);
+    }
+  }, [isLessThanL]);
+
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
       registerServiceWorker();
@@ -63,31 +78,53 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     <>
       <SvgFontFix />
 
-      <div className={classNames(styles.index, { [styles.initialized]: isInitialized })}>
-        <div className={styles.nav}>
-          <div className={styles.navLogo}>
-            <a className={styles.logoContainer} href="/" title={version}>
-              <Logo className={styles.logo} />
-            </a>
+      <div className={classNames(styles.index, { [styles.initialized]: isInitialized })} ref={indexRef}>
+        <div className={styles.nav} ref={navRef}>
+          <div className={styles.navContent}>
+            <div className={styles.navLogo}>
+              <a className={styles.logoContainer} href="/" title={version}>
+                <Logo className={styles.logo} />
+              </a>
+            </div>
+
+            <NavButtons
+              onClear={handleClear}
+              onShowKeyMap={() => setShowKeyMap(true)}
+              onShowMenu={() => setShowMenu(true)}
+              onShowRemainingTiles={() => setShowRemainingTiles(true)}
+              onShowSettings={() => setShowSettings(true)}
+              onShowWords={() => setShowWords(true)}
+            />
           </div>
-
-          <NavButtons
-            onClear={handleClear}
-            onShowKeyMap={() => setShowKeyMap(true)}
-            onShowRemainingTiles={() => setShowRemainingTiles(true)}
-            onShowSettings={() => setShowSettings(true)}
-            onShowWords={() => setShowWords(true)}
-          />
         </div>
 
-        <Solver className={styles.solver} />
+        <Solver
+          className={styles.solver}
+          height={solverHeight}
+          width={solverWidth}
+          onShowResults={() => setShowResults(true)}
+        />
       </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} />
+      <MenuModal
+        isOpen={showMenu}
+        onClose={() => setShowMenu(false)}
+        onShowRemainingTiles={() => setShowRemainingTiles(true)}
+        onShowSettings={() => setShowSettings(true)}
+        onShowWords={() => setShowWords(true)}
+      />
+
+      <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
+
+      <KeyMapModal isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
+
+      <WordsModal isOpen={showWords} onClose={() => setShowWords(false)} />
+
+      <RemainingTilesModal isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
+
+      <ResultsModal isOpen={showResults} onClose={() => setShowResults(false)} />
+
+      <LogoSplashScreen forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />
     </>
   );
 };

package/packages/scrabble-solver/src/parameters/index.ts

@@ -1,3 +1,11 @@
+export const BREAKPOINTS = {
+  xs: 480,
+  s: 768,
+  m: 992,
+  l: 1200,
+  xl: 1400,
+};
+
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
 export const INITIALIZATION_DURATION = 100;
@@ -11,15 +19,24 @@ export const COLOR_RED = '#f7c2aa';
 export const COLOR_YELLOW = '#efe3ae';
 
 export const COMPONENTS_SPACING = 40;
-export const COMPONENTS_SPACING_MOBILE = 20;
+export const COMPONENTS_SPACING_SMALL = 20;
 
 export const BOARD_CELL_BORDER_WIDTH = 1;
 export const BOARD_TILE_FONT_SIZE_MIN = 14;
 export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
 export const BOARD_TILE_SIZE_MAX = 64;
-export const BOARD_TILE_SIZE_MIN = 32;
+/**
+ * 20 - fits all board tiles without horizontal scrollbar on 360px viewport width (font-size: 14px)
+ * 21 - fits all board tiles without horizontal scrollbar on 375px viewport width (font-size: 14px)
+ * 26 - tiles start to look good (font-size: 16px)
+ */
+export const BOARD_TILE_SIZE_MIN = 20;
+
+export const BORDER_WIDTH = 1;
 
-export const DICTIONARY_HEIGHT = 220;
+export const COLUMN_MIN_HEIGHT = 588.5;
+
+export const DICTIONARY_HEIGHT = 260;
 
 export const TILE_SIZE = 80;
 
@@ -45,8 +62,13 @@ export const PLAIN_TILES_TILE_SIZE = 80;
 export const PLAIN_TILES_VERSION_TILE_COLOR = COLOR_GREEN;
 export const PLAIN_TILES_VERSION_TILE_SIZE = TILE_SIZE;
 
+export const PROGRESS_COLOR_VALUE = 'var(--color--violet--light)';
+export const PROGRESS_COLOR_BACKGROUND = 'var(--color--inactive)';
+
+export const RACK_TILE_SIZE_MAX = 80;
+
 export const REMAINING_TILES_TILE_SIZE = 50;
 
-export const RESULTS_HEADER_HEIGHT = 35;
-export const RESULTS_ITEM_HEIGHT = 34;
-export const RESULTS_INPUT_HEIGHT = 43;
+export const RESULTS_HEADER_HEIGHT = 34;
+export const RESULTS_ITEM_HEIGHT = 40;
+export const RESULTS_INPUT_HEIGHT = 40;

package/packages/scrabble-solver/src/state/createAppStore.ts

@@ -1,4 +1,4 @@
-import { createStore, applyMiddleware } from 'redux';
+import { applyMiddleware, compose, createStore } from 'redux';
 import reduxSaga from 'redux-saga';
 
 import rootReducer from './rootReducer';
@@ -8,12 +8,15 @@ import { RootState } from './types';
 const sagaMiddleware = reduxSaga();
 const initialState: Partial<RootState> | undefined = undefined;
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line no-underscore-dangle
+const composeEnhancers = globalThis.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
 const createAppStore = (): ReturnType<typeof createStore> => {
-  const store = createStore(rootReducer, initialState, createEnhancer());
+  const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(sagaMiddleware)));
   sagaMiddleware.run(rootSaga);
   return store;
 };
 
-const createEnhancer = () => applyMiddleware(sagaMiddleware);
-
 export default createAppStore;

package/packages/scrabble-solver/src/styles/mixins.scss

@@ -1,12 +1,16 @@
-@mixin tablet {
-  @media (max-width: 1024px) {
-    @content;
-  }
+@import 'include-media';
 
-  @media (max-height: 800px) {
-    @content;
-  }
-}
+$breakpoints: (
+  xs: 480px,
+  s: 768px,
+  m: 992px,
+  l: 1200px,
+  xl: 1400px,
+);
+
+$media-expressions: (
+  touch: '(hover: none)',
+);
 
 /**
  * It does not work when applied on input elements.
@@ -24,7 +28,7 @@
     z-index: 1;
     transition: var(--transition);
     border-radius: var(--border--radius);
-    box-shadow: 0 0 0 var(--focus--box-shadow--size) transparent;
+    box-shadow: 0 0 0 var(--box-shadow--focus--spread) transparent;
     pointer-events: none;
   }
 
@@ -35,7 +39,7 @@
     }
 
     &:after {
-      box-shadow: 0 0 0 var(--focus--box-shadow--size) var(--color--focus);
+      box-shadow: 0 0 0 var(--box-shadow--focus--spread) var(--color--focus);
     }
   }
 }
@@ -65,12 +69,10 @@
 
 @mixin text-input {
   width: 100%;
-  min-height: var(--text-input--height);
   height: var(--text-input--height);
-  max-height: var(--text-input--height);
   padding: 0 var(--spacing--l);
   transition: var(--transition);
-  font-size: var(--font--size--s);
+  font-size: var(--font--size--m);
   font-family: var(--font--family);
 }
 

package/packages/scrabble-solver/src/styles/variables.scss

@@ -13,24 +13,19 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --box-shadow--offset--negative: calc(-1 * var(--box-shadow--offset));
   --box-shadow--color: #{rgba(#000, 0.15)};
   --box-shadow: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--box-shadow--color);
+  --box-shadow--focus--spread: 6px;
   --box-shadow--null: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) transparent;
-  --box-shadow--top: 0 var(--box-shadow--offset--negative) var(--box-shadow--blur) var(--box-shadow--spread)
-    var(--box-shadow--color);
-  --box-shadow--bottom: 0 var(--box-shadow--offset) var(--box-shadow--blur) var(--box-shadow--spread)
-    var(--box-shadow--color);
-  --box-shadow--left: var(--box-shadow--offset--negative) 0 var(--box-shadow--blur) var(--box-shadow--spread)
-    var(--box-shadow--color);
-  --box-shadow--right: var(--box-shadow--offset) 0 var(--box-shadow--blur) var(--box-shadow--spread)
-    var(--box-shadow--color);
   --box-shadow--error: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--color--error);
 
   --color--background: #f4f4f4;
   --color--background--secondary: #111;
   --color--background--overlay: rgba(255, 255, 255, 0.65);
-  --color--error: #fc3d3d;
+  --color--error: hsl(0deg, 92%, 62%);
   --color--success: #00a900;
+  --color--info: var(--color--dark-blue);
+  --color--warning: hsl(35deg, 90%, 60%);
   --color--focus: #{rgba(#268fff, 0.5)};
-  --color--foreground: black;
+  --color--foreground: #222;
   --color--foreground--secondary: #444;
   --color--inactive: #cdcdcd;
   --color--primary: var(--color--violet);
@@ -59,11 +54,11 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --font--size--h2: 22px;
   --font--size--h3: 18px;
   --font--size--m: 16px;
-  --font--size--s: 14px;
-  --font--size--xs: 12px;
 
   --line-height: 1.5;
 
+  --opacity--disabled: 0.3;
+
   --spacing--xs: 2px;
   --spacing--s: 5px;
   --spacing--m: 10px;
@@ -76,12 +71,15 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --transition--easing: #{$easeOutSine};
   --transition: all var(--transition--duration) var(--transition--easing);
 
-  --focus--box-shadow--size: 6px;
+  --z-index--modal: 100;
+  --z-index--close-button: 101;
 
-  --sidebar--width: 580px;
-  --dictionary--height: 220px;
-  --square-button-size: 32px;
-  --text-input--height: 42px;
+  --dictionary--height: 260px;
+  --modal--width: 370px;
+  --solver-column--width: 580px;
+  --square-button--size: 32px;
+  --button--icon--size: 24px;
+  --text-input--height: 40px;
   --tooltip--background: #222;
   --tooltip--foreground: #fff;
 }

package/packages/scrabble-solver/src/types/index.ts

@@ -68,8 +68,10 @@ export type TranslationKey =
   | 'keyMap.board-and-rack.submit'
   | 'keyMap.rack'
   | 'keyMap.rack.insert-blank'
+  | 'menu'
   | 'rack.placeholder'
   | 'remaining-tiles'
+  | 'results'
   | 'results.empty-state.no-filtered-results'
   | 'results.empty-state.no-results'
   | 'results.empty-state.outdated'

package/packages/scrabble-solver/tsconfig.json

@@ -15,6 +15,7 @@
       "icons": ["./src/icons"],
       "i18n": ["./src/i18n"],
       "lib": ["./src/lib"],
+      "modals": ["./src/modals"],
       "pages": ["./src/pages"],
       "parameters": ["./src/parameters"],
       "sdk": ["./src/sdk"],

package/packages/solver/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@scrabble-solver/solver",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@scrabble-solver/solver",
-      "version": "2.10.2",
+      "version": "2.10.4",
       "license": "CC-BY-NC-ND-4.0",
       "dependencies": {
         "@kamilmielnik/trie": "^2.0.1"

package/packages/solver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/solver",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Scrabble Solver 2 - Solver",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -25,12 +25,12 @@
   },
   "dependencies": {
     "@kamilmielnik/trie": "^2.0.1",
-    "@scrabble-solver/types": "^2.10.2"
+    "@scrabble-solver/types": "^2.10.4"
   },
   "devDependencies": {
-    "@scrabble-solver/configs": "^2.10.2",
-    "@scrabble-solver/constants": "^2.10.2",
-    "@scrabble-solver/dictionaries": "^2.10.2"
+    "@scrabble-solver/configs": "^2.10.4",
+    "@scrabble-solver/constants": "^2.10.4",
+    "@scrabble-solver/dictionaries": "^2.10.4"
   },
   "gitHead": "1e2d1ad49a288d4a44196d8e3336740da132c637"
 }

package/packages/types/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@scrabble-solver/types",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@scrabble-solver/types",
-      "version": "2.10.2",
+      "version": "2.10.4",
       "license": "CC-BY-NC-ND-4.0",
       "dependencies": {
-        "@scrabble-solver/constants": "^2.10.2"
+        "@scrabble-solver/constants": "^2.10.4"
       }
     },
     "node_modules/@scrabble-solver/constants": {

package/packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/types",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Scrabble Solver 2 - Types",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,7 +24,7 @@
     "clean:force": "npm run clean && rimraf package-lock.json"
   },
   "dependencies": {
-    "@scrabble-solver/constants": "^2.10.2"
+    "@scrabble-solver/constants": "^2.10.4"
   },
   "gitHead": "1e2d1ad49a288d4a44196d8e3336740da132c637"
 }

package/packages/word-definitions/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@scrabble-solver/word-definitions",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@scrabble-solver/word-definitions",
-      "version": "2.10.2",
+      "version": "2.10.4",
       "license": "CC-BY-NC-ND-4.0",
       "dependencies": {
         "cheerio": "^1.0.0-rc.12",
@@ -27,9 +27,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "version": "18.14.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
+      "integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==",
       "dev": true
     },
     "node_modules/boolbase": {
@@ -249,9 +249,9 @@
       }
     },
     "@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "version": "18.14.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
+      "integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A==",
       "dev": true
     },
     "boolbase": {

package/packages/word-definitions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/word-definitions",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Scrabble Solver 2 - Word definitions",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,7 +23,7 @@
     "clean": "rimraf build/ node_modules/ package-lock.json"
   },
   "dependencies": {
-    "@scrabble-solver/types": "^2.10.2",
+    "@scrabble-solver/types": "^2.10.4",
     "cheerio": "^1.0.0-rc.12",
     "follow-redirects": "^1.15.2",
     "striptags": "^3.2.0"

package/packages/word-lists/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@scrabble-solver/word-lists",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@scrabble-solver/word-lists",
-      "version": "2.10.2",
+      "version": "2.10.4",
       "license": "CC-BY-NC-ND-4.0",
       "dependencies": {
         "cheerio": "^1.0.0-rc.12",

package/packages/word-lists/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/word-lists",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Scrabble Solver 2 - Word lists",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,7 +24,7 @@
     "clean:force": "npm run clean && rimraf package-lock.json"
   },
   "dependencies": {
-    "@scrabble-solver/types": "^2.10.2",
+    "@scrabble-solver/types": "^2.10.4",
     "cheerio": "^1.0.0-rc.12",
     "follow-redirects": "^1.15.2",
     "unzipper": "^0.10.11"

package/packages/scrabble-solver/.next/static/FjrbXpI5fkt4lmko-vL_7/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,e,a){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,e,a,"static/css/aafd07997120f1e4.css","static/chunks/pages/index-1e30dafa41bddb80.js"],"/404":[s,e,a,"static/chunks/pages/404-24f9617eeb8d6dc1.js"],"/_error":["static/chunks/pages/_error-8353112a01355ec2.js"],sortedPages:["/","/404","/_app","/_error"]}}("static/chunks/724-eb48df4d1ba3df8b.js","static/css/c8d26240c04079b9.css","static/chunks/361-d16f336a9752a55a.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();