scrabble-solver 2.13.12 → 2.14.0

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

@@ -90,7 +90,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
 
         <div className={styles.iconContainer}>
           {isLoading && <Spinner className={styles.loading} />}
-          {!isLoading && <ChevronDown className={styles.icon} />}
+          {!isLoading && <ChevronDown aria-hidden="true" className={styles.icon} role="img" />}
         </div>
       </button>
 

package/packages/scrabble-solver/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}
@@ -106,7 +107,7 @@ const TilePure: FunctionComponent<Props> = ({
       </span>
     )}
 
-    {!isValid && <ExclamationSquareFill className={styles.alert} />}
+    {!isValid && <ExclamationSquareFill aria-hidden="true" className={styles.alert} role="img" />}
   </div>
 );
 

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

@@ -64,7 +64,7 @@ const MenuModal: FunctionComponent<Props> = ({
       <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
         <div className={styles.settings}>
           <div className={styles.settingsLabel}>{translate('settings')}</div>
-          <Icon className={styles.flag} />
+          <Icon aria-hidden="true" className={styles.flag} role="img" />
         </div>
       </Button>
     </Modal>

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

package/packages/scrabble-solver/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.tsx

@@ -40,7 +40,7 @@ const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
           onChange={handleChange}
         >
           <span className={styles.label}>
-            <Icon className={styles.flag} />
+            <Icon aria-hidden="true" className={styles.flag} role="img" />
 
             <span>{option.label}</span>
           </span>

package/packages/scrabble-solver/src/modals/WordsModal/WordsModal.tsx

@@ -21,6 +21,7 @@ const WordsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =>
   return (
     <Modal className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>
       <Modal.Section
+        label={translate('words.invalid')}
         title={
           <span className={styles.title}>
             <span>{translate('words.invalid')}</span>
@@ -30,12 +31,13 @@ const WordsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =>
       >
         {invalidWords.map((word, index) => (
           <div className={styles.word} key={index}>
-            <Cross className={classNames(styles.icon, styles.invalid)} /> {word}
+            <Cross aria-hidden="true" className={classNames(styles.icon, styles.invalid)} role="img" /> {word}
           </div>
         ))}
       </Modal.Section>
 
       <Modal.Section
+        label={translate('words.valid')}
         title={
           <span className={styles.title}>
             <span>{translate('words.valid')}</span>
@@ -45,7 +47,7 @@ const WordsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =>
       >
         {validWords.map((word, index) => (
           <div className={styles.word} key={index}>
-            <Check className={classNames(styles.icon, styles.valid)} /> {word}
+            <Check aria-hidden="true" className={classNames(styles.icon, styles.valid)} role="img" /> {word}
           </div>
         ))}
       </Modal.Section>

package/packages/scrabble-solver/src/parameters/index.ts

@@ -1,3 +1,5 @@
+import { ResultColumnId } from 'types';
+
 export const BREAKPOINTS = {
   xs: 480,
   s: 768,
@@ -120,6 +122,16 @@ export const RACK_TILE_SIZE_MAX = 80;
 
 export const REMAINING_TILES_TILE_SIZE = 50;
 
+export const RESULTS_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> = {
+  [ResultColumnId.BlanksCount]: 55,
+  [ResultColumnId.ConsonantsCount]: 55,
+  [ResultColumnId.Coordinates]: 55,
+  [ResultColumnId.Points]: 80,
+  [ResultColumnId.TilesCount]: 55,
+  [ResultColumnId.VowelsCount]: 55,
+  [ResultColumnId.Word]: undefined,
+  [ResultColumnId.WordsCount]: 55,
+};
 export const RESULTS_ITEM_HEIGHT = 40;
 
 export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;

package/packages/scrabble-solver/src/state/selectors.ts

@@ -16,7 +16,7 @@ import {
   sortGroupedResults,
   unorderedArraysEqual,
 } from 'lib';
-import { Point, Translations } from 'types';
+import { Point, ResultColumnId, Translations } from 'types';
 
 import { RootState } from './types';
 
@@ -231,3 +231,28 @@ export const selectVerify = selectVerifyRoot;
 export const selectHasInvalidWords = createSelector([selectVerify], ({ invalidWords }) => {
   return invalidWords.length > 0;
 });
+
+export const selectColumns = createSelector([selectLocale, selectShowCoordinates], (locale, showCoordinates) => {
+  const { consonants, vowels } = LOCALE_FEATURES[locale];
+  const columns: ResultColumnId[] = [
+    ResultColumnId.Word,
+    ResultColumnId.TilesCount,
+    ResultColumnId.BlanksCount,
+    ResultColumnId.WordsCount,
+    ResultColumnId.Points,
+  ];
+
+  if (showCoordinates !== 'hidden') {
+    columns.push(ResultColumnId.Coordinates);
+  }
+
+  if (vowels) {
+    columns.push(ResultColumnId.VowelsCount);
+  }
+
+  if (consonants) {
+    columns.push(ResultColumnId.ConsonantsCount);
+  }
+
+  return columns;
+});

package/packages/scrabble-solver/src/state/slices/resultsInitialState.ts

@@ -1,6 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 
-import { ResultColumn, Sort, SortDirection } from 'types';
+import { ResultColumnId, Sort, SortDirection } from 'types';
 
 export interface ResultsState {
   candidate: Result | null;
@@ -14,7 +14,7 @@ const resultsInitialState: ResultsState = {
   query: '',
   results: undefined,
   sort: {
-    column: ResultColumn.Points,
+    column: ResultColumnId.Points,
     direction: SortDirection.Descending,
   },
 };

package/packages/scrabble-solver/src/state/slices/resultsSlice.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Result } from '@scrabble-solver/types';
 
-import { ResultColumn, SortDirection } from 'types';
+import { ResultColumnId, SortDirection } from 'types';
 
 import resultsInitialState from './resultsInitialState';
 
@@ -37,7 +37,7 @@ const resultsSlice = createSlice({
       };
     },
 
-    sort: (state, action: PayloadAction<ResultColumn>) => {
+    sort: (state, action: PayloadAction<ResultColumnId>) => {
       const columndId = action.payload;
       const { column, direction } = state.sort;
 

package/packages/scrabble-solver/src/state/useTranslate.ts

@@ -9,13 +9,17 @@ const useTranslate = (): Translate => {
   const translations = useTypedSelector(selectTranslations);
   const locale = useTypedSelector(selectLocale);
   const translate: Translate = useCallback(
-    (id, replacements = {}) => {
+    (id, replacements) => {
       const translation = translations[id];
 
       if (typeof translation === 'undefined') {
         throw new Error(`Untranslated key "${id}" in locale "${locale}"`);
       }
 
+      if (!replacements) {
+        return translation;
+      }
+
       return Object.entries(replacements).reduce(
         (result, [key, value]) => result.replaceAll(`{{${key}}}`, value),
         translation,

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

@@ -106,6 +106,7 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --modal--width: 370px;
   --nav--height: calc(var(--logo--height) + var(--nav--padding));
   --nav--padding: var(--spacing--l);
+  --results--icon--size: 18px;
   --results--item--height: 40px;
   --solver-column--width: 580px;
   --square-button--size: 32px;