@scrabble-solver/scrabble-solver 2.15.24 → 2.16.0-alpha.0

package/src/parameters/index.ts

@@ -1,38 +1,39 @@
+import variables from '@/styles/variables.module.scss';
 import { ResultColumnId } from '@/types';
 
 export const BREAKPOINTS = {
-  xs: 480,
-  s: 768,
-  m: 992,
-  l: 1200,
-  xl: 1400,
+  xs: Number(variables.breakpointXs),
+  s: Number(variables.breakpointS),
+  m: Number(variables.breakpointM),
+  l: Number(variables.breakpointL),
+  xl: Number(variables.breakpointXl),
 };
 
 export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const TRANSITION_DURATION = 100;
-export const TRANSITION_DURATION_LONG = 250;
-
-export const COLOR_BLUE = '#c7d8f9';
-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_CHARACTER_MULTIPLIER_4 = '#3477b2';
-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_BONUS_WORD_MULTIPLIER_4 = '#ed5e5e';
-export const COLOR_FILTERED = '#444';
-export const COLOR_BACKGROUND = '#f4f4f4';
+export const TRANSITION_DURATION = Number(variables.transitionDuration);
+export const TRANSITION_DURATION_LONG = Number(variables.transitionDurationLong);
+
+export const COLOR_BLUE = variables.colorBlue;
+export const COLOR_GREEN = variables.colorGreen;
+export const COLOR_RED = variables.colorRed;
+export const COLOR_YELLOW = variables.colorYellow;
+
+export const COLOR_BONUS_CHARACTER_1 = variables.colorYellowLight;
+export const COLOR_BONUS_CHARACTER_2 = variables.colorGreenLight;
+export const COLOR_BONUS_CHARACTER_3 = variables.colorBlueLight;
+export const COLOR_BONUS_CHARACTER_5 = variables.colorRedLight;
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = variables.colorBonusCharacterMultiplier2;
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = variables.colorBonusCharacterMultiplier3;
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = variables.colorBonusCharacterMultiplier4;
+export const COLOR_BONUS_START = variables.colorVioletLight;
+export const COLOR_BONUS_WORD_MULTIPLIER_2 = variables.colorBonusWordMultiplier2;
+export const COLOR_BONUS_WORD_MULTIPLIER_3 = variables.colorBonusWordMultiplier3;
+export const COLOR_BONUS_WORD_MULTIPLIER_4 = variables.colorBonusWordMultiplier4;
+export const COLOR_FILTERED = variables.colorForegroundSecondary;
+export const COLOR_BACKGROUND = variables.colorBackground;
 
 export const COLOR_BONUS_CHARACTER: Record<number, string> = {
   1: COLOR_BONUS_CHARACTER_1,
@@ -53,39 +54,41 @@ export const COLOR_BONUS_WORD: Record<number, string> = {
   4: COLOR_BONUS_WORD_MULTIPLIER_4,
 };
 
-export const SPACING_XS = 2;
-export const SPACING_S = 5;
-export const SPACING_M = 10;
-export const SPACING_L = 20;
-export const SPACING_XL = 40;
+export const SPACING_XS = Number(variables.spacingXs);
+export const SPACING_S = Number(variables.spacingS);
+export const SPACING_M = Number(variables.spacingM);
+export const SPACING_L = Number(variables.spacingL);
+export const SPACING_XL = Number(variables.spacingXl);
 
 export const COMPONENTS_SPACING = SPACING_XL;
 export const COMPONENTS_SPACING_SMALL = SPACING_L;
 
+export const RACK_TILE_SIZE_MAX = 80;
+
 export const BOARD_CELL_ACTIONS_OFFSET = 3;
 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_MAX = RACK_TILE_SIZE_MAX;
 
-export const BORDER_COLOR = '#cdcdcd';
-export const BORDER_COLOR_LIGHT = '#d9d9d9';
-export const BORDER_RADIUS = 5;
-export const BORDER_WIDTH = 1;
+export const BORDER_COLOR = variables.borderColor;
+export const BORDER_COLOR_LIGHT = variables.borderColorLight;
+export const BORDER_RADIUS = Number(variables.borderRadius);
+export const BORDER_WIDTH = Number(variables.borderWidth);
 
-export const BUTTON_ICON_SIZE = 24;
+export const BUTTON_ICON_SIZE = Number(variables.buttonIconSize);
 export const BUTTON_PADDING_VERTICAL = SPACING_M;
 export const BUTTON_HEIGHT = BUTTON_ICON_SIZE + 2 * BUTTON_PADDING_VERTICAL + 2 * BORDER_WIDTH;
 
-export const DICTIONARY_HEIGHT = 260;
-export const DICTIONARY_HEIGHT_MOBILE = 110;
+export const DICTIONARY_HEIGHT = Number(variables.dictionaryHeight);
+export const DICTIONARY_HEIGHT_MOBILE = Number(variables.dictionaryHeightMobile);
 
 export const LOGO_ASPECT_RATIO = 682 / 166;
-export const LOGO_HEIGHT = 60;
-export const LOGO_HEIGHT_SMALL = 48;
+export const LOGO_HEIGHT = Number(variables.logoHeight);
+export const LOGO_HEIGHT_SMALL = Number(variables.logoHeightSmall);
 export const LOGO_SRC = '/logo.svg';
 
-export const MODAL_WIDTH = 370;
+export const MODAL_WIDTH = Number(variables.modalWidth);
 export const MODAL_HEADER_HEIGHT = 45;
 
 export const NAV_PADDING = SPACING_L;
@@ -119,8 +122,6 @@ 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_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> = {
@@ -133,10 +134,10 @@ export const RESULTS_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> =
   [ResultColumnId.Word]: undefined,
   [ResultColumnId.WordsCount]: 55,
 };
-export const RESULTS_ITEM_HEIGHT = 40;
+export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
 export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
 
-export const SOLVER_COLUMN_WIDTH = 580;
+export const SOLVER_COLUMN_WIDTH = Number(variables.solverColumnWidth);
 
-export const TEXT_INPUT_HEIGHT = 40;
+export const TEXT_INPUT_HEIGHT = Number(variables.textInputHeight);

package/src/sdk/fetchJson.ts

@@ -1,13 +1,9 @@
 import { fetch } from './fetch';
 
 export const fetchJson = async <T>(input: RequestInfo | URL, init?: RequestInit): Promise<T> => {
-  const response = await fetch(input, {
-    ...init,
-    headers: {
-      'Content-Type': 'application/json',
-      ...init?.headers,
-    },
-  });
+  const headers = new Headers(init?.headers);
+  headers.set('Content-Type', 'application/json');
 
+  const response = await fetch(input, { ...init, headers });
   return response.json();
 };

package/src/service-worker/index.ts

@@ -18,7 +18,6 @@ self.addEventListener('activate', () => {
 });
 
 cleanupOutdatedCaches();
-// eslint-disable-next-line no-underscore-dangle
 precacheAndRoute(self.__WB_MANIFEST);
 routeSolveRequests();
 routeVerifyRequests();

package/src/service-worker/routeSolveRequests.ts

@@ -19,18 +19,6 @@ const MIN_MEASUREMENTS = 5;
 const localDurations: number[] = [];
 const serverDurations: number[] = [];
 
-const isSlowDevice = (): boolean | undefined => {
-  if (localDurations.length < MIN_MEASUREMENTS || serverDurations.length < MIN_MEASUREMENTS) {
-    return undefined;
-  }
-
-  const count = Math.min(localDurations.length, serverDurations.length);
-  const local = localDurations.slice(0, count).sort().slice(1, -1);
-  const server = serverDurations.slice(0, count).sort().slice(1, -1);
-
-  return average(local) > average(server);
-};
-
 export const routeSolveRequests = () => {
   registerRoute(
     ({ url }) => url.origin === location.origin && url.pathname === '/api/solve',
@@ -83,3 +71,21 @@ export const routeSolveRequests = () => {
     'POST',
   );
 };
+
+const isSlowDevice = (): boolean | undefined => {
+  if (localDurations.length < MIN_MEASUREMENTS || serverDurations.length < MIN_MEASUREMENTS) {
+    return undefined;
+  }
+
+  const count = Math.min(localDurations.length, serverDurations.length);
+  const local = localDurations
+    .slice(0, count)
+    .sort((a, b) => a - b)
+    .slice(1, -1);
+  const server = localDurations
+    .slice(0, count)
+    .sort((a, b) => a - b)
+    .slice(1, -1);
+
+  return average(local) > average(server);
+};

package/src/state/board/slice.ts

@@ -16,7 +16,7 @@ export const boardSlice = createSlice({
       const result = action.payload;
 
       result.cells.forEach((cell) => {
-        newBoard.updateCell(cell.x, cell.y, () => new Cell({ ...cell, isEmpty: false }));
+        newBoard.updateCell(cell.x, cell.y, () => new Cell({ isEmpty: false, tile: cell.tile, x: cell.x, y: cell.y }));
       });
 
       return newBoard;
@@ -34,7 +34,7 @@ export const boardSlice = createSlice({
       const tile = isEmpty ? Tile.Null : new Tile({ character: value });
 
       newBoard.updateCell(x, y, (cell) => {
-        return new Cell({ ...cell, isEmpty, tile });
+        return new Cell({ isEmpty, tile, x: cell.x, y: cell.y });
       });
 
       return newBoard;
@@ -50,8 +50,10 @@ export const boardSlice = createSlice({
       const { x, y } = action.payload;
 
       newBoard.updateCell(x, y, (cell) => {
-        const tile = cell.isEmpty ? cell.tile : new Tile({ ...cell.tile, isBlank: !cell.tile.isBlank });
-        return new Cell({ ...cell, tile });
+        const tile = cell.isEmpty
+          ? cell.tile
+          : new Tile({ isBlank: !cell.tile.isBlank, character: cell.tile.character });
+        return new Cell({ isEmpty: cell.isEmpty, tile, x: cell.x, y: cell.y });
       });
 
       return newBoard;

package/src/state/localStorage.ts

@@ -1,28 +1,49 @@
-import { Board, type BoardJson, type Game, type Locale, type ShowCoordinates } from '@scrabble-solver/types';
+import { Board, type BoardJson } from '@scrabble-solver/types';
 import store2 from 'store2';
 
-import type { AutoGroupTiles, InputMode, Rack, RemoveCellFilters } from '@/types';
+import type { Rack } from '@/types';
+
+import type { SettingsState } from './settings/types';
 
-const AUTO_GROUP_TILES = 'auto-group-tiles';
 const BOARD = 'board';
-const GAME_ID = 'config-id';
-const INPUT_MODE = 'input-mode';
-const REMOVE_CELL_FILTERS = 'remove-cell-filters';
-const LOCALE = 'locale';
 const RACK = 'rack';
-const SHOW_COORDINATES = 'show-coordinates';
+const SETTINGS = 'settings';
+
+const LEGACY_KEYS: Record<keyof SettingsState, string> = {
+  autoGroupTiles: 'auto-group-tiles',
+  game: 'config-id',
+  inputMode: 'input-mode',
+  locale: 'locale',
+  removeCellFilters: 'remove-cell-filters',
+  showCoordinates: 'show-coordinates',
+};
 
 const store = store2.namespace('scrabble-solver');
 
-export const localStorage = {
-  getAutoGroupTiles(): AutoGroupTiles | undefined {
-    return store.get(AUTO_GROUP_TILES) as AutoGroupTiles | undefined;
-  },
-
-  setAutoGroupTiles(autoGroupTiles: AutoGroupTiles | undefined): void {
-    store.set(AUTO_GROUP_TILES, autoGroupTiles, true);
-  },
+/**
+ * Introduced in 2.15.26 on 2026/04/27.
+ * Life expectancy: 1y.
+ */
+const migrateLegacySettings = (): Partial<SettingsState> => {
+  const settings: Partial<SettingsState> = {};
+  let hasLegacy = false;
+
+  for (const [setting, legacyKey] of Object.entries(LEGACY_KEYS) as [keyof SettingsState, string][]) {
+    if (store.has(legacyKey)) {
+      settings[setting] = store.get(legacyKey);
+      store.remove(legacyKey);
+      hasLegacy = true;
+    }
+  }
+
+  if (hasLegacy) {
+    store.set(SETTINGS, settings, true);
+  }
+
+  return settings;
+};
 
+export const localStorage = {
   getBoard(): Board | undefined {
     const serialized = store.get(BOARD) as string | undefined;
     return serialized ? Board.fromJson(JSON.parse(serialized) as BoardJson) : undefined;
@@ -33,30 +54,6 @@ export const localStorage = {
     store.set(BOARD, serialized, true);
   },
 
-  getGame(): Game | undefined {
-    return store.get(GAME_ID) as Game | undefined;
-  },
-
-  setGame(game: Game | undefined): void {
-    store.set(GAME_ID, game, true);
-  },
-
-  getInputMode(): InputMode | undefined {
-    return store.get(INPUT_MODE) as InputMode | undefined;
-  },
-
-  setInputMode(inputMode: InputMode | undefined): void {
-    store.set(INPUT_MODE, inputMode, true);
-  },
-
-  getLocale(): Locale | undefined {
-    return store.get(LOCALE) as Locale | undefined;
-  },
-
-  setLocale(locale: Locale | undefined): void {
-    store.set(LOCALE, locale, true);
-  },
-
   getRack(): Rack | undefined {
     return store.get(RACK) as Rack | undefined;
   },
@@ -65,19 +62,12 @@ export const localStorage = {
     store.set(RACK, rack, true);
   },
 
-  getShowCoordinates(): ShowCoordinates | undefined {
-    return store.get(SHOW_COORDINATES) as ShowCoordinates | undefined;
-  },
-
-  setShowCoordinates(showCoordinates: ShowCoordinates | undefined): void {
-    store.set(SHOW_COORDINATES, showCoordinates, true);
-  },
-
-  getRemoveCellFilters(): RemoveCellFilters | undefined {
-    return store.get(REMOVE_CELL_FILTERS) as RemoveCellFilters | undefined;
+  getSettings(): Partial<SettingsState> {
+    const stored = store.get(SETTINGS) as Partial<SettingsState> | undefined;
+    return stored ?? migrateLegacySettings();
   },
 
-  setRemoveCellFilters(removeCellFilters: RemoveCellFilters | undefined): void {
-    store.set(REMOVE_CELL_FILTERS, removeCellFilters, true);
+  setSettings(settings: SettingsState): void {
+    store.set(SETTINGS, settings, true);
   },
 };

package/src/state/sagas.ts

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines, no-implicit-globals */
+/* eslint-disable max-lines */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
@@ -35,7 +35,6 @@ const memoizedFindWordDefinitions = memoize(findWordDefinitions);
 
 // Can't conveniently type generators for sagas yet,
 // see: https://github.com/microsoft/TypeScript/issues/43632
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyGenerator = Generator<any, any, any>;
 
 export function* rootSaga(): AnyGenerator {

package/src/state/settings/initialState.ts

@@ -5,14 +5,14 @@ import { localStorage } from '../localStorage';
 import { guessLocale } from './lib';
 import type { SettingsState } from './types';
 
-const localStorageAutoGroupTiles = localStorage.getAutoGroupTiles();
 const isTouchScreen = typeof globalThis.matchMedia !== 'undefined' && globalThis.matchMedia('(hover: none)').matches;
 
 export const settingsInitialState: SettingsState = {
-  autoGroupTiles: typeof localStorageAutoGroupTiles === 'undefined' ? 'left' : localStorageAutoGroupTiles,
-  game: localStorage.getGame() ?? Game.Scrabble,
-  inputMode: localStorage.getInputMode() ?? (isTouchScreen ? 'touchscreen' : 'keyboard'),
-  locale: localStorage.getLocale() ?? guessLocale(),
-  showCoordinates: localStorage.getShowCoordinates() ?? 'hidden',
-  removeCellFilters: localStorage.getRemoveCellFilters() ?? 'always',
+  autoGroupTiles: null,
+  game: Game.Scrabble,
+  inputMode: isTouchScreen ? 'touchscreen' : 'keyboard',
+  locale: guessLocale(),
+  removeCellFilters: 'always',
+  showCoordinates: 'hidden',
+  ...localStorage.getSettings(),
 };

package/src/styles/_tokens.scss

@@ -0,0 +1,59 @@
+@use 'sass:math';
+
+@function strip-unit($value) {
+  @return math.div($value, $value * 0 + 1);
+}
+
+$breakpoint-xs: 480px;
+$breakpoint-s: 768px;
+$breakpoint-m: 992px;
+$breakpoint-l: 1200px;
+$breakpoint-xl: 1400px;
+
+$border-color: #cdcdcd;
+$border-color-light: #d9d9d9;
+$border-radius: 5px;
+$border-width: 1px;
+
+$color-blue: #c7d8f9;
+$color-blue-light: #dde4f6;
+$color-green: #bae3ba;
+$color-green-light: #d6ebd6;
+$color-red: #f7c2aa;
+$color-red-light: #fbe0d4;
+$color-violet: #78387f;
+$color-violet-light: #b284b8;
+$color-yellow: #efe3ae;
+$color-yellow-light: #f7f1d6;
+
+$color-background: #f4f4f4;
+$color-foreground: #222;
+$color-foreground-secondary: #444;
+$color-inactive: #cdcdcd;
+
+$color-bonus-character-multiplier-2: #b8d5ed;
+$color-bonus-character-multiplier-3: #86aed1;
+$color-bonus-character-multiplier-4: #3477b2;
+$color-bonus-word-multiplier-2: #fbc997;
+$color-bonus-word-multiplier-3: #f19393;
+$color-bonus-word-multiplier-4: #ed5e5e;
+
+$spacing-xs: 2px;
+$spacing-s: 5px;
+$spacing-m: 10px;
+$spacing-l: 20px;
+$spacing-xl: 40px;
+$spacing-xxl: 80px;
+
+$transition-duration: 100ms;
+$transition-duration-long: 250ms;
+
+$button-icon-size: 24px;
+$dictionary-height: 260px;
+$dictionary-height-mobile: 110px;
+$logo-height: 60px;
+$logo-height-small: 48px;
+$modal-width: 370px;
+$results-item-height: 40px;
+$solver-column-width: 580px;
+$text-input-height: 40px;

package/src/styles/global.scss

@@ -1,7 +1,7 @@
-@import 'normalize.css';
+@use 'normalize.css';
 
-@import './mixins';
-@import './variables';
+@use './mixins' as *;
+@use './variables';
 
 *,
 *:after,

package/src/styles/mixins.scss

@@ -1,15 +1,16 @@
-@import 'include-media';
-
-$breakpoints: (
-  xs: 480px,
-  s: 768px,
-  m: 992px,
-  l: 1200px,
-  xl: 1400px,
-);
-
-$media-expressions: (
-  touch: '(hover: none)',
+@use 'styles/tokens' as *;
+
+@forward 'include-media' with (
+  $breakpoints: (
+    xs: $breakpoint-xs,
+    s: $breakpoint-s,
+    m: $breakpoint-m,
+    l: $breakpoint-l,
+    xl: $breakpoint-xl,
+  ),
+  $media-expressions: (
+    touch: '(hover: none)',
+  )
 );
 
 @mixin scrollbars {

package/src/styles/variables.module.scss

@@ -0,0 +1,53 @@
+@use 'styles/tokens' as *;
+
+:export {
+  breakpointXs: strip-unit($breakpoint-xs);
+  breakpointS: strip-unit($breakpoint-s);
+  breakpointM: strip-unit($breakpoint-m);
+  breakpointL: strip-unit($breakpoint-l);
+  breakpointXl: strip-unit($breakpoint-xl);
+
+  borderColor: $border-color;
+  borderColorLight: $border-color-light;
+  borderRadius: strip-unit($border-radius);
+  borderWidth: strip-unit($border-width);
+
+  colorBlue: $color-blue;
+  colorBlueLight: $color-blue-light;
+  colorGreen: $color-green;
+  colorGreenLight: $color-green-light;
+  colorRed: $color-red;
+  colorRedLight: $color-red-light;
+  colorVioletLight: $color-violet-light;
+  colorYellow: $color-yellow;
+  colorYellowLight: $color-yellow-light;
+
+  colorBackground: $color-background;
+  colorForegroundSecondary: $color-foreground-secondary;
+
+  colorBonusCharacterMultiplier2: $color-bonus-character-multiplier-2;
+  colorBonusCharacterMultiplier3: $color-bonus-character-multiplier-3;
+  colorBonusCharacterMultiplier4: $color-bonus-character-multiplier-4;
+  colorBonusWordMultiplier2: $color-bonus-word-multiplier-2;
+  colorBonusWordMultiplier3: $color-bonus-word-multiplier-3;
+  colorBonusWordMultiplier4: $color-bonus-word-multiplier-4;
+
+  spacingXs: strip-unit($spacing-xs);
+  spacingS: strip-unit($spacing-s);
+  spacingM: strip-unit($spacing-m);
+  spacingL: strip-unit($spacing-l);
+  spacingXl: strip-unit($spacing-xl);
+
+  transitionDuration: strip-unit($transition-duration);
+  transitionDurationLong: strip-unit($transition-duration-long);
+
+  buttonIconSize: strip-unit($button-icon-size);
+  dictionaryHeight: strip-unit($dictionary-height);
+  dictionaryHeightMobile: strip-unit($dictionary-height-mobile);
+  logoHeight: strip-unit($logo-height);
+  logoHeightSmall: strip-unit($logo-height-small);
+  modalWidth: strip-unit($modal-width);
+  resultsItemHeight: strip-unit($results-item-height);
+  solverColumnWidth: strip-unit($solver-column-width);
+  textInputHeight: strip-unit($text-input-height);
+}