@scrabble-solver/scrabble-solver 2.13.7 → 2.13.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.7",
+  "version": "2.13.8",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -27,21 +27,21 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.16",
+    "@floating-ui/react": "^0.26.17",
     "@kamilmielnik/trie": "^3.0.0",
     "@reduxjs/toolkit": "^2.2.5",
-    "@scrabble-solver/configs": "^2.13.7",
-    "@scrabble-solver/constants": "^2.13.7",
-    "@scrabble-solver/dictionaries": "^2.13.7",
-    "@scrabble-solver/logger": "^2.13.7",
-    "@scrabble-solver/solver": "^2.13.7",
-    "@scrabble-solver/types": "^2.13.7",
-    "@scrabble-solver/word-definitions": "^2.13.7",
+    "@scrabble-solver/configs": "^2.13.8",
+    "@scrabble-solver/constants": "^2.13.8",
+    "@scrabble-solver/dictionaries": "^2.13.8",
+    "@scrabble-solver/logger": "^2.13.8",
+    "@scrabble-solver/solver": "^2.13.8",
+    "@scrabble-solver/types": "^2.13.8",
+    "@scrabble-solver/word-definitions": "^2.13.8",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^14.2.3",
+    "next": "^14.2.4",
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
     "react-cool-onclickoutside": "^1.7.0",
@@ -70,7 +70,7 @@
     "@types/react-window": "^1.8.8",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "sass": "^1.77.4"
+    "sass": "^1.77.5"
   },
-  "gitHead": "6aec8ec770488560a1db1ccc535ebf3886bdd4ec"
+  "gitHead": "294a7a790843ef9d260be52a3144e323c8ac0641"
 }

package/src/components/Alert/Alert.module.scss

@@ -14,18 +14,9 @@
   justify-content: center;
   padding: var(--spacing--m);
   color: var(--color--foreground--secondary);
-
-  [dir='ltr'] & {
-    border-top-left-radius: var(--border--radius);
-    border-bottom-left-radius: var(--border--radius);
-    border-right: var(--border);
-  }
-
-  [dir='rtl'] & {
-    border-top-right-radius: var(--border--radius);
-    border-bottom-right-radius: var(--border--radius);
-    border-left: var(--border);
-  }
+  border-start-start-radius: var(--border--radius);
+  border-end-start-radius: var(--border--radius);
+  border-inline-end: var(--border);
 
   .error & {
     background-color: var(--color--red--light);

package/src/components/Board/Board.module.scss

@@ -46,10 +46,7 @@
 .iconBackground,
 .icon {
   position: absolute;
-  top: calc((100% - var(--size)) / 2);
-  right: calc((100% - var(--size)) / 2);
-  bottom: calc((100% - var(--size)) / 2);
-  left: calc((100% - var(--size)) / 2);
+  inset: calc((100% - var(--size)) / 2);
   width: var(--size);
   height: var(--size);
 }

package/src/components/Board/components/Actions/Actions.module.scss

@@ -18,36 +18,16 @@
   }
 
   & + & {
-    [dir='ltr'] & {
-      border-left: none;
-    }
-
-    [dir='rtl'] & {
-      border-right: none;
-    }
+    border-inline-start: none;
   }
 
-  [dir='ltr'] & {
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+  &:first-child {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
-  [dir='rtl'] & {
-    &:first-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:last-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  &:last-child {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
 }

package/src/components/Board/components/Cell/Cell.module.scss

@@ -7,10 +7,7 @@
 
   input {
     position: absolute;
-    top: -100%;
-    right: -100%;
-    left: -100%;
-    bottom: -100%;
+    inset: -100%;
     width: 300%;
     height: 300%;
     clip-path: inset((100% / 3));
@@ -55,43 +52,19 @@
   @include lighthouse-input-size-hack;
 
   &.sharpTopLeft {
-    [dir='ltr'] & {
-      border-top-left-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-top-right-radius: 0;
-    }
+    border-start-start-radius: 0;
   }
 
   &.sharpTopRight {
-    [dir='ltr'] & {
-      border-top-right-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-top-left-radius: 0;
-    }
+    border-start-end-radius: 0;
   }
 
   &.sharpBottomLeft {
-    [dir='ltr'] & {
-      border-bottom-left-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-bottom-right-radius: 0;
-    }
+    border-end-start-radius: 0;
   }
 
   &.sharpBottomRight {
-    [dir='ltr'] & {
-      border-bottom-right-radius: 0;
-    }
-
-    [dir='rtl'] & {
-      border-bottom-left-radius: 0;
-    }
+    border-end-end-radius: 0;
   }
 
   &:focus-within {

package/src/components/Board/components/InputPrompt/InputPrompt.module.scss

@@ -9,15 +9,8 @@
 }
 
 .toggleDirection {
-  [dir='ltr'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .input {
@@ -32,15 +25,8 @@
 }
 
 .insert {
-  [dir='ltr'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 
 .insertIcon {

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

@@ -1,4 +1,4 @@
-/* eslint-disable max-statements */
+/* eslint-disable max-lines, max-statements */
 
 import { BONUS_CHARACTER, BONUS_WORD } from '@scrabble-solver/constants';
 import { useMemo } from 'react';
@@ -146,10 +146,21 @@ const useBackgroundImage = () => {
           </symbol>
         </defs>
 
-        <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+        {showCoordinates === 'hidden' && (
+          <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+        )}
 
         {showCoordinates !== 'hidden' && (
           <>
+            <rect fill={COLOR_BACKGROUND} height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+            <rect
+              fill="white"
+              height={viewBoxHeight - coordinatesSize}
+              width={viewBoxWidth - coordinatesSize}
+              x={direction === 'ltr' ? coordinatesSize : 0}
+              y={coordinatesSize}
+            />
+
             <rect fill={COLOR_BACKGROUND} height={coordinatesSize} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
             <rect
               fill={COLOR_BACKGROUND}
@@ -159,10 +170,10 @@ const useBackgroundImage = () => {
               y="0"
               width={coordinatesSize}
             />
-            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize} />
+            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize - BORDER_WIDTH} />
             <use
               href={`#${VERTICAL_LINE}`}
-              x={direction === 'ltr' ? coordinatesSize : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
+              x={direction === 'ltr' ? coordinatesSize - BORDER_WIDTH : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
             />
           </>
         )}

package/src/components/Button/Button.module.scss

@@ -77,12 +77,5 @@
   flex: 1;
   font-size: var(--font--size--h3);
   transition: var(--transition);
-
-  [dir='ltr'] & {
-    text-align: left;
-  }
-
-  [dir='rtl'] & {
-    text-align: right;
-  }
+  text-align: start;
 }

package/src/components/Dictionary/Dictionary.module.scss

@@ -55,14 +55,7 @@
 
 .definitions {
   margin: 0;
-
-  [dir='ltr'] & {
-    padding-left: var(--spacing--l);
-  }
-
-  [dir='rtl'] & {
-    padding-right: var(--spacing--l);
-  }
+  padding-inline-start: var(--spacing--l);
 }
 
 .definition {

package/src/components/Loading/Loading.module.scss

@@ -1,10 +1,7 @@
 .loading,
 .dim {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
 }
 
 .loading {

package/src/components/Modal/Modal.module.scss

@@ -3,14 +3,7 @@
 .modal,
 .closeButton {
   top: 0;
-
-  [dir='ltr'] & {
-    right: 0;
-  }
-
-  [dir='rtl'] & {
-    left: 0;
-  }
+  inset-inline-end: 0;
 }
 
 .modal {
@@ -92,14 +85,7 @@
 .title {
   font-size: var(--font--size--h1);
   font-weight: 300;
-
-  [dir='ltr'] & {
-    padding-right: calc(var(--square-button--size) + var(--spacing--s));
-  }
-
-  [dir='rtl'] & {
-    padding-left: calc(var(--square-button--size) + var(--spacing--s));
-  }
+  padding-inline-end: calc(var(--square-button--size) + var(--spacing--s));
 }
 
 .closeButton {

package/src/components/Rack/Rack.module.scss

@@ -77,25 +77,11 @@
 }
 
 .sharpLeft {
-  [dir='ltr'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 
 .sharpRight {
-  [dir='ltr'] & {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  [dir='rtl'] & {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
 }

package/src/components/Rack/components/InputPrompt/InputPrompt.module.scss

@@ -10,10 +10,7 @@
   @include text-input;
 
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   border-radius: var(--border--radius);

package/src/components/Results/Results.module.scss

@@ -24,10 +24,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
 .listContainer {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 .list {
@@ -61,23 +58,11 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   background-color: var(--color--background);
 
   &:first-child {
-    [dir='ltr'] & {
-      border-top-left-radius: inherit;
-    }
-
-    [dir='rtl'] & {
-      border-top-right-radius: inherit;
-    }
+    border-start-start-radius: inherit;
   }
 
   &:last-child {
-    [dir='ltr'] & {
-      border-top-right-radius: inherit;
-    }
-
-    [dir='rtl'] & {
-      border-top-left-radius: inherit;
-    }
+    border-start-end-radius: inherit;
   }
 }
 
@@ -97,11 +82,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   @include ellipsis;
 
   flex: 0 1 auto;
-  text-align: left;
-
-  [dir='rtl'] & {
-    text-align: right;
-  }
+  text-align: start;
 }
 
 .result {
@@ -163,26 +144,13 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
   .result &:first-child,
   .headerButton:first-child & {
-    [dir='ltr'] & {
-      padding-left: $row-padding-horizontal;
-      text-align: left;
-    }
-
-    [dir='rtl'] & {
-      padding-right: $row-padding-horizontal;
-      text-align: right;
-    }
+    text-align: start;
+    padding-inline-start: $row-padding-horizontal;
   }
 
   .result &:last-child,
   .headerButton:last-child & {
-    [dir='ltr'] & {
-      padding-right: $row-padding-horizontal;
-    }
-
-    [dir='rtl'] & {
-      padding-left: $row-padding-horizontal;
-    }
+    padding-inline-end: $row-padding-horizontal;
   }
 
   &:last-child {

package/src/components/Results/useColumns.ts

@@ -7,7 +7,7 @@ import getCoordinatesColumn from './getCoordinatesColumn';
 import getLocaleColumns from './getLocaleColumns';
 import { Column } from './types';
 
-const COLUMNS_XS = [ResultColumn.Word, ResultColumn.Points];
+const COLUMNS_XS = [ResultColumn.Coordinates, ResultColumn.Word, ResultColumn.Points];
 
 const COLUMNS_S = [...COLUMNS_XS, ResultColumn.BlanksCount, ResultColumn.WordsCount];
 

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss

@@ -82,23 +82,11 @@
 .points {
   flex: 0 0 auto;
   font-weight: bold;
+  border-inline-end: var(--border);
 
-  [dir='ltr'] & {
-    border-right: var(--border);
-
-    @include media('<xs') {
-      border-right: none;
-      padding-right: var(--spacing--xs);
-    }
-  }
-
-  [dir='rtl'] & {
-    border-left: var(--border);
-
-    @include media('<xs') {
-      border-left: none;
-      padding-left: var(--spacing--xs);
-    }
+  @include media('<xs') {
+    border-inline-end: none;
+    padding-inline-end: var(--spacing--xs);
   }
 }
 
@@ -110,40 +98,21 @@
   text-align: center;
   white-space: pre-wrap;
 
-  [dir='ltr'] & {
-    @include media('<xs') {
-      padding: var(--spacing--m);
-      text-align: left;
-    }
-  }
-
-  [dir='rtl'] & {
-    @include media('<xs') {
-      padding: var(--spacing--m);
-      text-align: right;
-    }
+  @include media('<xs') {
+    padding: var(--spacing--m);
+    text-align: start;
   }
 }
 
 .iconContainer {
   flex: 0 0 auto;
   display: flex;
-
-  [dir='ltr'] & {
-    padding-right: var(--spacing--l);
-  }
-
-  [dir='rtl'] & {
-    padding-left: var(--spacing--l);
-  }
+  padding-inline-end: var(--spacing--l);
 }
 
 .spinnerContainer {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -76,10 +76,7 @@
 
 .input {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   border: none;
@@ -98,6 +95,8 @@
   @include text-stroke(var(--background-color), 1px);
 
   position: absolute;
+  inset-block-end: 1%;
+  inset-inline-end: 9%;
   font-weight: bold;
   user-select: none;
   pointer-events: none;
@@ -106,16 +105,6 @@
   @include media('<xs') {
     display: none;
   }
-
-  [dir='ltr'] & {
-    bottom: 1%;
-    right: 9%;
-  }
-
-  [dir='rtl'] & {
-    top: 1%;
-    left: 9%;
-  }
 }
 
 .alert {
@@ -124,6 +113,9 @@
   position: absolute;
   width: var(--size);
   height: var(--size);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  border-start-end-radius: inherit;
   background: radial-gradient(
     var(--color--error--opposite),
     var(--color--error--opposite) 85%,
@@ -132,16 +124,4 @@
   );
   color: var(--color--error);
   pointer-events: none;
-
-  [dir='ltr'] & {
-    top: 0;
-    right: 0;
-    border-top-right-radius: inherit;
-  }
-
-  [dir='rtl'] & {
-    top: 0;
-    left: 0;
-    border-top-left-radius: inherit;
-  }
 }

package/src/components/index.ts

@@ -2,7 +2,6 @@ export { default as Alert } from './Alert';
 export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';
-export { default as Checkbox } from './Checkbox';
 export { default as Dictionary } from './Dictionary';
 export { default as DictionaryInput } from './DictionaryInput';
 export { default as EmptyState } from './EmptyState';

package/src/i18n/languages/german.json

@@ -22,7 +22,7 @@
   "dictionary.empty-state.no-definitions": "Wort existiert im Wörterbuch aber hat keine Definition.",
   "dictionary.empty-state.no-results": "Wort kann nicht im Wörterbuch gefunden werden.",
   "dictionary.empty-state.not-allowed": "Dieses Wort ist nicht erlaubt.",
-  "dictionary.empty-state.uninitialized": "Die Wörterbuchdéfinition wird hier angezeigt.",
+  "dictionary.empty-state.uninitialized": "Die Wörterbuchdefinition wird hier angezeigt.",
   "dictionary.input.placeholder": "Durchsuche Wörterbuch…",
   "dictionary.input.title": "Durch Kommas getrennte Wörter",
   "empty-state.error": "Fehler",

package/src/icons/index.ts

@@ -5,8 +5,6 @@ export { default as ArrowUp } from './ArrowUp.svg';
 export { default as BookHalf } from './BookHalf.svg';
 export { default as CardChecklist } from './CardChecklist.svg';
 export { default as Check } from './Check.svg';
-export { default as CheckboxChecked } from './CheckboxChecked.svg';
-export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
 export { default as ChevronDown } from './ChevronDown.svg';
 export { default as ChevronLeft } from './ChevronLeft.svg';
 export { default as ChevronRight } from './ChevronRight.svg';

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

@@ -39,10 +39,10 @@
   }
 
   &:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   &:last-child {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }