@scrabble-solver/scrabble-solver 2.13.12 → 2.13.13

package/src/components/Results/Result.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useMemo, useRef } from 'react';
 import Highlighter from 'react-highlight-words';
 
+import { useAppLayout, useColumns } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { getCoordinates, noop } from 'lib';
 import {
@@ -11,12 +12,11 @@ import {
   selectShowCoordinates,
   useTypedSelector,
 } from 'state';
-import { ResultColumn } from 'types';
+import { ResultColumnId } from 'types';
 
 import Cell from './Cell';
 import styles from './Results.module.scss';
 import { ResultData } from './types';
-import useColumns from './useColumns';
 
 interface Props {
   data: ResultData;
@@ -34,16 +34,16 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     onMouseEnter = noop,
     onMouseLeave = noop,
   } = data;
+  const { resultWordWidth } = useAppLayout();
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
   const query = useTypedSelector(selectResultsQuery);
-  const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
+  const { direction, separator } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
   const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
-  const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
   const coordinates = useMemo(() => getCoordinates(result, showCoordinates), [result, showCoordinates]);
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -54,11 +54,13 @@ const Result = ({ data, index, style }: Props): ReactElement => {
 
   return (
     <button
+      aria-hidden={isMatching ? undefined : 'true'}
       aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
         [styles.notMatching]: !isMatching,
       })}
+      data-testid="result"
       ref={ref}
       style={style}
       type="button"
@@ -69,33 +71,38 @@ const Result = ({ data, index, style }: Props): ReactElement => {
       onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
-        {enabledColumns[ResultColumn.Coordinates] && (
+        {columns[ResultColumnId.Coordinates] && (
           <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
         )}
 
-        {enabledColumns[ResultColumn.Word] && (
-          <Cell className={styles.word} translationKey="common.word" value={result.word}>
+        {columns[ResultColumnId.Word] && (
+          <Cell
+            className={styles.word}
+            style={{ flexBasis: resultWordWidth }}
+            translationKey="common.word"
+            value={result.word}
+          >
             <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
           </Cell>
         )}
 
-        {enabledColumns[ResultColumn.TilesCount] && (
+        {columns[ResultColumnId.TilesCount] && (
           <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
         )}
 
-        {enabledColumns[ResultColumn.ConsonantsCount] && consonants && (
-          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
+        {columns[ResultColumnId.VowelsCount] && (
+          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
         )}
 
-        {enabledColumns[ResultColumn.VowelsCount] && vowels && (
-          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+        {columns[ResultColumnId.ConsonantsCount] && (
+          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
         )}
 
-        {enabledColumns[ResultColumn.BlanksCount] && (
+        {columns[ResultColumnId.BlanksCount] && (
           <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
         )}
 
-        {enabledColumns[ResultColumn.WordsCount] && (
+        {columns[ResultColumnId.WordsCount] && (
           <Cell
             className={styles.stat}
             translationKey="common.words"
@@ -104,8 +111,8 @@ const Result = ({ data, index, style }: Props): ReactElement => {
           />
         )}
 
-        {enabledColumns[ResultColumn.Points] && (
-          <Cell className={styles.points} translationKey="common.points" value={result.points} />
+        {columns[ResultColumnId.Points] && (
+          <Cell className={styles.points} dataTestId="points" translationKey="common.points" value={result.points} />
         )}
       </span>
     </button>

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

@@ -44,7 +44,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: 700;
   border-bottom: var(--border);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -53,11 +52,13 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 .headerButton {
   @include button-reset;
   @include focus-effect;
+
   cursor: pointer;
 
   text-transform: uppercase;
   transition: var(--transition);
   background-color: var(--color--background);
+  height: 100%;
 
   &:first-child {
     border-start-start-radius: inherit;
@@ -72,6 +73,17 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     background-color: var(--color--primary);
     color: var(--color--primary--opposite);
   }
+
+  &.points {
+    @include scrollbars;
+
+    overflow-y: scroll;
+
+    &,
+    &:hover {
+      scrollbar-color: transparent transparent;
+    }
+  }
 }
 
 .headerButtonLabel {
@@ -81,6 +93,12 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   text-align: start;
 }
 
+.headerButtonIcon {
+  flex: 0 0 auto;
+  width: var(--results--icon--size);
+  height: var(--results--icon--size);
+}
+
 .result {
   @include button-reset;
 
@@ -98,7 +116,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     }
   }
 
-  &.notMatching {
+  &[aria-hidden='true'] {
     color: var(--color--inactive);
 
     &:focus,
@@ -138,24 +156,18 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     justify-content: flex-start;
   }
 
-  .result &:first-child,
-  .headerButton:first-child & {
-    text-align: start;
+  .result &.word:first-child,
+  .headerButton.word:first-child & {
     padding-inline-start: $row-padding-horizontal;
   }
 
-  .result &:last-child,
-  .headerButton:last-child & {
-    padding-inline-end: $row-padding-horizontal;
-  }
-
   &:last-child {
     flex: 1;
   }
 }
 
 .word {
-  flex: 1 0;
+  flex: 0 0;
   text-transform: uppercase;
 }
 
@@ -176,7 +188,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .coordinates {
-  $width: 50px;
+  $width: 55px;
 
   flex: 0 0 $width;
   max-width: $width;

package/src/components/Results/Results.tsx

@@ -20,12 +20,11 @@ import EmptyState from '../EmptyState';
 import Loading from '../Loading';
 import ResultsInput from '../ResultsInput';
 
-import HeaderButton from './HeaderButton';
+import Header from './Header';
 import Result from './Result';
 import styles from './Results.module.scss';
 import SolveButton from './SolveButton';
 import { ResultCallbacks, ResultData } from './types';
-import useColumns from './useColumns';
 
 interface Props {
   callbacks: ResultCallbacks;
@@ -47,7 +46,6 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
   const [listRef, setListRef] = useState<FixedSizeList<ResultData> | null>(null);
-  const columns = useColumns();
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
   const scrollToIndexRef = useLatest(scrollToIndex);
   const hasResults = typeof error === 'undefined' && typeof results !== 'undefined';
@@ -70,12 +68,8 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   }, [results, listRef, scrollToIndexRef]);
 
   return (
-    <div className={classNames(styles.results, className)}>
-      <div className={styles.header}>
-        {columns.map((column) => (
-          <HeaderButton column={column} key={column.id} />
-        ))}
-      </div>
+    <div className={classNames(styles.results, className)} data-testid="results">
+      <Header />
 
       <div className={styles.content}>
         {typeof error !== 'undefined' && (

package/src/components/Results/types.ts

@@ -1,14 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 import { FocusEvent, MouseEvent } from 'react';
 
-import { ResultColumn, TranslationKey } from 'types';
-
-export interface Column {
-  className: string;
-  id: ResultColumn;
-  translationKey: TranslationKey;
-}
-
 export interface ResultCallbacks {
   onBlur?: (result: Result, event: FocusEvent) => void;
   onClick?: (result: Result, event: MouseEvent) => void;

package/src/components/Solver/Solver.tsx

@@ -100,7 +100,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
           <div className={styles.column}>
             <Results callbacks={callbacks} className={styles.results} />
 
-            <div className={styles.dictionaryContainer}>
+            <div data-testid="dictionary" className={styles.dictionaryContainer}>
               <Dictionary className={styles.dictionary} />
               <DictionaryInput className={styles.dictionaryInput} />
             </div>

package/src/components/Tile/TilePure.tsx

@@ -77,6 +77,7 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.points5]: typeof points === 'number' && points >= 5,
       [styles.raised]: raised,
     })}
+    role={highlighted ? 'mark' : undefined}
     style={style}
   >
     {character || placeholder}

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { default as useAppLayout } from './useAppLayout';
+export { default as useColumns } from './useColumns';
 export { default as useDirection } from './useDirection';
 export { default as useEffectOnce } from './useEffectOnce';
 export { default as useIsTouchDevice } from './useIsTouchDevice';

package/src/hooks/useAppLayout.ts

@@ -15,10 +15,13 @@ import {
   MODAL_WIDTH,
   NAV_PADDING,
   RACK_TILE_SIZE_MAX,
+  RESULTS_COLUMN_WIDTH,
   SOLVER_COLUMN_WIDTH,
 } from 'parameters';
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
+import { ResultColumnId } from 'types';
 
+import useColumns from './useColumns';
 import useIsTouchDevice from './useIsTouchDevice';
 import useMediaQueries from './useMediaQueries';
 import useViewportSize from './useViewportSize';
@@ -29,6 +32,7 @@ const useAppLayout = () => {
   const showCoordinates = useTypedSelector(selectShowCoordinates);
   const isTouchDevice = useIsTouchDevice();
   const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl } = useMediaQueries();
+  const columns = useColumns();
   const isBoardFullWidth = isLessThanM;
   const showResultCandidatePicker = isLessThanL;
   const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
@@ -68,6 +72,12 @@ const useAppLayout = () => {
     ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
     : boardSize - componentsSpacing - dictionaryHeight;
   const rackWidth = tileSize * config.rackSize;
+  const resultsWidth = isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH;
+  const columnsWidth = Object.keys(columns).reduce(
+    (sum, column) => sum + (RESULTS_COLUMN_WIDTH[column as ResultColumnId] ?? 0),
+    0,
+  );
+  const resultWordWidth = resultsWidth - 2 * BORDER_WIDTH - columnsWidth;
 
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
@@ -83,7 +93,8 @@ const useAppLayout = () => {
     rackHeight: tileSize,
     rackWidth,
     resultsHeight,
-    resultsWidth: isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH,
+    resultsWidth,
+    resultWordWidth,
     showCompactControls: !showColumn,
     showKeyMap: !isTouchDevice,
     showResultsInModal,

package/src/hooks/useColumns.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+
+import { selectColumns, useTypedSelector } from 'state';
+import { ResultColumnId } from 'types';
+
+import useMediaQueries from './useMediaQueries';
+
+const COLUMNS_XS = [ResultColumnId.Coordinates, ResultColumnId.Word, ResultColumnId.Points];
+
+const COLUMNS_S = [...COLUMNS_XS, ResultColumnId.BlanksCount, ResultColumnId.WordsCount];
+
+const COLUMNS_M = [...COLUMNS_XS];
+
+const COLUMNS_L = [...COLUMNS_XS];
+
+const useColumns = (): Partial<Record<ResultColumnId, boolean>> => {
+  const columns = useTypedSelector(selectColumns);
+  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL } = useMediaQueries();
+
+  const filteredColumns = useMemo(() => {
+    if (isLessThanXs) {
+      return columns.filter((columnId) => COLUMNS_XS.includes(columnId));
+    }
+
+    if (isLessThanS) {
+      return columns.filter((columnId) => COLUMNS_S.includes(columnId));
+    }
+
+    if (isLessThanM) {
+      return columns.filter((columnId) => COLUMNS_M.includes(columnId));
+    }
+
+    if (isLessThanL) {
+      return columns.filter((columnId) => COLUMNS_L.includes(columnId));
+    }
+
+    return columns;
+  }, [columns, isLessThanXs, isLessThanS, isLessThanM, isLessThanL]);
+
+  const columnsMap = useMemo(() => {
+    return Object.fromEntries(filteredColumns.map((column) => [column, true]));
+  }, [filteredColumns]);
+
+  return columnsMap;
+};
+
+export default useColumns;

package/src/icons/GeoAlt.svg

@@ -0,0 +1,5 @@
+<!-- https://icons.getbootstrap.com/icons/geo-alt/ -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10" />
+  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6" />
+</svg>

package/src/icons/OneTwoThree.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/123/ -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169.676 0 1.174.44 1.174 1.106 0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179.01.707-.55 1.216-1.421 1.21-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918 1.478 0 2.642-.839 2.62-2.144-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678-.026-1.053-.933-1.855-2.359-1.845-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944.703 0 1.206.435 1.206 1.07.005.64-.504 1.106-1.2 1.106h-.75z" />
+</svg>

package/src/icons/SquareA.svg

@@ -0,0 +1,6 @@
+<!-- https://icons.getbootstrap.com/icons/square/ -->
+<!-- https://icons.getbootstrap.com/icons/alphabet-uppercase/ -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
+  <path d="M 7.2949219,4.8691409 5.2382813,11.130859 H 6.4648438 L 6.9453125,9.5195319 h 2.046875 L 9.4707032,11.130859 H 10.761719 L 8.7148438,4.8691409 Z m 0.6484375,1.199219 h 0.054687 l 0.75,2.53125 h -1.554687 z" />
+</svg>

package/src/icons/SquareB.svg

@@ -0,0 +1,6 @@
+<!-- https://icons.getbootstrap.com/icons/square/ -->
+<!-- https://icons.getbootstrap.com/icons/alphabet-uppercase/ -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
+  <path d="m 5.658203,4.8691408 v 6.2617182 h 2.5507813 c 1.2429974,0 2.1328127,-0.646627 2.1328127,-1.7656244 0,-0.9409982 -0.629236,-1.4533438 -1.3652346,-1.5273438 V 7.7812502 C 9.5825612,7.6292506 10.027344,7.172155 10.027344,6.4101564 c 0,-0.957998 -0.7185963,-1.5410156 -1.8085941,-1.5410156 z m 1.203125,0.9316406 h 1.0742187 c 0.569999,1e-7 0.8964844,0.3103136 0.8964844,0.8203126 0,0.5449988 -0.3579236,0.8535156 -1.1699218,0.8535156 H 6.861328 Z m 0,2.5371094 h 1.1503906 c 0.7129986,0 1.0957031,0.3621262 1.0957031,0.953125 10e-8,0.5969988 -0.3927518,0.9082032 -1.34375,0.9082032 H 6.861328 Z" />
+</svg>

package/src/icons/Squares.svg

@@ -0,0 +1,34 @@
+<!-- https://icons.getbootstrap.com/icons/square/ -->
+<!-- https://icons.getbootstrap.com/icons/alphabet-uppercase/ -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+  <path
+    d="m 2.75,4 v 0.75 h 7.75 a 0.75,0.75 0 0 1 0.75,0.75 v 7.75 H 12 V 5.5 A 1.5,1.5 0 0 0 10.5,4 Z"
+    stroke-width="0.75" />
+  <path
+    d="m 12,14 h -0.75 v 0.5 a 0.75,0.75 0 0 1 -0.75,0.75 h -9 A 0.75,0.75 0 0 1 0.75,14.5 v -9 A 0.75,0.75 0 0 1 1.5,4.75 H 2 V 4 H 1.5 A 1.5,1.5 0 0 0 0,5.5 v 9 A 1.5,1.5 0 0 0 1.5,16 h 9 A 1.5,1.5 0 0 0 12,14.5 Z"
+    stroke-width="0.75" />
+  <path
+    d="M 2,4.75 H 2.75 V 4 H 2 Z"
+    stroke-width="0.75" />
+  <path
+    d="M 12,14 V 13.25 H 11.25 V 14 Z"
+    stroke-width="0.75" />
+  <path
+    d="m 4.75,2 v 0.75 h 7.75 a 0.75,0.75 0 0 1 0.75,0.75 v 7.75 H 14 V 3.5 A 1.5,1.5 0 0 0 12.5,2 Z"
+    stroke-width="0.75" />
+  <path
+    d="M 4,2.75 V 2 H 3.5 A 1.5,1.5 0 0 0 2,3.5 V 4 H 2.75 V 3.5 A 0.75,0.75 0 0 1 3.5,2.75 Z"
+    stroke-width="0.75" />
+  <path
+    d="m 14,12 h -0.75 v 0.5 A 0.75,0.75 0 0 1 12.5,13.25 H 12 V 14 h 0.5 A 1.5,1.5 0 0 0 14,12.5 Z"
+    stroke-width="0.75" />
+  <path
+    d="M 4,2.75 H 4.75 V 2 H 4 Z"
+    stroke-width="0.75" />
+  <path
+    d="M 14,12 V 11.25 H 13.25 V 12 Z"
+    stroke-width="0.75" />
+  <path
+    d="M 5.5,0 A 1.5,1.5 0 0 0 4,1.5 V 2 H 4.75 V 1.5 A 0.75,0.75 0 0 1 5.5,0.75 h 9 a 0.75,0.75 0 0 1 0.75,0.75 v 9 A 0.75,0.75 0 0 1 14.5,11.25 H 14 V 12 h 0.5 A 1.5,1.5 0 0 0 16,10.5 v -9 A 1.5,1.5 0 0 0 14.5,0 Z"
+    stroke-width="0.75" />
+</svg>

package/src/icons/Words.svg

@@ -0,0 +1,22 @@
+<!-- https://icons.getbootstrap.com/icons/square/ -->
+<!-- https://icons.getbootstrap.com/icons/alphabet-uppercase/ -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+  <path
+    d="M 7.21875,0.51562499 A 0.51562499,0.51562499 0 0 1 7.734375,1.03125 v 6.1875 A 0.51562499,0.51562499 0 0 1 7.21875,7.734375 H 1.03125 A 0.51562499,0.51562499 0 0 1 0.51562499,7.21875 V 1.03125 A 0.51562499,0.51562499 0 0 1 1.03125,0.51562499 Z M 1.03125,0 A 1.03125,1.03125 0 0 0 0,1.03125 v 6.1875 A 1.03125,1.03125 0 0 0 1.03125,8.25 h 6.1875 A 1.03125,1.03125 0 0 0 8.25,7.21875 V 1.03125 A 1.03125,1.03125 0 0 0 7.21875,0 Z"
+    stroke-width="0.5" />
+  <path
+    d="m 14.96875,8.265625 a 0.51562499,0.51562499 0 0 1 0.515625,0.515625 v 6.1875 A 0.51562499,0.51562499 0 0 1 14.96875,15.484375 H 8.7812501 A 0.51562499,0.51562499 0 0 1 8.265625,14.96875 V 8.78125 A 0.51562499,0.51562499 0 0 1 8.7812501,8.265625 Z M 8.7812501,7.75 A 1.03125,1.03125 0 0 0 7.75,8.78125 v 6.1875 A 1.03125,1.03125 0 0 0 8.7812501,16 H 14.96875 A 1.03125,1.03125 0 0 0 16,14.96875 V 8.78125 A 1.03125,1.03125 0 0 0 14.96875,7.75 Z"
+    stroke-width="0.5" />
+  <path
+    d="M 3.7614277,2.5 2.7009247,5.75 H 3.3333995 L 3.5811523,4.9136776 H 4.6366198 L 4.8833654,5.75 H 5.5490753 L 4.493608,2.5 Z m 0.3343657,0.6224265 h 0.0282 L 4.5107288,4.4362133 H 3.7090572 Z"
+    stroke-width="0.5" />
+  <path
+    d="m 2.954049,10.250001 v 3.25 h 1.275448 c 0.621526,0 1.066454,-0.335617 1.066454,-0.916407 0,-0.488403 -0.314632,-0.754324 -0.682648,-0.792732 v -0.0294 c 0.303013,-0.07889 0.525414,-0.316137 0.525414,-0.711635 0,-0.497226 -0.359314,-0.799828 -0.904337,-0.799828 z m 0.60159,0.483546 h 0.537133 c 0.285012,0 0.448262,0.161062 0.448262,0.425765 0,0.282869 -0.17897,0.442997 -0.584987,0.442997 H 3.555639 Z m 0,1.316828 h 0.57522 c 0.356516,0 0.547877,0.187953 0.547877,0.494698 0,0.309859 -0.196385,0.471382 -0.671906,0.471382 H 3.555639 Z"
+    stroke-width="0.5" />
+  <path
+    d="M 7.21875,8.265625 A 0.51562499,0.51562499 0 0 1 7.734375,8.78125 v 6.1875 A 0.51562499,0.51562499 0 0 1 7.21875,15.484375 H 1.03125 A 0.51562499,0.51562499 0 0 1 0.515625,14.96875 V 8.78125 A 0.51562499,0.51562499 0 0 1 1.03125,8.265625 Z M 1.03125,7.75 A 1.03125,1.03125 0 0 0 0,8.78125 v 6.1875 A 1.03125,1.03125 0 0 0 1.03125,16 h 6.1875 A 1.03125,1.03125 0 0 0 8.25,14.96875 V 8.78125 A 1.03125,1.03125 0 0 0 7.21875,7.75 Z"
+    stroke-width="0.5" />
+  <path
+    d="m 11.92041,10.250001 c -0.819499,0 -1.287109,0.548047 -1.287109,1.435547 v 0.389648 c 0,0.887999 0.46311,1.424805 1.287109,1.424805 0.6715,0 1.167289,-0.413243 1.196289,-1.010742 v -0.06055 h -0.585937 c -0.0245,0.320999 -0.253946,0.547851 -0.606446,0.547851 -0.428499,0 -0.672851,-0.323367 -0.672851,-0.901367 v -0.386719 c 0,-0.579999 0.248352,-0.915039 0.672851,-0.915039 0.348,0 0.581446,0.244649 0.606446,0.577149 h 0.585937 v -0.05664 c -0.0265,-0.618999 -0.522789,-1.043945 -1.196289,-1.043945 z"
+    stroke-width="0.5" />
+</svg>

package/src/icons/index.ts

@@ -28,15 +28,21 @@ export { default as FlagGb } from './FlagGb.svg';
 export { default as FlagPl } from './FlagPl.svg';
 export { default as FlagRo } from './FlagRo.svg';
 export { default as FlagUs } from './FlagUs.svg';
+export { default as GeoAlt } from './GeoAlt.svg';
 export { default as Github } from './Github.svg';
 export { default as InfoCircleFill } from './InfoCircleFill.svg';
 export { default as Keyboard } from './Keyboard.svg';
 export { default as KeyboardFill } from './KeyboardFill.svg';
 export { default as List } from './List.svg';
+export { default as OneTwoThree } from './OneTwoThree.svg';
 export { default as Sack } from './Sack.svg';
 export { default as Search } from './Search.svg';
 export { default as SortDown } from './SortDown.svg';
 export { default as SortUp } from './SortUp.svg';
 export { default as Square } from './Square.svg';
+export { default as SquareA } from './SquareA.svg';
+export { default as SquareB } from './SquareB.svg';
 export { default as SquareFill } from './SquareFill.svg';
+export { default as Squares } from './Squares.svg';
 export { default as Star } from './Star.svg';
+export { default as Words } from './Words.svg';

package/src/lib/groupResults.ts

@@ -18,7 +18,7 @@ const groupResults = (
 
   const { matching, other } = results.reduce<GroupedResults>(
     (groupedResults, result) => {
-      const matchesQuery = () => regExp.test(result.word);
+      const matchesQuery = () => Boolean(result.word.match(regExp));
 
       if (resultMatchesCellFilter(result, cellFilter) && matchesQuery()) {
         groupedResults.matching.push(result);

package/src/lib/index.ts

@@ -7,7 +7,6 @@ export { default as createKeyboardNavigation } from './createKeyboardNavigation'
 export { default as createNullMovingComparator } from './createNullMovingComparator';
 export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
-export { default as dataUrlToBlob } from './dataUrlToBlob';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
 export { default as extractCharactersByCase } from './extractCharactersByCase';

package/src/lib/sortResults.ts

@@ -1,26 +1,26 @@
 import { Result, ShowCoordinates } from '@scrabble-solver/types';
 
-import { Comparator, ResultColumn, Sort, SortDirection } from 'types';
+import { Comparator, ResultColumnId, Sort, SortDirection } from 'types';
 
 import createKeyComparator from './createKeyComparator';
 import createStringComparator from './createStringComparator';
 import getCoordinates from './getCoordinates';
 import reverseComparator from './reverseComparator';
 
-const comparators: Record<ResultColumn, (locale: string, showCoordinates: ShowCoordinates) => Comparator<Result>> = {
-  [ResultColumn.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
-  [ResultColumn.ConsonantsCount]: (locale: string) => createKeyComparator('consonantsCount', locale),
-  [ResultColumn.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => (a, b) => {
+const comparators: Record<ResultColumnId, (locale: string, showCoordinates: ShowCoordinates) => Comparator<Result>> = {
+  [ResultColumnId.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
+  [ResultColumnId.ConsonantsCount]: (locale: string) => createKeyComparator('consonantsCount', locale),
+  [ResultColumnId.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => (a, b) => {
     const stringComparator = createStringComparator(locale);
     const aValue = getCoordinates(a, showCoordinates);
     const bValue = getCoordinates(b, showCoordinates);
     return stringComparator(aValue, bValue);
   },
-  [ResultColumn.Points]: (locale: string) => createKeyComparator('points', locale),
-  [ResultColumn.TilesCount]: (locale: string) => createKeyComparator('tilesCount', locale),
-  [ResultColumn.VowelsCount]: (locale: string) => createKeyComparator('vowelsCount', locale),
-  [ResultColumn.Word]: (locale: string) => createKeyComparator('word', locale),
-  [ResultColumn.WordsCount]: (locale: string) => createKeyComparator('wordsCount', locale),
+  [ResultColumnId.Points]: (locale: string) => createKeyComparator('points', locale),
+  [ResultColumnId.TilesCount]: (locale: string) => createKeyComparator('tilesCount', locale),
+  [ResultColumnId.VowelsCount]: (locale: string) => createKeyComparator('vowelsCount', locale),
+  [ResultColumnId.Word]: (locale: string) => createKeyComparator('word', locale),
+  [ResultColumnId.WordsCount]: (locale: string) => createKeyComparator('wordsCount', locale),
 };
 
 const sortResults = (

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -17,7 +17,7 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
-      <Modal.Section title={translate('keyMap.board-and-rack')}>
+      <Modal.Section label={translate('keyMap.board-and-rack')} title={translate('keyMap.board-and-rack')}>
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[<Arrows key="arrows" />]} />
 
         <Mapping
@@ -27,11 +27,6 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
 
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[<Enter key="del" />]} />
 
-        <Mapping
-          description={translate('keyMap.board.toggle-cell-filter')}
-          mapping={[[<Ctrl key="ctrl" />, <Key key="g">G</Key>]]}
-        />
-
         {config.twoCharacterTiles.length > 0 && (
           <Mapping
             description={translate('keyMap.board-and-rack.insert-two-letter-tile')}
@@ -49,12 +44,16 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
         )}
       </Modal.Section>
 
-      <Modal.Section title={translate('keyMap.board')}>
-        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[<Space key="space" />]} />
+      <Modal.Section label={translate('keyMap.board')} title={translate('keyMap.board')}>
         <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[<Arrows key="arrows" />]} />
+        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[<Space key="space" />]} />
+        <Mapping
+          description={translate('keyMap.board.toggle-cell-filter')}
+          mapping={[[<Ctrl key="ctrl" />, <Key key="g">G</Key>]]}
+        />
       </Modal.Section>
 
-      <Modal.Section title={translate('keyMap.rack')}>
+      <Modal.Section label={translate('keyMap.rack')} title={translate('keyMap.rack')}>
         <Mapping description={translate('keyMap.rack.insert-blank')} mapping={[<Space key="space" />]} />
       </Modal.Section>
     </Modal>

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -31,6 +31,7 @@ const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onCl
         return (
           <Modal.Section
             key={translationKey}
+            label={translate(translationKey)}
             title={
               <span className={styles.title}>
                 <span>{translate(translationKey)}</span>

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -24,25 +24,25 @@ const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('settings')} onClose={onClose}>
-      <Modal.Section title={translate('settings.game')}>
+      <Modal.Section label={translate('settings.game')} title={translate('settings.game')}>
         <ConfigSetting disabled={!isOpen} />
       </Modal.Section>
 
-      <Modal.Section title={translate('settings.language')}>
+      <Modal.Section label={translate('settings.language')} title={translate('settings.language')}>
         <LocaleSetting disabled={!isOpen} />
       </Modal.Section>
 
-      <Modal.Section title={translate('settings.showCoordinates')}>
+      <Modal.Section label={translate('settings.showCoordinates')} title={translate('settings.showCoordinates')}>
         <ShowCoordinatesSetting disabled={!isOpen} />
       </Modal.Section>
 
       {!isTouchDevice && (
-        <Modal.Section title={translate('settings.inputMode')}>
+        <Modal.Section label={translate('settings.inputMode')} title={translate('settings.inputMode')}>
           <InputModeSetting disabled={!isOpen} />
         </Modal.Section>
       )}
 
-      <Modal.Section title={translate('settings.autoGroupTiles')}>
+      <Modal.Section label={translate('settings.autoGroupTiles')} title={translate('settings.autoGroupTiles')}>
         <AutoGroupTilesSetting disabled={!isOpen} />
       </Modal.Section>
     </Modal>