Save game (#35)

* save

* hide scrollbar on desktop

* start menu styling

* bump

src/Components/Views/StartMenu/StartMenu.tsx

@@ -19,9 +19,9 @@ import { SettingsModal } from '../../Misc/SettingsModal';
 import { SupportMe } from '../../Misc/SupportMe';
 import { LayoutOptions } from './LayoutOptions';
 
-const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`;
+const MainWrapper = twc.div`w-[100dvw] h-fit pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`;
 
-const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-col px-4 z-10`;
+const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`;
 
 const SliderWrapper = twc.div`mx-8`;
 
@@ -92,6 +92,9 @@ const Start = () => {
     isPWA,
     setRandomizingPlayer,
     version,
+    setPlaying,
+    savedGame,
+    saveCurrentGame,
   } = useGlobalSettings();
 
   const [openInfoModal, setOpenInfoModal] = useState(false);
@@ -124,7 +127,7 @@ const Start = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playerOptions.numberOfPlayers]);
 
-  const doStartGame = () => {
+  const doStartNewGame = () => {
     if (!initialGameSettings) {
       return;
     }
@@ -149,10 +152,40 @@ const Start = () => {
 
     setInitialGameSettings(initialGameSettings);
     setPlayers(createInitialPlayers(initialGameSettings));
-    setShowPlay(true);
     setRandomizingPlayer(settings.preStartMode === PreStartMode.RandomKing);
-    localStorage.setItem('playing', 'false');
-    localStorage.setItem('showPlay', 'true');
+    setShowPlay(true);
+    setPlaying(false);
+  };
+
+  const doResumeGame = () => {
+    if (!savedGame) {
+      return;
+    }
+
+    analytics.trackEvent('game_resumed', {
+      ...initialGameSettings,
+      ...settings,
+      isPWA,
+    });
+
+    try {
+      if (settings.goFullscreenOnStart) {
+        fullscreen.enableFullscreen();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    if (settings.keepAwake && !wakeLock.active) {
+      wakeLock.request();
+    }
+
+    setInitialGameSettings(savedGame.initialGameSettings);
+    setPlayers(savedGame.players);
+    saveCurrentGame(null);
+    setRandomizingPlayer(false);
+    setShowPlay(true);
+    setPlaying(true);
   };
 
   const valueText = (value: number) => {
@@ -196,48 +229,6 @@ const Start = () => {
 
       <div className="overflow-hidden items-center flex flex-col max-w-[548px] w-full mb-8 px-4">
         <FormControl focused={false} style={{ width: '100%' }}>
-          <FormLabel>Number of Players</FormLabel>
-          <SliderWrapper>
-            <Slider
-              title="Number of Players"
-              max={6}
-              min={1}
-              aria-label="Custom marks"
-              value={playerOptions?.numberOfPlayers ?? 4}
-              getAriaValueText={valueText}
-              step={null}
-              marks={playerMarks}
-              onChange={(_e, value) => {
-                setPlayerOptions({
-                  ...playerOptions,
-                  numberOfPlayers: value as number,
-                  orientation: Orientation.Landscape,
-                });
-              }}
-            />
-          </SliderWrapper>
-
-          <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
-          <SliderWrapper>
-            <Slider
-              title="Starting Health"
-              max={60}
-              min={20}
-              aria-label="Custom marks"
-              value={playerOptions?.startingLifeTotal ?? 40}
-              getAriaValueText={valueText}
-              step={10}
-              marks={healthMarks}
-              onChange={(_e, value) =>
-                setPlayerOptions({
-                  ...playerOptions,
-                  startingLifeTotal: value as number,
-                  orientation: Orientation.Landscape,
-                })
-              }
-            />
-          </SliderWrapper>
-
           <ToggleButtonsWrapper className="mt-4">
             <ToggleContainer>
               <FormLabel>Commander</FormLabel>
@@ -295,6 +286,47 @@ const Start = () => {
               </div>
             </div>
           </ToggleButtonsWrapper>
+          <FormLabel>Number of Players</FormLabel>
+          <SliderWrapper>
+            <Slider
+              title="Number of Players"
+              max={6}
+              min={1}
+              aria-label="Custom marks"
+              value={playerOptions?.numberOfPlayers ?? 4}
+              getAriaValueText={valueText}
+              step={null}
+              marks={playerMarks}
+              onChange={(_e, value) => {
+                setPlayerOptions({
+                  ...playerOptions,
+                  numberOfPlayers: value as number,
+                  orientation: Orientation.Landscape,
+                });
+              }}
+            />
+          </SliderWrapper>
+
+          <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
+          <SliderWrapper>
+            <Slider
+              title="Starting Health"
+              max={60}
+              min={20}
+              aria-label="Custom marks"
+              value={playerOptions?.startingLifeTotal ?? 40}
+              getAriaValueText={valueText}
+              step={10}
+              marks={healthMarks}
+              onChange={(_e, value) =>
+                setPlayerOptions({
+                  ...playerOptions,
+                  startingLifeTotal: value as number,
+                  orientation: Orientation.Landscape,
+                })
+              }
+            />
+          </SliderWrapper>
 
           <FormLabel>Layout</FormLabel>
           <LayoutOptions
@@ -318,14 +350,25 @@ const Start = () => {
       </div>
 
       <StartButtonFooter>
-        <Button
-          size="large"
-          variant="contained"
-          onClick={doStartGame}
-          fullWidth
+        <button
+          className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-main px-3 py-2 rounded-md text-text-primary min-w-[150px]"
+          onClick={doStartNewGame}
         >
-          START GAME
-        </Button>
+          NEW GAME
+        </button>
+
+        {savedGame && (
+          <button
+            className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-dark px-3 py-2 rounded-md text-text-primary min-w-[150px]"
+            onClick={doResumeGame}
+          >
+            RESUME&nbsp;
+            <span className="text-xs">
+              ({savedGame.players.length}&nbsp;
+              {savedGame.players.length > 1 ? 'players' : 'player'})
+            </span>
+          </button>
+        )}
       </StartButtonFooter>
     </MainWrapper>
   );