Merge pull request #2 from Vikeo/develop

Release 0.1.1

.firebase/hosting.ZGlzdA.cache

@@ -1,4 +1,8 @@
-index.html,1693048446124,b351131379064e36f67109e39cfeb07c303bcc52bd4c7d67325d3522c5184cc7
-vite.svg,1693048445997,d3bbbc44b3ea71906a72bf2ec1a4716903e2e3d9f85a5007205a65d1f12e2923
-assets/index-5265c558.css,1693048446124,08c4451946bbdf520fe337edb365417a8bbf91914c018b83866723ef52d57b43
-assets/index-8f4d569e.js,1693048446124,a0693393f657c18014ccff294601ac1021e94ee930ef4b0aead30146cb9809e0
+manifest.json,1693069583936,91ce94afb71f33a477f5d8d48c3f98bd7de422279c74f17b6500eec72003ac1a
+index.html,1693069584093,6b94bfa279d7639e72ce48d0e997824865ab66e4c519a64ac6906bf32636d200
+robots.txt,1693069583936,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+assets/index-5265c558.css,1693069584093,08c4451946bbdf520fe337edb365417a8bbf91914c018b83866723ef52d57b43
+logo192.png,1693069583935,4309255bccbdbb341b5ab88708677e3d43b9e171d2666528ff932295a8257e4e
+favicon.ico,1693069583934,48d8c1b9714dbc9bcb012d9c9f04112d229f20e6c889bda588ac159f973e6a8d
+logo512.png,1693069583936,92c7c05dc98170596d04f48e5e60eaae9535f409bcaeff129fd98fef8aba9f4e
+assets/index-3f4fc294.js,1693069584093,ca292dd8ad8ae5540a8aefe69f8042a19e46655862e0ac68b149bb55ce0a9bce

.github/workflows/firebase-hosting-mege.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - run: yarn && yarn build
+      - run: yarn && yarn build && yarn lint
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/lint_and_build.yml

@@ -3,7 +3,7 @@ name: Build and Deploy Workflow
 on:
   push:
     branches:
-      - main
+      - develop
   pull_request:
     types:
       - opened

package.json

@@ -1,7 +1,7 @@
 {
   "name": "life-trinket",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "commonjs",
   "scripts": {
     "dev": "vite",
@@ -15,7 +15,6 @@
     "@mui/material": "^5.13.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-screen-wake-lock": "^3.0.1",
     "styled-components": "^6.0.7"
   },
   "devDependencies": {
@@ -31,8 +30,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "firebase-tools": "^12.5.2",
+    "prettier": "2.8.8",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "prettier": "2.8.8"
+    "vite": "^4.4.5"
   }
 }

src/Components/PlayerMenu/Settings.tsx

@@ -1,7 +1,6 @@
 import { Checkbox } from '@mui/material';
-// import { useWakeLock } from 'react-screen-wake-lock';
-import styled from 'styled-components';
-import { css } from 'styled-components';
+import styled, { css } from 'styled-components';
+import { useWakeLock } from '../../Data/useWakeLock';
 import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
 
@@ -149,8 +148,8 @@ const CheckboxContainer = styled.div<{ rotation: Rotation }>`
 `;
 
 const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
-  // const { released, request, release } = useWakeLock();
-  // const handleWakeLock = () => (released === false ? release() : request());
+  const { released, request, release } = useWakeLock();
+  const handleWakeLock = () => (released === false ? release() : request());
 
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const updatedPlayer = { ...player, color: event.target.value };
@@ -302,9 +301,9 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
         <Button rotation={player.settings.rotation} onClick={toggleFullscreen}>
           Fullscreen
         </Button>
-        {/* <Button rotation={player.settings.rotation} onClick={handleWakeLock}>
+        <Button rotation={player.settings.rotation} onClick={handleWakeLock}>
           {released === false ? 'Release' : 'Request'} nosleep
-        </Button> */}
+        </Button>
       </ButtonsSections>
     </SettingsContainer>
   );

src/Components/Views/StartMenu/StartMenu.tsx

@@ -103,6 +103,8 @@ const Start = ({
     if (!initialGameSettings) {
       return;
     }
+
+    document.documentElement.requestFullscreen();
     setInitialGameSettings(initialGameSettings);
     setPlayers(createInitialPlayers(initialGameSettings));
   };
@@ -115,14 +117,6 @@ const Start = ({
     return `${value}`;
   };
 
-  const toggleFullscreen = () => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-    } else if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-  };
-
   const getDefaultLayout = (numberOfPlayers: number) => {
     switch (numberOfPlayers) {
       case 1:
@@ -213,18 +207,6 @@ const Start = ({
             setPlayerOptions({ ...playerOptions, gridAreas })
           }
         />
-        <Button
-          style={{
-            marginTop: '0.5rem',
-            marginRight: 'auto',
-            marginLeft: 'auto',
-          }}
-          size="small"
-          variant="contained"
-          onClick={toggleFullscreen}
-        >
-          Toggle fullscreen
-        </Button>
       </FormControl>
       <StartButtonFooter>
         <Button

src/Data/useWakeLock.ts

@@ -0,0 +1,80 @@
+// https://github.com/jorisre/react-screen-wake-lock
+
+import * as React from 'react';
+
+const warn = (content: string) =>
+  console.warn('[react-screen-wake-lock]: ' + content);
+
+export interface WakeLockOptions {
+  onError?: (error: Error) => void;
+  onRequest?: () => void;
+  onRelease?: EventListener;
+}
+
+export const useWakeLock = ({
+  onError,
+  onRequest,
+  onRelease,
+}: WakeLockOptions | undefined = {}) => {
+  const [released, setReleased] = React.useState<boolean | undefined>();
+  const wakeLock = React.useRef<WakeLockSentinel | null>(null);
+
+  // https://caniuse.com/mdn-api_wakelock
+  const isSupported = typeof window !== 'undefined' && 'wakeLock' in navigator;
+
+  const request = React.useCallback(
+    async (type: WakeLockType = 'screen') => {
+      const isWakeLockAlreadyDefined = wakeLock.current != null;
+      if (!isSupported) {
+        return warn(
+          "Calling the `request` function has no effect, Wake Lock Screen API isn't supported"
+        );
+      }
+      if (isWakeLockAlreadyDefined) {
+        return warn(
+          'Calling `request` multiple times without `release` has no effect'
+        );
+      }
+
+      try {
+        wakeLock.current = await navigator.wakeLock.request(type);
+
+        wakeLock.current.onrelease = (e: Event) => {
+          // Default to `true` - `released` API is experimental: https://caniuse.com/mdn-api_wakelocksentinel_released
+          setReleased((wakeLock.current && wakeLock.current.released) || true);
+          onRelease && onRelease(e);
+          wakeLock.current = null;
+        };
+
+        onRequest && onRequest();
+        setReleased((wakeLock.current && wakeLock.current.released) || false);
+      } catch (error: unknown) {
+        onError && onError(error as Error);
+      }
+    },
+    [isSupported, onRequest, onError, onRelease]
+  );
+
+  const release = React.useCallback(async () => {
+    const isWakeLockUndefined = wakeLock.current == null;
+    if (!isSupported) {
+      return warn(
+        "Calling the `release` function has no effect, Wake Lock Screen API isn't supported"
+      );
+    }
+
+    if (isWakeLockUndefined) {
+      return warn('Calling `release` before `request` has no effect.');
+    }
+
+    wakeLock.current && (await wakeLock.current.release());
+  }, [isSupported]);
+
+  return {
+    isSupported,
+    request,
+    released,
+    release,
+    type: (wakeLock.current && wakeLock.current.type) || undefined,
+  };
+};

src/main.tsx

@@ -1,12 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
 
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

yarn.lock

@@ -6037,11 +6037,6 @@ react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-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-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"