add game route without any additional features

client/src/game.tsx

@@ -0,0 +1,34 @@
+import { Helmet } from "react-helmet-async"
+import type { LoaderFunction } from "react-router"
+import { json, useLoaderData } from "react-router-dom"
+import { Game as GameEntity } from "./entities"
+import GameService from "./services/games.service"
+
+export const loader: LoaderFunction = async ({
+    params,
+}): Promise<GameEntity> => {
+    let gs = new GameService()
+
+    let gameId = parseInt(params.gameId as string, 10)
+
+    if (!Number.isNaN(gameId)) {
+        let game = await gs.get(gameId)
+
+        if (game !== undefined) return game
+        throw json({ message: "game id not found", status: 404 })
+    }
+    throw json({ message: "internal api error", status: 500 })
+}
+
+export function Game() {
+    let game = useLoaderData() as GameEntity
+
+    return (
+        <>
+            <Helmet>
+                <title>{`Game ${game.id} - Hitster`}</title>
+            </Helmet>
+            <p>Game ID: {game.id}</p>
+        </>
+    )
+}

client/src/lobby.tsx

@@ -2,7 +2,7 @@ import Button from "react-bootstrap/Button"
 import Table from "react-bootstrap/Table"
 import { useCookies } from "react-cookie"
 import { Helmet } from "react-helmet-async"
-import { useLoaderData } from "react-router-dom"
+import { Link, useLoaderData, useNavigate } from "react-router-dom"
 import { Game } from "./entities"
 import { useRevalidateOnInterval } from "./hooks"
 import GameService from "./services/games.service"
@@ -15,15 +15,29 @@ export async function loader(): Promise<Game[]> {
 export function Lobby() {
     let [cookies] = useCookies(["logged_in"])
     let games = useLoaderData() as Game[]
+    let navigate = useNavigate()
 
     useRevalidateOnInterval({ enabled: true, interval: 5000 })
 
+    const createGame = async () => {
+        let res = await fetch("/api/games", {
+            method: "POST",
+            credentials: "include",
+        })
+
+        if (res.status === 201)
+            navigate("/game/" + Game.parse(await res.json()).id)
+    }
+
     return (
         <>
             <Helmet>
                 <title>Game Lobby - Hitster</title>
             </Helmet>
-            <Button disabled={cookies.logged_in === undefined}>
+            <Button
+                disabled={cookies.logged_in === undefined}
+                onClick={createGame}
+            >
                 {cookies.logged_in === undefined
                     ? "You need to be logged in to create a new game"
                     : "Create new game"}
@@ -39,7 +53,11 @@ export function Lobby() {
                     {games.map((game) => {
                         return (
                             <tr>
-                                <td>{game.id}</td>
+                                <td>
+                                    <Link to={"/game/" + game.id}>
+                                        {game.id}
+                                    </Link>
+                                </td>
                                 <td>{game.players.length}</td>
                             </tr>
                         )

client/src/login.tsx

@@ -3,7 +3,7 @@ import Button from "react-bootstrap/Button"
 import BsForm from "react-bootstrap/Form"
 import { Helmet } from "react-helmet-async"
 import type { ActionFunction } from "react-router"
-import { Form, useActionData, useNavigate } from "react-router-dom"
+import { Form, redirect, useActionData } from "react-router-dom"
 
 export const action: ActionFunction = async ({ request }) => {
     let formData = await request.formData()
@@ -18,7 +18,7 @@ export const action: ActionFunction = async ({ request }) => {
         }),
     })
 
-    if (res.status === 200) return { success: true }
+    if (res.status === 200) return redirect("/")
     return { success: false, message: await res.text() }
 }
 
@@ -29,9 +29,6 @@ export function Login() {
     }
     let [username, setUsername] = useState("")
     let [password, setPassword] = useState("")
-    let navigate = useNavigate()
-
-    if (response && response.success === true) navigate(-1)
 
     return (
         <>

client/src/main.tsx

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom/client"
 import { HelmetProvider } from "react-helmet-async"
 import { RouterProvider, createBrowserRouter } from "react-router-dom"
 import ErrorPage from "./error-page"
+import { Game, loader as GameLoader } from "./game"
 import "./index.css"
 import Layout from "./layout"
 import { Lobby, loader as LobbyLoader } from "./lobby"
@@ -29,6 +30,11 @@ const router = createBrowserRouter([
                 path: "/login",
                 action: LoginAction,
             },
+            {
+                element: <Game />,
+                path: "/game/:gameId",
+                loader: GameLoader,
+            },
         ],
         errorElement: <ErrorPage />,
     },

client/src/navigation.tsx

@@ -3,7 +3,8 @@ import Nav from "react-bootstrap/Nav"
 import NavDropdown from "react-bootstrap/NavDropdown"
 import Navbar from "react-bootstrap/Navbar"
 import { useCookies } from "react-cookie"
-import { Link, useNavigate } from "react-router-dom"
+import { LinkContainer } from "react-router-bootstrap"
+import { useNavigate } from "react-router-dom"
 
 export default function Navigation() {
     let [cookies] = useCookies(["logged_in"])
@@ -15,9 +16,9 @@ export default function Navigation() {
             <Navbar className="fixed-top" bg="light" variant="light">
                 <Navbar.Collapse>
                     <Nav.Item>
-                        <Nav.Link as={Link} to="/" active>
-                            Game Lobby
-                        </Nav.Link>
+                        <LinkContainer to="/">
+                            <Nav.Link>Game Lobby</Nav.Link>
+                        </LinkContainer>
                     </Nav.Item>
                     {cookies.logged_in !== undefined ? (
                         <NavDropdown
@@ -48,14 +49,14 @@ export default function Navigation() {
                     ) : (
                         <NavDropdown title="Not logged in">
                             <NavDropdown.Item as="div">
-                                <Nav.Link as={Link} to="/login">
-                                    Login
-                                </Nav.Link>
+                                <LinkContainer to="/login">
+                                    <Nav.Link>Login</Nav.Link>
+                                </LinkContainer>
                             </NavDropdown.Item>
                             <NavDropdown.Item as="div">
-                                <Nav.Link as={Link} to="/register">
-                                    Register
-                                </Nav.Link>
+                                <LinkContainer to="/register">
+                                    <Nav.Link>Register</Nav.Link>
+                                </LinkContainer>
                             </NavDropdown.Item>
                         </NavDropdown>
                     )}

client/src/services/games.service.tsx

@@ -7,4 +7,13 @@ export default class GameService {
         })
         return GamesResponse.parse(await res.json()).games
     }
+
+    async get(game_id: number): Promise<Game | undefined> {
+        let res = await fetch(`/api/games/${game_id}`, {
+            method: "GET",
+        })
+
+        if (res.status == 200) return Game.parse(await res.json())
+        return undefined
+    }
 }