scrabble-solver 2.13.7 → 2.13.9

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Board/Board.tsx

@@ -9,7 +9,7 @@ import { useDispatch } from 'react-redux';
 
 import { useAppLayout } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { TRANSITION } from 'parameters';
+import { BORDER_WIDTH, TRANSITION } from 'parameters';
 import {
   boardSlice,
   cellFilterSlice,
@@ -176,8 +176,8 @@ const Board: FunctionComponent<Props> = ({ className }) => {
           ref={floatingFocus.refs.setFloating}
           style={{
             position: floatingFocus.strategy,
-            top: floatingFocus.y ? floatingFocus.y + cellSize : 0,
-            left: floatingFocus.x ?? 0,
+            top: (floatingFocus.y ? floatingFocus.y + cellSize : 0) - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
+            left: (floatingFocus.x ?? 0) - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
             width: cellSize,
             height: cellSize,
             opacity: hasFocus ? 1 : 0,

package/packages/scrabble-solver/src/components/Board/BoardPure.tsx

@@ -12,10 +12,10 @@ import {
   memo,
 } from 'react';
 
-import { FlagFill } from 'icons';
+import { Ban, FlagFill } from 'icons';
 import { getCoordinate } from 'lib';
 import { BORDER_WIDTH } from 'parameters';
-import { Point } from 'types';
+import { CellFilterEntry } from 'types';
 
 import styles from './Board.module.scss';
 import { Cell } from './components';
@@ -26,7 +26,7 @@ interface Props {
   coordinatesFontSize: number;
   coordinatesSize: number;
   direction: 'ltr' | 'rtl';
-  filteredCells: Point[];
+  filteredCells: CellFilterEntry[];
   inputRefs: RefObject<HTMLInputElement>[][];
   rows: CellModel[][];
   showCoordinates: ShowCoordinates;
@@ -87,22 +87,30 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
         </>
       )}
 
-      {filteredCells.map(({ x, y }) => (
-        <div
-          className={styles.iconContainer}
-          key={[x, y].join('-')}
-          style={{
-            height: cellSize,
-            width: cellSize,
-            left: direction === 'ltr' ? coordinatesSize + x * (cellSize + BORDER_WIDTH) : undefined,
-            right: direction === 'rtl' ? coordinatesSize + x * (cellSize + BORDER_WIDTH) : undefined,
-            top: coordinatesSize + y * (cellSize + BORDER_WIDTH),
-          }}
-        >
-          <div className={styles.iconBackground} />
-          <FlagFill className={styles.icon} />
-        </div>
-      ))}
+      {/* The dynamic changes to the board presentation need to be outside of useBackgroundImage
+        to prevent flickering on blob URL change (i.e. when flagging a field,
+        but not when changing game type since user's attention is not on the board
+        when that happens)*/}
+      {filteredCells.map(({ x, y, type }) => {
+        const Icon = type === 'exclude' ? Ban : FlagFill;
+
+        return (
+          <div
+            className={styles.iconContainer}
+            key={[x, y].join('-')}
+            style={{
+              height: cellSize,
+              width: cellSize,
+              left: direction === 'ltr' ? coordinatesSize + BORDER_WIDTH + x * (cellSize + BORDER_WIDTH) : undefined,
+              right: direction === 'rtl' ? coordinatesSize + BORDER_WIDTH + x * (cellSize + BORDER_WIDTH) : undefined,
+              top: coordinatesSize + BORDER_WIDTH + y * (cellSize + BORDER_WIDTH),
+            }}
+          >
+            <div className={styles.iconBackground} />
+            <Icon className={styles.icon} />
+          </div>
+        );
+      })}
 
       {rows.map((cells, y) => (
         <Fragment key={y}>

package/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Board/components/Actions/Actions.tsx

@@ -3,21 +3,16 @@ import { Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { forwardRef, HTMLProps, MouseEventHandler } from 'react';
 
-import { Flag, FlagFill, Keyboard, Square, SquareFill } from 'icons';
+import { Keyboard, Square, SquareFill } from 'icons';
 import { findCell } from 'lib';
-import {
-  selectCellIsFiltered,
-  selectInputMode,
-  selectResultCandidateCells,
-  useTranslate,
-  useTypedSelector,
-} from 'state';
+import { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from 'state';
 import { Direction } from 'types';
 
 import Button from '../../../Button';
 import ToggleDirectionButton from '../ToggleDirectionButton';
 
 import styles from './Actions.module.scss';
+import { getNextCellFilter } from './lib';
 
 interface Props extends HTMLProps<HTMLDivElement> {
   cell: Cell;
@@ -35,10 +30,11 @@ const Actions = forwardRef<HTMLDivElement, Props>(
   ) => {
     const translate = useTranslate();
     const inputMode = useTypedSelector(selectInputMode);
-    const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
+    const filter = useTypedSelector((state) => selectCellFilter(state, cell));
     const resultCandidateCells = useTypedSelector(selectResultCandidateCells);
     const isBlank = cell.tile.isBlank;
     const isEmpty = cell.tile.character === EMPTY_CELL || Boolean(findCell(resultCandidateCells, cell.x, cell.y));
+    const { Icon, labelTranslationKey } = getNextCellFilter(filter);
 
     // On iOS it helps with losing focus too early which makes Actions disappear
     const handleMouseDown: MouseEventHandler = (event) => event.preventDefault();
@@ -67,10 +63,10 @@ const Actions = forwardRef<HTMLDivElement, Props>(
 
         {isEmpty && (
           <Button
-            aria-label={translate('cell.filter-cell')}
+            aria-label={translate(labelTranslationKey)}
             className={classNames(styles.action)}
-            Icon={isFiltered ? Flag : FlagFill}
-            tooltip={translate('cell.filter-cell')}
+            Icon={Icon}
+            tooltip={translate(labelTranslationKey)}
             onClick={onToggleFilterCell}
             onMouseDown={handleMouseDown}
           />

package/packages/scrabble-solver/src/components/Board/components/Actions/lib.ts

@@ -0,0 +1,30 @@
+import { FunctionComponent, SVGAttributes } from 'react';
+
+import { Ban, Eraser, FlagFill } from 'icons';
+import { CellFilterEntry, TranslationKey } from 'types';
+
+export const getNextCellFilter = (
+  filter: CellFilterEntry | undefined,
+): {
+  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
+  labelTranslationKey: TranslationKey;
+} => {
+  if (filter?.type === 'exclude') {
+    return {
+      Icon: Eraser,
+      labelTranslationKey: 'common.clear',
+    };
+  }
+
+  if (filter?.type === 'include') {
+    return {
+      Icon: Ban,
+      labelTranslationKey: 'cell.filter-cell.exclude',
+    };
+  }
+
+  return {
+    Icon: FlagFill,
+    labelTranslationKey: 'cell.filter-cell.include',
+  };
+};

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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';
@@ -7,16 +7,9 @@ import { Provider } from 'react-redux';
 
 import { useAppLayout, useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { FlagFill, Star } from 'icons';
+import { Star } from 'icons';
 import { dataUrlToBlob, getTileSizes } from 'lib';
-import {
-  BORDER_COLOR_LIGHT,
-  BORDER_RADIUS,
-  BORDER_WIDTH,
-  COLOR_BACKGROUND,
-  COLOR_BONUS_START,
-  COLOR_FILTERED,
-} from 'parameters';
+import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from 'parameters';
 import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from 'state';
 import { Point } from 'types';
 
@@ -30,7 +23,6 @@ const BONUS = 'b';
 const BONUS_WORD_2 = 'b2';
 const BONUS_WORD_3 = 'b3';
 const BONUS_WORD_4 = 'b4';
-const CELL_FILTER = 'c';
 
 const useBackgroundImage = () => {
   const { boardSize, cellSize, coordinatesSize } = useAppLayout();
@@ -131,25 +123,23 @@ const useBackgroundImage = () => {
               x4
             </text>
           </symbol>
-
-          <symbol id={CELL_FILTER}>
-            <rect
-              fill={COLOR_FILTERED}
-              height={bonusSize}
-              rx={borderRadius}
-              width={bonusSize}
-              x={bonusOffset}
-              y={bonusOffset}
-            />
-
-            <FlagFill color="white" height={iconSize} width={iconSize} x={iconOffset} y={iconOffset} />
-          </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 +149,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}
             />
           </>
         )}
@@ -219,7 +209,7 @@ const useBackgroundImage = () => {
     </Provider>,
   );
 
-  const encodedSvg = globalThis.btoa(backgroundSvg);
+  const encodedSvg = useMemo(() => globalThis.btoa(backgroundSvg), [backgroundSvg]);
   const dataUrl = `data:image/svg+xml;base64,${encodedSvg}`;
   const blob = useMemo(() => dataUrlToBlob(dataUrl), [dataUrl]);
   const blobUrl = useMemo(() => URL.createObjectURL(blob), [blob]);

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Radio/Radio.module.scss

@@ -25,6 +25,7 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
 
   &.disabled {
     opacity: var(--opacity--disabled);
+    cursor: not-allowed;
   }
 }
 
@@ -35,7 +36,7 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   width: 100%;
   height: 100%;
   opacity: 0;
-  cursor: pointer;
+  cursor: inherit;
 }
 
 .icon {

package/packages/scrabble-solver/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/packages/scrabble-solver/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];