@scrabble-solver/scrabble-solver 2.13.6 → 2.13.8

package/src/components/Tooltip/useTooltip.ts

@@ -0,0 +1,54 @@
+import {
+  Placement,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDelayGroup,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { useMemo, useRef, useState } from 'react';
+
+const ARROW_SIZE = 7;
+const ARROW_GAP = 3;
+const PADDING = 10;
+
+interface TooltipOptions {
+  placement?: Placement;
+}
+
+export const useTooltip = ({ placement = 'top' }: TooltipOptions = {}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const data = useFloating({
+    placement,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [flip(), shift({ padding: PADDING }), offset(ARROW_SIZE + ARROW_GAP), arrow({ element: arrowRef })],
+  });
+  const { context } = data;
+  const { delay } = useDelayGroup(context);
+  const hover = useHover(context, { move: false, delay });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+
+  return useMemo(
+    () => ({
+      arrowRef,
+      open: isOpen,
+      setOpen: setIsOpen,
+      ...interactions,
+      ...data,
+    }),
+    [arrowRef, isOpen, setIsOpen, interactions, data],
+  );
+};

package/src/components/index.ts

@@ -2,7 +2,6 @@ export { default as Alert } from './Alert';
 export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';
-export { default as Checkbox } from './Checkbox';
 export { default as Dictionary } from './Dictionary';
 export { default as DictionaryInput } from './DictionaryInput';
 export { default as EmptyState } from './EmptyState';
@@ -23,4 +22,4 @@ export { default as SeoMessage } from './SeoMessage';
 export { default as Solver } from './Solver';
 export { default as Spinner } from './Spinner';
 export { default as Tile } from './Tile';
-export { useTooltip } from './Tooltip';
+export * from './Tooltip';

package/src/hooks/index.ts

@@ -9,5 +9,4 @@ export { default as useMedia } from './useMedia';
 export { default as useMediaQueries } from './useMediaQueries';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useOnWindowResize } from './useOnWindowResize';
-export { default as usePortal } from './usePortal';
 export { default as useViewportSize } from './useViewportSize';

package/src/i18n/languages/german.json

@@ -22,7 +22,7 @@
   "dictionary.empty-state.no-definitions": "Wort existiert im Wörterbuch aber hat keine Definition.",
   "dictionary.empty-state.no-results": "Wort kann nicht im Wörterbuch gefunden werden.",
   "dictionary.empty-state.not-allowed": "Dieses Wort ist nicht erlaubt.",
-  "dictionary.empty-state.uninitialized": "Die Wörterbuchdéfinition wird hier angezeigt.",
+  "dictionary.empty-state.uninitialized": "Die Wörterbuchdefinition wird hier angezeigt.",
   "dictionary.input.placeholder": "Durchsuche Wörterbuch…",
   "dictionary.input.title": "Durch Kommas getrennte Wörter",
   "empty-state.error": "Fehler",

package/src/icons/index.ts

@@ -5,8 +5,6 @@ export { default as ArrowUp } from './ArrowUp.svg';
 export { default as BookHalf } from './BookHalf.svg';
 export { default as CardChecklist } from './CardChecklist.svg';
 export { default as Check } from './Check.svg';
-export { default as CheckboxChecked } from './CheckboxChecked.svg';
-export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
 export { default as ChevronDown } from './ChevronDown.svg';
 export { default as ChevronLeft } from './ChevronLeft.svg';
 export { default as ChevronRight } from './ChevronRight.svg';

package/src/lib/getCoordinates.ts

@@ -0,0 +1,18 @@
+import { Result, ShowCoordinates } from '@scrabble-solver/types';
+
+import getCoordinate from './getCoordinate';
+
+const getCoordinates = (result: Result, showCoordinates: ShowCoordinates): string => {
+  if (showCoordinates === 'hidden') {
+    return '';
+  }
+
+  const firstCell = result.cells[0];
+  const isHorizontal = firstCell.x !== result.cells[1].x;
+  const x = getCoordinate(firstCell.x, showCoordinates === 'original' ? 'letter' : 'number');
+  const y = getCoordinate(firstCell.y, showCoordinates === 'original' ? 'number' : 'letter');
+
+  return isHorizontal ? `${y}${x}` : `${x}${y}`;
+};
+
+export default getCoordinates;

package/src/lib/groupResults.ts

@@ -18,18 +18,23 @@ const groupResults = (
     return results;
   }
 
+  const regExp = createRegExp(query);
+
   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],
-      };
+    (groupedResults, result) => {
+      const matchesQuery = () => regExp.test(result.word);
+      const matchesCellFilter = () =>
+        cellFilter.every(({ x, y }) => {
+          return result.cells.some((cell) => cell.x === x && cell.y === y);
+        });
+
+      if (matchesCellFilter() && matchesQuery()) {
+        groupedResults.matching.push(result);
+      } else {
+        groupedResults.other.push(result);
+      }
+
+      return groupedResults;
     },
     { matching: [], other: [] },
   );

package/src/lib/index.ts

@@ -1,5 +1,4 @@
 export { default as arrayEquals } from './arrayEquals';
-export { default as canUseDom } from './canUseDom';
 export { default as createArray } from './createArray';
 export { default as createComparator } from './createComparator';
 export { default as createGridOf } from './createGridOf';
@@ -15,6 +14,8 @@ export { default as extractCharactersByCase } from './extractCharactersByCase';
 export { default as extractInputValue } from './extractInputValue';
 export { default as findCell } from './findCell';
 export { default as getCellSize } from './getCellSize';
+export { default as getCoordinate } from './getCoordinate';
+export { default as getCoordinates } from './getCoordinates';
 export { default as getRemainingTiles } from './getRemainingTiles';
 export { default as getRemainingTilesCount } from './getRemainingTilesCount';
 export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';

package/src/lib/sortResults.ts

@@ -8,6 +8,7 @@ import reverseComparator from './reverseComparator';
 const comparators: Record<ResultColumn, (locale: string) => Comparator<Result>> = {
   [ResultColumn.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
   [ResultColumn.ConsonantsCount]: (locale: string) => createKeyComparator('consonantsCount', locale),
+  [ResultColumn.Coordinates]: () => () => 0,
   [ResultColumn.Points]: (locale: string) => createKeyComparator('points', locale),
   [ResultColumn.TilesCount]: (locale: string) => createKeyComparator('tilesCount', locale),
   [ResultColumn.VowelsCount]: (locale: string) => createKeyComparator('vowelsCount', locale),

package/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

@@ -39,10 +39,10 @@
   }
 
   &:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   &:last-child {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }

package/src/modals/MenuModal/MenuModal.module.scss

@@ -31,13 +31,7 @@
   --aspect-ratio: var(--highest-flag-aspect-ratio);
   --padding: calc(var(--spacing--l) + var(--button--icon--size) * var(--aspect-ratio));
 
-  [dir='ltr'] & {
-    padding-right: var(--padding);
-  }
-
-  [dir='rtl'] & {
-    padding-left: var(--padding);
-  }
+  padding-inline-end: var(--padding);
 }
 
 .flag {
@@ -45,12 +39,5 @@
   height: var(--button--icon--size);
   border-radius: var(--border--radius);
   box-shadow: 0 0 0 1px var(--box-shadow--color);
-
-  [dir='ltr'] & {
-    right: calc(2 * var(--spacing--l));
-  }
-
-  [dir='rtl'] & {
-    left: calc(2 * var(--spacing--l));
-  }
+  inset-inline-end: calc(2 * var(--spacing--l));
 }

package/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss

@@ -12,13 +12,7 @@
 }
 
 .badge {
-  [dir='ltr'] & {
-    margin-left: var(--spacing--m);
-  }
-
-  [dir='rtl'] & {
-    margin-right: var(--spacing--m);
-  }
+  margin-inline-start: var(--spacing--m);
 }
 
 .character {

package/src/modals/WordsModal/WordsModal.module.scss

@@ -6,13 +6,7 @@
 }
 
 .badge {
-  [dir='ltr'] & {
-    margin-left: var(--spacing--m);
-  }
-
-  [dir='rtl'] & {
-    margin-right: var(--spacing--m);
-  }
+  margin-inline-start: var(--spacing--m);
 }
 
 .word {
@@ -37,12 +31,5 @@
 
   width: $size;
   height: $size;
-
-  [dir='ltr'] & {
-    margin-right: var(--spacing--s);
-  }
-
-  [dir='rtl'] & {
-    margin-left: var(--spacing--s);
-  }
+  margin-inline-end: var(--spacing--s);
 }

package/src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { FloatingDelayGroup } from '@floating-ui/react';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { FunctionComponent } from 'react';
@@ -64,7 +65,10 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
 
     <Provider store={store}>
       <SeoMessage />
-      <Component {...pageProps} />
+
+      <FloatingDelayGroup delay={0}>
+        <Component {...pageProps} />
+      </FloatingDelayGroup>
     </Provider>
   </>
 );

package/src/parameters/index.ts

@@ -90,6 +90,7 @@ export const MODAL_HEADER_HEIGHT = 45;
 export const NAV_PADDING = SPACING_L;
 
 export const TILE_SIZE = 80;
+export const TOOLTIP_DURATION = TRANSITION_DURATION;
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
 export const PLAIN_TILES_PADDING_HORIZONTAL = 0;

package/src/styles/mixins.scss

@@ -14,7 +14,7 @@ $media-expressions: (
 
 @mixin scrollbars {
   scrollbar-color: var(--scrollbar--thumb--color) var(--scrollbar--thumb--track);
-  scrollbar-width: auto;
+  scrollbar-width: thin;
 
   &::-webkit-scrollbar {
     width: var(--scrollbar--size);
@@ -44,10 +44,7 @@ $media-expressions: (
 
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     z-index: var(--z-index--focus-effect);
     transition: var(--transition);
     border-radius: var(--border--radius);

package/src/types/index.ts

@@ -40,6 +40,7 @@ export interface RemainingTilesGroup {
 export enum ResultColumn {
   BlanksCount = 'blanks-count',
   ConsonantsCount = 'consonants-count',
+  Coordinates = 'coordinates',
   Points = 'points',
   TilesCount = 'tiles-count',
   VowelsCount = 'vowels-count',

package/.next/static/4GWIKe7khKxREyq3ZamDK/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST={__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":["static/css/11366b7489cf90ac.css","static/chunks/pages/index-caaf20b2488cb10e.js"],"/404":["static/chunks/pages/404-129e0943628b6fab.js"],"/_error":["static/chunks/pages/_error-6f16571cf9224b25.js"],sortedPages:["/","/404","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();