@scrabble-solver/scrabble-solver 2.11.4 → 2.11.6

package/src/state/localStorage.ts

@@ -1,6 +1,9 @@
 import { Board, Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
+import { AutoGroupTiles, Rack } from 'types';
+
+const AUTO_GROUP_TILES = 'auto-group-tiles';
 const BOARD = 'board';
 const CONFIG_ID = 'config-id';
 const LOCALE = 'locale';
@@ -9,6 +12,14 @@ const RACK = 'rack';
 const store = store2.namespace('scrabble-solver');
 
 const localStorage = {
+  getAutoGroupTiles(): AutoGroupTiles | undefined {
+    return store.get(AUTO_GROUP_TILES);
+  },
+
+  setAutoGroupTiles(autoGroupTiles: AutoGroupTiles | undefined): void {
+    store.set(AUTO_GROUP_TILES, autoGroupTiles, true);
+  },
+
   getBoard(): Board | undefined {
     const serialized = store.get(BOARD);
     return serialized ? Board.fromJson(JSON.parse(serialized)) : serialized;
@@ -35,11 +46,11 @@ const localStorage = {
     store.set(LOCALE, locale, true);
   },
 
-  getRack(): (string | null)[] | undefined {
+  getRack(): Rack | undefined {
     return store.get(RACK);
   },
 
-  setRack(rack: (string | null)[] | undefined): void {
+  setRack(rack: Rack | undefined): void {
     store.set(RACK, rack, true);
   },
 };

package/src/state/sagas.ts

@@ -1,3 +1,5 @@
+/* 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';
@@ -15,6 +17,7 @@ import {
   selectDictionary,
   selectLocale,
   selectLocaleAutoGroupTiles,
+  selectRack,
 } from './selectors';
 import {
   boardSlice,
@@ -105,9 +108,14 @@ function* onDictionarySubmit(): AnyGenerator {
 }
 
 function* onInitialize(): AnyGenerator {
+  const board = yield select(selectBoard);
+
   yield call(visit);
-  yield* ensureProperTilesCount();
-  yield put(verifySlice.actions.submit());
+
+  if (!board.isEmpty()) {
+    yield* ensureProperTilesCount();
+    yield put(verifySlice.actions.submit());
+  }
 }
 
 function* onReset(): AnyGenerator {
@@ -191,13 +199,13 @@ function* onVerify(): AnyGenerator {
 
 function* ensureProperTilesCount(): AnyGenerator {
   const { config } = yield select(selectConfig);
-  const characters = yield select(selectCharacters);
+  const rack = yield select(selectRack);
 
-  if (config.maximumCharactersCount > characters.length) {
-    const differenceCount = Math.abs(config.maximumCharactersCount - characters.length);
-    yield put(rackSlice.actions.init([...characters, ...Array(differenceCount).fill(null)]));
-  } else if (config.maximumCharactersCount < characters.length) {
-    const nonNulls = characters.filter(Boolean).slice(0, config.maximumCharactersCount);
+  if (config.maximumCharactersCount > rack.length) {
+    const differenceCount = Math.abs(config.maximumCharactersCount - rack.length);
+    yield put(rackSlice.actions.init([...rack, ...Array(differenceCount).fill(null)]));
+  } else if (config.maximumCharactersCount < rack.length) {
+    const nonNulls = rack.filter(Boolean).slice(0, config.maximumCharactersCount);
     const differenceCount = Math.abs(config.maximumCharactersCount - nonNulls.length);
     const autoGroupTiles = yield select(selectLocaleAutoGroupTiles);
     yield put(rackSlice.actions.init([...nonNulls, ...Array(differenceCount).fill(null)]));

package/src/state/slices/boardInitialState.ts

@@ -1,13 +1,17 @@
 import { getLocaleConfig } from '@scrabble-solver/configs';
 import { Board } from '@scrabble-solver/types';
 
+import localStorage from '../localStorage';
+
 import settingsInitialState from './settingsInitialState';
 
 export type BoardState = Board;
 
 const { configId, locale } = settingsInitialState;
 const { boardHeight, boardWidth } = getLocaleConfig(configId, locale);
-const boardInitialState: BoardState = Board.create(boardWidth, boardHeight);
+export const boardDefaultState = Board.create(boardWidth, boardHeight);
+
+const boardInitialState: BoardState = localStorage.getBoard() || boardDefaultState;
 
 // const createOxyphenbutazone = () => {
 //   // Tiles: oypbaze

package/src/state/slices/boardSlice.ts

@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Board, Cell, Result, Tile } from '@scrabble-solver/types';
 
-import boardInitialState from './boardInitialState';
+import boardInitialState, { boardDefaultState } from './boardInitialState';
 
 const boardSlice = createSlice({
   initialState: boardInitialState,
@@ -43,7 +43,7 @@ const boardSlice = createSlice({
     },
 
     reset: () => {
-      return boardInitialState;
+      return boardDefaultState;
     },
 
     toggleCellIsBlank: (state, action: PayloadAction<{ x: number; y: number }>) => {

package/src/state/slices/rackInitialState.ts

@@ -1,5 +1,11 @@
-export type RackState = (string | null)[];
+import { Rack } from 'types';
 
-const rackInitialState: RackState = [null, null, null, null, null, null, null];
+import localStorage from '../localStorage';
+
+export type RackState = Rack;
+
+export const rackDefaultState: RackState = [null, null, null, null, null, null, null];
+
+const rackInitialState: RackState = localStorage.getRack() || rackDefaultState;
 
 export default rackInitialState;

package/src/state/slices/rackSlice.ts

@@ -1,9 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Tile } from '@scrabble-solver/types';
 
-import { createNullMovingComparator, inverseDirection, zipCharactersAndTiles } from 'lib';
+import { arrayEquals, createNullMovingComparator, inverseDirection, zipCharactersAndTiles } from 'lib';
+import { AutoGroupTiles, Rack } from 'types';
 
-import rackInitialState from './rackInitialState';
+import rackInitialState, { rackDefaultState } from './rackInitialState';
 
 const rackSlice = createSlice({
   initialState: rackInitialState,
@@ -14,28 +15,30 @@ const rackSlice = createSlice({
       return [...state.slice(0, index), character, ...state.slice(index + 1)];
     },
 
-    changeCharacters: (state, action: PayloadAction<{ characters: (string | null)[]; index: number }>) => {
+    changeCharacters: (state, action: PayloadAction<{ characters: Rack; index: number }>) => {
       const { characters, index } = action.payload;
+
+      if (characters.length === 0) {
+        return state;
+      }
+
       const expectedRackLength = state.length;
       const rack = [...state.slice(0, index), ...characters, ...state.slice(index + characters.length)];
       return rack.slice(0, expectedRackLength);
     },
 
-    groupTiles: (state, action: PayloadAction<'left' | 'right' | null>) => {
-      const direction = action.payload;
-
-      if (direction === null) {
+    groupTiles: (state, action: PayloadAction<AutoGroupTiles>) => {
+      if (action.payload === null) {
         return state;
       }
 
-      const nullMovingComparator = createNullMovingComparator(inverseDirection(direction));
+      const nullMovingComparator = createNullMovingComparator(inverseDirection(action.payload));
       const sortedTiles = [...state].sort(nullMovingComparator);
-      return sortedTiles;
+      return arrayEquals(state, sortedTiles) ? state : sortedTiles;
     },
 
-    init: (_state, action: PayloadAction<(string | null)[]>) => {
-      const rack = action.payload;
-      return rack;
+    init: (state, action: PayloadAction<Rack>) => {
+      return arrayEquals(state, action.payload) ? state : action.payload;
     },
 
     removeTiles: (state, action: PayloadAction<Tile[]>) => {
@@ -45,7 +48,7 @@ const rackSlice = createSlice({
       return charactersWithoutMatchingTiles;
     },
 
-    reset: () => rackInitialState,
+    reset: () => rackDefaultState,
   },
 });
 

package/src/state/slices/settingsInitialState.ts

@@ -2,17 +2,22 @@ import { literaki, scrabble } from '@scrabble-solver/configs';
 import { Locale } from '@scrabble-solver/types';
 
 import { guessLocale } from 'lib';
+import { AutoGroupTiles } from 'types';
+
+import localStorage from '../localStorage';
 
 export interface SettingsState {
-  autoGroupTiles: 'left' | 'right' | null;
+  autoGroupTiles: AutoGroupTiles;
   configId: typeof literaki.id | typeof scrabble.id;
   locale: Locale;
 }
 
+const localStorageAutoGroupTiles = localStorage.getAutoGroupTiles();
+
 const settingsInitialState: SettingsState = {
-  autoGroupTiles: 'left',
-  configId: scrabble.id,
-  locale: guessLocale(),
+  autoGroupTiles: typeof localStorageAutoGroupTiles === 'undefined' ? 'left' : localStorageAutoGroupTiles,
+  configId: localStorage.getConfigId() || scrabble.id,
+  locale: localStorage.getLocale() || guessLocale(),
 };
 
 export default settingsInitialState;

package/src/state/slices/settingsSlice.ts

@@ -1,13 +1,15 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Locale } from '@scrabble-solver/types';
 
+import { AutoGroupTiles } from 'types';
+
 import settingsInitialState from './settingsInitialState';
 
 const settingsSlice = createSlice({
   initialState: settingsInitialState,
   name: 'settings',
   reducers: {
-    changeAutoGroupTiles: (state, action: PayloadAction<'left' | 'right' | null>) => {
+    changeAutoGroupTiles: (state, action: PayloadAction<AutoGroupTiles>) => {
       const autoGroupTiles = action.payload;
       return { ...state, autoGroupTiles };
     },

package/src/styles/animations.scss

@@ -18,16 +18,6 @@
   }
 }
 
-@keyframes progress {
-  0% {
-    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
-  }
-
-  100% {
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-  }
-}
-
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -38,16 +28,6 @@
   }
 }
 
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-
-  100% {
-    transform: scale(1.2);
-  }
-}
-
 @keyframes wave {
   $offset: 6px;
 

package/src/styles/global.scss

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@400;700&family=Vazirmatn:wght@300;400;700&family=Roboto+Mono&display=swap');
-
 @import '~normalize.css';
 
 @import './mixins';
@@ -11,6 +9,10 @@
   box-sizing: border-box;
 }
 
+* {
+  font-family: var(--font--family);
+}
+
 html,
 body {
   margin: 0 auto;
@@ -20,16 +22,8 @@ body {
 body {
   background-color: var(--color--background);
   color: var(--color--foreground);
-  font-family: var(--font--family);
   font-size: var(--font--size--m);
   line-height: var(--line-height);
-  overflow: hidden;
-}
-
-html,
-body,
-#__next {
-  height: 100%;
 }
 
 a {
@@ -51,8 +45,3 @@ h4 {
   -webkit-margin-after: 0;
   margin: 0;
 }
-
-[lang='fa-IR'] {
-  --font--family: 'Vazirmatn', sans-serif;
-  --font--family--title: var(--font--family);
-}

package/src/styles/mixins.scss

@@ -103,69 +103,9 @@ $media-expressions: (
   padding: 0 var(--spacing--l);
   transition: var(--transition);
   font-size: var(--font--size--m);
-  font-family: var(--font--family);
 }
 
 @mixin text-stroke($color, $size: 1px) {
   text-shadow: $size 0 $color, (-$size) 0 $color, 0 $size $color, 0 (-$size) $color, (-$size) (-$size) $color,
     (-$size) $size $color, $size (-$size) $color, $size $size $color;
 }
-
-@mixin lighthouse-input-size-hack {
-  // Hack for this Lighthouse warning:
-  // > Interactive elements like buttons and links should be large enough (48x48px), and have
-  // > enough space around them, to be easy enough to tap without overlapping onto other elements.
-
-  input {
-    position: absolute;
-    top: -100%;
-    right: -100%;
-    left: -100%;
-    bottom: -100%;
-    width: 300%;
-    height: 300%;
-    clip-path: inset((100% / 3));
-  }
-
-  [dir='ltr'] & {
-    &:nth-child(1),
-    &:nth-child(2),
-    &:nth-child(3) {
-      input {
-        left: 0;
-        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
-      }
-    }
-
-    &:nth-last-child(1),
-    &:nth-last-child(2),
-    &:nth-last-child(3) {
-      input {
-        left: -200%;
-        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
-      }
-    }
-  }
-
-  [dir='rtl'] & {
-    &:nth-child(1),
-    &:nth-child(2),
-    &:nth-child(3) {
-      input {
-        left: -200%;
-        right: 0;
-        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
-      }
-    }
-
-    &:nth-last-child(1),
-    &:nth-last-child(2),
-    &:nth-last-child(3) {
-      input {
-        left: 0;
-        right: -200%;
-        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
-      }
-    }
-  }
-}

package/src/styles/variables.scss

@@ -60,11 +60,9 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --color--tooltip--background: #222;
   --color--tooltip--foreground: var(--color--white);
 
-  --font--family: 'Open Sans', sans-serif;
-  --font--family--latin: 'Open Sans', sans-serif;
-  --font--family--arabic: 'Vazirmatn', sans-serif;
-  --font--family--monospace: 'Roboto Mono', monospace;
-  --font--family--title: 'Lato', sans-serif;
+  --font--family: system-ui, sans-serif;
+  --font--family--monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
+    monospace;
   --font--size--h1: 30px;
   --font--size--h2: 22px;
   --font--size--h3: 18px;
@@ -108,13 +106,24 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
 
   --button--icon--size: 24px;
   --dictionary--height: 260px;
+  --dictionary--height--mobile: 110px;
+  --logo--aspect-ratio: 682 / 166;
+  --logo--height: 60px;
   --modal--width: 370px;
+  --nav--height: calc(var(--logo--height) + var(--nav--padding));
+  --nav--padding: var(--spacing--l);
   --solver-column--width: 580px;
   --square-button--size: 32px;
   --text-input--height: 40px;
 
+  @include media('<l') {
+    --dictionary--height: var(--dictionary--height--mobile);
+    --logo--height: 48px;
+  }
+
   @include media('<s') {
     --box-shadow--blur: 5px;
+    --modal--width: 100%;
   }
 
   @include media('<xs') {

package/src/types/index.ts

@@ -1,5 +1,7 @@
 export type Comparator<T> = (a: T, B: T) => number;
 
+export type AutoGroupTiles = 'left' | 'right' | null;
+
 export type Direction = 'horizontal' | 'vertical';
 
 export interface Point {
@@ -7,6 +9,8 @@ export interface Point {
   y: number;
 }
 
+export type Rack = (string | null)[];
+
 export interface Sort {
   column: ResultColumn;
   direction: SortDirection;

package/.next/static/MvHZRF4XuJ7g8LLLRkf8U/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/885da289cec275b3.css","static/chunks/pages/index-0858deea02b2a417.js"],"/404":["static/chunks/pages/404-448ba28510855455.js"],"/_error":["static/chunks/pages/_error-54de1933a164a1ff.js"],sortedPages:["/","/404","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();