diff --git a/package.json b/package.json index 2eddec4..2c7b458 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "life-trinket", "private": true, - "version": "0.9.95", + "version": "0.9.96", "type": "commonjs", "engines": { "node": ">=20", diff --git a/src/Components/Dialogs/SettingsDialog.tsx b/src/Components/Dialogs/SettingsDialog.tsx index 199c15c..52a061e 100644 --- a/src/Components/Dialogs/SettingsDialog.tsx +++ b/src/Components/Dialogs/SettingsDialog.tsx @@ -2,6 +2,7 @@ import { twc } from 'react-twc'; import { useAnalytics } from '../../Hooks/useAnalytics'; import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { PreStartMode } from '../../Types/Settings'; +import { InstallPWA } from '../Misc/InstallPWAButton'; import { Separator } from '../Misc/Separator'; import { Paragraph } from '../Misc/TextComponents'; import { ToggleButton } from '../Misc/ToggleButton'; @@ -201,25 +202,25 @@ export const SettingsDialog = ({ is enabled. - - - - { - setSettings({ - ...settings, - goFullscreenOnStart: !settings.goFullscreenOnStart, - }); - }} - /> - - - Will enter fullscreen mode when starting a game if this is enabled. - - + {(!window.isIOS || window.isIPad) && ( + + + + { + setSettings({ + ...settings, + goFullscreenOnStart: !settings.goFullscreenOnStart, + }); + }} + /> + + + Will enter fullscreen mode when starting a game if this is enabled. + + + )} @@ -255,21 +256,45 @@ export const SettingsDialog = ({ {!isPWA && ( <> - - - - - Tip: You can{' '} - add this webapp to your home page on iOS or{' '} - install it on Android to have it act just like a normal - app! - - - - If you do, this app will work offline and the toolbar will be - automatically hidden. - - + {window.isIOS && ( + <> + + + + + Tip: You can add this webapp to your home page{' '} + to have it act just like a normal app! + + + + If you do, this web app will work offline and the toolbar will + be automatically hidden. + + + + )} + + {!window.isIOS && ( + <> + + + + + Tip: You can install this page as a PWA to + have it act just like a normal app! + + + + If you do, this web app will work offline and the toolbar will + be automatically hidden. PWA stands for Progressive Web + Application + + +
+ +
+ + )} )} diff --git a/src/Components/Misc/InstallPWAButton.tsx b/src/Components/Misc/InstallPWAButton.tsx new file mode 100644 index 0000000..cc5f019 --- /dev/null +++ b/src/Components/Misc/InstallPWAButton.tsx @@ -0,0 +1,45 @@ +import { useEffect, useRef, useState } from 'react'; +import { BeforeInstallPromptEvent } from '../../global'; +import { useAnalytics } from '../../Hooks/useAnalytics'; + +export const InstallPWA = () => { + const supportsPWARef = useRef(false); + const [promptInstall, setPromptInstall] = + useState(null); + + const analytics = useAnalytics(); + + const handler = (e: BeforeInstallPromptEvent) => { + e.preventDefault(); + supportsPWARef.current = true; + setPromptInstall(e); + }; + + useEffect(() => { + window.addEventListener('beforeinstallprompt', handler); + + return () => window.removeEventListener('transitionend', handler); + }, []); + + if (!supportsPWARef.current) { + return 'lull'; + } + + return ( + + ); +}; diff --git a/src/Components/Players/PlayerMenu.tsx b/src/Components/Players/PlayerMenu.tsx index a77a5fa..616b285 100644 --- a/src/Components/Players/PlayerMenu.tsx +++ b/src/Components/Players/PlayerMenu.tsx @@ -347,30 +347,35 @@ const PlayerMenu = ({ > -
- - } - checkedIcon={ - - } - onChange={toggleFullscreen} - aria-checked={document.fullscreenElement ? true : false} - aria-label="Fullscreen" - /> -
+ > + + } + checkedIcon={ + + } + onChange={toggleFullscreen} + aria-checked={document.fullscreenElement ? true : false} + aria-label="Fullscreen" + /> + + )}