Better wakelock and fullscreen

src/Components/PlayerMenu/Settings.tsx

@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
 import { WakeLock } from '../../Types/WakeLock';
+import { useFullscreen } from '../../Hooks/useFullscreen';
 
 type SettingsProps = {
   player: Player;
@@ -131,6 +132,7 @@ const Settings = ({
   resetCurrentGame,
   wakeLock,
 }: SettingsProps) => {
+  const { disableFullscreen, enableFullscreen, isFullscreen } = useFullscreen();
   const isSide =
     player.settings.rotation === Rotation.Side ||
     player.settings.rotation === Rotation.SideFlipped;
@@ -165,10 +167,10 @@ const Settings = ({
   };
 
   const toggleFullscreen = () => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-    } else if (document.exitFullscreen) {
-      document.exitFullscreen();
+    if (!isFullscreen) {
+      enableFullscreen();
+    } else {
+      disableFullscreen();
     }
   };
 
@@ -295,7 +297,7 @@ const Settings = ({
           Back to Start
         </Button>
         <Button
-          variant="contained"
+          variant={document.fullscreenElement ? 'contained' : 'outlined'}
           style={{
             cursor: 'pointer',
             userSelect: 'none',
@@ -307,7 +309,7 @@ const Settings = ({
           Fullscreen
         </Button>
         <Button
-          variant="contained"
+          variant={wakeLock.active ? 'contained' : 'outlined'}
           style={{
             cursor: 'pointer',
             userSelect: 'none',
@@ -316,7 +318,7 @@ const Settings = ({
           }}
           onClick={handleWakeLock}
         >
-          Wake Lock is&nbsp;{wakeLock.active ? 'on' : 'off'}
+          Keep Awake
         </Button>
       </ButtonsSections>
     </SettingsContainer>

src/Components/Views/Play.tsx

@@ -4,8 +4,8 @@ import { Player } from '../../Types/Player';
 import { WakeLock } from '../../Types/WakeLock';
 
 const MainWrapper = styled.div`
-  width: 100vmax;
-  height: 100vmin;
+  width: 100dvmax;
+  height: 100dvmin;
   overflow: hidden;
 `;
 

src/Components/Views/StartMenu/StartMenu.tsx

@@ -16,6 +16,7 @@ import { InfoModal } from '../../Misc/InfoModal';
 import { SupportMe } from '../../Misc/SupportMe';
 import { H2, Paragraph } from '../../Misc/TextComponents';
 import LayoutOptions from './LayoutOptions';
+import { useFullscreen } from '../../../Hooks/useFullscreen';
 
 const MainWrapper = styled.div`
   width: 100vw;
@@ -109,11 +110,14 @@ const Start = ({
     }
   );
 
-  const handleWakeLock = () => {
-    if (wakeLock.active) {
-      return;
+  const { enableFullscreen } = useFullscreen();
+
+  const toggleWakeLock = ({ active }: { active: boolean }) => {
+    if (active) {
+      wakeLock.release();
+    } else {
+      wakeLock.request();
     }
-    wakeLock.request();
   };
 
   const doStartGame = () => {
@@ -124,12 +128,11 @@ const Start = ({
     analytics.trackEvent('game_started', { ...initialGameSettings });
 
     try {
-      document.documentElement.requestFullscreen();
+      enableFullscreen();
     } catch (error) {
       console.error(error);
     }
 
-    handleWakeLock();
     setInitialGameSettings(initialGameSettings);
     setPlayers(createInitialPlayers(initialGameSettings));
   };
@@ -192,7 +195,7 @@ const Start = ({
       <SupportMe />
 
       <H2>Life Trinket</H2>
-      {wakeLock.active ? 'hej' : 'noo'}
+
       <FormControl focused={false} style={{ width: '80vw' }}>
         <FormLabel>Number of Players</FormLabel>
         <Slider
@@ -239,6 +242,12 @@ const Start = ({
             })
           }
         />
+        <FormLabel>Keep Awake</FormLabel>
+        <Switch
+          checked={wakeLock.active}
+          defaultChecked={wakeLock.active}
+          onChange={() => toggleWakeLock({ active: wakeLock.active })}
+        />
 
         <FormLabel>Layout</FormLabel>
 

src/Hooks/useFullscreen.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+type FullscreenHookReturnType = {
+  isFullscreen: boolean;
+  enableFullscreen: () => void;
+  disableFullscreen: () => void;
+};
+
+export const useFullscreen = (): FullscreenHookReturnType => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const enableFullscreen = () => {
+    if (document?.documentElement.requestFullscreen) {
+      document.documentElement.requestFullscreen().then(() => {
+        setIsFullscreen(true);
+      });
+    }
+  };
+
+  const disableFullscreen = () => {
+    if (document.exitFullscreen) {
+      document.exitFullscreen().then(() => {
+        setIsFullscreen(false);
+      });
+    }
+  };
+
+  useEffect(() => {
+    const fullscreenChangeHandler = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', fullscreenChangeHandler);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', fullscreenChangeHandler);
+    };
+  }, []);
+
+  return { isFullscreen, enableFullscreen, disableFullscreen };
+};

src/Hooks/useWakeLock.ts

@@ -0,0 +1,17 @@
+import { useWakeLock } from 'react-screen-wake-lock';
+
+const { isSupported, release, released, request, type } = useWakeLock();
+
+if (released === undefined) {
+  const isActive = false;
+} else {
+  const isActive = !released;
+}
+
+const wakeLock = {
+  isSupported,
+  release,
+  active: isActive,
+  request,
+  type,
+};