@scrabble-solver/scrabble-solver 2.10.11 → 2.11.1

package/src/components/Tile/Tile.tsx

@@ -11,7 +11,7 @@ import {
   useRef,
 } from 'react';
 
-import { useMediaQuery } from 'hooks';
+import { useAppLayout } from 'hooks';
 import { getTileSizes, noop } from 'lib';
 import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
@@ -58,6 +58,7 @@ const Tile: FunctionComponent<Props> = ({
   onKeyDown = noop,
 }) => {
   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]);
@@ -65,8 +66,7 @@ const Tile: FunctionComponent<Props> = ({
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
   const isEmpty = !character || character === EMPTY_CELL;
-  const isLessThanXs = useMediaQuery('<xs');
-  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined' && !isLessThanXs;
+  const canShowPoints = showTilePoints && (!isEmpty || isBlank) && typeof points !== 'undefined';
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
@@ -81,7 +81,7 @@ const Tile: FunctionComponent<Props> = ({
   }, [autoFocus, ref]);
 
   useEffect(() => {
-    if (!ref.current?.parentElement || !character || isLessThanXs) {
+    if (!ref.current?.parentElement || !character || !animateTile) {
       return;
     }
 
@@ -90,7 +90,7 @@ const Tile: FunctionComponent<Props> = ({
       easing: EASE_OUT_CUBIC,
       fill: 'forwards',
     });
-  }, [character, isLessThanXs]);
+  }, [character, animateTile]);
 
   return (
     <TilePure

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';
@@ -22,6 +23,7 @@ export { default as ResultsInput } from './ResultsInput';
 export { default as SeoMessage } from './SeoMessage';
 export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
+export { default as Spinner } from './Spinner';
 export { default as SplashScreen } from './SplashScreen';
 export { default as SvgFontCss } from './SvgFontCss';
 export { default as SvgFontFix } from './SvgFontFix';

package/src/hooks/index.ts

@@ -1,7 +1,7 @@
+export { default as useAppLayout } from './useAppLayout';
 export { default as useDirection } from './useDirection';
 export { default as useIsTouchDevice } from './useIsTouchDevice';
 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

@@ -0,0 +1,29 @@
+import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL } from 'parameters';
+
+import useIsTouchDevice from './useIsTouchDevice';
+import useMediaQuery from './useMediaQuery';
+
+const useAppLayout = () => {
+  const isTouchDevice = useIsTouchDevice();
+  const isLessThanXs = useMediaQuery('<xs');
+  const isLessThanS = useMediaQuery('<s');
+  const isLessThanM = useMediaQuery('<m');
+  const isLessThanL = useMediaQuery('<l');
+  const isLessThanXl = useMediaQuery('<xl');
+  const showColumn = !isLessThanL;
+
+  return {
+    animateTile: !isLessThanXs,
+    componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
+    isBoardFullWidth: isLessThanM,
+    showColumn,
+    showCompactControls: !showColumn,
+    showFloatingSolveButton: isTouchDevice,
+    showKeyMap: !isTouchDevice,
+    showResultsInModal: isLessThanL,
+    showShortNav: isLessThanS,
+    showTilePoints: !isLessThanXs,
+  };
+};
+
+export default useAppLayout;

package/src/i18n/de.json

@@ -17,6 +17,7 @@
   "common.vowels": "Vokale",
   "common.word": "Wort",
   "common.words": "Wörter",
+  "dictionary": "Wörterbuch",
   "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.",

package/src/i18n/en.json

@@ -17,6 +17,7 @@
   "common.vowels": "Vowels",
   "common.word": "Word",
   "common.words": "Words",
+  "dictionary": "Dictionary",
   "dictionary.empty-state.no-definitions": "Word exists in the dictionary but it does not have a definition.",
   "dictionary.empty-state.no-results": "Unable to find word definition in the dictionary.",
   "dictionary.empty-state.not-allowed": "This word is not allowed.",

package/src/i18n/es.json

@@ -17,6 +17,7 @@
   "common.vowels": "Vocales",
   "common.word": "Palabra",
   "common.words": "Palabras",
+  "dictionary": "Diccionario",
   "dictionary.empty-state.no-definitions": "La palabra existe en el diccionario pero no tiene una definición.",
   "dictionary.empty-state.no-results": "No se puede encontrar la definición de palabra en el diccionario.",
   "dictionary.empty-state.not-allowed": "Esta palabra no es aceptable.",

package/src/i18n/fa.json

@@ -17,6 +17,7 @@
   "common.vowels": "حروف مصوت",
   "common.word": "کلمه",
   "common.words": "کلمات",
+  "dictionary": "فرهنگ لغت",
   "dictionary.empty-state.no-definitions": "کلمه در فرهنگ لغت وجود دارد، ولی معنایی برای آن ثبت نشده است.",
   "dictionary.empty-state.no-results": "کلمه در فرهنگ لغت یافت نشد.",
   "dictionary.empty-state.not-allowed": "این کلمه مجاز نیست.",

package/src/i18n/fr.json

@@ -17,6 +17,7 @@
   "common.vowels": "Voyelles",
   "common.word": "Mot",
   "common.words": "Mots",
+  "dictionary": "Dictionnaire",
   "dictionary.empty-state.no-definitions": "Le mot existe dans le dictionary mais n'a pas de définition.",
   "dictionary.empty-state.no-results": "Impossible de trouver une définition pour ce mot dans le dictionaire.",
   "dictionary.empty-state.not-allowed": "Ce mot n'est pas pas acceptable.",

package/src/i18n/index.ts

@@ -1,2 +1,2 @@
-export { default } from './i18n';
 export * from './constants';
+export { default } from './i18n';

package/src/i18n/pl.json

@@ -17,6 +17,7 @@
   "common.vowels": "Samogłoski",
   "common.word": "Słowo",
   "common.words": "Słowa",
+  "dictionary": "Słownik",
   "dictionary.empty-state.no-definitions": "Słowo istnieje w słowniku ale nie posiada definicji.",
   "dictionary.empty-state.no-results": "Nie udało się znaleźć definicji słowa w słowniku.",
   "dictionary.empty-state.not-allowed": "To słowo nie jest dopuszczalne w grach.",

package/src/lib/index.ts

@@ -17,7 +17,6 @@ export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';
 export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
 export { default as getTileSizes } from './getTileSizes';
 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/modals/DictionaryModal/DictionaryModal.module.scss

@@ -0,0 +1,23 @@
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color--background--element);
+  border: var(--border);
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
+}
+
+.dictionary {
+  flex: 1;
+  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);
+}

package/src/modals/DictionaryModal/DictionaryModal.tsx

@@ -0,0 +1,27 @@
+import { FunctionComponent } from 'react';
+
+import { Dictionary, DictionaryInput, Modal } from 'components';
+import { useTranslate } from 'state';
+
+import styles from './DictionaryModal.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const DictionaryModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+  const translate = useTranslate();
+
+  return (
+    <Modal className={className} isOpen={isOpen} title={translate('dictionary')} onClose={onClose}>
+      <div className={styles.content}>
+        <Dictionary className={styles.dictionary} />
+        <DictionaryInput className={styles.dictionaryInput} />
+      </div>
+    </Modal>
+  );
+};
+
+export default DictionaryModal;

package/src/modals/DictionaryModal/index.ts

@@ -0,0 +1 @@
+export { default } from './DictionaryModal';

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,10 +1,10 @@
 import { FunctionComponent } from 'react';
 
-import { Key, Modal } from 'components';
-import { selectConfig, useTranslate, useTypedSelector } from 'state';
+import { Modal } from 'components';
+import { useTranslate } from 'state';
 
 import { Mapping } from './components';
-import { ARROWS, BACKSPACE, CTRL, DEL, ENTER, SPACE } from './keys';
+import { ARROWS, BACKSPACE, DEL, ENTER, SPACE } from './keys';
 
 interface Props {
   className?: string;
@@ -14,7 +14,6 @@ interface Props {
 
 const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
-  const config = useTypedSelector(selectConfig);
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
@@ -22,26 +21,11 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[ARROWS]} />
         <Mapping description={translate('keyMap.board-and-rack.remove-tile')} mapping={[DEL, BACKSPACE]} />
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[ENTER]} />
-        {config.twoCharacterTiles.length > 0 && (
-          <Mapping
-            description={translate('keyMap.board-and-rack.insert-two-letter-tile')}
-            mapping={[
-              [
-                CTRL,
-                <>
-                  {config.twoCharacterTiles.map(([firstLetter]) => (
-                    <Key key={firstLetter}>{firstLetter.toUpperCase()}</Key>
-                  ))}
-                </>,
-              ],
-            ]}
-          />
-        )}
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.board')}>
-        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE, [CTRL, <Key key="b">B</Key>]]} />
-        <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[[CTRL, ARROWS]]} />
+        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE]} />
+        <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[ARROWS]} />
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.rack')}>

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

@@ -29,6 +29,10 @@
 }
 
 .group {
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
   &:first-child {
     margin-left: 0;
   }

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 
 import { Button, Modal } from 'components';
-import { CardChecklist, Cog, Github, Sack } from 'icons';
+import { BookHalf, CardChecklist, Cog, Github, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { useTranslate } from 'state';
 
@@ -11,6 +11,7 @@ interface Props {
   className?: string;
   isOpen: boolean;
   onClose: () => void;
+  onShowDictionary: () => void;
   onShowRemainingTiles: () => void;
   onShowSettings: () => void;
   onShowWords: () => void;
@@ -20,6 +21,7 @@ const Menu: FunctionComponent<Props> = ({
   className,
   isOpen,
   onClose,
+  onShowDictionary,
   onShowRemainingTiles,
   onShowSettings,
   onShowWords,
@@ -41,6 +43,10 @@ const Menu: FunctionComponent<Props> = ({
         {translate('words')}
       </Button>
 
+      <Button aria-label={translate('dictionary')} className={styles.button} Icon={BookHalf} onClick={onShowDictionary}>
+        {translate('dictionary')}
+      </Button>
+
       <Button.Link
         aria-label={translate('github')}
         className={styles.button}

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

@@ -19,6 +19,7 @@
         width: 100%;
         height: 100%;
         content: ' ';
+        border-radius: inherit;
         box-shadow: var(--box-shadow--error);
       }
     }

package/src/modals/ResultsModal/ResultsModal.module.scss

@@ -1,6 +1,25 @@
+@import 'styles/mixins';
+
 .content {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
+  gap: var(--spacing--l);
+}
+
+.results {
+  flex: 1;
+}
+
+.dictionary {
+  flex: 0 0 calc(var(--dictionary--height) - var(--text-input--height));
+  background-color: var(--color--background--element);
+  border: var(--border);
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
+
+  @media (max-height: 600px) {
+    display: none;
+  }
 }

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,8 +2,7 @@ import { Result } from '@scrabble-solver/types';
 import { FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Modal, Results } from 'components';
-import { useMediaQuery } from 'hooks';
+import { Dictionary, Modal, Results } from 'components';
 import {
   resultsSlice,
   selectResultCandidate,
@@ -23,7 +22,6 @@ interface Props {
 const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const isLessThanS = useMediaQuery('<s');
   const results = useTypedSelector(selectSortedFilteredResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = (results || []).findIndex((result) => result.id === resultCandidate?.id);
@@ -32,20 +30,23 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   const callbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
-        dispatch(resultsSlice.actions.changeResultCandidate(result));
+        const isSelected = result === resultCandidate;
 
-        if (isLessThanS) {
+        if (isSelected) {
           onClose();
+        } else {
+          dispatch(resultsSlice.actions.changeResultCandidate(result));
         }
       },
     }),
-    [dispatch, isLessThanS, onClose],
+    [dispatch, onClose, resultCandidate],
   );
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('results')} onClose={onClose}>
       <div className={styles.content}>
-        <Results callbacks={callbacks} highlightedIndex={highlightedIndex} />
+        <Results callbacks={callbacks} className={styles.results} highlightedIndex={highlightedIndex} />
+        <Dictionary className={styles.dictionary} />
       </div>
     </Modal>
   );

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -21,6 +21,8 @@
   $height: 32px;
 
   height: $height;
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
   transition: var(--transition);
 
   &.de {

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

@@ -37,5 +37,12 @@
 
   width: $size;
   height: $size;
-  margin-right: var(--spacing--s);
+
+  [dir='ltr'] & {
+    margin-right: var(--spacing--s);
+  }
+
+  [dir='rtl'] & {
+    margin-left: var(--spacing--s);
+  }
 }

package/src/modals/index.ts

@@ -1,3 +1,4 @@
+export { default as DictionaryModal } from './DictionaryModal';
 export { default as KeyMapModal } from './KeyMapModal';
 export { default as MenuModal } from './MenuModal';
 export { default as RemainingTilesModal } from './RemainingTilesModal';