From 5c966342ced14ab6f7ebbe90eb3e4dbcd12dabaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 26 Aug 2023 17:50:06 +0200 Subject: [PATCH 1/8] only do lint and build on prs --- .github/workflows/lint_and_build.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/lint_and_build.yml b/.github/workflows/lint_and_build.yml index def0a6a..57f80fc 100644 --- a/.github/workflows/lint_and_build.yml +++ b/.github/workflows/lint_and_build.yml @@ -1,9 +1,6 @@ name: Build and Deploy Workflow on: - push: - branches: - - main pull_request: types: - opened From 5675d7f0f2b80734bb03a2806d0a21ea6f6a602c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 26 Aug 2023 17:50:26 +0200 Subject: [PATCH 2/8] run yarn lint before deploy --- .github/workflows/firebase-hosting-mege.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/firebase-hosting-mege.yml b/.github/workflows/firebase-hosting-mege.yml index 594d202..4da32b1 100644 --- a/.github/workflows/firebase-hosting-mege.yml +++ b/.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 }}' From 9aa48129f834a5d0079904c330c9b419c8bf4d0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 26 Aug 2023 17:58:41 +0200 Subject: [PATCH 3/8] add wake lock --- package.json | 4 +- src/Components/PlayerMenu/Settings.tsx | 10 ++-- src/Data/useWakeLock.ts | 80 ++++++++++++++++++++++++++ 3 files changed, 87 insertions(+), 7 deletions(-) create mode 100644 src/Data/useWakeLock.ts diff --git a/package.json b/package.json index 0590bec..42de102 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,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" } } diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index 3eaadd8..8c0be20 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/src/Components/PlayerMenu/Settings.tsx @@ -1,9 +1,9 @@ import { Checkbox } from '@mui/material'; -// import { useWakeLock } from 'react-screen-wake-lock'; import styled from 'styled-components'; import { css } from 'styled-components'; import { Energy, Experience, PartnerTax, Poison } from '../../Icons/generated'; import { Player, Rotation } from '../../Types/Player'; +import { useWakeLock } from '../../Data/useWakeLock'; type SettingsProps = { player: Player; @@ -149,8 +149,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) => { const updatedPlayer = { ...player, color: event.target.value }; @@ -302,9 +302,9 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { - {/* */} + ); diff --git a/src/Data/useWakeLock.ts b/src/Data/useWakeLock.ts new file mode 100644 index 0000000..00f4ae3 --- /dev/null +++ b/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(); + const wakeLock = React.useRef(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: any) { + onError && onError(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, + }; +}; From c006626bf9890446fda4f6d2affefe168cad2251 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 26 Aug 2023 18:23:19 +0200 Subject: [PATCH 4/8] add screen wake lock code --- package.json | 3 +-- src/Components/PlayerMenu/Settings.tsx | 5 ++--- yarn.lock | 5 ----- 3 files changed, 3 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 42de102..96e0ec9 100644 --- a/package.json +++ b/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": { diff --git a/src/Components/PlayerMenu/Settings.tsx b/src/Components/PlayerMenu/Settings.tsx index 8c0be20..d9f3070 100644 --- a/src/Components/PlayerMenu/Settings.tsx +++ b/src/Components/PlayerMenu/Settings.tsx @@ -1,9 +1,8 @@ import { Checkbox } from '@mui/material'; -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'; -import { useWakeLock } from '../../Data/useWakeLock'; type SettingsProps = { player: Player; diff --git a/yarn.lock b/yarn.lock index b6658a9..2c6a8cf 100644 --- a/yarn.lock +++ b/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" From c80b6527b89fa4dbf0452b42b790749c83965c4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 26 Aug 2023 18:26:21 +0200 Subject: [PATCH 5/8] run lint and build when push to dev --- .github/workflows/lint_and_build.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/lint_and_build.yml b/.github/workflows/lint_and_build.yml index 57f80fc..02c27b7 100644 --- a/.github/workflows/lint_and_build.yml +++ b/.github/workflows/lint_and_build.yml @@ -1,6 +1,9 @@ name: Build and Deploy Workflow on: + push: + branches: + - develop pull_request: types: - opened From 074d8b0f5fba21c8784e5e4ca5f7c84623a0de5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 26 Aug 2023 18:28:49 +0200 Subject: [PATCH 6/8] fix lint --- src/Data/useWakeLock.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Data/useWakeLock.ts b/src/Data/useWakeLock.ts index 00f4ae3..944ea26 100644 --- a/src/Data/useWakeLock.ts +++ b/src/Data/useWakeLock.ts @@ -48,8 +48,8 @@ export const useWakeLock = ({ onRequest && onRequest(); setReleased((wakeLock.current && wakeLock.current.released) || false); - } catch (error: any) { - onError && onError(error); + } catch (error: unknown) { + onError && onError(error as Error); } }, [isSupported, onRequest, onError, onRelease] From 51e9056eac4a9d54f1be01d66670f4f6f91385ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Sat, 26 Aug 2023 18:37:39 +0200 Subject: [PATCH 7/8] try enter fullscreen on start --- src/Components/Views/StartMenu/StartMenu.tsx | 21 +------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index ed9c165..93ee6a9 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -103,6 +103,7 @@ const Start = ({ if (!initialGameSettings) { return; } + document.documentElement.requestFullscreen(); setInitialGameSettings(initialGameSettings); setPlayers(createInitialPlayers(initialGameSettings)); }; @@ -115,14 +116,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 +206,6 @@ const Start = ({ setPlayerOptions({ ...playerOptions, gridAreas }) } /> -