scrabble-solver 2.18.10-alpha.0 → 2.18.10-alpha.2

package/packages/scrabble-solver/src/styles/_tokens.scss

@@ -0,0 +1,60 @@
+@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;
+$tile-size-max: 80px;

package/packages/scrabble-solver/src/styles/animations.scss

@@ -0,0 +1,49 @@
+@keyframes hide {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes wave {
+  $offset: 6px;
+
+  0% {
+    transform: translateY(0px);
+  }
+
+  25% {
+    transform: translateY($offset);
+  }
+
+  75% {
+    transform: translateY(-$offset);
+  }
+
+  100% {
+    transform: translateY(0px);
+  }
+}

package/packages/scrabble-solver/src/styles/global.scss

@@ -0,0 +1,61 @@
+@use 'normalize.css';
+
+@use './mixins' as *;
+@use './variables';
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+* {
+  font-family: var(--font--family);
+}
+
+html,
+body {
+  margin: 0 auto;
+  padding: 0;
+}
+
+body {
+  background-color: var(--color--background);
+  color: var(--color--foreground);
+  font-size: var(--font--size--m);
+  line-height: var(--line-height);
+}
+
+a {
+  @include focus-effect;
+
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+h1,
+h2,
+h3,
+h4 {
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+  margin: 0;
+}
+
+/* https://github.com/vercel/next.js/discussions/13387#discussioncomment-5694715 */
+nextjs-portal {
+  display: none;
+}
+
+/**
+ * Added pre-paint by _document's inline script when the persisted game differs from the
+ * prerendered default board; removed after hydration applies the persisted config.
+ * The class name must match CONFIG_PENDING_CLASS in parameters/index.ts.
+ */
+html.config-pending main {
+  visibility: hidden;
+}

package/packages/scrabble-solver/src/styles/mixins.scss

@@ -0,0 +1,117 @@
+@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 {
+  scrollbar-color: var(--scrollbar--thumb--color) var(--scrollbar--thumb--track);
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: var(--scrollbar--size);
+    background-color: var(--scrollbar--track--color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar--thumb--color);
+  }
+
+  &:hover {
+    scrollbar-color: var(--scrollbar--thumb--color--highlight) var(--scrollbar--track--color);
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar--thumb--color--highlight);
+    }
+  }
+}
+
+/**
+ * It does not work when applied on input elements.
+ */
+@mixin focus-effect {
+  --focus-effect--size: 6px;
+
+  position: relative;
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: var(--z-index--focus-effect);
+    transition: var(--transition);
+    border-radius: var(--border--radius);
+    box-shadow: 0 0 0 var(--focus-effect--size) transparent;
+    pointer-events: none;
+  }
+
+  &:focus-within {
+    &,
+    * {
+      outline: none;
+    }
+
+    &::after {
+      content: '';
+      box-shadow: 0 0 0 var(--focus-effect--size) var(--color--focus);
+    }
+  }
+}
+
+@mixin disabled {
+  opacity: var(--opacity--disabled);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+@mixin ellipsis {
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@mixin button-reset {
+  padding: 0;
+  border: none;
+  outline: none;
+  font: inherit;
+  color: inherit;
+  background: none;
+}
+
+@mixin list-reset {
+  padding: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  list-style-type: none;
+}
+
+@mixin text-input {
+  width: 100%;
+  height: var(--text-input--height);
+  padding: 0 var(--spacing--l);
+  transition: var(--transition);
+  font-size: var(--font--size--m);
+  outline: none;
+}
+
+@mixin text-stroke($color, $size: 1px) {
+  text-shadow:
+    $size 0 $color,
+    (-$size) 0 $color,
+    0 $size $color,
+    0 (-$size) $color,
+    (-$size) (-$size) $color,
+    (-$size) $size $color,
+    $size (-$size) $color,
+    $size $size $color;
+}

package/packages/scrabble-solver/src/styles/variables.module.scss

@@ -0,0 +1,32 @@
+@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);
+
+  borderColorLight: $border-color-light;
+  borderWidth: strip-unit($border-width);
+
+  colorBlueLight: $color-blue-light;
+  colorGreenLight: $color-green-light;
+  colorRedLight: $color-red-light;
+  colorVioletLight: $color-violet-light;
+  colorYellowLight: $color-yellow-light;
+
+  colorBackground: $color-background;
+
+  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;
+
+  transitionDuration: strip-unit($transition-duration);
+  transitionDurationLong: strip-unit($transition-duration-long);
+
+  resultsItemHeight: strip-unit($results-item-height);
+}

package/packages/scrabble-solver/src/styles/variables.module.scss.d.ts

@@ -0,0 +1,27 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly borderColorLight: string;
+  readonly borderWidth: string;
+  readonly breakpointL: string;
+  readonly breakpointM: string;
+  readonly breakpointS: string;
+  readonly breakpointXl: string;
+  readonly breakpointXs: string;
+  readonly colorBackground: string;
+  readonly colorBlueLight: string;
+  readonly colorBonusCharacterMultiplier2: string;
+  readonly colorBonusCharacterMultiplier3: string;
+  readonly colorBonusCharacterMultiplier4: string;
+  readonly colorBonusWordMultiplier2: string;
+  readonly colorBonusWordMultiplier3: string;
+  readonly colorBonusWordMultiplier4: string;
+  readonly colorGreenLight: string;
+  readonly colorRedLight: string;
+  readonly colorVioletLight: string;
+  readonly colorYellowLight: string;
+  readonly resultsItemHeight: string;
+  readonly transitionDuration: string;
+  readonly transitionDurationLong: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/styles/variables.scss

@@ -0,0 +1,176 @@
+@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: #{$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;
+  --box-shadow--color: rgba(0, 0, 0, 0.15);
+  --box-shadow--color--inverse: rgba(255, 255, 255, 0.85);
+  --box-shadow--color--raised: rgba(34, 34, 34, 0.8);
+  --box-shadow--spread: 1px;
+  --box-shadow--null: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) transparent;
+  --box-shadow--error: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--color--error);
+  --box-shadow--raised: inset -2px -2px 2px -1px var(--box-shadow--color--raised);
+  --box-shadow--raised--subtle: inset -1px -1px 1px 0 var(--box-shadow--color--raised);
+
+  --color--white: #ffffff;
+  --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: #{$color-inactive};
+  --color--background: #{$color-background};
+  --color--background--element: var(--color--white);
+  --color--background--overlay: rgba(255, 255, 255, 0.65);
+  --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);
+  --color--info: #1868ad;
+  --color--success: #00a900;
+  --color--warning: hsl(35, 90%, 60%);
+  --color--primary: var(--color--violet);
+  --color--primary--light: var(--color--violet--light);
+  --color--primary--opposite: var(--color--white);
+
+  --color--bonus--character--1: var(--color--yellow--light);
+  --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: #{$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: #{$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: 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;
+  --font--size--h2: 22px;
+  --font--size--h3: 18px;
+  --font--size--m: 16px;
+
+  --line-height: 1.5;
+
+  --opacity--disabled: 0.3;
+
+  --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);
+  --scrollbar--thumb--color--highlight: var(--color--foreground--secondary);
+  --scrollbar--track--color: transparent;
+
+  --transition: all var(--transition--duration) var(--transition--easing);
+  --transition--long: all var(--transition--duration--long) var(--transition--easing);
+  --transition--duration: #{$transition-duration};
+  --transition--duration--long: #{$transition-duration-long};
+  --transition--easing: #{$easeOutSine};
+
+  --z-index--focus-effect: 1;
+  --z-index--actions: 2;
+  --z-index--modal: 100;
+  --z-index--close-button: 101;
+  --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(2 * var(--nav--padding) + var(--logo--height));
+  --nav--padding: var(--spacing--l);
+  --results--icon--size: 18px;
+  --results--item--height: #{$results-item-height};
+  --solver-column--width: #{$solver-column-width};
+  --square-button--size: 32px;
+  --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') {
+    --box-shadow--blur: 5px;
+    --modal--width: 100%;
+  }
+
+  @include media('<xs') {
+    --box-shadow--blur: 3px;
+  }
+}

package/packages/scrabble-solver/src/types/api.ts

@@ -0,0 +1,21 @@
+import { type BoardJson, type Game, type Locale } from '@scrabble-solver/types';
+
+export interface SolveRequestPayload {
+  board: BoardJson;
+  characters: string[];
+  game: Game;
+  locale: Locale;
+}
+
+export interface VerifyRequestPayload {
+  board: BoardJson;
+  game: Game;
+  locale: Locale;
+}
+
+export interface VisitRequestPayload {
+  game: Game;
+  locale: Locale;
+  referrer: string;
+  url: string;
+}