@scrabble-solver/scrabble-solver 2.15.4 → 2.15.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.15.4",
+  "version": "2.15.5",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
     "@floating-ui/react": "^0.26.25",
     "@kamilmielnik/trie": "^3.1.0",
     "@reduxjs/toolkit": "^2.3.0",
-    "@scrabble-solver/configs": "^2.15.4",
-    "@scrabble-solver/constants": "^2.15.4",
-    "@scrabble-solver/dictionaries": "^2.15.4",
-    "@scrabble-solver/logger": "^2.15.4",
-    "@scrabble-solver/solver": "^2.15.4",
-    "@scrabble-solver/types": "^2.15.4",
-    "@scrabble-solver/word-definitions": "^2.15.4",
+    "@scrabble-solver/configs": "^2.15.5",
+    "@scrabble-solver/constants": "^2.15.5",
+    "@scrabble-solver/dictionaries": "^2.15.5",
+    "@scrabble-solver/logger": "^2.15.5",
+    "@scrabble-solver/solver": "^2.15.5",
+    "@scrabble-solver/types": "^2.15.5",
+    "@scrabble-solver/word-definitions": "^2.15.5",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
@@ -71,7 +71,7 @@
     "@types/react-window": "^1.8.8",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "sass": "^1.80.3"
+    "sass": "^1.80.4"
   },
-  "gitHead": "5e638b79c52e18a2852880d8ee91759b3e438144"
+  "gitHead": "fcb31b606fe7fb501c7e00a6c00a676fb7d2174f"
 }

package/src/components/Board/Board.tsx

@@ -178,6 +178,7 @@ const Board: FunctionComponent<Props> = ({ className }) => {
             position: floatingFocus.strategy,
             top: floatingFocus.y + cellSize,
             left: floatingFocus.x,
+            display: floatingFocus.isPositioned ? 'block' : 'none',
             width: cellSize,
             height: cellSize,
             opacity: hasFocus ? 1 : 0,

package/src/components/Button/Button.module.scss

@@ -60,8 +60,13 @@
 .content {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: var(--spacing--l);
   line-height: var(--button--icon--size);
+
+  @include media('<l') {
+    gap: var(--spacing--m);
+  }
 }
 
 .icon {
@@ -74,8 +79,18 @@
 .label {
   @include ellipsis;
 
-  flex: 1;
   font-size: var(--font--size--h3);
   transition: var(--transition);
   text-align: start;
 }
+
+.wide {
+  .content {
+    justify-content: normal;
+    gap: var(--spacing--l);
+  }
+
+  .label {
+    flex: 1;
+  }
+}

package/src/components/Button/Button.tsx

@@ -12,6 +12,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconClassName?: string;
   tooltip?: ReactNode;
   variant?: 'default' | 'primary';
+  wide?: boolean;
 }
 
 const Button: FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const Button: FunctionComponent<Props> = ({
   iconClassName,
   tooltip,
   variant = 'default',
+  wide,
   ...props
 }) => {
   return (
@@ -29,6 +31,7 @@ const Button: FunctionComponent<Props> = ({
         className={classNames(styles.button, className, {
           [styles.default]: variant === 'default',
           [styles.primary]: variant === 'primary',
+          [styles.wide]: wide,
         })}
         type="button"
         {...props}

package/src/components/Button/Link.tsx

@@ -12,6 +12,7 @@ interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
   iconClassName?: string;
   tooltip?: ReactNode;
   variant?: 'default' | 'primary';
+  wide?: boolean;
 }
 
 const Link: FunctionComponent<Props> = ({
@@ -21,6 +22,7 @@ const Link: FunctionComponent<Props> = ({
   iconClassName,
   tooltip,
   variant = 'default',
+  wide,
   ...props
 }) => {
   return (
@@ -29,6 +31,7 @@ const Link: FunctionComponent<Props> = ({
         className={classNames(styles.button, className, {
           [styles.default]: variant === 'default',
           [styles.primary]: variant === 'primary',
+          [styles.wide]: wide,
         })}
         {...props}
       >

package/src/components/Radio/Radio.module.scss

@@ -16,10 +16,8 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   cursor: pointer;
 
   &.checked {
-    .icon {
-      &::after {
-        background-color: var(--color--primary);
-      }
+    .iconContent {
+      background-color: var(--color--primary);
     }
   }
 
@@ -40,28 +38,24 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
 }
 
 .icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   flex: 0 0 auto;
-  position: relative;
   width: $radio-box-size;
   height: $radio-box-size;
-  border-radius: 50%;
   border: $radio-inner-border solid var(--color--primary);
-  pointer-events: none;
-
-  &::after {
-    content: ' ';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: $radio-inner-size;
-    height: $radio-inner-size;
-    background-color: transparent;
-    border-radius: 50%;
-    transition: var(--transition);
-  }
+  border-radius: 50%;
 }
 
 .content {
   flex: 1;
 }
+
+.iconContent {
+  width: $radio-inner-size;
+  height: $radio-inner-size;
+  background-color: transparent;
+  border-radius: 50%;
+  transition: var(--transition);
+}

package/src/components/Radio/Radio.tsx

@@ -30,7 +30,9 @@ const Radio: FunctionComponent<Props> = ({ checked, children, className, disable
       onChange={onChange}
     />
 
-    <div aria-hidden="true" className={styles.icon} role="img" />
+    <div aria-hidden="true" className={styles.icon} role="img">
+      <div className={styles.iconContent} />
+    </div>
 
     <div className={styles.content}>{children}</div>
   </label>

package/src/modals/MenuModal/MenuModal.tsx

@@ -37,16 +37,23 @@ const MenuModal: FunctionComponent<Props> = ({
         aria-label={translate('remaining-tiles')}
         className={styles.button}
         Icon={Sack}
+        wide
         onClick={onShowRemainingTiles}
       >
         {translate('remaining-tiles')}
       </Button>
 
-      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} onClick={onShowWords}>
+      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} wide onClick={onShowWords}>
         {translate('words')}
       </Button>
 
-      <Button aria-label={translate('dictionary')} className={styles.button} Icon={BookHalf} onClick={onShowDictionary}>
+      <Button
+        aria-label={translate('dictionary')}
+        className={styles.button}
+        Icon={BookHalf}
+        wide
+        onClick={onShowDictionary}
+      >
         {translate('dictionary')}
       </Button>
 
@@ -57,11 +64,12 @@ const MenuModal: FunctionComponent<Props> = ({
         Icon={Github}
         rel="noopener noreferrer"
         target="_blank"
+        wide
       >
         {translate('github')}
       </Button.Link>
 
-      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
+      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} wide onClick={onShowSettings}>
         <div className={styles.settings}>
           <div className={styles.settingsLabel}>{translate('settings')}</div>
           <Icon aria-hidden="true" className={styles.flag} role="img" />

package/src/state/sagas.ts

@@ -167,7 +167,9 @@ function* onLocaleChange({ payload: locale }: PayloadAction<Locale>): AnyGenerat
 function* onResultCandidateChange({ payload: result }: PayloadAction<Result | null>): AnyGenerator {
   if (result) {
     const locale: Locale = yield select(selectLocale);
-    yield put(dictionarySlice.actions.changeInput(result.words.join(LOCALE_FEATURES[locale].separator)));
+    const uniqueWords = Array.from(new Set(result.words));
+    const input = uniqueWords.join(LOCALE_FEATURES[locale].separator);
+    yield put(dictionarySlice.actions.changeInput(input));
     yield put(dictionarySlice.actions.submit());
   }
 }