Files
echoes-of-the-ash/pwa/src/App.tsx

121 lines
3.2 KiB
TypeScript

import { BrowserRouter, HashRouter, 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'
// Use HashRouter for Electron (file:// protocol), BrowserRouter for web
const isElectron = window.location.protocol === 'file:'
const Router = isElectron ? HashRouter : BrowserRouter
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="/characters"
element={
<PrivateRoute>
<CharacterSelection />
</PrivateRoute>
}
/>
<Route
path="/create-character"
element={
<PrivateRoute>
<CharacterCreation />
</PrivateRoute>
}
/>
<Route
path="/account"
element={
<PrivateRoute>
<AccountPage />
</PrivateRoute>
}
/>
<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>
</AuthProvider>
)
}
export default App