@scrabble-solver/scrabble-solver 2.13.7 → 2.13.9

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

@@ -13,8 +13,6 @@
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
-  transition: var(--transition);
-  transition-property: background-color, color, box-shadow;
   user-select: none;
 
   @include media('<xs') {
@@ -76,10 +74,7 @@
 
 .input {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   border: none;
@@ -98,6 +93,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 +103,6 @@
   @include media('<xs') {
     display: none;
   }
-
-  [dir='ltr'] & {
-    bottom: 1%;
-    right: 9%;
-  }
-
-  [dir='rtl'] & {
-    top: 1%;
-    left: 9%;
-  }
 }
 
 .alert {
@@ -124,6 +111,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 +122,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/Tile/Tile.tsx

@@ -9,14 +9,12 @@ import {
   Ref,
   TouchEventHandler,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
 } from 'react';
 
 import { useAppLayout } from 'hooks';
 import { getTileSizes, noop } from 'lib';
-import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
 
 import TilePure from './TilePure';
@@ -65,7 +63,7 @@ const Tile: FunctionComponent<Props> = ({
   onTouchStart = noop,
 }) => {
   const locale = useTypedSelector(selectLocale);
-  const { animateTile, showTilePoints } = useAppLayout();
+  const { showTilePoints } = useAppLayout();
   const { pointsFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
@@ -83,18 +81,6 @@ const Tile: FunctionComponent<Props> = ({
     [onKeyDown],
   );
 
-  useEffect(() => {
-    if (!ref.current?.parentElement || !character || !animateTile) {
-      return;
-    }
-
-    ref.current.parentElement.animate(TILE_APPEAR_KEYFRAMES, {
-      duration: TILE_APPEAR_DURATION,
-      easing: EASE_OUT_CUBIC,
-      fill: 'forwards',
-    });
-  }, [character, animateTile]);
-
   return (
     <TilePure
       aria-label={ariaLabel}

package/src/components/Tooltip/Tooltip.module.scss

@@ -7,6 +7,7 @@
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
   text-align: center;
+  pointer-events: none;
 }
 
 .arrow {

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/hooks/useAppLayout.ts

@@ -71,7 +71,6 @@ const useAppLayout = () => {
 
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
-    animateTile: !isLessThanXs,
     boardSize,
     cellSize,
     coordinatesFontSize: coordinatesSize * 0.6,

package/src/i18n/languages/english.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Enter word",
-  "cell.filter-cell": "Target destination",
+  "cell.filter-cell.exclude": "Exclude destination",
+  "cell.filter-cell.include": "Target destination",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.tile.location": "Board: tile ({{x}}, {{y}})",

package/src/i18n/languages/french.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Entrez un mot",
-  "cell.filter-cell": "Destination cible",
+  "cell.filter-cell.exclude": "Exclure la destination",
+  "cell.filter-cell.include": "Destination cible",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.tile.location": "Plateau: la case ({{x}}, {{y}})",

package/src/i18n/languages/german.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Wort eingeben",
-  "cell.filter-cell": "Zielort",
+  "cell.filter-cell.exclude": "Ziel ausschließen",
+  "cell.filter-cell.include": "Ziel anvisieren",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.tile.location": "Brett: Stein ({{x}}, {{y}})",
@@ -22,7 +23,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/i18n/languages/persian.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "کلمه را وارد کنید",
-  "cell.filter-cell": "مقصد",
+  "cell.filter-cell.exclude": "مقصد را حذف کنید",
+  "cell.filter-cell.include": "مقصد مورد نظر",
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
   "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",

package/src/i18n/languages/polish.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Wprowadź słowo",
-  "cell.filter-cell": "Miejsce docelowe",
+  "cell.filter-cell.exclude": "Wyklucz miejsce",
+  "cell.filter-cell.include": "Miejsce docelowe",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.tile.location": "Plansza: płytka ({{x}}, {{y}})",

package/src/i18n/languages/romanian.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Introducere cuvant",
-  "cell.filter-cell": "Destinatia",
+  "cell.filter-cell.exclude": "Excludeți destinația",
+  "cell.filter-cell.include": "Destinație țintă",
   "cell.set-blank": "Marcare camp liber",
   "cell.set-not-blank": "Marcare camp ocupat ",
   "cell.tile.location": "Tabla: camp ({{x}}, {{y}})",

package/src/i18n/languages/spanish.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Ingresar palabra",
-  "cell.filter-cell": "Destino objetivo",
+  "cell.filter-cell.exclude": "Excluir destino",
+  "cell.filter-cell.include": "Destino objetivo",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.tile.location": "Tablero: espacio ({{x}}, {{y}})",

package/src/icons/Ban.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/ban/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -2,11 +2,10 @@ export { default as ArrowDown } from './ArrowDown.svg';
 export { default as ArrowLeft } from './ArrowLeft.svg';
 export { default as ArrowRight } from './ArrowRight.svg';
 export { default as ArrowUp } from './ArrowUp.svg';
+export { default as Ban } from './Ban.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/lib/groupResults.ts

@@ -1,8 +1,9 @@
 import { Result } from '@scrabble-solver/types';
 
-import { Point } from 'types';
+import { CellFilterEntry } from 'types';
 
 import createRegExp from './createRegExp';
+import resultMatchesCellFilter from './resultMatchesCellFilter';
 
 interface GroupedResults {
   matching: Result[];
@@ -12,7 +13,7 @@ interface GroupedResults {
 const groupResults = (
   results: Result[] | undefined,
   query: string,
-  cellFilter: Point[],
+  cellFilter: CellFilterEntry[],
 ): GroupedResults | undefined => {
   if (typeof results === 'undefined') {
     return results;
@@ -23,12 +24,8 @@ const groupResults = (
   return results.reduce<GroupedResults>(
     (groupedResults, result) => {
       const matchesQuery = () => regExp.test(result.word);
-      const matchesCellFilter = () =>
-        cellFilter.every(({ x, y }) => {
-          return result.cells.some((cell) => cell.x === x && cell.y === y);
-        });
 
-      if (matchesCellFilter() && matchesQuery()) {
+      if (resultMatchesCellFilter(result, cellFilter) && matchesQuery()) {
         groupedResults.matching.push(result);
       } else {
         groupedResults.other.push(result);

package/src/lib/index.ts

@@ -32,6 +32,7 @@ export { default as isUpperCase } from './isUpperCase';
 export { default as memoize } from './memoize';
 export { default as noop } from './noop';
 export { default as numberComparator } from './numberComparator';
+export { default as resultMatchesCellFilter } from './resultMatchesCellFilter';
 export { default as reverseComparator } from './reverseComparator';
 export { default as sortResults } from './sortResults';
 export { default as unorderedArraysEqual } from './unorderedArraysEqual';

package/src/lib/resultMatchesCellFilter.ts

@@ -0,0 +1,23 @@
+import { Result } from '@scrabble-solver/types';
+
+import { CellFilterEntry } from 'types';
+
+const resultMatchesCellFilter = (result: Result, cellFilter: CellFilterEntry[]) => {
+  const excludeFilters = cellFilter.filter((filter) => filter.type === 'exclude');
+  const matchesExcludeFilters = excludeFilters.every(({ x, y }) => {
+    return result.cells.every((cell) => cell.x !== x || cell.y !== y);
+  });
+
+  if (!matchesExcludeFilters) {
+    return false;
+  }
+
+  const includeFilter = cellFilter.filter((filter) => filter.type === 'include');
+  const matchesIncludeFilters = includeFilter.every(({ x, y }) => {
+    return result.cells.some((cell) => cell.x === x && cell.y === y);
+  });
+
+  return matchesExcludeFilters && matchesIncludeFilters;
+};
+
+export default resultMatchesCellFilter;

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;
   }
 }

package/src/modals/MenuModal/MenuModal.module.scss

@@ -31,13 +31,7 @@
   --aspect-ratio: var(--highest-flag-aspect-ratio);
   --padding: calc(var(--spacing--l) + var(--button--icon--size) * var(--aspect-ratio));
 
-  [dir='ltr'] & {
-    padding-right: var(--padding);
-  }
-
-  [dir='rtl'] & {
-    padding-left: var(--padding);
-  }
+  padding-inline-end: var(--padding);
 }
 
 .flag {
@@ -45,12 +39,5 @@
   height: var(--button--icon--size);
   border-radius: var(--border--radius);
   box-shadow: 0 0 0 1px var(--box-shadow--color);
-
-  [dir='ltr'] & {
-    right: calc(2 * var(--spacing--l));
-  }
-
-  [dir='rtl'] & {
-    left: calc(2 * var(--spacing--l));
-  }
+  inset-inline-end: calc(2 * var(--spacing--l));
 }

package/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss

@@ -12,13 +12,7 @@
 }
 
 .badge {
-  [dir='ltr'] & {
-    margin-left: var(--spacing--m);
-  }
-
-  [dir='rtl'] & {
-    margin-right: var(--spacing--m);
-  }
+  margin-inline-start: var(--spacing--m);
 }
 
 .character {

package/src/modals/WordsModal/WordsModal.module.scss

@@ -6,13 +6,7 @@
 }
 
 .badge {
-  [dir='ltr'] & {
-    margin-left: var(--spacing--m);
-  }
-
-  [dir='rtl'] & {
-    margin-right: var(--spacing--m);
-  }
+  margin-inline-start: var(--spacing--m);
 }
 
 .word {
@@ -37,12 +31,5 @@
 
   width: $size;
   height: $size;
-
-  [dir='ltr'] & {
-    margin-right: var(--spacing--s);
-  }
-
-  [dir='rtl'] & {
-    margin-left: var(--spacing--s);
-  }
+  margin-inline-end: var(--spacing--s);
 }

package/src/parameters/index.ts

@@ -6,7 +6,6 @@ export const BREAKPOINTS = {
   xl: 1400,
 };
 
-export const EASE_OUT_CUBIC = 'cubic-bezier(0.33, 1, 0.68, 1)'; // https://easings.net/#easeOutCubic
 export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
@@ -128,11 +127,3 @@ export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
 export const SOLVER_COLUMN_WIDTH = 580;
 
 export const TEXT_INPUT_HEIGHT = 40;
-
-export const TILE_APPEAR_DURATION = 200;
-
-export const TILE_APPEAR_KEYFRAMES = [
-  { transform: 'translateY(0)' },
-  { transform: 'translateY(10%)', offset: 0.5 },
-  { transform: 'translateY(0)' },
-];

package/src/state/sagas.ts

@@ -12,7 +12,7 @@ import { findWordDefinitions, solve, verify, visit } from 'sdk';
 import { initialize, reset } from './actions';
 import {
   selectBoard,
-  selectCellIsFiltered,
+  selectCellFilter,
   selectCharacters,
   selectConfig,
   selectDictionary,
@@ -56,10 +56,10 @@ export function* rootSaga(): AnyGenerator {
 }
 
 function* onCellValueChange({ payload }: PayloadAction<{ value: string; x: number; y: number }>): AnyGenerator {
-  const isFiltered = yield select((state) => selectCellIsFiltered(state, payload));
+  const filter = yield select((state) => selectCellFilter(state, payload));
 
-  if (isFiltered) {
-    yield put(cellFilterSlice.actions.toggle(payload));
+  if (filter) {
+    yield put(cellFilterSlice.actions.cancel(payload));
   }
 
   yield put(resultsSlice.actions.changeResultCandidate(null));

package/src/state/selectors.ts

@@ -12,6 +12,7 @@ import {
   getRemainingTiles,
   getRemainingTilesGroups,
   groupResults,
+  resultMatchesCellFilter,
   sortResults,
   unorderedArraysEqual,
 } from 'lib';
@@ -75,8 +76,8 @@ export const selectConfig = createSelector([selectGame, selectLocale], getConfig
 
 export const selectFilteredCells = selectCellFilterRoot;
 
-export const selectCellIsFiltered = createSelector([selectFilteredCells, selectPoint], (cellFilter, { x, y }) => {
-  return cellFilter.some((cell) => cell.x === x && cell.y === y);
+export const selectCellFilter = createSelector([selectFilteredCells, selectPoint], (cellFilter, { x, y }) => {
+  return cellFilter.find((cell) => cell.x === x && cell.y === y);
 });
 
 export const selectCellIsValid = createSelector([selectConfig, selectCell], (config, cell) => {
@@ -106,7 +107,7 @@ export const selectResults = createSelector([selectGroupedResults], (groupedResu
 
 export const selectIsResultMatching = createSelector(
   [selectResults, selectResultsQuery, selectFilteredCells, selectResultIndex],
-  (results, query, filteredCells, index) => {
+  (results, query, cellFilter, index) => {
     if (!results) {
       return false;
     }
@@ -118,11 +119,7 @@ export const selectIsResultMatching = createSelector(
       return false;
     }
 
-    if (filteredCells) {
-      return filteredCells.every(({ x, y }) => result.cells.some((cell) => cell.x === x && cell.y === y));
-    }
-
-    return true;
+    return resultMatchesCellFilter(result, cellFilter);
   },
 );
 

package/src/state/slices/cellFilterInitialState.ts

@@ -1,6 +1,6 @@
-import { Point } from 'types';
+import { CellFilterEntry } from 'types';
 
-export type CellFilterState = Point[];
+export type CellFilterState = CellFilterEntry[];
 
 const cellFilterInitialState: CellFilterState = [];