Merge branch 'adamthedog-master'

crosshare-org · Feb 2, 2024 · 0741ad6 · 0741ad6
2 parents 872fe3c + bff0e55
commit 0741ad6
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 85 deletions.
diff --git a/app/components/Puzzle.tsx b/app/components/Puzzle.tsx
@@ -30,6 +30,7 @@ import {
   FaEdit,
   FaRegFile,
   FaMoon,
+  FaCog,
 } from 'react-icons/fa';
 import { ClueText } from './ClueText';
 import { IoMdStats } from 'react-icons/io';
@@ -91,6 +92,7 @@ import {
   TopBarDropDownLinkA,
   TopBarDropDown,
   TopBarDropDownLinkSimpleA,
+  NestedDropDown,
 } from './TopBar';
 import {
   SLATE_PADDING_LARGE,
@@ -148,6 +150,7 @@ import { SlateColorTheme } from './SlateColorTheme';
 import { Check, Clues, Grid, More, Pause, Reveal, Timer } from './SlateIcons';
 import { removeSpoilers } from '../lib/markdown/markdown';
 import { SlateBegin, SlatePause, SlateSuccess } from './SlateOverlays';
+import { SolverPreferencesList } from './SolverPreferencesList';
 
 const ModeratingOverlay = dynamic(
   () => import('./ModerateOverlay').then((mod) => mod.ModeratingOverlay),
@@ -392,7 +395,10 @@ export const Puzzle = ({
 
   // Pause when page goes out of focus
   function prodPause() {
-    if (process.env.NODE_ENV !== 'development') {
+    if (
+      process.env.NODE_ENV !== 'development' &&
+      !props.prefs?.dontPauseOnLostFocus
+    ) {
       window.parent.postMessage(
         {
           type: 'pause',
@@ -679,9 +685,9 @@ export const Puzzle = ({
 
   const physicalKeyboardHandler = useCallback(
     (e: KeyboardEvent) => {
-      // Disable keyboard when paused / loading play
+      // Disable keyboard when loading play
       if (!(state.success && state.dismissedSuccess)) {
-        if (loadingPlayState || !state.currentTimeWindowStart) {
+        if (loadingPlayState) {
           return;
         }
       }
@@ -693,13 +699,7 @@ export const Puzzle = ({
         e.preventDefault();
       }
     },
-    [
-      dispatch,
-      loadingPlayState,
-      state.currentTimeWindowStart,
-      state.success,
-      state.dismissedSuccess,
-    ]
+    [dispatch, loadingPlayState, state.success, state.dismissedSuccess]
   );
   useEventListener('keydown', physicalKeyboardHandler);
 
@@ -1031,14 +1031,15 @@ export const Puzzle = ({
     [state.autocheck, isSlate]
   );
 
+  const user = props.user;
   const moreMenu = useMemo(
     () => (
       <>
         <TopBarDropDown
           icon={isSlate ? <More /> : <FaEllipsisH />}
           text={t`More`}
         >
-          {() => (
+          {(closeDropdown) => (
             <>
               {!state.success ? (
                 <TopBarDropDownLink
@@ -1152,6 +1153,33 @@ export const Puzzle = ({
                       }}
                     />
                   ) : null}
+                  {user !== undefined ? (
+                    <NestedDropDown
+                      closeParent={closeDropdown}
+                      icon={<FaCog />}
+                      text={'Solver Preferences'}
+                    >
+                      {() => (
+                        <ul
+                          css={{
+                            listStyleType: 'none',
+                            padding: '0 10vw',
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                          role="presentation"
+                        >
+                          <SolverPreferencesList
+                            prefs={props.prefs}
+                            userId={user.uid}
+                          />
+                        </ul>
+                      )}
+                    </NestedDropDown>
+                  ) : (
+                    ''
+                  )}
                   <TopBarDropDownLinkA
                     href="/account"
                     icon={<FaUser />}
@@ -1172,7 +1200,9 @@ export const Puzzle = ({
     [
       muted,
       props.isAdmin,
-      props.user?.uid,
+      props.user,
+      props.prefs,
+      user,
       puzzle,
       setMuted,
       state.success,

diff --git a/app/components/SolverPreferencesList.tsx b/app/components/SolverPreferencesList.tsx
@@ -0,0 +1,98 @@
+import { setDoc } from 'firebase/firestore';
+import { AccountPrefsFlagsT, AccountPrefsT } from '../lib/prefs';
+import { logAsyncErrors } from '../lib/utils';
+import { useSnackbar } from './Snackbar';
+import { getDocRef } from '../lib/firebaseWrapper';
+
+interface PrefSettingProps {
+  prefs: AccountPrefsT | undefined;
+  userId: string;
+  flag: keyof AccountPrefsFlagsT;
+  text: string;
+  invert?: boolean;
+}
+
+export const PrefSetting = (props: PrefSettingProps) => {
+  const { showSnackbar } = useSnackbar();
+  const prefSet = props.prefs?.[props.flag] ?? false;
+  return (
+    <label>
+      <input
+        css={{ marginRight: '1em' }}
+        type="checkbox"
+        checked={props.invert ? !prefSet : prefSet}
+        onChange={logAsyncErrors(async (e) => {
+          await setDoc(
+            getDocRef('prefs', props.userId),
+            {
+              [props.flag]: props.invert ? !e.target.checked : e.target.checked,
+            },
+            { merge: true }
+          ).then(() => {
+            showSnackbar('Preferences Updated');
+          });
+        })}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      />
+      {props.text}
+    </label>
+  );
+};
+
+export const SolverPreferencesList = ({
+  prefs,
+  userId,
+}: {
+  prefs?: AccountPrefsT;
+  userId: string;
+}) => {
+  return (
+    <>
+      <li>
+        <PrefSetting
+          prefs={prefs}
+          userId={userId}
+          flag={'advanceOnPerpendicular'}
+          text="Advance to next square when changing direction with arrow keys"
+        />
+      </li>
+      <li>
+        <PrefSetting
+          prefs={prefs}
+          userId={userId}
+          flag={'dontSkipCompleted'}
+          invert={true}
+          text="Skip over completed squares after entering a letter"
+        />
+      </li>
+      <li>
+        <PrefSetting
+          prefs={prefs}
+          userId={userId}
+          flag={'dontAdvanceWordAfterCompletion'}
+          invert={true}
+          text="Move to next clue after completing an entry"
+        />
+      </li>
+      <li>
+        <PrefSetting
+          prefs={prefs}
+          userId={userId}
+          flag={'solveDownsOnly'}
+          text="Start puzzles in downs-only mode"
+        />
+      </li>
+      <li>
+        <PrefSetting
+          prefs={prefs}
+          userId={userId}
+          flag={'dontPauseOnLostFocus'}
+          invert={true}
+          text="Automatically pause solving when page loses focus"
+        />
+      </li>
+    </>
+  );
+};
diff --git a/app/lib/prefs.ts b/app/lib/prefs.ts
@@ -14,6 +14,7 @@ const AccountPrefsFlagsV = t.partial({
   dontAdvanceWordAfterCompletion: t.boolean,
   solveDownsOnly: t.boolean,
   disableCommentsByDefault: t.boolean,
+  dontPauseOnLostFocus: t.boolean,
 });
 export type AccountPrefsFlagsT = t.TypeOf<typeof AccountPrefsFlagsV>;
 

diff --git a/app/pages/account.tsx b/app/pages/account.tsx
@@ -9,11 +9,7 @@ import { Link } from '../components/Link';
 import { CreatePageForm } from '../components/ConstructorPage';
 import { Button } from '../components/Buttons';
 import { PROFILE_PIC, COVER_PIC } from '../lib/style';
-import {
-  UnsubscribeFlags,
-  AccountPrefsT,
-  AccountPrefsFlagsT,
-} from '../lib/prefs';
+import { UnsubscribeFlags, AccountPrefsT } from '../lib/prefs';
 
 import dynamic from 'next/dynamic';
 import { useSnackbar } from '../components/Snackbar';
@@ -36,6 +32,10 @@ import {
 import { signOut } from 'firebase/auth';
 import { BioEditor } from '../components/BioEditor';
 import { logAsyncErrors } from '../lib/utils';
+import {
+  PrefSetting,
+  SolverPreferencesList,
+} from '../components/SolverPreferencesList';
 
 export const getStaticProps = withStaticTranslation(() => {
   return { props: {} };
@@ -81,40 +81,6 @@ const UnsubSetting = (props: UnsubSettingProps) => {
   );
 };
 
-interface PrefSettingProps {
-  prefs: AccountPrefsT | undefined;
-  userId: string;
-  flag: keyof AccountPrefsFlagsT;
-  text: string;
-  invert?: boolean;
-}
-
-const PrefSetting = (props: PrefSettingProps) => {
-  const { showSnackbar } = useSnackbar();
-  const prefSet = props.prefs?.[props.flag] ?? false;
-  return (
-    <label>
-      <input
-        css={{ marginRight: '1em' }}
-        type="checkbox"
-        checked={props.invert ? !prefSet : prefSet}
-        onChange={logAsyncErrors(async (e) => {
-          await setDoc(
-            getDocRef('prefs', props.userId),
-            {
-              [props.flag]: props.invert ? !e.target.checked : e.target.checked,
-            },
-            { merge: true }
-          ).then(() => {
-            showSnackbar('Preferences Updated');
-          });
-        })}
-      />
-      {props.text}
-    </label>
-  );
-};
-
 export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
   const [settingProfilePic, setSettingProfilePic] = useState(false);
   const [settingCoverPic, setSettingCoverPic] = useState(false);
@@ -209,40 +175,7 @@ export const AccountPage = ({ user, constructorPage, prefs }: AuthProps) => {
             padding: '0 0',
           }}
         >
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'advanceOnPerpendicular'}
-              text="Advance to next square when changing direction with arrow keys"
-            />
-          </li>
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'dontSkipCompleted'}
-              invert={true}
-              text="Skip over completed squares after entering a letter"
-            />
-          </li>
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'dontAdvanceWordAfterCompletion'}
-              invert={true}
-              text="Move to next clue after completing an entry"
-            />
-          </li>
-          <li>
-            <PrefSetting
-              prefs={prefs}
-              userId={user.uid}
-              flag={'solveDownsOnly'}
-              text="Start puzzles in downs-only mode"
-            />
-          </li>
+          <SolverPreferencesList prefs={prefs} userId={user.uid} />
         </ul>
         <hr css={{ margin: '2em 0' }} />
         <h2>Browser-specific Settings</h2>

diff --git a/app/reducers/reducer.ts b/app/reducers/reducer.ts
@@ -814,6 +814,19 @@ export function gridInterfaceReducer<T extends GridInterfaceState>(
   }
   if (isKeypressAction(action)) {
     const key = action.key;
+    // Resume on Esc, but only during midgame pause
+    if (isPuzzleState(state) && !state.currentTimeWindowStart) {
+      if (state.bankedSeconds === 0) {
+        return state;
+      }
+      if (key.k === KeyK.Escape) {
+        return {
+          ...state,
+          currentTimeWindowStart: new Date().getTime(),
+        };
+      }
+      return state;
+    }
     if (key.k === KeyK.NumLayout || key.k === KeyK.AbcLayout) {
       return { ...state, showExtraKeyLayout: !state.showExtraKeyLayout };
     }