@scrabble-solver/scrabble-solver 2.17.0 → 2.18.1

package/src/styles/variables.scss

@@ -61,10 +61,12 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --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--progress: var(--color--primary--light);
+  --color--progress--background: var(--color--inactive);
   --color--tooltip--background: #{$color-foreground-secondary};
   --color--tooltip--foreground: var(--color--white);
 
-  --font--family: system-ui, sans-serif;
+  --font--family: Ubuntu, system-ui, sans-serif;
   --font--family--monospace:
     ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
   --font--size--h1: 30px;
@@ -101,13 +103,14 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --z-index--tooltip: 102;
 
   --button--icon--size: #{$button-icon-size};
+  --button--height: calc(var(--button--icon--size) + 2 * var(--spacing--m) + 2 * var(--border--width));
   --dictionary--height: #{$dictionary-height};
   --dictionary--height--mobile: #{$dictionary-height-mobile};
   --key--height: 36px;
   --key--icon--size: 16px;
   --logo--height: #{$logo-height};
   --modal--width: #{$modal-width};
-  --nav--height: calc(var(--logo--height) + var(--nav--padding));
+  --nav--height: calc(2 * var(--nav--padding) + var(--logo--height));
   --nav--padding: var(--spacing--l);
   --results--icon--size: 18px;
   --results--item--height: #{$results-item-height};
@@ -116,9 +119,50 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --text-input--height: #{$text-input-height};
   --tooltip--max-width: 500px;
 
+  /**
+   * Sizes of everything visible before hydration.
+   * Defaults are of classic Scrabble config.
+   */
+  --board-cols: 15;
+  --board-rows: 15;
+  --rack-size: 7;
+
+  --components-spacing: var(--spacing--xl);
+  --solver-column-total: calc(var(--solver-column--width) + var(--components-spacing));
+  --candidate-picker-height: 0px;
+  --max-board-width: calc(100vw - var(--solver-column-total) - 2 * var(--components-spacing));
+  --rack-tile-size: min(
+    calc((var(--max-board-width) - 2 * var(--border--width)) / var(--rack-size)),
+    #{$tile-size-max}
+  );
+  --bottom-container-height: calc(
+    var(--candidate-picker-height) + var(--rack-tile-size) + 2 * var(--components-spacing)
+  );
+  --max-board-height: max(calc(100dvh - var(--nav--height) - var(--bottom-container-height)), 0px);
+  --cell-from-width: calc(
+    (var(--max-board-width) - (var(--board-cols) + 2) * var(--border--width)) / (var(--board-cols) + 0.5)
+  );
+  --cell-from-height: calc(
+    (var(--max-board-height) - (var(--board-rows) + 2) * var(--border--width)) / (var(--board-rows) + 0.5)
+  );
+  --cell-size: min(var(--cell-from-width), var(--cell-from-height), #{$tile-size-max});
+  --coordinate-size: calc(0.5 * var(--cell-size));
+  --controls-max-width: calc(var(--rack-size) * var(--rack-tile-size) + 2 * var(--border--width));
+
+  @include media('<xl') {
+    --components-spacing: var(--spacing--l);
+  }
+
   @include media('<l') {
     --dictionary--height: var(--dictionary--height--mobile);
     --logo--height: #{$logo-height-small};
+    --solver-column-total: 0px;
+    --candidate-picker-height: calc(var(--button--height) + var(--components-spacing));
+  }
+
+  @include media('<m') {
+    // Full-width board: height no longer constrains the cell size.
+    --cell-size: min(var(--cell-from-width), #{$tile-size-max});
   }
 
   @include media('<s') {

package/src/types/index.ts

@@ -15,7 +15,7 @@ export type CellFilter = {
 
 export type RemoveCellFilters = 'always' | 'never' | null;
 
-export type Direction = 'horizontal' | 'vertical';
+export { type Direction } from '@scrabble-solver/types';
 
 export type InputMode = 'keyboard' | 'touchscreen';
 
@@ -152,7 +152,6 @@ export type TranslationKey =
   | 'settings.language'
   | 'settings.showCoordinates'
   | 'settings.showCoordinates.alternative'
-  | 'settings.showCoordinates.hidden'
   | 'settings.showCoordinates.original'
   | 'words'
   | 'words.invalid'