@scrabble-solver/scrabble-solver 2.13.12 → 2.13.13

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>
@@ -36,6 +37,7 @@ const WordsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =>
       </Modal.Section>
 
       <Modal.Section
+        label={translate('words.valid')}
         title={
           <span className={styles.title}>
             <span>{translate('words.valid')}</span>

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[];