add routes

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",

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

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 (
+    <BrowserRouter>
       <PlayersProvider>
         <GlobalSettingsProvider>
-        <LifeTrinket />
+          <Routes>
+            <Route
+              path="/"
+              Component={() => (
+                <StartWrapper>
+                  <StartMenu />
+                </StartWrapper>
+              )}
+            />
+            <Route
+              path="/play"
+              Component={() => (
+                <PlayWrapper>
+                  <Play />
+                  <EmergencyResetButton />
+                </PlayWrapper>
+              )}
+            />
+          </Routes>
         </GlobalSettingsProvider>
       </PlayersProvider>
+    </BrowserRouter>
   );
 };
 

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`;

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 &&

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 = () => {

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 () => {