@scrabble-solver/scrabble-solver 2.11.7 → 2.11.9

package/src/state/localStorage.ts

@@ -1,11 +1,12 @@
 import { Board, Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
-import { AutoGroupTiles, Rack } from 'types';
+import { AutoGroupTiles, InputMode, Rack } from 'types';
 
 const AUTO_GROUP_TILES = 'auto-group-tiles';
 const BOARD = 'board';
 const CONFIG_ID = 'config-id';
+const INPUT_MODE = 'input-mode';
 const LOCALE = 'locale';
 const RACK = 'rack';
 
@@ -38,6 +39,14 @@ const localStorage = {
     store.set(CONFIG_ID, configId, true);
   },
 
+  getInputMode(): InputMode | undefined {
+    return store.get(INPUT_MODE);
+  },
+
+  setInputMode(inputMode: InputMode | undefined): void {
+    store.set(INPUT_MODE, inputMode, true);
+  },
+
   getLocale(): Locale | undefined {
     return store.get(LOCALE);
   },

package/src/state/selectors.ts

@@ -65,6 +65,8 @@ export const selectLocaleAutoGroupTiles = createSelector([selectLocale, selectSe
 
 export const selectBoard = selectBoardRoot;
 
+export const selectInputMode = createSelector([selectSettingsRoot], (settings) => settings.inputMode);
+
 export const selectConfigId = createSelector([selectSettingsRoot], (settings) => settings.configId);
 
 export const selectConfig = createSelector([selectConfigId, selectLocale], getLocaleConfig);

package/src/state/slices/settingsInitialState.ts

@@ -2,21 +2,24 @@ import { literaki, scrabble } from '@scrabble-solver/configs';
 import { Locale } from '@scrabble-solver/types';
 
 import { guessLocale } from 'lib';
-import { AutoGroupTiles } from 'types';
+import { AutoGroupTiles, InputMode } from 'types';
 
 import localStorage from '../localStorage';
 
 export interface SettingsState {
   autoGroupTiles: AutoGroupTiles;
   configId: typeof literaki.id | typeof scrabble.id;
+  inputMode: InputMode;
   locale: Locale;
 }
 
 const localStorageAutoGroupTiles = localStorage.getAutoGroupTiles();
+const isTouchScreen = typeof globalThis.matchMedia !== 'undefined' && globalThis.matchMedia('(hover: none)').matches;
 
 const settingsInitialState: SettingsState = {
   autoGroupTiles: typeof localStorageAutoGroupTiles === 'undefined' ? 'left' : localStorageAutoGroupTiles,
   configId: localStorage.getConfigId() || scrabble.id,
+  inputMode: localStorage.getInputMode() || (isTouchScreen ? 'touchscreen' : 'keyboard'),
   locale: localStorage.getLocale() || guessLocale(),
 };
 

package/src/state/slices/settingsSlice.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Locale } from '@scrabble-solver/types';
 
-import { AutoGroupTiles } from 'types';
+import { AutoGroupTiles, InputMode } from 'types';
 
 import settingsInitialState from './settingsInitialState';
 
@@ -19,6 +19,11 @@ const settingsSlice = createSlice({
       return { ...state, configId };
     },
 
+    changeInputMode: (state, action: PayloadAction<InputMode>) => {
+      const inputMode = action.payload;
+      return { ...state, inputMode };
+    },
+
     changeLocale: (state, action: PayloadAction<Locale>) => {
       const locale = action.payload;
       return { ...state, locale };

package/src/styles/mixins.scss

@@ -103,6 +103,7 @@ $media-expressions: (
   padding: 0 var(--spacing--l);
   transition: var(--transition);
   font-size: var(--font--size--m);
+  outline: none;
 }
 
 @mixin text-stroke($color, $size: 1px) {

package/src/styles/variables.scss

@@ -107,6 +107,8 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --button--icon--size: 24px;
   --dictionary--height: 260px;
   --dictionary--height--mobile: 110px;
+  --key--height: 36px;
+  --key--icon--size: 16px;
   --logo--aspect-ratio: 682 / 166;
   --logo--height: 60px;
   --modal--width: 370px;

package/src/types/index.ts

@@ -4,6 +4,8 @@ export type AutoGroupTiles = 'left' | 'right' | null;
 
 export type Direction = 'horizontal' | 'vertical';
 
+export type InputMode = 'keyboard' | 'touchscreen';
+
 export interface Point {
   x: number;
   y: number;
@@ -45,6 +47,7 @@ export enum ResultColumn {
   WordsCount = 'words-count',
 }
 export type TranslationKey =
+  | 'cell.enter-word'
   | 'cell.filter-cell'
   | 'cell.set-blank'
   | 'cell.set-not-blank'
@@ -89,6 +92,7 @@ export type TranslationKey =
   | 'menu'
   | 'rack.placeholder'
   | 'rack.tile.location'
+  | 'rack.touchscreen.placeholder'
   | 'remaining-tiles'
   | 'results'
   | 'results.empty-state.no-results'
@@ -104,6 +108,9 @@ export type TranslationKey =
   | 'settings.autoGroupTiles.right'
   | 'settings.autoGroupTiles.null'
   | 'settings.game'
+  | 'settings.inputMode'
+  | 'settings.inputMode.keyboard'
+  | 'settings.inputMode.touchscreen'
   | 'settings.language'
   | 'words'
   | 'words.invalid'