@scrabble-solver/scrabble-solver 2.9.0 → 2.9.2

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2021 Kamil Mielnik <kamil.adam.mielnik@gmail.com>
+Copyright (c) 2022 Kamil Mielnik <kamil@kamilmielnik.com>
 
 Attribution-NonCommercial-NoDerivatives 4.0 International
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.9.0",
+  "version": "2.9.2",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -11,8 +11,8 @@
   },
   "author": {
     "name": "Kamil Mielnik",
-    "email": "kamil.adam.mielnik@gmail.com",
-    "url": "https://kamilmielnik.com/"
+    "email": "kamil@kamilmielnik.com",
+    "url": "https://kamilmielnik.com"
   },
   "license": "CC BY-NC-ND 4.0",
   "bugs": {
@@ -31,13 +31,13 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.6",
-    "@scrabble-solver/configs": "^2.9.0",
-    "@scrabble-solver/constants": "^2.9.0",
-    "@scrabble-solver/dictionaries": "^2.9.0",
-    "@scrabble-solver/logger": "^2.9.0",
-    "@scrabble-solver/solver": "^2.9.0",
-    "@scrabble-solver/types": "^2.9.0",
-    "@scrabble-solver/word-definitions": "^2.9.0",
+    "@scrabble-solver/configs": "^2.9.2",
+    "@scrabble-solver/constants": "^2.9.2",
+    "@scrabble-solver/dictionaries": "^2.9.2",
+    "@scrabble-solver/logger": "^2.9.2",
+    "@scrabble-solver/solver": "^2.9.2",
+    "@scrabble-solver/types": "^2.9.2",
+    "@scrabble-solver/word-definitions": "^2.9.2",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -74,5 +74,5 @@
     "sass": "^1.55.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "f100d9d52460a68f1fb5a1059cd335029d5e46a8"
+  "gitHead": "f50d782088cb89544f0c2c504f31fca81a6ff409"
 }

package/src/components/Board/BoardPure.tsx

@@ -44,13 +44,7 @@ const BoardPure: FunctionComponent<Props> = ({
   onKeyDown,
   onPaste,
 }) => (
-  <div
-    className={classNames(styles.board, className)}
-    ref={innerRef}
-    onChange={onChange}
-    onKeyDown={onKeyDown}
-    onPaste={onPaste}
-  >
+  <div className={classNames(styles.board, className)} ref={innerRef} onKeyDown={onKeyDown} onPaste={onPaste}>
     {rows.map((cells, y) => (
       <div className={styles.row} key={y}>
         {cells.map((cell, x) => (
@@ -62,6 +56,7 @@ const BoardPure: FunctionComponent<Props> = ({
             isCenter={center.x === x && center.y === y}
             key={x}
             size={cellSize}
+            onChange={onChange}
             onDirectionToggle={onDirectionToggle}
             onFocus={onFocus}
           />

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

@@ -213,7 +213,7 @@ $icon-size: 16px;
 
 .flag,
 .star {
-  $size: 24px;
+  $size: 50%;
 
   width: $size;
   height: $size;

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

@@ -1,6 +1,6 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell as CellModel } from '@scrabble-solver/types';
-import { FunctionComponent, RefObject, useCallback, useMemo } from 'react';
+import { ChangeEventHandler, FunctionComponent, RefObject, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';
@@ -23,6 +23,7 @@ interface Props {
   inputRef: RefObject<HTMLInputElement>;
   isCenter: boolean;
   size: number;
+  onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
 }
@@ -34,6 +35,7 @@ const Cell: FunctionComponent<Props> = ({
   inputRef,
   isCenter,
   size,
+  onChange,
   onDirectionToggle,
   onFocus,
 }) => {
@@ -88,6 +90,7 @@ const Cell: FunctionComponent<Props> = ({
       style={style}
       tile={tile}
       translate={translate}
+      onChange={onChange}
       onDirectionToggleClick={handleDirectionToggleClick}
       onFocus={handleFocus}
       onToggleBlankClick={handleToggleBlankClick}

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

@@ -1,6 +1,14 @@
 import { Bonus, Cell, Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, FunctionComponent, memo, MouseEventHandler, RefObject } from 'react';
+import {
+  ChangeEventHandler,
+  CSSProperties,
+  FocusEventHandler,
+  FunctionComponent,
+  memo,
+  MouseEventHandler,
+  RefObject,
+} from 'react';
 
 import { ArrowDown, Flag, Star } from 'icons';
 import { Translate } from 'types';
@@ -25,6 +33,7 @@ interface Props {
   style?: CSSProperties;
   tile: TileModel;
   translate: Translate;
+  onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggleClick: MouseEventHandler<HTMLButtonElement>;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onToggleBlankClick: MouseEventHandler<HTMLButtonElement>;
@@ -45,6 +54,7 @@ const CellPure: FunctionComponent<Props> = ({
   style,
   tile,
   translate,
+  onChange,
   onDirectionToggleClick,
   onFocus,
   onToggleBlankClick,
@@ -78,6 +88,7 @@ const CellPure: FunctionComponent<Props> = ({
       raised={!isEmpty}
       size={size}
       tabIndex={cell.x === 0 && cell.y === 0 ? undefined : -1}
+      onChange={onChange}
       onFocus={onFocus}
     />
 

package/src/components/Dictionary/Dictionary.module.scss

@@ -53,6 +53,7 @@
 
 .definition {
   margin-bottom: var(--spacing--s);
+  white-space: pre-wrap;
 
   &:last-child {
     margin-bottom: 0;

package/src/components/Dictionary/Dictionary.tsx

@@ -31,7 +31,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         </EmptyState>
       )}
 
-      {results.map(({ definitions, isAllowed, word }) => (
+      {results.map(({ definitions, exists, isAllowed, word }) => (
         <div
           className={classNames(styles.result, {
             [styles.isAllowed]: isAllowed === true,
@@ -51,7 +51,12 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
 
               {isAllowed === true && (
                 <>
-                  {definitions.length === 0 && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
+                  {definitions.length === 0 && (
+                    <>
+                      {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
+                      {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
+                    </>
+                  )}
 
                   {definitions.length > 0 && (
                     <ul className={styles.definitions}>

package/src/components/Splash/Splash.module.scss

@@ -1,6 +1,6 @@
 @import 'styles/animations';
 
-$loading-duration: 450ms;
+$loading-duration: 250ms;
 $loaded-duration: 100ms;
 $hiding-duration: 200ms;
 

package/src/i18n/en.json

@@ -15,9 +15,9 @@
   "common.word": "Word",
   "common.words": "Words",
   "dictionary.empty-state.no-definitions": "Word exists in the dictionary but it does not have a definition.",
-  "dictionary.empty-state.no-results": "Unable to find word definition in dictionary.",
+  "dictionary.empty-state.no-results": "Unable to find word definition in the dictionary.",
   "dictionary.empty-state.not-allowed": "This word is not allowed.",
-  "dictionary.empty-state.uninitialized": "Dictionary definition of the last highlighted word will be shown here.",
+  "dictionary.empty-state.uninitialized": "Dictionary definition of the most recently highlighted word will be shown here.",
   "dictionary.input.placeholder": "Search dictionary...",
   "empty-state.error": "Error",
   "empty-state.info": "Info",

package/src/pages/api/dictionary/[locale]/[word].ts

@@ -1,4 +1,5 @@
 import { scrabble } from '@scrabble-solver/configs';
+import { dictionaries } from '@scrabble-solver/dictionaries';
 import logger from '@scrabble-solver/logger';
 import { isLocale, Locale } from '@scrabble-solver/types';
 import { getWordDefinition } from '@scrabble-solver/word-definitions';
@@ -27,7 +28,8 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
       },
     });
 
-    const results = await Promise.all(words.map((word) => getWordDefinition(locale, word)));
+    const trie = await dictionaries.get(locale);
+    const results = await Promise.all(words.map((word) => getWordDefinition(locale, word, trie.has(word))));
     response.status(200).send(results.map((result) => result.toJson()));
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/src/pages/index.tsx

@@ -48,7 +48,8 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     useMeasure<HTMLDivElement>();
   const config = useTypedSelector(selectConfig);
   const cellSize = getCellSize(config, contentWidth - resultsContainerWidth, contentHeight);
-  const isInitialized = contentWidth > 0 && boardHeight > 0 && resultsContainerWidth > 0;
+  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 handleClear = () => {
@@ -71,6 +72,10 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
   useEffectOnce(() => {
     dispatch(initialize());
+
+    setTimeout(() => {
+      setIsInitialized(true);
+    }, 100);
   });
 
   useEffect(() => {

package/src/service-worker/dictionaries/constants.ts

@@ -1,3 +1,5 @@
 export const DICTIONARY_CACHE = 'dictionary-api-cache';
 
-export const DICTIONARY_CACHE_MAX_AGE = 30 * 24 * 60 * 60 * 1000;
+export const DAY = 24 * 60 * 60 * 1000;
+
+export const DICTIONARY_CACHE_MAX_AGE = 1 * DAY; // eslint-disable-line no-implicit-coercion