@scrabble-solver/scrabble-solver 2.10.4 → 2.10.6

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
+import {
+  resultsSlice,
+  selectAreResultsOutdated,
+  selectLocale,
+  selectResultCandidate,
+  selectSortedResults,
+  useTypedSelector,
+} from 'state';
+
+import Button from '../../../Button';
+import ApplyButton from '../ApplyButton';
+
+import styles from './ResultCandidatePicker.module.scss';
+
+const ResultCandidatePicker: FunctionComponent<HTMLProps<HTMLDivElement>> = ({ className, ...props }) => {
+  const dispatch = useDispatch();
+  const locale = useTypedSelector(selectLocale);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const sortedResults = useTypedSelector(selectSortedResults);
+  const results = sortedResults || [];
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+
+  if (!resultCandidate) {
+    return null;
+  }
+
+  const index = results.findIndex((result) => result.id === resultCandidate.id);
+  const isPreviousDisabled = index <= 0;
+  const isNextDisabled = index >= results.length - 1;
+
+  const handleNextClick = () => {
+    if (!isNextDisabled) {
+      const nextResult = results[index + 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(nextResult));
+    }
+  };
+
+  const handlePreviousClick = () => {
+    if (!isPreviousDisabled) {
+      const previousResult = results[index - 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(previousResult));
+    }
+  };
+
+  return (
+    <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
+      <div className={styles.buttons}>
+        <Button
+          className={styles.button}
+          disabled={isPreviousDisabled}
+          Icon={ChevronLeft}
+          onClick={handlePreviousClick}
+        />
+        <Button className={styles.button} disabled={isNextDisabled} Icon={ChevronRight} onClick={handleNextClick} />
+      </div>
+
+      <button className={styles.resultCandidate} disabled={isOutdated} type="button">
+        <div className={styles.points}>{resultCandidate.points.toLocaleString(locale)}</div>
+        <div className={styles.word}>{resultCandidate.word}</div>
+        <div className={styles.iconContainer}>
+          <ChevronDown className={styles.icon} />
+        </div>
+      </button>
+
+      <ApplyButton className={styles.apply} />
+    </div>
+  );
+};
+
+export default ResultCandidatePicker;

package/src/components/Solver/components/SolveButton/SolveButton.tsx

@@ -34,6 +34,7 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
       Icon={Search}
       iconClassName={styles.icon}
       type="submit"
+      variant="primary"
       onClick={handleClick}
     />
   );

package/src/components/Solver/components/index.ts

@@ -1,3 +1,5 @@
 export { default as ApplyButton } from './ApplyButton';
 export { default as EmptyState } from './EmptyState';
+export { default as MobileControls } from './MobileControls';
+export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as SolveButton } from './SolveButton';

package/src/components/SquareButton/SquareButton.module.scss

@@ -20,8 +20,7 @@
   }
 
   &[disabled] {
-    pointer-events: none;
-    opacity: var(--opacity--disabled);
+    @include disabled;
   }
 }
 

package/src/components/SquareButton/SquareButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactNode, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
@@ -9,7 +9,7 @@ import styles from './SquareButton.module.scss';
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: never;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  tooltip: string;
+  tooltip: ReactNode;
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 

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

@@ -4,13 +4,8 @@
   --background-color: transparent;
 
   position: relative;
-  background-color: var(--background-color);
   transition: var(--transition);
 
-  &.raised {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
-  }
-
   &.points1 {
     --background-color: var(--color--yellow);
   }
@@ -55,31 +50,53 @@
 
     color: var(--color--error);
   }
+
+  &:not(.disabled) {
+    .input::selection {
+      --background--color: transparent;
+    }
+  }
 }
 
+.input,
 .character {
-  width: 100%;
-  height: 100%;
   padding: 0;
-  box-sizing: border-box;
-  background-color: transparent;
-  color: inherit;
-  border: none;
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
   caret-color: transparent;
+  box-sizing: border-box;
+}
 
-  &::placeholder {
-    color: var(--color--inactive);
-  }
+.input {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  color: transparent;
+  border: none;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
+}
 
-  &:not(:disabled)::selection {
-    --background--color: transparent;
+.character {
+  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);
   }
 
-  &[disabled] {
-    color: inherit;
+  .raised & {
+    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
   }
 }
 

package/src/components/Tile/Tile.tsx

@@ -55,7 +55,7 @@ const Tile: FunctionComponent<Props> = ({
   const locale = useTypedSelector(selectLocale);
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
-  const inputStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
+  const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const inputRef = useMemo<RefObject<HTMLInputElement>>(() => ref || createRef(), [ref]);
   const isEmpty = !character || character === EMPTY_CELL;
@@ -78,11 +78,11 @@ const Tile: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
+      characterStyle={characterStyle}
       className={className}
       disabled={disabled}
       highlighted={highlighted}
       inputRef={inputRef}
-      inputStyle={inputStyle}
       isBlank={isBlank}
       isValid={isValid}
       placeholder={placeholder}

package/src/components/Tile/TilePure.tsx

@@ -17,11 +17,11 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
+  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
   inputRef: RefObject<HTMLInputElement>;
-  inputStyle?: CSSProperties;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -40,11 +40,11 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
+  characterStyle,
   className,
   disabled,
   highlighted,
   inputRef,
-  inputStyle,
   isBlank,
   isValid,
   placeholder,
@@ -61,6 +61,8 @@ const TilePure: FunctionComponent<Props> = ({
   <div
     className={classNames(styles.tile, className, {
       [styles.blank]: isBlank,
+      [styles.disabled]: disabled,
+      [styles.empty]: !character,
       [styles.highlighted]: highlighted,
       [styles.invalid]: !isValid,
       [styles.raised]: raised,
@@ -77,12 +79,10 @@ const TilePure: FunctionComponent<Props> = ({
       autoComplete="off"
       autoCorrect="off"
       autoFocus={autoFocus}
-      className={styles.character}
+      className={styles.input}
       disabled={disabled}
-      placeholder={placeholder}
       ref={inputRef}
       spellCheck={false}
-      style={inputStyle}
       tabIndex={tabIndex}
       value={character || ''}
       onChange={onChange}
@@ -90,6 +90,10 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
+    <div className={styles.character} style={characterStyle} tabIndex={-1}>
+      {character || placeholder}
+    </div>
+
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

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

@@ -18,7 +18,7 @@ $arrow-size: 4px;
     .arrow {
       bottom: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         bottom: 0;
         border-top-color: var(--tooltip--background);
@@ -31,7 +31,7 @@ $arrow-size: 4px;
     .arrow {
       left: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         top: 0;
         border-right-color: var(--tooltip--background);
@@ -44,7 +44,7 @@ $arrow-size: 4px;
     .arrow {
       top: -$arrow-size;
 
-      &:after {
+      &::after {
         top: 0;
         left: 0;
         border-bottom-color: var(--tooltip--background);
@@ -57,7 +57,7 @@ $arrow-size: 4px;
     .arrow {
       right: -$arrow-size;
 
-      &:after {
+      &::after {
         right: 0;
         top: 0;
         border-left-color: var(--tooltip--background);
@@ -72,7 +72,7 @@ $arrow-size: 4px;
   width: 2 * $arrow-size;
   height: 2 * $arrow-size;
 
-  &:after {
+  &::after {
     content: ' ';
     position: absolute;
     height: 0;

package/src/components/index.ts

@@ -16,7 +16,6 @@ export { default as PlainTiles } from './PlainTiles';
 export { default as Progress } from './Progress';
 export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
-export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
 export { default as Sizer } from './Sizer';

package/src/icons/ChevronLeft.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-left/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill="currentColor" fill-rule="evenodd" />
+</svg>

package/src/icons/ChevronRight.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-right/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" fill="currentColor" fill-rule="evenodd" />
+</svg>

package/src/icons/index.ts

@@ -8,6 +8,8 @@ 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';
 export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
 export { default as CrossCircleFill } from './CrossCircleFill.svg';

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

@@ -1,46 +1,10 @@
 @import 'styles/mixins';
 
 .button {
-  @include button-reset;
-  @include focus-effect;
-
   width: 100%;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing--l);
-  margin-bottom: var(--spacing--m);
-  padding: var(--spacing--m);
-  border: var(--border);
-  border-radius: var(--border--radius);
-  background-color: var(--color--background--overlay);
-  transition: var(--transition);
-  cursor: pointer;
+  text-transform: none;
 
-  &:last-child {
-    margin-bottom: 0;
+  & + & {
+    margin-top: var(--spacing--l);
   }
-
-  &:focus,
-  &:hover {
-    text-decoration: none;
-
-    .icon {
-      color: var(--color--foreground--secondary);
-    }
-  }
-}
-
-.icon {
-  $size: 24px;
-
-  width: $size;
-  height: $size;
-  flex: 0 0 auto;
-  color: var(--color--inactive);
-  transition: var(--transition);
-}
-
-.content {
-  flex: 1;
-  text-align: left;
 }

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 
-import { Modal } from 'components';
+import { Button, Modal } from 'components';
 import { CardChecklist, Cog, Github, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { useTranslate } from 'state';
@@ -28,25 +28,27 @@ const Menu: FunctionComponent<Props> = ({
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
-      <button className={styles.button} onClick={onShowRemainingTiles}>
-        <Sack className={styles.icon} />
-        <div className={styles.content}>{translate('remaining-tiles')}</div>
-      </button>
-
-      <button className={styles.button} onClick={onShowWords}>
-        <CardChecklist className={styles.icon} />
-        <div className={styles.content}>{translate('words')}</div>
-      </button>
-
-      <a className={styles.button} href={GITHUB_PROJECT_URL} rel="noopener noreferrer" target="_blank">
-        <Github className={styles.icon} />
-        <div className={styles.content}>{translate('github')}</div>
-      </a>
-
-      <button className={styles.button} onClick={onShowSettings}>
-        <Cog className={styles.icon} />
-        <div className={styles.content}>{translate('settings')}</div>
-      </button>
+      <Button className={styles.button} Icon={Sack} onClick={onShowRemainingTiles}>
+        {translate('remaining-tiles')}
+      </Button>
+
+      <Button className={styles.button} Icon={CardChecklist} onClick={onShowWords}>
+        {translate('words')}
+      </Button>
+
+      <Button.Link
+        className={styles.button}
+        href={GITHUB_PROJECT_URL}
+        Icon={Github}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {translate('github')}
+      </Button.Link>
+
+      <Button className={styles.button} Icon={Cog} onClick={onShowSettings}>
+        {translate('settings')}
+      </Button>
     </Modal>
   );
 };

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

@@ -12,7 +12,7 @@
     opacity: 1;
 
     .tile {
-      &:after {
+      &::after {
         position: absolute;
         top: 0;
         left: 0;

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -25,7 +25,7 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   const dispatch = useDispatch();
   const translate = useTranslate();
   const [sizerRef, { height, width }] = useMeasure<HTMLDivElement>();
-  const isLessThanM = useMediaQuery('<m');
+  const isLessThanS = useMediaQuery('<s');
   const results = useTypedSelector(selectSortedFilteredResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = (results || []).findIndex((result) => result.id === resultCandidate?.id);
@@ -36,12 +36,12 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
       onClick: (result: Result) => {
         dispatch(resultsSlice.actions.changeResultCandidate(result));
 
-        if (isLessThanM) {
+        if (isLessThanS) {
           onClose();
         }
       },
     }),
-    [dispatch, isLessThanM, onClose],
+    [dispatch, isLessThanS, onClose],
   );
 
   return (

package/src/styles/mixins.scss

@@ -18,7 +18,7 @@ $media-expressions: (
 @mixin focus-effect {
   position: relative;
 
-  &:after {
+  &::after {
     content: '';
     position: absolute;
     top: 0;
@@ -38,12 +38,18 @@ $media-expressions: (
       outline: none;
     }
 
-    &:after {
+    &::after {
       box-shadow: 0 0 0 var(--box-shadow--focus--spread) var(--color--focus);
     }
   }
 }
 
+@mixin disabled {
+  opacity: var(--opacity--disabled);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 @mixin ellipsis {
   display: block;
   text-overflow: ellipsis;

package/.next/static/P7XhuDLmwJJqC8kgPjX42/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,e){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,c,e,"static/css/dcca0c1a39cf5ef5.css","static/chunks/pages/index-d761f0af070273d2.js"],"/404":[s,c,e,"static/chunks/pages/404-6c99a0c91257c60b.js"],"/_error":["static/chunks/pages/_error-8353112a01355ec2.js"],sortedPages:["/","/404","/_app","/_error"]}}("static/chunks/490-d29992f1c264d70e.js","static/css/97eb6ee0c4300c83.css","static/chunks/528-9942ddad0031ff79.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();