@scrabble-solver/scrabble-solver 2.10.3 → 2.10.4

package/src/{components/RemainingTiles/RemainingTiles.tsx → modals/RemainingTilesModal/RemainingTilesModal.tsx}

@@ -1,13 +1,11 @@
 import { FunctionComponent } from 'react';
 
+import { Badge, Modal } from 'components';
 import { LOCALE_FEATURES } from 'i18n';
 import { selectLocale, selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 
-import Badge from '../Badge';
-import Sidebar from '../Sidebar';
-
-import Character from './Character';
-import styles from './RemainingTiles.module.scss';
+import { Character } from './components';
+import styles from './RemainingTilesModal.module.scss';
 
 interface Props {
   className?: string;
@@ -15,20 +13,20 @@ interface Props {
   onClose: () => void;
 }
 
-const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
   const { direction } = LOCALE_FEATURES[locale];
 
   return (
-    <Sidebar className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
+    <Modal className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
       {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => {
         const current = direction === 'ltr' ? remainingCount : totalCount;
         const total = direction === 'ltr' ? totalCount : remainingCount;
 
         return (
-          <Sidebar.Section
+          <Modal.Section
             key={translationKey}
             title={
               <span className={styles.title}>
@@ -41,14 +39,18 @@ const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }
           >
             <div className={styles.content}>
               {tiles.map((tile) => {
-                return <Character key={tile.character} tile={tile} />;
+                return (
+                  <div className={styles.character} key={tile.character}>
+                    <Character tile={tile} />
+                  </div>
+                );
               })}
             </div>
-          </Sidebar.Section>
+          </Modal.Section>
         );
       })}
-    </Sidebar>
+    </Modal>
   );
 };
 
-export default RemainingTiles;
+export default RemainingTilesModal;

package/src/{components/RemainingTiles → modals/RemainingTilesModal/components/Character}/Character.module.scss

@@ -25,8 +25,12 @@
   }
 }
 
+.remaining {
+  height: 6px;
+  margin-top: var(--spacing--m);
+}
+
 .count {
   padding: var(--spacing--xs) 0;
-  text-align: center;
-  font-size: var(--font--size--s);
+  white-space: nowrap;
 }

package/src/{components/RemainingTiles → modals/RemainingTilesModal/components/Character}/Character.tsx

@@ -2,13 +2,12 @@ import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
+import { Progress, Tile } from 'components';
 import { LOCALE_FEATURES } from 'i18n';
 import { REMAINING_TILES_TILE_SIZE } from 'parameters';
 import { selectCharacterPoints, selectLocale, useTypedSelector } from 'state';
 import { RemainingTile } from 'types';
 
-import Tile from '../Tile';
-
 import styles from './Character.module.scss';
 
 interface Props {
@@ -30,7 +29,6 @@ const Character: FunctionComponent<Props> = ({ tile }) => {
         [styles.finished]: remainingCount <= 0,
         [styles.overused]: remainingCount < 0,
       })}
-      key={character}
     >
       <Tile
         character={character}
@@ -42,6 +40,16 @@ const Character: FunctionComponent<Props> = ({ tile }) => {
         raised
         size={REMAINING_TILES_TILE_SIZE}
       />
+
+      <Progress
+        className={styles.remaining}
+        max={count}
+        style={{
+          width: REMAINING_TILES_TILE_SIZE,
+        }}
+        value={remainingCount}
+      />
+
       <div className={styles.count}>
         {current.toLocaleString(locale)} / {total.toLocaleString(locale)}
       </div>

package/src/modals/RemainingTilesModal/components/Character/index.ts

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

package/src/modals/RemainingTilesModal/components/index.ts

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

package/src/modals/RemainingTilesModal/index.ts

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

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

@@ -0,0 +1,7 @@
+.content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: white;
+}

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -0,0 +1,58 @@
+import { Result } from '@scrabble-solver/types';
+import { FunctionComponent, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { useMeasure } from 'react-use';
+
+import { Modal, Results, Sizer, Well } from 'components';
+import { useMediaQuery } from 'hooks';
+import {
+  resultsSlice,
+  selectResultCandidate,
+  selectSortedFilteredResults,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
+
+import styles from './ResultsModal.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const [sizerRef, { height, width }] = useMeasure<HTMLDivElement>();
+  const isLessThanM = useMediaQuery('<m');
+  const results = useTypedSelector(selectSortedFilteredResults);
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+  const index = (results || []).findIndex((result) => result.id === resultCandidate?.id);
+  const highlightedIndex = index === -1 ? undefined : index;
+
+  const callbacks = useMemo(
+    () => ({
+      onClick: (result: Result) => {
+        dispatch(resultsSlice.actions.changeResultCandidate(result));
+
+        if (isLessThanM) {
+          onClose();
+        }
+      },
+    }),
+    [dispatch, isLessThanM, onClose],
+  );
+
+  return (
+    <Modal className={className} isOpen={isOpen} title={translate('results')} onClose={onClose}>
+      <Well className={styles.content}>
+        <Sizer ref={sizerRef} />
+
+        <Results callbacks={callbacks} height={height} highlightedIndex={highlightedIndex} width={width} />
+      </Well>
+    </Modal>
+  );
+};
+
+export default ResultsModal;

package/src/modals/ResultsModal/index.ts

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

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -0,0 +1,34 @@
+import { FunctionComponent } from 'react';
+
+import { Modal } from 'components';
+import { useTranslate } from 'state';
+
+import { AutoGroupTilesSetting, ConfigSetting, LocaleSetting } from './components';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+  const translate = useTranslate();
+
+  return (
+    <Modal className={className} isOpen={isOpen} title={translate('settings')} onClose={onClose}>
+      <Modal.Section title={translate('settings.game')}>
+        <ConfigSetting disabled={!isOpen} />
+      </Modal.Section>
+
+      <Modal.Section title={translate('settings.language')}>
+        <LocaleSetting disabled={!isOpen} />
+      </Modal.Section>
+
+      <Modal.Section title={translate('settings.autoGroupTiles')}>
+        <AutoGroupTilesSetting disabled={!isOpen} />
+      </Modal.Section>
+    </Modal>
+  );
+};
+
+export default SettingsModal;

package/src/{components/Settings → modals/SettingsModal}/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -1,10 +1,9 @@
 import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { Radio } from 'components';
 import { selectAutoGroupTiles, settingsSlice, useTranslate, useTypedSelector } from 'state';
 
-import Radio from '../../../Radio';
-
 import styles from './AutoGroupTilesSetting.module.scss';
 import { NULL_VALUE } from './constants';
 import { parseValue } from './lib';

package/src/{components/Settings → modals/SettingsModal}/components/ConfigSetting/ConfigSetting.tsx

@@ -1,10 +1,9 @@
 import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { Radio } from 'components';
 import { selectConfigId, settingsSlice, useTypedSelector } from 'state';
 
-import Radio from '../../../Radio';
-
 import styles from './ConfigSetting.module.scss';
 import options from './options';
 

package/src/{components/Settings → modals/SettingsModal}/components/LocaleSetting/LocaleSetting.tsx

@@ -3,10 +3,9 @@ import classNames from 'classnames';
 import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { Radio } from 'components';
 import { selectLocale, settingsSlice, useTypedSelector } from 'state';
 
-import Radio from '../../../Radio';
-
 import styles from './LocaleSetting.module.scss';
 import options from './options';
 

package/src/modals/SettingsModal/index.ts

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

package/src/{components/Words/Words.module.scss → modals/WordsModal/WordsModal.module.scss}

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

package/src/{components/Words/Words.tsx → modals/WordsModal/WordsModal.tsx}

@@ -1,13 +1,11 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
+import { Badge, Modal } from 'components';
 import { Check, Cross } from 'icons';
 import { selectLocale, selectVerify, useTranslate, useTypedSelector } from 'state';
 
-import Badge from '../Badge';
-import Sidebar from '../Sidebar';
-
-import styles from './Words.module.scss';
+import styles from './WordsModal.module.scss';
 
 interface Props {
   className?: string;
@@ -15,14 +13,14 @@ interface Props {
   onClose: () => void;
 }
 
-const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const WordsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { invalidWords, validWords } = useTypedSelector(selectVerify);
 
   return (
-    <Sidebar className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>
-      <Sidebar.Section
+    <Modal className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>
+      <Modal.Section
         title={
           <span className={styles.title}>
             <span>{translate('words.invalid')}</span>
@@ -35,9 +33,9 @@ const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
             <Cross className={classNames(styles.icon, styles.invalid)} /> {word}
           </div>
         ))}
-      </Sidebar.Section>
+      </Modal.Section>
 
-      <Sidebar.Section
+      <Modal.Section
         title={
           <span className={styles.title}>
             <span>{translate('words.valid')}</span>
@@ -50,9 +48,9 @@ const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
             <Check className={classNames(styles.icon, styles.valid)} /> {word}
           </div>
         ))}
-      </Sidebar.Section>
-    </Sidebar>
+      </Modal.Section>
+    </Modal>
   );
 };
 
-export default Words;
+export default WordsModal;

package/src/modals/WordsModal/index.ts

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

package/src/modals/index.ts

@@ -0,0 +1,6 @@
+export { default as KeyMapModal } from './KeyMapModal';
+export { default as MenuModal } from './MenuModal';
+export { default as RemainingTilesModal } from './RemainingTilesModal';
+export { default as ResultsModal } from './ResultsModal';
+export { default as SettingsModal } from './SettingsModal';
+export { default as WordsModal } from './WordsModal';

package/src/pages/index.module.scss

@@ -4,10 +4,8 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-width: 900px;
-  min-height: 700px;
   opacity: 0;
-  overflow: hidden;
+  overflow: auto;
   transition: var(--transition);
   transition-duration: var(--transition--duration--long);
 
@@ -20,6 +18,10 @@
   position: relative;
   z-index: 1;
   flex: 0 0 auto;
+}
+
+.navContent {
+  width: 100%;
   display: flex;
   align-items: flex-start;
   padding: var(--spacing--l);
@@ -38,7 +40,7 @@
   height: 60px;
   user-select: none;
 
-  @include tablet {
+  @include media('<l') {
     height: 48px;
   }
 }

package/src/pages/index.tsx

@@ -2,33 +2,42 @@ import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
 import { AnimationEvent, FunctionComponent, useEffect, useState } from 'react';
-import Modal from 'react-modal';
+import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
-import { useEffectOnce } from 'react-use';
+import { useEffectOnce, useMeasure } from 'react-use';
 
-import { KeyMap, Logo, NavButtons, RemainingTiles, Settings, Solver, Splash, SvgFontFix, Words } from 'components';
-import { useDirection, useLanguage, useLocalStorage } from 'hooks';
+import { Logo, LogoSplashScreen, NavButtons, Solver, SvgFontFix } from 'components';
+import { useDirection, useLanguage, useLocalStorage, useMediaQuery } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
+import { KeyMapModal, MenuModal, RemainingTilesModal, ResultsModal, SettingsModal, WordsModal } from 'modals';
 import { INITIALIZATION_DURATION } from 'parameters';
 import { registerServiceWorker } from 'serviceWorkerManager';
 import { initialize, localStorage, reset, selectLocale, useTypedSelector } from 'state';
 
 import styles from './index.module.scss';
 
-Modal.setAppElement('#__next');
+ReactModal.setAppElement('#__next');
 
 interface Props {
   version: string;
 }
 
+// eslint-disable-next-line max-statements
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
+  const isLessThanL = useMediaQuery('<l');
   const [showKeyMap, setShowKeyMap] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
   const [showRemainingTiles, setShowRemainingTiles] = useState(false);
+  const [showResults, setShowResults] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showWords, setShowWords] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
+  const [indexRef, { height: indexHeight, width: indexWidth }] = useMeasure<HTMLDivElement>();
+  const [navRef, { height: navHeight }] = useMeasure<HTMLDivElement>();
+  const solverHeight = indexHeight - navHeight;
+  const solverWidth = indexWidth;
 
   const handleClear = () => {
     dispatch(reset());
@@ -48,11 +57,17 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   useEffectOnce(() => {
     dispatch(initialize());
 
-    setTimeout(() => {
+    globalThis.setTimeout(() => {
       setIsInitialized(true);
     }, INITIALIZATION_DURATION);
   });
 
+  useEffect(() => {
+    if (!isLessThanL) {
+      setShowResults(false);
+    }
+  }, [isLessThanL]);
+
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
       registerServiceWorker();
@@ -63,31 +78,53 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     <>
       <SvgFontFix />
 
-      <div className={classNames(styles.index, { [styles.initialized]: isInitialized })}>
-        <div className={styles.nav}>
-          <div className={styles.navLogo}>
-            <a className={styles.logoContainer} href="/" title={version}>
-              <Logo className={styles.logo} />
-            </a>
+      <div className={classNames(styles.index, { [styles.initialized]: isInitialized })} ref={indexRef}>
+        <div className={styles.nav} ref={navRef}>
+          <div className={styles.navContent}>
+            <div className={styles.navLogo}>
+              <a className={styles.logoContainer} href="/" title={version}>
+                <Logo className={styles.logo} />
+              </a>
+            </div>
+
+            <NavButtons
+              onClear={handleClear}
+              onShowKeyMap={() => setShowKeyMap(true)}
+              onShowMenu={() => setShowMenu(true)}
+              onShowRemainingTiles={() => setShowRemainingTiles(true)}
+              onShowSettings={() => setShowSettings(true)}
+              onShowWords={() => setShowWords(true)}
+            />
           </div>
-
-          <NavButtons
-            onClear={handleClear}
-            onShowKeyMap={() => setShowKeyMap(true)}
-            onShowRemainingTiles={() => setShowRemainingTiles(true)}
-            onShowSettings={() => setShowSettings(true)}
-            onShowWords={() => setShowWords(true)}
-          />
         </div>
 
-        <Solver className={styles.solver} />
+        <Solver
+          className={styles.solver}
+          height={solverHeight}
+          width={solverWidth}
+          onShowResults={() => setShowResults(true)}
+        />
       </div>
 
-      <Settings isOpen={showSettings} onClose={() => setShowSettings(false)} />
-      <KeyMap isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
-      <Words isOpen={showWords} onClose={() => setShowWords(false)} />
-      <RemainingTiles isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
-      <Splash forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />
+      <MenuModal
+        isOpen={showMenu}
+        onClose={() => setShowMenu(false)}
+        onShowRemainingTiles={() => setShowRemainingTiles(true)}
+        onShowSettings={() => setShowSettings(true)}
+        onShowWords={() => setShowWords(true)}
+      />
+
+      <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
+
+      <KeyMapModal isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
+
+      <WordsModal isOpen={showWords} onClose={() => setShowWords(false)} />
+
+      <RemainingTilesModal isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
+
+      <ResultsModal isOpen={showResults} onClose={() => setShowResults(false)} />
+
+      <LogoSplashScreen forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />
     </>
   );
 };

package/src/parameters/index.ts

@@ -1,3 +1,11 @@
+export const BREAKPOINTS = {
+  xs: 480,
+  s: 768,
+  m: 992,
+  l: 1200,
+  xl: 1400,
+};
+
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
 export const INITIALIZATION_DURATION = 100;
@@ -11,15 +19,24 @@ export const COLOR_RED = '#f7c2aa';
 export const COLOR_YELLOW = '#efe3ae';
 
 export const COMPONENTS_SPACING = 40;
-export const COMPONENTS_SPACING_MOBILE = 20;
+export const COMPONENTS_SPACING_SMALL = 20;
 
 export const BOARD_CELL_BORDER_WIDTH = 1;
 export const BOARD_TILE_FONT_SIZE_MIN = 14;
 export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
 export const BOARD_TILE_SIZE_MAX = 64;
-export const BOARD_TILE_SIZE_MIN = 32;
+/**
+ * 20 - fits all board tiles without horizontal scrollbar on 360px viewport width (font-size: 14px)
+ * 21 - fits all board tiles without horizontal scrollbar on 375px viewport width (font-size: 14px)
+ * 26 - tiles start to look good (font-size: 16px)
+ */
+export const BOARD_TILE_SIZE_MIN = 20;
+
+export const BORDER_WIDTH = 1;
 
-export const DICTIONARY_HEIGHT = 220;
+export const COLUMN_MIN_HEIGHT = 588.5;
+
+export const DICTIONARY_HEIGHT = 260;
 
 export const TILE_SIZE = 80;
 
@@ -45,8 +62,13 @@ export const PLAIN_TILES_TILE_SIZE = 80;
 export const PLAIN_TILES_VERSION_TILE_COLOR = COLOR_GREEN;
 export const PLAIN_TILES_VERSION_TILE_SIZE = TILE_SIZE;
 
+export const PROGRESS_COLOR_VALUE = 'var(--color--violet--light)';
+export const PROGRESS_COLOR_BACKGROUND = 'var(--color--inactive)';
+
+export const RACK_TILE_SIZE_MAX = 80;
+
 export const REMAINING_TILES_TILE_SIZE = 50;
 
-export const RESULTS_HEADER_HEIGHT = 35;
-export const RESULTS_ITEM_HEIGHT = 34;
-export const RESULTS_INPUT_HEIGHT = 43;
+export const RESULTS_HEADER_HEIGHT = 34;
+export const RESULTS_ITEM_HEIGHT = 40;
+export const RESULTS_INPUT_HEIGHT = 40;

package/src/state/createAppStore.ts

@@ -1,4 +1,4 @@
-import { createStore, applyMiddleware } from 'redux';
+import { applyMiddleware, compose, createStore } from 'redux';
 import reduxSaga from 'redux-saga';
 
 import rootReducer from './rootReducer';
@@ -8,12 +8,15 @@ import { RootState } from './types';
 const sagaMiddleware = reduxSaga();
 const initialState: Partial<RootState> | undefined = undefined;
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line no-underscore-dangle
+const composeEnhancers = globalThis.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
 const createAppStore = (): ReturnType<typeof createStore> => {
-  const store = createStore(rootReducer, initialState, createEnhancer());
+  const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(sagaMiddleware)));
   sagaMiddleware.run(rootSaga);
   return store;
 };
 
-const createEnhancer = () => applyMiddleware(sagaMiddleware);
-
 export default createAppStore;