@scrabble-solver/scrabble-solver 2.11.7 → 2.11.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.7",
+  "version": "2.11.8",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@floating-ui/react": "^0.21.1",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.7",
-    "@scrabble-solver/constants": "^2.11.7",
-    "@scrabble-solver/dictionaries": "^2.11.7",
-    "@scrabble-solver/logger": "^2.11.7",
-    "@scrabble-solver/solver": "^2.11.7",
-    "@scrabble-solver/types": "^2.11.7",
-    "@scrabble-solver/word-definitions": "^2.11.7",
+    "@scrabble-solver/configs": "^2.11.8",
+    "@scrabble-solver/constants": "^2.11.8",
+    "@scrabble-solver/dictionaries": "^2.11.8",
+    "@scrabble-solver/logger": "^2.11.8",
+    "@scrabble-solver/solver": "^2.11.8",
+    "@scrabble-solver/types": "^2.11.8",
+    "@scrabble-solver/word-definitions": "^2.11.8",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -71,5 +71,5 @@
     "sass": "^1.59.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "2d485c8578e634628fa627d0c140ff9656a7375b"
+  "gitHead": "fa0c31d85a98ce5704ff8e57741204a50071bdc6"
 }

package/src/components/Board/hooks/useBackgroundImage.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout, useMediaQueries } from 'hooks';
 import { FlagFill, Star } from 'icons';
 import { dataUrlToBlob, getTileSizes } from 'lib';
 import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BONUS_START, COLOR_FILTERED } from 'parameters';
@@ -14,6 +14,8 @@ import { Point } from 'types';
 
 import { getBonusColor } from '../lib';
 
+const BORDER_RADIUS_XS = 3;
+const GRID_LINE_SIZE = 1;
 const HORIZONTAL_LINE = 'h';
 const VERTICAL_LINE = 'v';
 const BONUS = 'b';
@@ -23,6 +25,8 @@ const CELL_FILTER = 'c';
 
 const useBackgroundImage = () => {
   const { boardSize, cellSize } = useAppLayout();
+  const { isLessThanXs } = useMediaQueries();
+  const borderRadius = isLessThanXs ? BORDER_RADIUS_XS : BORDER_RADIUS;
   const config = useTypedSelector(selectConfig);
   const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
   const cellFilter = useTypedSelector(selectCellFilter);
@@ -53,19 +57,19 @@ const useBackgroundImage = () => {
       >
         <defs>
           <symbol id={HORIZONTAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={1} width={viewBoxWidth} />
+            <rect fill={BORDER_COLOR_LIGHT} height={GRID_LINE_SIZE} width={viewBoxWidth} />
           </symbol>
 
           <symbol id={VERTICAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={1} />
+            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
           </symbol>
 
           <symbol id={BONUS}>
-            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
           </symbol>
 
           <symbol id={BONUS_WORD_2}>
-            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
 
             <text
               dominantBaseline="central"
@@ -82,7 +86,7 @@ const useBackgroundImage = () => {
           </symbol>
 
           <symbol id={BONUS_WORD_3}>
-            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
 
             <text
               dominantBaseline="central"
@@ -102,7 +106,7 @@ const useBackgroundImage = () => {
             <rect
               fill={COLOR_FILTERED}
               height={bonusSize}
-              rx={BORDER_RADIUS}
+              rx={borderRadius}
               width={bonusSize}
               x={bonusOffset}
               y={bonusOffset}
@@ -112,7 +116,7 @@ const useBackgroundImage = () => {
           </symbol>
         </defs>
 
-        <rect fill="white" height={viewBoxHeight} rx={BORDER_RADIUS} width={viewBoxWidth} x="0" y="0" />
+        <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
 
         {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
           <use key={index} href={`#${HORIZONTAL_LINE}`} y={(index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH} />
@@ -137,7 +141,7 @@ const useBackgroundImage = () => {
         <rect
           fill={COLOR_BONUS_START}
           height={bonusSize}
-          rx={BORDER_RADIUS}
+          rx={borderRadius}
           width={bonusSize}
           x={getX(center) + bonusOffset}
           y={getY(center) + bonusOffset}

package/src/components/Board/hooks/useGrid.ts

@@ -17,7 +17,7 @@ import { useDispatch } from 'react-redux';
 
 import { useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
 import { Direction, Point } from 'types';
 
@@ -290,6 +290,22 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         const { x, y } = position;
         const character = event.key.toLowerCase();
+        const isTogglingBlank = isCtrl(event) && character === 'b';
+        const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
+
+        if (isTogglingBlank) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.toggleCellIsBlank(position));
+          return;
+        }
+
+        if (isCtrl(event) && twoCharacterTile) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
+          moveFocus(1);
+          return;
+        }
+
         const cell = rows[y][x];
         const twoCharacterCandidate = cell.tile.character + character;
 

package/src/components/Key/Key.module.scss

@@ -1,19 +1,15 @@
-$key-size: 36px;
-$icon-size: 15px;
-
 .key {
   position: relative;
-  top: calc(0px - 2 * var(--border--width));
   display: inline-block;
-  min-width: $key-size;
-  height: $key-size;
+  min-width: var(--key--height);
+  height: var(--key--height);
   padding: var(--spacing--s) var(--spacing--m);
   background-color: var(--color--white);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--monospace);
-  line-height: calc(#{$key-size} - 2 * (var(--spacing--s) + var(--border--width)));
+  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
@@ -24,9 +20,9 @@ $icon-size: 15px;
 
   :global(svg) {
     position: absolute;
-    top: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    left: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    width: $icon-size;
-    height: $icon-size;
+    top: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    left: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    width: var(--key--icon--size);
+    height: var(--key--icon--size);
   }
 }

package/src/components/Rack/Rack.tsx

@@ -9,6 +9,7 @@ import {
   extractCharacters,
   extractInputValue,
   getTileSizes,
+  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -100,7 +101,9 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (event.currentTarget.value === event.key) {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          changeActiveIndex(1);
+        } else if (event.currentTarget.value === event.key) {
           // change event did not fire because the same character was typed over the current one
           // but we still want to move the caret
           event.preventDefault();

package/src/components/Rack/RackTile.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -80,7 +80,17 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown,
+      onKeyDown: (event) => {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
+        }
+
+        onKeyDown(event);
+      },
     });
   }, [index, onKeyDown]);
 

package/src/components/Tile/Tile.module.scss

@@ -17,6 +17,10 @@
   transition-property: background-color, color, box-shadow;
   user-select: none;
 
+  @include media('<xs') {
+    --border--radius: 3px;
+  }
+
   &.points1 {
     --background-color: var(--color--yellow);
   }

package/src/lib/index.ts

@@ -22,6 +22,7 @@ export { default as getTotalRemainingTilesCount } from './getTotalRemainingTiles
 export { default as groupResults } from './groupResults';
 export { default as guessLocale } from './guessLocale';
 export { default as inverseDirection } from './inverseDirection';
+export { default as isCtrl } from './isCtrl';
 export { default as isMac } from './isMac';
 export { default as isRegExp } from './isRegExp';
 export { default as isStringArray } from './isStringArray';

package/src/lib/isCtrl.ts

@@ -0,0 +1,7 @@
+import { KeyboardEvent } from 'react';
+
+const isCtrl = <T>(event: KeyboardEvent<T> | globalThis.KeyboardEvent): boolean => {
+  return event.ctrlKey || event.metaKey;
+};
+
+export default isCtrl;

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,10 +1,10 @@
 import { FunctionComponent, memo } from 'react';
 
-import { Modal } from 'components';
-import { useTranslate } from 'state';
+import { Key, Modal } from 'components';
+import { selectConfig, useTranslate, useTypedSelector } from 'state';
 
 import { Mapping } from './components';
-import { ARROWS, BACKSPACE, DEL, ENTER, SPACE } from './keys';
+import { ARROWS, BACKSPACE, CTRL, DEL, ENTER, SPACE } from './keys';
 
 interface Props {
   className?: string;
@@ -14,6 +14,7 @@ interface Props {
 
 const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
+  const config = useTypedSelector(selectConfig);
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
@@ -21,10 +22,25 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[ARROWS]} />
         <Mapping description={translate('keyMap.board-and-rack.remove-tile')} mapping={[DEL, BACKSPACE]} />
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[ENTER]} />
+        {config.twoCharacterTiles.length > 0 && (
+          <Mapping
+            description={translate('keyMap.board-and-rack.insert-two-letter-tile')}
+            mapping={[
+              [
+                CTRL,
+                <>
+                  {config.twoCharacterTiles.map(([firstLetter]) => (
+                    <Key key={firstLetter}>{firstLetter.toUpperCase()}</Key>
+                  ))}
+                </>,
+              ],
+            ]}
+          />
+        )}
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.board')}>
-        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE]} />
+        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE, [CTRL, <Key key="b">B</Key>]]} />
         <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[ARROWS]} />
       </Modal.Section>
 

package/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

@@ -18,13 +18,19 @@
   flex-wrap: wrap;
 }
 
-.group,
-.plus {
+.group {
   margin: 0 var(--spacing--s);
 }
 
-.slash {
-  margin: 0 var(--spacing--m);
+.slash,
+.plus {
+  min-width: var(--key--height);
+  height: var(--key--height);
+  padding: var(--spacing--s) var(--spacing--m);
+  font-family: var(--font--family--monospace);
+  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
+  vertical-align: middle;
+  text-align: center;
 }
 
 .group {

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;