Add the blobs

package.json

@@ -21,7 +21,6 @@
     "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,9 +20,6 @@ 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)
@@ -1320,10 +1317,6 @@ 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'}
@@ -4031,19 +4024,6 @@ 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'}
@@ -6379,8 +6359,6 @@ 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
@@ -9478,18 +9456,6 @@ 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,42 +1,14 @@
-import { twc } from 'react-twc';
+import { LifeTrinket } from './Components/LifeTrinket';
-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>
-      <PlayersProvider>
+      <GlobalSettingsProvider>
-        <GlobalSettingsProvider>
+        <LifeTrinket />
-          <Routes>
+      </GlobalSettingsProvider>
-            <Route
+    </PlayersProvider>
-              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`;
 
-export const EmergencyResetButton = () => {
+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,7 +6,6 @@ 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`;
 
@@ -95,12 +94,6 @@ 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,5 +1,4 @@
 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';
@@ -37,9 +36,9 @@ const standardSettings: Pick<
   orientation: Orientation.Landscape,
 };
 
-const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`;
+const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10 z-10`;
 
-const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`;
+const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-10 items-center flex flex-row flex-wrap px-4 gap-4`;
 
 const SliderWrapper = twc.div`mx-8 relative`;
 
@@ -50,7 +49,6 @@ 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 {
@@ -188,10 +186,6 @@ const Start = () => {
     setShowPlay(true);
     setPlaying(false);
     tracked = false;
-
-    console.log('haha');
-
-    navigate('/play');
   };
 
   const doResumeGame = () => {
@@ -224,8 +218,6 @@ const Start = () => {
     setShowPlay(true);
     setPlaying(true);
     tracked = false;
-
-    navigate('/play');
   };
 
   const openInfo = () => {
@@ -245,14 +237,14 @@ const Start = () => {
     <>
       <InfoDialog dialogRef={infoDialogRef} />
       {settings.showAnimations && (
-        <>
+        <div className="blob-container">
           <div className="spotlight1" />
           <div className="spotlight2" />
-        </>
+        </div>
       )}
 
       <SettingsDialog dialogRef={settingsDialogRef} />
-      <div className="flex justify-center items-center w-screen">
+      <div className="flex justify-center items-center w-screen z-10">
         <MainWrapper>
           <Info
             className="size-8 absolute top-7 left-4 text-primary-main"

src/Providers/GlobalSettingsProvider.tsx

@@ -1,7 +1,5 @@
 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,
@@ -16,13 +14,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');
@@ -103,7 +101,6 @@ export const GlobalSettingsProvider = ({
     localStorage.removeItem('showPlay');
     localStorage.removeItem('preStartComplete');
 
-    //TODO Playing can be removed after routes are implemented
     setPlaying(false);
     setShowPlay(false);
     setPreStartCompleted(false);
@@ -190,8 +187,6 @@ export const GlobalSettingsProvider = ({
       }
 
       await removeLocalStorage();
-
-      navigate('/');
     };
 
     const toggleWakeLock = async () => {

src/index.css

@@ -81,86 +81,6 @@ code {
   }
 }
 
-@keyframes background-orb {
-  0% {
-    bottom: 10%;
-  }
-  50% {
-    bottom: 90%;
-  }
-
-  100% {
-    bottom: 10%;
-  }
-}
-
-@keyframes move-right-left {
-  0% {
-    rotate: 0deg;
-    right: 10%;
-  }
-
-  25% {
-    right: 70%;
-  }
-
-  50% {
-    rotate: 360deg;
-    right: 10%;
-  }
-
-  75% {
-    right: 90%;
-  }
-
-  100% {
-    rotate: 0deg;
-    right: 10%;
-  }
-}
-
-.spotlight1 {
-  background: theme('colors.background.default');
-
-  position: fixed;
-  height: 10vmax;
-  width: 30vmax;
-  border-radius: 100%;
-  transform: translate(50%, 50%);
-  animation-duration: 30s, 60s;
-  animation-name: background-orb, move-right-left;
-  animation-iteration-count: infinite, infinite;
-  animation-direction: alternate, alternate;
-  animation-timing-function: ease-in-out;
-
-  animation-delay: -15s, -15s;
-
-  opacity: 0.8;
-  mix-blend-mode: screen;
-
-  filter: blur(10vmax);
-}
-
-.spotlight2 {
-  background: theme('colors.background.default');
-
-  position: fixed;
-  height: 30vmax;
-  width: 10vmax;
-  border-radius: 100%;
-  transform: translate(50%, 50%);
-  animation-duration: 60s, 120s;
-  animation-name: background-orb, move-right-left;
-  animation-iteration-count: infinite, infinite;
-  animation-direction: reverse, reverse;
-  animation-timing-function: ease-in-out;
-
-  opacity: 0.8;
-  mix-blend-mode: screen;
-
-  filter: blur(10vmax);
-}
-
 input[type='range'] {
   -webkit-appearance: none;
   transition: background 0ms ease-in;
@@ -229,3 +149,92 @@ input[type='range']::-ms-thumb {
   cursor: pointer;
   margin-top: -3px;
 }
+
+.blob-container {
+  margin: auto;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  filter: blur(10vmax) contrast(10);
+  z-index: 9;
+  background: theme('colors.background.default');
+  mix-blend-mode: screen;
+
+  opacity: 30%;
+}
+
+@keyframes background-orb {
+  0% {
+    bottom: 10%;
+  }
+  50% {
+    bottom: 70%;
+  }
+
+  100% {
+    bottom: 10%;
+  }
+}
+
+@keyframes move-right-left {
+  0% {
+    rotate: 0deg;
+    right: 10%;
+  }
+
+  25% {
+    right: 20%;
+  }
+
+  50% {
+    rotate: 360deg;
+    right: 10%;
+  }
+
+  75% {
+    right: 30%;
+  }
+
+  100% {
+    rotate: 0deg;
+    right: 10%;
+  }
+}
+
+.spotlight1 {
+  background: theme('colors.background.spotlight');
+
+  position: fixed;
+  height: 20vmax;
+  width: 70vmax;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 15s, 50s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: alternate, alternate;
+  animation-timing-function: ease-in-out;
+
+  animation-delay: -15s, -15s;
+
+  /* filter: blur(5vmax); */
+}
+
+.spotlight2 {
+  background: theme('colors.background.spotlight');
+
+  position: fixed;
+  height: 70vmax;
+  width: 20vmax;
+  border-radius: 100%;
+  transform: translate(50%, 50%);
+  animation-duration: 30s, 100s;
+  animation-name: background-orb, move-right-left;
+  animation-iteration-count: infinite, infinite;
+  animation-direction: reverse, reverse;
+  animation-timing-function: ease-in-out;
+
+  /* filter: blur(5vmax); */
+}

tailwind.config.ts

@@ -13,7 +13,7 @@ export const baseColors = {
   },
   background: {
     default: '#2E3041', // Orig: #35374B
-    spotlight: '#777BA7',
+    spotlight: 'hsl(110, 80.4%, 32.1%)',
     backdrop: 'rgba(0, 0, 0, 0.3)',
     settings: 'rgba(0, 0, 0, 0.8)',
   },