@scrabble-solver/scrabble-solver 2.11.6 → 2.11.7

package/src/components/Board/lib/getBonusColor.ts

@@ -0,0 +1,18 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { Bonus } from '@scrabble-solver/types';
+
+import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from 'parameters';
+
+const getBonusColor = (bonus: Bonus): string => {
+  if (bonus.type === BONUS_WORD) {
+    return COLOR_BONUS_WORD[bonus.multiplier];
+  }
+
+  if (bonus.score) {
+    return COLOR_BONUS_CHARACTER[bonus.score];
+  }
+
+  return COLOR_BONUS_CHARACTER_MULTIPLIER[bonus.multiplier];
+};
+
+export default getBonusColor;

package/src/components/Board/lib/index.ts

@@ -1 +1,2 @@
+export { default as getBonusColor } from './getBonusColor';
 export { default as getPositionInGrid } from './getPositionInGrid';

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -1,9 +1,9 @@
-import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { dictionarySlice, selectDictionary, useTranslate, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from 'i18n';
+import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import styles from './DictionaryInput.module.scss';
 
@@ -14,7 +14,9 @@ interface Props {
 const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const { input } = useTypedSelector(selectDictionary);
+  const { comma } = LOCALE_FEATURES[locale];
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     dispatch(dictionarySlice.actions.changeInput(event.target.value));
@@ -29,7 +31,7 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
-        pattern={`.*[^\\s${COMMA_ARABIC}${COMMA_LATIN}].*`}
+        pattern={`.*[^\\s${comma}].*`}
         placeholder={translate('dictionary.input.placeholder')}
         required
         title={translate('dictionary.input.title')}

package/src/components/Results/Cell.tsx

@@ -22,9 +22,9 @@ const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, va
   const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || formattedValue}`);
 
   return (
-    <span className={classNames(styles.cell, className)} {...triggerProps}>
+    <div className={classNames(styles.cell, className)} {...triggerProps}>
       {formattedValue}
-    </span>
+    </div>
   );
 };
 

package/src/components/Results/Result.tsx

@@ -30,10 +30,10 @@ const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
-  const { consonants, vowels } = LOCALE_FEATURES[locale];
+  const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
-  const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
+  const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
   const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -60,11 +60,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     >
       <span className={styles.resultContent}>
         {enabledColumns[ResultColumn.Word] && (
-          <Cell
-            className={styles.word}
-            translationKey="common.word"
-            value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
-          />
+          <Cell className={styles.word} translationKey="common.word" value={result.word} />
         )}
 
         {enabledColumns[ResultColumn.TilesCount] && (
@@ -87,7 +83,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
           <Cell
             className={styles.stat}
             translationKey="common.words"
-            tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
+            tooltip={`${result.wordsCount.toLocaleString(locale)} (${words.join(separator)})`}
             value={result.wordsCount}
           />
         )}

package/src/components/Results/Results.module.scss

@@ -60,7 +60,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
-  padding: var(--spacing--s) 0;
 
   &:focus,
   &:hover {
@@ -135,6 +134,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 100%;
 
   .word {
     @include ellipsis;
@@ -145,8 +145,10 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   padding: 0 var(--spacing--s);
   gap: var(--spacing--s);
+  line-height: var(--results--item--height);
 
   .result &:first-child,
   .headerButton:first-child & {
@@ -180,12 +182,12 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .word {
-  flex: 1 0 180px;
+  flex: 1 0;
   text-transform: uppercase;
 }
 
 .stat {
-  $width: 50px;
+  $width: 55px;
 
   flex: 0 0 $width;
   max-width: $width;

package/src/components/Solver/Solver.tsx

@@ -34,7 +34,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { cellSize, maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
+  const { maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
@@ -93,7 +93,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
       <div className={styles.container}>
         <div className={styles.content}>
           <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            <Board cellSize={cellSize} className={styles.board} />
+            <Board className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,10 +1,12 @@
 .tooltip {
+  max-width: var(--tooltip--max-width);
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   background-color: var(--color--tooltip--background);
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
+  text-align: center;
 }
 
 .arrow {

package/src/hooks/useAppLayout.ts

@@ -60,6 +60,7 @@ const useAppLayout = () => {
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
     animateTile: !isLessThanXs,
+    boardSize,
     cellSize,
     dictionaryHeight,
     isModalFullWidth: isLessThanS,

package/src/i18n/constants.ts

@@ -1,3 +1,4 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { Locale } from '@scrabble-solver/types';
 import { FunctionComponent, SVGAttributes } from 'react';
 
@@ -6,45 +7,61 @@ import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
 import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
-  direction: 'ltr' | 'rtl';
+  comma: string;
   consonants: boolean;
+  direction: 'ltr' | 'rtl';
+  separator: string;
   vowels: boolean;
 }
 
 export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
   [Locale.DE_DE]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_GB]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_US]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.ES_ES]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.FA_IR]: {
-    direction: 'rtl',
+    comma: COMMA_ARABIC,
     consonants: false,
+    direction: 'rtl',
+    separator: `${COMMA_ARABIC} `,
     vowels: false,
   },
   [Locale.FR_FR]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.PL_PL]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
 };

package/src/i18n/de.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Zielort - klicken zum Wechseln",
+  "cell.filter-cell": "Zielort",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.tile.location": "Brett: Stein ({{x}}, {{y}})",
-  "cell.toggle-direction": "Schreibrichtung - klicken zum Wechseln",
+  "cell.toggle-direction": "Schreibrichtung",
   "common.blanks": "Blankos",
   "common.clear": "Löschen",
   "common.close": "Schließen",

package/src/i18n/en.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Target destination - click to toggle",
+  "cell.filter-cell": "Target destination",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.tile.location": "Board: tile ({{x}}, {{y}})",
-  "cell.toggle-direction": "Typing direction - click to toggle",
+  "cell.toggle-direction": "Typing direction",
   "common.blanks": "Blanks",
   "common.clear": "Clear",
   "common.close": "Close",

package/src/i18n/es.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destino objetivo: haga clic para alternar",
+  "cell.filter-cell": "Destino objetivo",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.tile.location": "Tablero: espacio ({{x}}, {{y}})",
-  "cell.toggle-direction": "Dirección de escritura: haga clic para alternar",
+  "cell.toggle-direction": "Dirección de escritura",
   "common.blanks": "Blancos",
   "common.clear": "Borrar",
   "common.close": "Cerrar",

package/src/i18n/fa.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "مقصد - کلیک برای تغییر",
+  "cell.filter-cell": "مقصد",
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
-  "cell.toggle-direction": "جهت تایپ - کلیک برای تغییر",
   "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",
+  "cell.toggle-direction": "جهت تایپ",
   "common.blanks": "خالی",
   "common.clear": "پاک کردن",
   "common.close": "بستن",

package/src/i18n/fr.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destination cible - cliquer pour changer",
+  "cell.filter-cell": "Destination cible",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.tile.location": "Plateau: la case ({{x}}, {{y}})",
-  "cell.toggle-direction": "Direction d'écriture - cliquer pour changer",
+  "cell.toggle-direction": "Direction d'écriture",
   "common.blanks": "Cases vides",
   "common.clear": "Effacer",
   "common.close": "Fermer",

package/src/i18n/pl.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
+  "cell.filter-cell": "Miejsce docelowe",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.tile.location": "Plansza: płytka ({{x}}, {{y}})",
-  "cell.toggle-direction": "Kierunek wpisywania - kliknij aby zmienić",
+  "cell.toggle-direction": "Kierunek wpisywania",
   "common.blanks": "Blanki",
   "common.clear": "Wyczyść",
   "common.close": "Zamknij",

package/src/lib/dataUrlToBlob.ts

@@ -0,0 +1,20 @@
+const dataUrlToBlob = (dataUrl: string): Blob => {
+  const [mime = '', data] = dataUrl.split(',');
+  const [, type] = mime.match(/:(.*?);/) || [];
+
+  if (typeof type !== 'string') {
+    throw new Error('Unsupported data URL');
+  }
+
+  const byteString = globalThis.atob(data);
+  const u8arr = new Uint8Array(byteString.length);
+  let index = byteString.length;
+
+  while (index--) {
+    u8arr[index] = byteString.charCodeAt(index);
+  }
+
+  return new Blob([u8arr], { type });
+};
+
+export default dataUrlToBlob;

package/src/lib/index.ts

@@ -8,6 +8,7 @@ export { default as createKeyComparator } from './createKeyComparator';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
 export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
+export { default as dataUrlToBlob } from './dataUrlToBlob';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
 export { default as extractInputValue } from './extractInputValue';

package/src/pages/_app.tsx

@@ -4,7 +4,7 @@ import { FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import { SeoMessage } from 'components';
-import { createAppStore } from 'state';
+import { store } from 'state';
 
 import 'styles/global.scss';
 
@@ -40,8 +40,6 @@ const KEYWORDS = [
   'Kamil Mielnik',
 ].join(',');
 
-const store = createAppStore();
-
 const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
   <>
     <Head>

package/src/parameters/index.ts

@@ -19,6 +19,34 @@ export const COLOR_GREEN = '#bae3ba';
 export const COLOR_RED = '#f7c2aa';
 export const COLOR_YELLOW = '#efe3ae';
 
+export const COLOR_BONUS_CHARACTER_1 = '#f7f1d6';
+export const COLOR_BONUS_CHARACTER_2 = '#d6ebd6';
+export const COLOR_BONUS_CHARACTER_3 = '#dde4f6';
+export const COLOR_BONUS_CHARACTER_5 = '#fbe0d4';
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = '#b8d5ed';
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = '#86aed1';
+export const COLOR_BONUS_START = '#b284b8';
+export const COLOR_BONUS_WORD_MULTIPLIER_2 = '#fbc997';
+export const COLOR_BONUS_WORD_MULTIPLIER_3 = '#f19393';
+export const COLOR_FILTERED = '#444';
+
+export const COLOR_BONUS_CHARACTER: Record<number, string> = {
+  1: COLOR_BONUS_CHARACTER_1,
+  2: COLOR_BONUS_CHARACTER_2,
+  3: COLOR_BONUS_CHARACTER_3,
+  5: COLOR_BONUS_CHARACTER_5,
+};
+
+export const COLOR_BONUS_CHARACTER_MULTIPLIER: Record<number, string> = {
+  2: COLOR_BONUS_CHARACTER_MULTIPLIER_2,
+  3: COLOR_BONUS_CHARACTER_MULTIPLIER_3,
+};
+
+export const COLOR_BONUS_WORD: Record<number, string> = {
+  2: COLOR_BONUS_WORD_MULTIPLIER_2,
+  3: COLOR_BONUS_WORD_MULTIPLIER_3,
+};
+
 export const SPACING_XS = 2;
 export const SPACING_S = 5;
 export const SPACING_M = 10;
@@ -40,6 +68,9 @@ export const BOARD_TILE_SIZE_MAX = 64;
  */
 export const BOARD_TILE_SIZE_MIN = 20;
 
+export const BORDER_COLOR = '#cdcdcd';
+export const BORDER_COLOR_LIGHT = '#d9d9d9';
+export const BORDER_RADIUS = 5;
 export const BORDER_WIDTH = 1;
 
 export const BUTTON_ICON_SIZE = 24;
@@ -90,10 +121,10 @@ 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 = 40;
 
+export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
+
 export const SOLVER_COLUMN_WIDTH = 580;
 
 export const TEXT_INPUT_HEIGHT = 40;

package/src/state/index.ts

@@ -1,7 +1,7 @@
 export * from './actions';
-export { default as createAppStore } from './createAppStore';
 export { default as localStorage } from './localStorage';
 export * from './selectors';
 export * from './slices';
+export { default as store } from './store';
 export { default as useTranslate } from './useTranslate';
 export { default as useTypedSelector } from './useTypedSelector';

package/src/state/sagas.ts

@@ -1,10 +1,10 @@
 /* eslint-disable max-lines */
 
 import { PayloadAction } from '@reduxjs/toolkit';
-import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { Locale, Result } from '@scrabble-solver/types';
 import { call, delay, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 
+import { LOCALE_FEATURES } from 'i18n';
 import { memoize } from 'lib';
 import { findWordDefinitions, solve, verify, visit } from 'sdk';
 
@@ -144,9 +144,8 @@ function* onLocaleChange(): AnyGenerator {
 
 function* onResultCandidateChange({ payload: result }: PayloadAction<Result | null>): AnyGenerator {
   if (result) {
-    const locale = yield select(selectLocale);
-    const comma = locale === Locale.FA_IR ? ` ${COMMA_ARABIC}` : `${COMMA_LATIN} `;
-    yield put(dictionarySlice.actions.changeInput(result.words.join(comma)));
+    const locale: Locale = yield select(selectLocale);
+    yield put(dictionarySlice.actions.changeInput(result.words.join(LOCALE_FEATURES[locale].separator)));
     yield put(dictionarySlice.actions.submit());
   }
 }

package/src/state/store.ts

@@ -0,0 +1,34 @@
+import { configureStore } from '@reduxjs/toolkit';
+import reduxSaga from 'redux-saga';
+
+import { rootSaga } from './sagas';
+import {
+  boardSlice,
+  cellFilterSlice,
+  dictionarySlice,
+  rackSlice,
+  resultsSlice,
+  settingsSlice,
+  solveSlice,
+  verifySlice,
+} from './slices';
+
+const sagaMiddleware = reduxSaga();
+
+const store = configureStore({
+  reducer: {
+    board: boardSlice.reducer,
+    cellFilter: cellFilterSlice.reducer,
+    dictionary: dictionarySlice.reducer,
+    rack: rackSlice.reducer,
+    results: resultsSlice.reducer,
+    settings: settingsSlice.reducer,
+    solve: solveSlice.reducer,
+    verify: verifySlice.reducer,
+  },
+  middleware: [sagaMiddleware],
+});
+
+sagaMiddleware.run(rootSaga);
+
+export default store;

package/src/styles/variables.scss

@@ -112,9 +112,11 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --modal--width: 370px;
   --nav--height: calc(var(--logo--height) + var(--nav--padding));
   --nav--padding: var(--spacing--l);
+  --results--item--height: 40px;
   --solver-column--width: 580px;
   --square-button--size: 32px;
   --text-input--height: 40px;
+  --tooltip--max-width: 360px;
 
   @include media('<l') {
     --dictionary--height: var(--dictionary--height--mobile);