Commit

pwa/src/App.tsx

@@ -1,54 +1,111 @@
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthProvider } from './contexts/AuthContext'
 import { useAuth } from './hooks/useAuth'
+import LandingPage from './components/LandingPage'
 import Login from './components/Login'
+import Register from './components/Register'
+import CharacterSelection from './components/CharacterSelection'
+import CharacterCreation from './components/CharacterCreation'
 import Game from './components/Game'
 import Profile from './components/Profile'
 import Leaderboards from './components/Leaderboards'
+import GameLayout from './components/GameLayout'
+import AccountPage from './components/AccountPage'
 import './App.css'
 
 function PrivateRoute({ children }: { children: React.ReactNode }) {
   const { isAuthenticated, loading } = useAuth()
-  
+
   if (loading) {
     return <div className="loading">Loading...</div>
   }
-  
+
   return isAuthenticated ? <>{children}</> : <Navigate to="/login" />
 }
 
+function CharacterRoute({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, currentCharacter, loading } = useAuth()
+
+  if (loading) {
+    return <div className="loading">Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" />
+  }
+
+  if (!currentCharacter) {
+    return <Navigate to="/characters" />
+  }
+
+  return <>{children}</>
+}
+
 function App() {
   return (
     <AuthProvider>
       <Router>
         <div className="app">
           <Routes>
+            <Route path="/" element={<LandingPage />} />
             <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+
             <Route
-              path="/game"
+              path="/characters"
               element={
                 <PrivateRoute>
-                  <Game />
+                  <CharacterSelection />
                 </PrivateRoute>
               }
             />
+
             <Route
-              path="/profile/:playerId"
+              path="/create-character"
               element={
                 <PrivateRoute>
-                  <Profile />
+                  <CharacterCreation />
                 </PrivateRoute>
               }
             />
+
             <Route
-              path="/leaderboards"
+              path="/account"
               element={
                 <PrivateRoute>
-                  <Leaderboards />
+                  <AccountPage />
                 </PrivateRoute>
               }
             />
-            <Route path="/" element={<Navigate to="/game" />} />
+
+            <Route element={<GameLayout />}>
+              <Route
+                path="/game"
+                element={
+                  <CharacterRoute>
+                    <Game />
+                  </CharacterRoute>
+                }
+              />
+
+              <Route
+                path="/profile/:playerId"
+                element={
+                  <PrivateRoute>
+                    <Profile />
+                  </PrivateRoute>
+                }
+              />
+
+              <Route
+                path="/leaderboards"
+                element={
+                  <PrivateRoute>
+                    <Leaderboards />
+                  </PrivateRoute>
+                }
+              />
+            </Route>
           </Routes>
         </div>
       </Router>