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

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/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);
+}

package/src/styles/variables.scss

@@ -1,13 +1,14 @@
-@import 'styles/mixins';
+@use 'styles/mixins' as *;
+@use 'styles/tokens' as *;
 
 $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
 
 :root {
   --border: var(--border--width) solid var(--border--color);
-  --border--color: #cdcdcd;
-  --border--color--light: #d9d9d9;
-  --border--radius: 5px;
-  --border--width: 1px;
+  --border--color: #{$border-color};
+  --border--color--light: #{$border-color-light};
+  --border--radius: #{$border-radius};
+  --border--width: #{$border-width};
 
   --box-shadow: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--box-shadow--color);
   --box-shadow--blur: 8px;
@@ -21,24 +22,24 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --box-shadow--raised--subtle: inset -1px -1px 1px 0 var(--box-shadow--color--raised);
 
   --color--white: #ffffff;
-  --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--blue: #{$color-blue};
+  --color--blue--light: #{$color-blue-light};
+  --color--green: #{$color-green};
+  --color--green--light: #{$color-green-light};
+  --color--red: #{$color-red};
+  --color--red--light: #{$color-red-light};
+  --color--violet: #{$color-violet};
+  --color--violet--light: #{$color-violet-light};
+  --color--yellow: #{$color-yellow};
+  --color--yellow--light: #{$color-yellow-light};
 
   --color--focus: #{rgba(#268fff, 0.5)};
-  --color--inactive: #cdcdcd;
-  --color--background: #f4f4f4;
+  --color--inactive: #{$color-inactive};
+  --color--background: #{$color-background};
   --color--background--element: var(--color--white);
   --color--background--overlay: rgba(255, 255, 255, 0.65);
-  --color--foreground: #222;
-  --color--foreground--secondary: #444;
+  --color--foreground: #{$color-foreground};
+  --color--foreground--secondary: #{$color-foreground-secondary};
   --color--mark: #ffff00;
   --color--error: hsl(0, 92%, 62%);
   --color--error--opposite: var(--color--white);
@@ -53,12 +54,14 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --color--bonus--character--2: var(--color--green--light);
   --color--bonus--character--3: var(--color--blue--light);
   --color--bonus--character--5: var(--color--red--light);
-  --color--bonus--character-multiplier--2: #b8d5ed;
-  --color--bonus--character-multiplier--3: #86aed1;
+  --color--bonus--character-multiplier--2: #{$color-bonus-character-multiplier-2};
+  --color--bonus--character-multiplier--3: #{$color-bonus-character-multiplier-3};
+  --color--bonus--character-multiplier--4: #{$color-bonus-character-multiplier-4};
   --color--bonus--start: var(--color--violet--light);
-  --color--bonus--word-multiplier--2: #fbc997;
-  --color--bonus--word-multiplier--3: #f19393;
-  --color--tooltip--background: #444;
+  --color--bonus--word-multiplier--2: #{$color-bonus-word-multiplier-2};
+  --color--bonus--word-multiplier--3: #{$color-bonus-word-multiplier-3};
+  --color--bonus--word-multiplier--4: #{$color-bonus-word-multiplier-4};
+  --color--tooltip--background: #{$color-foreground-secondary};
   --color--tooltip--foreground: var(--color--white);
 
   --font--family: system-ui, sans-serif;
@@ -73,12 +76,12 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
 
   --opacity--disabled: 0.3;
 
-  --spacing--xs: 2px;
-  --spacing--s: 5px;
-  --spacing--m: 10px;
-  --spacing--l: 20px;
-  --spacing--xl: 40px;
-  --spacing--xxl: 80px;
+  --spacing--xs: #{$spacing-xs};
+  --spacing--s: #{$spacing-s};
+  --spacing--m: #{$spacing-m};
+  --spacing--l: #{$spacing-l};
+  --spacing--xl: #{$spacing-xl};
+  --spacing--xxl: #{$spacing-xxl};
 
   --scrollbar--size: 5px;
   --scrollbar--thumb--color: var(--border--color);
@@ -87,8 +90,8 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
 
   --transition: all var(--transition--duration) var(--transition--easing);
   --transition--long: all var(--transition--duration--long) var(--transition--easing);
-  --transition--duration: 100ms;
-  --transition--duration--long: 250ms;
+  --transition--duration: #{$transition-duration};
+  --transition--duration--long: #{$transition-duration-long};
   --transition--easing: #{$easeOutSine};
 
   --z-index--focus-effect: 1;
@@ -97,25 +100,25 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --z-index--close-button: 101;
   --z-index--tooltip: 102;
 
-  --button--icon--size: 24px;
-  --dictionary--height: 260px;
-  --dictionary--height--mobile: 110px;
+  --button--icon--size: #{$button-icon-size};
+  --dictionary--height: #{$dictionary-height};
+  --dictionary--height--mobile: #{$dictionary-height-mobile};
   --key--height: 36px;
   --key--icon--size: 16px;
-  --logo--height: 60px;
-  --modal--width: 370px;
+  --logo--height: #{$logo-height};
+  --modal--width: #{$modal-width};
   --nav--height: calc(var(--logo--height) + var(--nav--padding));
   --nav--padding: var(--spacing--l);
   --results--icon--size: 18px;
-  --results--item--height: 40px;
-  --solver-column--width: 580px;
+  --results--item--height: #{$results-item-height};
+  --solver-column--width: #{$solver-column-width};
   --square-button--size: 32px;
-  --text-input--height: 40px;
+  --text-input--height: #{$text-input-height};
   --tooltip--max-width: 500px;
 
   @include media('<l') {
     --dictionary--height: var(--dictionary--height--mobile);
-    --logo--height: 48px;
+    --logo--height: #{$logo-height-small};
   }
 
   @include media('<s') {