scrabble-solver 2.11.0 → 2.11.1

package/packages/scrabble-solver/src/components/PlainTiles/PlainTiles.module.scss

@@ -20,5 +20,5 @@ $duration: 750ms;
 }
 
 .dropShadow {
-  filter: drop-shadow(0 0 4px rgba(#000, 0.4));
+  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
 }

package/packages/scrabble-solver/src/components/PlainTiles/Tile.tsx

@@ -14,12 +14,12 @@ interface Props {
 
 const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamily, points, size, transform, x, y }) => (
   <g className={className} transform={transform}>
-    <rect fill={color} height={size} width={size} x={x} y={y} />
+    <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"
       fontFamily={fontFamily}
-      fontSize={0.6 * size}
+      fontSize={size * 0.6}
       fontWeight="bold"
       textAnchor="middle"
       x={x + size / 2}
@@ -32,7 +32,7 @@ const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamil
       <text
         dominantBaseline="text-after-edge"
         fontFamily={fontFamily}
-        fontSize={0.25 * size}
+        fontSize={size * 0.25}
         fontWeight="bold"
         textAnchor="end"
         x={x + size * 0.9}

package/packages/scrabble-solver/src/components/Rack/Rack.module.scss

@@ -3,6 +3,7 @@
 .rack {
   display: flex;
   box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
 }
 
 .tile {
@@ -15,3 +16,27 @@
     z-index: 2;
   }
 }
+
+.sharpLeft {
+  [dir='ltr'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.sharpRight {
+  [dir='ltr'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

package/packages/scrabble-solver/src/components/Rack/Rack.tsx

@@ -8,7 +8,6 @@ import {
   createKeyboardNavigation,
   extractCharacters,
   extractInputValue,
-  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -99,9 +98,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          changeActiveIndex(1);
-        } else if (event.currentTarget.value === event.key) {
+        if (event.currentTarget.value === event.key) {
           // change event did not fire because the same character was typed over the current one
           // but we still want to move the caret
           event.preventDefault();
@@ -118,6 +115,10 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         <RackTile
           activeIndexRef={activeIndexRef}
           character={character}
+          className={classNames({
+            [styles.sharpLeft]: index !== 0,
+            [styles.sharpRight]: index !== tiles.length - 1,
+          })}
           index={index}
           inputRef={tilesRefs[index]}
           key={index}

package/packages/scrabble-solver/src/components/Rack/RackTile.tsx

@@ -1,5 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile as TileModel } from '@scrabble-solver/types';
+import classNames from 'classnames';
 import {
   ChangeEvent,
   ChangeEventHandler,
@@ -12,7 +13,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -30,6 +31,7 @@ import styles from './Rack.module.scss';
 interface Props {
   activeIndexRef: MutableRefObject<number | undefined>;
   character: string | null;
+  className?: string;
   index: number;
   inputRef: RefObject<HTMLInputElement>;
   size: number;
@@ -41,6 +43,7 @@ interface Props {
 const RackTile: FunctionComponent<Props> = ({
   activeIndexRef,
   character,
+  className,
   index,
   inputRef,
   size,
@@ -77,17 +80,7 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          event.preventDefault();
-          event.stopPropagation();
-          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
-        }
-
-        onKeyDown(event);
-      },
+      onKeyDown,
     });
   }, [index, onKeyDown]);
 
@@ -97,7 +90,7 @@ const RackTile: FunctionComponent<Props> = ({
         index: (index + 1).toLocaleString(locale),
       })}
       autoFocus={index === 0}
-      className={styles.tile}
+      className={classNames(styles.tile, className)}
       character={character === null ? undefined : character}
       highlighted={tile !== null}
       inputRef={inputRef}

package/packages/scrabble-solver/src/components/Results/Results.module.scss

@@ -9,6 +9,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   height: 100%;
   background: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--title);
 }
@@ -29,6 +30,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .list {
+  @include scrollbars;
+
+  scrollbar-gutter: stable;
   transition: var(--transition);
 
   &.outdated {
@@ -44,6 +48,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   justify-content: space-between;
   font-weight: 700;
   border-bottom: var(--border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 .headerButton {
@@ -60,6 +66,26 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     background-color: var(--color--primary);
     color: var(--color--primary--opposite);
   }
+
+  &:first-child {
+    [dir='ltr'] & {
+      border-top-left-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-right-radius: inherit;
+    }
+  }
+
+  &:last-child {
+    [dir='ltr'] & {
+      border-top-right-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-left-radius: inherit;
+    }
+  }
 }
 
 .headerButtonLabel {
@@ -175,4 +201,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
 .input {
   border-top: var(--border);
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }

package/packages/scrabble-solver/src/components/ResultsInput/ResultsInput.module.scss

@@ -8,4 +8,5 @@
   @include text-input;
 
   border: none;
+  border-radius: inherit;
 }

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss

@@ -70,16 +70,21 @@
   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;
   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);
 }
 
 .bottomContainer {
@@ -97,10 +102,6 @@
   min-width: 0;
 }
 
-.rack {
-  border: var(--border);
-}
-
 .controls {
   width: 100%;
 }

package/packages/scrabble-solver/src/components/Solver/Solver.tsx

@@ -19,13 +19,14 @@ import {
   useTypedSelector,
 } from 'state';
 
+import Alert from '../Alert';
 import Board from '../Board';
 import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
 
-import { EmptyState, FloatingSolveButton, ResultCandidatePicker } from './components';
+import { FloatingSolveButton, ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -111,7 +112,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
     <div className={classNames(styles.solver, className)}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <form id="a" className={styles.boardContainer} onSubmit={handleSubmit}>
+          <form className={styles.boardContainer} onSubmit={handleSubmit}>
             <Board cellSize={cellSizeSafe} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
@@ -129,7 +130,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form id="b" onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
@@ -139,15 +140,15 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
               <ResultCandidatePicker onResultClick={onShowResults} />
 
               {error && (
-                <EmptyState className={styles.emptyState} variant="error">
+                <Alert className={styles.emptyState} variant="error">
                   {error.message}
-                </EmptyState>
+                </Alert>
               )}
 
               {allResults && allResults.length === 0 && !isOutdated && (
-                <EmptyState className={styles.emptyState} variant="warning">
+                <Alert className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
-                </EmptyState>
+                </Alert>
               )}
             </div>
           )}

package/packages/scrabble-solver/src/components/Solver/components/index.ts

@@ -1,4 +1,3 @@
-export { default as EmptyState } from './EmptyState';
 export { default as FloatingSolveButton } from './FloatingSolveButton';
 export { default as InsertButton } from './InsertButton';
 export { default as ResultCandidatePicker } from './ResultCandidatePicker';

package/packages/scrabble-solver/src/components/Tile/Tile.module.scss

@@ -5,6 +5,7 @@
 
   position: relative;
   transition: var(--transition);
+  border-radius: var(--border--radius);
 
   &.points1 {
     --background-color: var(--color--yellow);
@@ -85,6 +86,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--background-color);
+  border-radius: inherit;
   transition: var(--transition);
   pointer-events: none;
   user-select: none;
@@ -94,10 +96,18 @@
   }
 
   .raised & {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
+    --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') {
-      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
+      --shadow--size: 1px;
+      --shadow--spread: 0;
+      --shadow--blur: 1px;
     }
   }
 }
@@ -146,10 +156,12 @@
   [dir='ltr'] & {
     top: 0;
     right: 0;
+    border-top-right-radius: inherit;
   }
 
   [dir='rtl'] & {
     bottom: 0;
     right: 0;
+    border-bottom-right-radius: inherit;
   }
 }

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/modals/DictionaryModal/DictionaryModal.module.scss

@@ -4,15 +4,20 @@
   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;
-  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);
 }

package/packages/scrabble-solver/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/packages/scrabble-solver/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

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