wake lock and prevent double tap screen zoom

my-app/package.json

@@ -18,6 +18,7 @@
     "material-ui": "^0.20.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-screen-wake-lock": "^3.0.1",
     "react-scripts": "5.0.1",
     "react-swipeable": "^7.0.1",
     "styled-components": "^6.0.1",

my-app/src/App.tsx

@@ -5,7 +5,7 @@ import Play from './Components/Views/Play';
 import StartMenu from './Components/Views/StartMenu';
 import { InitialSettings } from './Data/getInitialPlayers';
 import { GridTemplateAreas } from './Data/getGridTemplateAreas';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 
 export const initialPlayerOptions = {
   numberOfPlayers: 4,
@@ -14,6 +14,14 @@ export const initialPlayerOptions = {
   gridAreas: GridTemplateAreas.FourPlayers,
 };
 
+const GlobalStyles = createGlobalStyle`
+  html,
+  body,
+  #root {
+    touch-action: manipulation;
+  }
+`;
+
 const RootWrapper2 = styled.div`
   max-width: fit-content;
   max-height: fit-content;
@@ -57,6 +65,8 @@ const App = () => {
 
   if (players.length > 0 && initialGameSettings) {
     return (
+      <>
+        <GlobalStyles />
         <RootWrapper>
           <Play
             players={players}
@@ -64,10 +74,13 @@ const App = () => {
             gridAreas={initialGameSettings?.gridAreas}
           />
         </RootWrapper>
+      </>
     );
   }
 
   return (
+    <>
+      <GlobalStyles />
       <RootWrapper2>
         <StartMenu
           initialGameSettings={initialGameSettings}
@@ -75,6 +88,7 @@ const App = () => {
           setPlayers={setPlayers}
         />
       </RootWrapper2>
+    </>
   );
 };
 

my-app/src/Components/PlayerMenu/Settings.tsx

@@ -1,13 +1,13 @@
-import { Checkbox, ToggleButton } from '@mui/material';
+import { Checkbox } from '@mui/material';
 import { initialPlayerOptions } from '../../App';
 import { createInitialPlayers } from '../../Data/getInitialPlayers';
 import { Player, Rotation } from '../../Types/Player';
 import * as S from './PlayerMenu.style';
 import ExperienceIcon from '../../Icons/ExperienceIcon';
-import CommanderTaxIcon from '../../Icons/CommanderTaxIcon';
 import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
 import EnergyIcon from '../../Icons/EnergyIcon';
 import PoisonIcon from '../../Icons/PoisonIcon';
+import { useWakeLock } from 'react-screen-wake-lock';
 
 type SettingsProps = {
   player: Player;
@@ -16,6 +16,9 @@ type SettingsProps = {
 };
 
 const Settings = ({ player, opponents, onChange }: SettingsProps) => {
+  const { isSupported, released, request, release } = useWakeLock();
+  const handleWakeLock = () => (released === false ? release() : request());
+
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const updatedPlayer = { ...player, color: event.target.value };
     onChange(updatedPlayer);
@@ -134,6 +137,10 @@ const Settings = ({ player, opponents, onChange }: SettingsProps) => {
       <S.Button rotation={player.settings.rotation} onClick={toggleFullscreen}>
         Fullscreen
       </S.Button>
+
+      <S.Button rotation={player.settings.rotation} onClick={handleWakeLock}>
+        {released === false ? 'Release' : 'Request'} nosleep
+      </S.Button>
     </S.SettingsContainer>
   );
 };

my-app/yarn.lock

@@ -8195,6 +8195,11 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-screen-wake-lock@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/react-screen-wake-lock/-/react-screen-wake-lock-3.0.1.tgz#53132b28384bb66fc6838b846ffeced25b42c8d3"
+  integrity sha512-7igtGC2btjFiPqn7JoqRqrUvSV9wX7ZB8uCtP6LA9qYcTfY5i7VqelfjZ/b57jnGR9Q5TykAaX4Lkeok4j06jA==
+
 react-scripts@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"