@scrabble-solver/scrabble-solver 2.11.0 → 2.11.2

package/src/components/Tile/Tile.module.scss

@@ -4,7 +4,17 @@
   --background-color: transparent;
 
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background-color: var(--background-color);
+  border-radius: var(--border--radius);
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
   transition: var(--transition);
+  user-select: none;
 
   &.points1 {
     --background-color: var(--color--yellow);
@@ -23,13 +33,30 @@
     --background-color: var(--color--red);
   }
 
+  &.raised {
+    --shadow--size: 2px;
+    --shadow--blur: 2px;
+    --shadow--spread: -1px;
+    --shadow--color: rgba(34, 34, 34, 0.8);
+
+    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
+      var(--shadow--spread) var(--shadow--color);
+
+    @include media('<xs') {
+      --shadow--size: 1px;
+      --shadow--spread: 0;
+      --shadow--blur: 1px;
+    }
+  }
+
   &.blank {
     --background-color: var(--color--white);
 
-    .placeholder,
-    .character {
-      color: var(--color--foreground);
-    }
+    color: var(--color--foreground);
+  }
+
+  &.empty {
+    color: var(--color--inactive);
   }
 
   &.highlighted {
@@ -37,76 +64,28 @@
 
     color: var(--color--primary--opposite);
 
-    .placeholder,
-    .character {
-      color: inherit;
-    }
-
     .points {
       color: inherit;
     }
   }
-
-  &:not(.disabled) {
-    .input::selection {
-      --background--color: transparent;
-    }
-  }
-}
-
-.input,
-.character,
-.placeholder {
-  padding: 0;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-align: center;
-  caret-color: transparent;
-  box-sizing: border-box;
 }
 
 .input {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  color: transparent;
-  border: none;
-  font-size: 16px; // prevent iOS from automatically zooming in on focus
-}
-
-.character,
-.placeholder {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--background-color);
-  transition: var(--transition);
-  pointer-events: none;
-  user-select: none;
-
-  .empty & {
-    color: var(--color--inactive);
-  }
-
-  .raised & {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
-
-    @include media('<xs') {
-      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
-    }
-  }
-}
-
-.character {
-  opacity: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
 
-  .empty & {
-    opacity: 0;
+  &::selection {
+    --background--color: transparent;
   }
 }
 
@@ -146,10 +125,12 @@
   [dir='ltr'] & {
     top: 0;
     right: 0;
+    border-top-right-radius: inherit;
   }
 
   [dir='rtl'] & {
     bottom: 0;
     right: 0;
+    border-bottom-right-radius: inherit;
   }
 }

package/src/components/Tile/Tile.tsx

@@ -60,8 +60,10 @@ const Tile: FunctionComponent<Props> = ({
   const locale = useTypedSelector(selectLocale);
   const { animateTile, showTilePoints } = useAppLayout();
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
-  const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
-  const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
+  const style = useMemo(
+    () => ({ fontSize: tileFontSize, height: tileSize, width: tileSize }),
+    [tileSize, tileFontSize],
+  );
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
@@ -98,7 +100,6 @@ const Tile: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
-      characterStyle={characterStyle}
       className={className}
       disabled={disabled}
       highlighted={highlighted}

package/src/components/Tile/TilePure.tsx

@@ -18,7 +18,6 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
-  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
@@ -42,7 +41,6 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
-  characterStyle,
   className,
   disabled,
   highlighted,
@@ -66,15 +64,18 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.disabled]: disabled,
       [styles.empty]: !character,
       [styles.highlighted]: highlighted,
-      [styles.raised]: raised,
+      [styles.placeholder]: !character,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
       [styles.points3]: points === 3,
       [styles.points4]: points === 4,
       [styles.points5]: typeof points === 'number' && points >= 5,
+      [styles.raised]: raised,
     })}
     style={style}
   >
+    {character || placeholder}
+
     <input
       aria-label={ariaLabel}
       autoCapitalize="none"
@@ -92,16 +93,6 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
-    {placeholder && (
-      <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>
-        {placeholder}
-      </div>
-    )}
-
-    <div className={styles.character} style={characterStyle} tabIndex={-1}>
-      {character}
-    </div>
-
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

package/src/components/Tooltip/Tooltip.module.scss

@@ -1,11 +1,3 @@
-$arrow-size: 4px;
-
-:export {
-  ARROW_SIZE: $arrow-size;
-  PREVENT_OVERFLOW: 10px;
-  OFFSET: 2px;
-}
-
 .tooltip {
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
@@ -13,71 +5,8 @@ $arrow-size: 4px;
   background-color: var(--color--tooltip--background);
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
-
-  &.top {
-    .arrow {
-      bottom: -$arrow-size;
-
-      &::after {
-        left: 0;
-        bottom: 0;
-        border-top-color: var(--color--tooltip--background);
-        border-bottom: none;
-      }
-    }
-  }
-
-  &.right {
-    .arrow {
-      left: -$arrow-size;
-
-      &::after {
-        left: 0;
-        top: 0;
-        border-right-color: var(--color--tooltip--background);
-        border-left: none;
-      }
-    }
-  }
-
-  &.bottom {
-    .arrow {
-      top: -$arrow-size;
-
-      &::after {
-        top: 0;
-        left: 0;
-        border-bottom-color: var(--color--tooltip--background);
-        border-top: none;
-      }
-    }
-  }
-
-  &.left {
-    .arrow {
-      right: -$arrow-size;
-
-      &::after {
-        right: 0;
-        top: 0;
-        border-left-color: var(--color--tooltip--background);
-        border-right: none;
-      }
-    }
-  }
 }
 
 .arrow {
-  position: absolute;
-  width: 2 * $arrow-size;
-  height: 2 * $arrow-size;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    height: 0;
-    width: 0;
-    pointer-events: none;
-    border: $arrow-size solid transparent;
-  }
+  fill: var(--color--tooltip--background);
 }

package/src/components/Tooltip/useTooltip.tsx

@@ -1,3 +1,4 @@
+import { arrow, autoUpdate, flip, FloatingArrow, offset, shift, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
 import {
   FocusEvent,
@@ -6,16 +7,15 @@ import {
   MouseEventHandler,
   ReactNode,
   useCallback,
+  useId,
   useMemo,
+  useRef,
   useState,
 } from 'react';
-import { usePopper } from 'react-popper';
-import { useMountedState, useRafLoop } from 'react-use';
 
-import { useIsTouchDevice, usePortal, useUniqueId } from 'hooks';
+import { useIsTouchDevice, usePortal } from 'hooks';
 import { noop } from 'lib';
 
-import { MODIFIERS } from './constants';
 import styles from './Tooltip.module.scss';
 
 interface Props {
@@ -36,29 +36,27 @@ interface TriggerProps {
   onMouseOver?: MouseEventHandler;
 }
 
+const ARROW_SIZE = 7;
+const ARROW_GAP = 3;
+const PADDING = 10;
+
 // eslint-disable-next-line max-statements
 const useTooltip = (
   tooltip: ReactNode,
   { className, placement = 'top', onBlur = noop, onFocus = noop, onMouseOut = noop, onMouseOver = noop }: Props = {},
 ): TriggerProps => {
-  const id = useUniqueId();
+  const id = useId();
   const isTouchDevice = useIsTouchDevice();
   const isEnabled = Boolean(tooltip) || tooltip === 0;
-  const isMounted = useMountedState();
   const [isShown, setIsShown] = useState<boolean>(false);
-  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
-  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null);
-  const {
-    attributes,
-    styles: popperStyles,
-    update,
-  } = usePopper(referenceElement, popperElement, {
-    modifiers: [{ name: 'arrow', options: { element: arrowElement } }, ...MODIFIERS],
+  const arrowRef = useRef(null);
+  const ariaAttributes = useMemo(() => (isShown ? { 'aria-describedby': id } : {}), [id, isShown]);
+
+  const { x, y, context, refs, strategy } = useFloating({
+    middleware: [flip(), shift({ padding: PADDING }), offset(ARROW_SIZE + ARROW_GAP), arrow({ element: arrowRef })],
     placement,
+    whileElementsMounted: autoUpdate,
   });
-  const computedPlacement = attributes.popper ? attributes.popper['data-popper-placement'] : placement;
-  const ariaAttributes = useMemo(() => (isShown ? { 'aria-describedby': id } : {}), [id, isShown]);
 
   const handleBlur = useCallback(
     (event: FocusEvent) => {
@@ -95,7 +93,7 @@ const useTooltip = (
   const mouseTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
-      ref: setReferenceElement,
+      ref: refs.setReference,
       onBlur: handleBlur,
       onFocus: handleFocus,
       onMouseOut: handleMouseOut,
@@ -107,33 +105,25 @@ const useTooltip = (
   const touchTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
-      ref: setReferenceElement,
+      ref: refs.setReference,
     }),
     [ariaAttributes],
   );
 
   const triggerProps = isTouchDevice ? touchTriggerProps : mouseTriggerProps;
 
-  useRafLoop(() => {
-    if (isMounted() && update) {
-      update();
-    }
-  });
-
   usePortal(
     <div
-      className={classNames(styles.tooltip, className, {
-        [styles.top]: computedPlacement === 'top',
-        [styles.right]: computedPlacement === 'right',
-        [styles.bottom]: computedPlacement === 'bottom',
-        [styles.left]: computedPlacement === 'left',
-      })}
-      ref={setPopperElement}
-      style={popperStyles.popper}
-      {...attributes.popper}
+      className={classNames(styles.tooltip, className)}
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+      }}
     >
       <div>{tooltip}</div>
-      <div className={styles.arrow} ref={setArrowElement} style={popperStyles.arrow} />
+      <FloatingArrow className={styles.arrow} context={context} ref={arrowRef} />
     </div>,
     { disabled: !isEnabled || !isShown },
   );

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Alert } from './Alert';
 export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';

package/src/hooks/index.ts

@@ -5,4 +5,3 @@ export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as usePortal } from './usePortal';
-export { default as useUniqueId } from './useUniqueId';

package/src/hooks/useAppLayout.ts

@@ -1,4 +1,4 @@
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL } from 'parameters';
+import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL, SOLVER_COLUMN_WIDTH } from 'parameters';
 
 import useIsTouchDevice from './useIsTouchDevice';
 import useMediaQuery from './useMediaQuery';
@@ -14,8 +14,10 @@ const useAppLayout = () => {
 
   return {
     animateTile: !isLessThanXs,
+    columnWidth: showColumn ? SOLVER_COLUMN_WIDTH : 0,
     componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
     isBoardFullWidth: isLessThanM,
+    isModalFullWidth: isLessThanS,
     showColumn,
     showCompactControls: !showColumn,
     showFloatingSolveButton: isTouchDevice,

package/src/i18n/de.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Ablage: Stein ({{index}})",
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
-  "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
   "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",
   "results.empty-state.uninitialized": "Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.",

package/src/i18n/en.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Rack: tile ({{index}})",
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
-  "results.empty-state.no-filtered-results": "No result matches this query.",
   "results.empty-state.no-results": "No results - unable to generate any words.",
   "results.empty-state.outdated": "Results are outdated. Click below to update.",
   "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",

package/src/i18n/es.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Estante: espacio ({{index}})",
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
-  "results.empty-state.no-filtered-results": "Ningún resultado coincide con esta consulta.",
   "results.empty-state.no-results": "No hay resultados; no se pueden generar palabras",
   "results.empty-state.outdated": "Los resultados están desactualizados. Haga clic a continuación para actualizar.",
   "results.empty-state.uninitialized": "Aquí se mostrarán las palabras generadas a partir de sus letras.",

package/src/i18n/fa.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "({{index}}) کاشی: طاقچه",
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
-  "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
   "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
   "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",

package/src/i18n/fr.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Chevalet: la case ({{index}})",
   "remaining-tiles": "Cases restantes",
   "results": "Résultats",
-  "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
   "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",
   "results.empty-state.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",

package/src/i18n/pl.json

@@ -45,7 +45,6 @@
   "rack.tile.location": "Stojak: płytka ({{index}})",
   "remaining-tiles": "Pozostałe płytki",
   "results": "Wyniki",
-  "results.empty-state.no-filtered-results": "Żaden wynik nie pasuje do tej kwerendy.",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
   "results.empty-state.outdated": "Wyniki są nieaktualne. Kliknij poniżej, aby zaktualizować.",
   "results.empty-state.uninitialized": "Tu zostaną wyświetlone słowa wygenerowane z Twoich liter.",

package/src/lib/createRegExp.ts

@@ -0,0 +1,13 @@
+const createRegExp = (input: string): RegExp => {
+  if (input.trim().length === 0) {
+    return /.*/;
+  }
+
+  try {
+    return new RegExp(input, 'gi');
+  } catch {
+    return /.*/;
+  }
+};
+
+export default createRegExp;

package/src/lib/groupResults.ts

@@ -0,0 +1,38 @@
+import { Result } from '@scrabble-solver/types';
+
+import { Point } from 'types';
+
+import createRegExp from './createRegExp';
+
+interface GroupedResults {
+  matching: Result[];
+  other: Result[];
+}
+
+const groupResults = (
+  results: Result[] | undefined,
+  query: string,
+  cellFilter: Point[],
+): GroupedResults | undefined => {
+  if (typeof results === 'undefined') {
+    return results;
+  }
+
+  return results.reduce<GroupedResults>(
+    ({ matching, other }, result) => {
+      const matchesQuery = createRegExp(query).test(result.word);
+      const matchesCellFilter = cellFilter.every(({ x, y }) => {
+        return result.cells.some((cell) => cell.x === x && cell.y === y);
+      });
+      const isMatching = matchesQuery && matchesCellFilter;
+
+      return {
+        matching: isMatching ? [...matching, result] : matching,
+        other: isMatching ? other : [...other, result],
+      };
+    },
+    { matching: [], other: [] },
+  );
+};
+
+export default groupResults;

package/src/lib/guessLocale.ts

@@ -0,0 +1,22 @@
+import { Locale } from '@scrabble-solver/types';
+
+const guessLocale = (): Locale => {
+  if (!globalThis.navigator) {
+    return Locale.EN_US;
+  }
+
+  const locales = Object.values(Locale);
+  const exactMatch = locales.find((locale) => globalThis.navigator.language === locale);
+
+  if (exactMatch) {
+    return exactMatch;
+  }
+
+  const partialMatch = locales.find((locale) => {
+    return globalThis.navigator.language === locale.substring(0, 2);
+  });
+
+  return partialMatch || Locale.EN_US;
+};
+
+export default guessLocale;

package/src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as createGridOf } from './createGridOf';
 export { default as createKeyboardNavigation } from './createKeyboardNavigation';
 export { default as createKeyComparator } from './createKeyComparator';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
+export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
@@ -14,10 +15,11 @@ export { default as getCellSize } from './getCellSize';
 export { default as getRemainingTiles } from './getRemainingTiles';
 export { default as getRemainingTilesCount } from './getRemainingTilesCount';
 export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';
-export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
 export { default as getTileSizes } from './getTileSizes';
+export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
+export { default as groupResults } from './groupResults';
+export { default as guessLocale } from './guessLocale';
 export { default as inverseDirection } from './inverseDirection';
-export { default as isCtrl } from './isCtrl';
 export { default as isMac } from './isMac';
 export { default as isRegExp } from './isRegExp';
 export { default as isStringArray } from './isStringArray';

package/src/lib/sortResults.ts

@@ -1,6 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 
-import { Comparator, ResultColumn, SortDirection } from 'types';
+import { Comparator, ResultColumn, Sort, SortDirection } from 'types';
 
 import createKeyComparator from './createKeyComparator';
 import reverseComparator from './reverseComparator';
@@ -15,20 +15,16 @@ const comparators: Record<ResultColumn, (locale: string) => Comparator<Result>>
   [ResultColumn.WordsCount]: (locale: string) => createKeyComparator('wordsCount', locale),
 };
 
-const sortResults = (
-  results: Result[] | undefined,
-  column: ResultColumn,
-  sortDirection: SortDirection,
-  locale: string,
-): Result[] | undefined => {
+const sortResults = (results: Result[] | undefined, sort: Sort, locale: string): Result[] | undefined => {
   if (typeof results === 'undefined') {
     return results;
   }
 
-  const createComparator = comparators[column];
+  const createComparator = comparators[sort.column];
   const comparator = createComparator(locale);
-  const finalComparator = sortDirection === SortDirection.Descending ? reverseComparator(comparator) : comparator;
-  return [...results].sort(finalComparator);
+  const finalComparator = sort.direction === SortDirection.Descending ? reverseComparator(comparator) : comparator;
+  const sortedResults = [...results].sort(finalComparator);
+  return sortedResults;
 };
 
 export default sortResults;

package/src/modals/DictionaryModal/DictionaryModal.module.scss

@@ -4,15 +4,19 @@
   flex-direction: column;
   background-color: var(--color--background--element);
   border: var(--border);
-  box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
 }
 
 .dictionary {
   flex: 1;
-  border-bottom: var(--border);
   max-height: initial;
+  border-bottom: var(--border);
+  border-top-left-radius: var(--border--radius);
+  border-top-right-radius: var(--border--radius);
 }
 
 .dictionaryInput {
   flex: 0 0 auto;
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }