wake lock on start game

src/App.tsx

@@ -8,6 +8,7 @@ import { Player } from './Types/Player';
 import { ThemeProvider } from '@mui/material';
 import { theme } from './Data/theme';
 import { useAnalytics } from './Hooks/useAnalytics';
+import { useWakeLock } from 'react-screen-wake-lock';
 
 const GlobalStyles = createGlobalStyle`
   html,
@@ -42,6 +43,17 @@ const App = () => {
   const analytics = useAnalytics();
   const savedPlayers = localStorage.getItem('players');
   const savedGameSettings = localStorage.getItem('initialGameSettings');
+  const { isSupported, release, released, request, type } = useWakeLock();
+
+  const isActive = released === undefined ? false : !released;
+
+  const wakeLock = {
+    isSupported,
+    release,
+    active: isActive,
+    request,
+    type,
+  };
 
   const [initialGameSettings, setInitialGameSettings] =
     useState<InitialSettings | null>(
@@ -90,6 +102,7 @@ const App = () => {
             onPlayerChange={handlePlayerChange}
             gridAreas={initialGameSettings?.gridAreas}
             resetCurrentGame={resetCurrentGame}
+            wakeLock={wakeLock}
           />
         </PlayWrapper>
       ) : (
@@ -98,6 +111,7 @@ const App = () => {
             initialGameSettings={initialGameSettings}
             setInitialGameSettings={setInitialGameSettings}
             setPlayers={setPlayers}
+            wakeLock={wakeLock}
           />
         </StartWrapper>
       )}

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { css } from 'styled-components';
 import { Rotation } from '../../Types/Player';
 import { Button } from '@mui/material';
+import { WakeLock } from '../../Types/WakeLock';
 
 const PlayerMenuWrapper = styled.div<{
   rotation: Rotation;
@@ -68,6 +69,7 @@ type PlayerMenuProps = {
   onPlayerChange: (updatedPlayer: Player) => void;
   setShowPlayerMenu: (showPlayerMenu: boolean) => void;
   resetCurrentGame: () => void;
+  wakeLock: WakeLock;
 };
 
 const PlayerMenu = ({
@@ -76,9 +78,9 @@ const PlayerMenu = ({
   onPlayerChange,
   setShowPlayerMenu,
   resetCurrentGame,
+  wakeLock,
 }: PlayerMenuProps) => {
   const handleOnClick = () => {
-    console.log('hej');
     setShowPlayerMenu(false);
   };
 
@@ -101,6 +103,7 @@ const PlayerMenu = ({
         onChange={onPlayerChange}
         opponents={opponents}
         resetCurrentGame={resetCurrentGame}
+        wakeLock={wakeLock}
       />
     </PlayerMenuWrapper>
   );

src/Components/PlayerMenu/Settings.tsx

@@ -2,13 +2,14 @@ import { Button, Checkbox } from '@mui/material';
 import styled, { css } from 'styled-components';
 import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
-import { useWakeLock } from 'react-screen-wake-lock';
+import { WakeLock } from '../../Types/WakeLock';
 
 type SettingsProps = {
   player: Player;
   opponents: Player[];
   onChange: (updatedPlayer: Player) => void;
   resetCurrentGame: () => void;
+  wakeLock: WakeLock;
 };
 
 const SettingsContainer = styled.div<{
@@ -124,9 +125,24 @@ const CheckboxContainer = styled.div<{ rotation: Rotation }>`
   }}
 `;
 
-const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
-  const { released, request, release } = useWakeLock();
-  const handleWakeLock = () => (released === false ? release() : request());
+const Settings = ({
+  player,
+  onChange,
+  resetCurrentGame,
+  wakeLock,
+}: SettingsProps) => {
+  const isSide =
+    player.settings.rotation === Rotation.Side ||
+    player.settings.rotation === Rotation.SideFlipped;
+
+  const handleWakeLock = () => {
+    if (!wakeLock.active) {
+      wakeLock.request();
+      return;
+    }
+
+    wakeLock.release();
+  };
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const updatedPlayer = { ...player, color: event.target.value };
@@ -156,11 +172,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
     }
   };
 
-  const buttonFontSize =
-    player.settings.rotation === Rotation.SideFlipped ||
-    player.settings.rotation === Rotation.Side
-      ? '1.3vmax'
-      : '2.5vmin';
+  const buttonFontSize = isSide ? '2vmax' : '4vmin';
 
   return (
     <SettingsContainer rotation={player.settings.rotation}>
@@ -271,7 +283,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
       </TogglesSection>
       <ButtonsSections rotation={player.settings.rotation}>
         <Button
-          variant="outlined"
+          variant="contained"
           style={{
             cursor: 'pointer',
             userSelect: 'none',
@@ -283,7 +295,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
           Back to Start
         </Button>
         <Button
-          variant="outlined"
+          variant="contained"
           style={{
             cursor: 'pointer',
             userSelect: 'none',
@@ -295,7 +307,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
           Fullscreen
         </Button>
         <Button
-          variant="outlined"
+          variant="contained"
           style={{
             cursor: 'pointer',
             userSelect: 'none',
@@ -304,7 +316,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
           }}
           onClick={handleWakeLock}
         >
-          {released === false ? 'Release' : 'Request'} nosleep
+          Wake Lock is&nbsp;{wakeLock.active ? 'on' : 'off'}
         </Button>
       </ButtonsSections>
     </SettingsContainer>

src/Components/Views/Play.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import Counters from '../Counters/Counters';
 import { Player } from '../../Types/Player';
+import { WakeLock } from '../../Types/WakeLock';
 
 const MainWrapper = styled.div`
   width: 100vmax;
@@ -13,6 +14,7 @@ type PlayProps = {
   onPlayerChange: (updatedPlayer: Player) => void;
   gridAreas: string;
   resetCurrentGame: () => void;
+  wakeLock: WakeLock;
 };
 
 const Play = ({
@@ -20,6 +22,7 @@ const Play = ({
   onPlayerChange,
   gridAreas,
   resetCurrentGame,
+  wakeLock,
 }: PlayProps) => {
   return (
     <MainWrapper>
@@ -28,6 +31,7 @@ const Play = ({
         onPlayerChange={onPlayerChange}
         gridAreas={gridAreas}
         resetCurrentGame={resetCurrentGame}
+        wakeLock={wakeLock}
       />
     </MainWrapper>
   );

src/Components/Views/StartMenu/StartMenu.tsx

@@ -11,6 +11,7 @@ import { theme } from '../../../Data/theme';
 import { useAnalytics } from '../../../Hooks/useAnalytics';
 import { Info } from '../../../Icons/generated';
 import { Player } from '../../../Types/Player';
+import { WakeLock } from '../../../Types/WakeLock';
 import { InfoModal } from '../../Misc/InfoModal';
 import { SupportMe } from '../../Misc/SupportMe';
 import { H2, Paragraph } from '../../Misc/TextComponents';
@@ -88,12 +89,14 @@ type StartProps = {
   setInitialGameSettings: (options: InitialSettings) => void;
   setPlayers: (updatedPlayer: Player[]) => void;
   initialGameSettings: InitialSettings | null;
+  wakeLock: WakeLock;
 };
 
 const Start = ({
   initialGameSettings,
   setPlayers,
   setInitialGameSettings,
+  wakeLock,
 }: StartProps) => {
   const analytics = useAnalytics();
   const [openModal, setOpenModal] = useState(false);
@@ -106,6 +109,13 @@ const Start = ({
     }
   );
 
+  const handleWakeLock = () => {
+    if (wakeLock.active) {
+      return;
+    }
+    wakeLock.request();
+  };
+
   const doStartGame = () => {
     if (!initialGameSettings) {
       return;
@@ -118,6 +128,8 @@ const Start = ({
     } catch (error) {
       console.error(error);
     }
+
+    handleWakeLock();
     setInitialGameSettings(initialGameSettings);
     setPlayers(createInitialPlayers(initialGameSettings));
   };
@@ -180,6 +192,7 @@ const Start = ({
       <SupportMe />
 
       <H2>Life Trinket</H2>
+      {wakeLock.active ? 'hej' : 'noo'}
       <FormControl focused={false} style={{ width: '80vw' }}>
         <FormLabel>Number of Players</FormLabel>
         <Slider

src/Types/WakeLock.ts

@@ -0,0 +1,9 @@
+type WakeLockType = 'screen';
+
+export type WakeLock = {
+  isSupported: boolean;
+  request: (type?: WakeLockType) => Promise<void>;
+  active: boolean;
+  release: () => Promise<void>;
+  type: 'screen' | undefined;
+};