diff --git a/my-app/package.json b/my-app/package.json
index 2e969e9..4b2706c 100644
--- a/my-app/package.json
+++ b/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",
diff --git a/my-app/src/App.tsx b/my-app/src/App.tsx
index bcb9fb7..7d19e29 100644
--- a/my-app/src/App.tsx
+++ b/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,24 +65,30 @@ const App = () => {
if (players.length > 0 && initialGameSettings) {
return (
-
-
-
+ <>
+
+
+
+
+ >
);
}
return (
-
-
-
+ <>
+
+
+
+
+ >
);
};
diff --git a/my-app/src/Components/PlayerMenu/Settings.tsx b/my-app/src/Components/PlayerMenu/Settings.tsx
index 25759bd..dbb3f07 100644
--- a/my-app/src/Components/PlayerMenu/Settings.tsx
+++ b/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) => {
const updatedPlayer = { ...player, color: event.target.value };
onChange(updatedPlayer);
@@ -134,6 +137,10 @@ const Settings = ({ player, opponents, onChange }: SettingsProps) => {
Fullscreen
+
+
+ {released === false ? 'Release' : 'Request'} nosleep
+
);
};
diff --git a/my-app/yarn.lock b/my-app/yarn.lock
index 8d3d32a..bae8ab2 100644
--- a/my-app/yarn.lock
+++ b/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"