From 4c522189f2150d754a19b318de714ef609b84c44 Mon Sep 17 00:00:00 2001 From: Vikeo Date: Tue, 28 May 2024 09:28:57 +0200 Subject: [PATCH] add routes --- package.json | 1 + pnpm-lock.yaml | 34 +++++++++++++++++ src/App.tsx | 40 +++++++++++++++++--- src/Components/LifeTrinket.tsx | 2 +- src/Components/Views/Play.tsx | 7 ++++ src/Components/Views/StartMenu/StartMenu.tsx | 8 ++++ src/Providers/GlobalSettingsProvider.tsx | 7 +++- 7 files changed, 91 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 2c7b458..666b000 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "ga-4-react": "^0.1.281", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.23.1", "react-screen-wake-lock": "^3.0.2", "react-swipeable": "^7.0.1", "react-twc": "^1.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6c1004..8928bbd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-router-dom: + specifier: ^6.23.1 + version: 6.23.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react-screen-wake-lock: specifier: ^3.0.2 version: 3.0.2(react@18.2.0) @@ -1317,6 +1320,10 @@ packages: '@types/react': optional: true + '@remix-run/router@1.16.1': + resolution: {integrity: sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==} + engines: {node: '>=14.0.0'} + '@rollup/plugin-babel@5.3.1': resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==} engines: {node: '>= 10.0.0'} @@ -4024,6 +4031,19 @@ packages: react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-router-dom@6.23.1: + resolution: {integrity: sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + + react-router@6.23.1: + resolution: {integrity: sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + react: '>=16.8' + react-screen-wake-lock@3.0.2: resolution: {integrity: sha512-f88vcfMG1AWYRSIWQ5Qx5YVboH6TSL0F4ZlFLERZp6aKiZRGVRAAJ9wedJdO5jqTMcCDZ4OXJ8PjcSkDmvGSBg==} engines: {node: '>=14.16'} @@ -6359,6 +6379,8 @@ snapshots: optionalDependencies: '@types/react': 18.3.1 + '@remix-run/router@1.16.1': {} + '@rollup/plugin-babel@5.3.1(@babel/core@7.24.5)(rollup@2.79.1)': dependencies: '@babel/core': 7.24.5 @@ -9456,6 +9478,18 @@ snapshots: react-is@16.13.1: {} + react-router-dom@6.23.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + '@remix-run/router': 1.16.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-router: 6.23.1(react@18.2.0) + + react-router@6.23.1(react@18.2.0): + dependencies: + '@remix-run/router': 1.16.1 + react: 18.2.0 + react-screen-wake-lock@3.0.2(react@18.2.0): dependencies: react: 18.2.0 diff --git a/src/App.tsx b/src/App.tsx index a924303..d443593 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,42 @@ -import { LifeTrinket } from './Components/LifeTrinket'; +import { twc } from 'react-twc'; +import { EmergencyResetButton } from './Components/LifeTrinket'; +import { Play } from './Components/Views/Play'; import { GlobalSettingsProvider } from './Providers/GlobalSettingsProvider'; import { PlayersProvider } from './Providers/PlayersProvider'; +import { BrowserRouter, Route, Routes } from 'react-router-dom'; +import StartMenu from './Components/Views/StartMenu/StartMenu'; + +const PlayWrapper = twc.div`relative z-0 max-w-fit max-h-fit portrait:rotate-90`; + +const StartWrapper = twc.div`max-w-fit max-h-fit`; const App = () => { return ( - - - - - + + + + + ( + + + + )} + /> + ( + + + + + )} + /> + + + + ); }; diff --git a/src/Components/LifeTrinket.tsx b/src/Components/LifeTrinket.tsx index 85ab980..455267f 100644 --- a/src/Components/LifeTrinket.tsx +++ b/src/Components/LifeTrinket.tsx @@ -7,7 +7,7 @@ const StartWrapper = twc.div`max-w-fit max-h-fit`; const PlayWrapper = twc.div`relative z-0 max-w-fit max-h-fit portrait:rotate-90`; -const EmergencyResetButton = () => { +export const EmergencyResetButton = () => { const { goToStart } = useGlobalSettings(); const EmergencyResetButton = twc.button`w-[100dvmax] h-[100dvmin] absolute top-0 z-[-1] bg-background-default`; diff --git a/src/Components/Views/Play.tsx b/src/Components/Views/Play.tsx index ead190c..7e268f1 100644 --- a/src/Components/Views/Play.tsx +++ b/src/Components/Views/Play.tsx @@ -6,6 +6,7 @@ import { usePlayers } from '../../Hooks/usePlayers'; import { Orientation, PreStartMode } from '../../Types/Settings'; import { Players } from '../Players/Players'; import { PreStart } from '../PreStartGame/PreStart'; +import { createInitialPlayers } from '../../Data/getInitialPlayers'; const MainWrapper = twc.div`w-[100dvmax] h-[100dvmin] overflow-hidden, setPlayers`; @@ -94,6 +95,12 @@ export const Play = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + // Fall back to creating players if there are none, in the case where someone's first visit to the + // site is to the /play route + if (players.length <= 0) { + setPlayers(createInitialPlayers(initialGameSettings)); + } + if ( players.length > 1 && !preStartCompleted && diff --git a/src/Components/Views/StartMenu/StartMenu.tsx b/src/Components/Views/StartMenu/StartMenu.tsx index d13f6cb..5993c78 100644 --- a/src/Components/Views/StartMenu/StartMenu.tsx +++ b/src/Components/Views/StartMenu/StartMenu.tsx @@ -1,4 +1,5 @@ import { useEffect, useRef, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { twc } from 'react-twc'; import { createInitialPlayers } from '../../../Data/getInitialPlayers'; import { useAnalytics } from '../../../Hooks/useAnalytics'; @@ -49,6 +50,7 @@ export const LabelText = twc.div`text-md text-text-primary font-medium`; let tracked = false; const Start = () => { + const navigate = useNavigate(); const { setPlayers } = usePlayers(); const analytics = useAnalytics(); const { @@ -186,6 +188,10 @@ const Start = () => { setShowPlay(true); setPlaying(false); tracked = false; + + console.log('haha'); + + navigate('/play'); }; const doResumeGame = () => { @@ -218,6 +224,8 @@ const Start = () => { setShowPlay(true); setPlaying(true); tracked = false; + + navigate('/play'); }; const openInfo = () => { diff --git a/src/Providers/GlobalSettingsProvider.tsx b/src/Providers/GlobalSettingsProvider.tsx index 2edcbe4..aa05a06 100644 --- a/src/Providers/GlobalSettingsProvider.tsx +++ b/src/Providers/GlobalSettingsProvider.tsx @@ -1,5 +1,7 @@ import { ReactNode, useEffect, useMemo, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { useWakeLock } from 'react-screen-wake-lock'; +import { gte as semverGreaterThanOrEqual } from 'semver'; import { GlobalSettingsContext, GlobalSettingsContextType, @@ -14,13 +16,13 @@ import { initialGameSettingsSchema, settingsSchema, } from '../Types/Settings'; -import { gte as semverGreaterThanOrEqual } from 'semver'; export const GlobalSettingsProvider = ({ children, }: { children: ReactNode; }) => { + const navigate = useNavigate(); const analytics = useAnalytics(); const localSavedGame = localStorage.getItem('savedGame'); @@ -101,6 +103,7 @@ export const GlobalSettingsProvider = ({ localStorage.removeItem('showPlay'); localStorage.removeItem('preStartComplete'); + //TODO Playing can be removed after routes are implemented setPlaying(false); setShowPlay(false); setPreStartCompleted(false); @@ -187,6 +190,8 @@ export const GlobalSettingsProvider = ({ } await removeLocalStorage(); + + navigate('/'); }; const toggleWakeLock = async () => {