@scrabble-solver/scrabble-solver 2.13.12 → 2.14.0

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/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/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>

package/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/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/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/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/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/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/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/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;

package/src/types/index.ts

@@ -1,4 +1,5 @@
 import { Result } from '@scrabble-solver/types';
+import { FunctionComponent, SVGAttributes } from 'react';
 
 export type Comparator<T> = (a: T, B: T) => number;
 
@@ -24,7 +25,7 @@ export interface Point {
 export type Rack = (string | null)[];
 
 export interface Sort {
-  column: ResultColumn;
+  column: ResultColumnId;
   direction: SortDirection;
 }
 
@@ -47,7 +48,7 @@ export interface RemainingTilesGroup {
   totalCount: number;
 }
 
-export enum ResultColumn {
+export enum ResultColumnId {
   BlanksCount = 'blanks-count',
   ConsonantsCount = 'consonants-count',
   Coordinates = 'coordinates',
@@ -58,6 +59,14 @@ export enum ResultColumn {
   WordsCount = 'words-count',
 }
 
+export interface ResultColumn {
+  className: string;
+  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
+  id: ResultColumnId;
+  translationKey: TranslationKey;
+  width?: number;
+}
+
 export interface GroupedResults {
   matching: Result[];
   other: Result[];