feat: Introduce game detail view, remove multiplayer field, and enhance list navigation with refresh functionality.

2025-12-03 23:58:47 +01:00
parent af721e7716
commit 6bdfb49d59
10 changed files with 152 additions and 69 deletions
@@ -0,0 +1,69 @@
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { Game, Source } from "../items";
+import { apiFetch } from "./api";
+
+export function GameDetails() {
+  const { title } = useParams<{ title: string }>();
+  const [game, setGame] = useState<Game | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!title) return;
+
+    apiFetch(`/api/game/${encodeURIComponent(title)}`)
+      .then(async (res) => {
+        if (!res.ok) throw new Error("Game not found");
+        return Game.decode(new Uint8Array(await res.arrayBuffer()));
+      })
+      .then((data) => {
+        setGame(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setLoading(false);
+      });
+  }, [title]);
+
+  if (loading) return <div>Loading...</div>;
+  if (!game) return <div>Game not found</div>;
+
+  const getExternalLink = () => {
+    if (game.source === Source.STEAM) {
+      return `https://store.steampowered.com/app/${game.remoteId}`;
+    } else if (game.source === Source.ROBLOX) {
+      return `https://www.roblox.com/games/${game.remoteId}`;
+    }
+    return "#";
+  };
+
+  return (
+    <div className="card" style={{ maxWidth: "600px", margin: "0 auto" }}>
+      <h2>{game.title}</h2>
+      <div style={{ display: "grid", gap: "1rem", marginTop: "1rem" }}>
+        <div>
+          <strong>Source:</strong>{" "}
+          {game.source === Source.STEAM ? "Steam" : "Roblox"}
+        </div>
+        <div>
+          <strong>Players:</strong> {game.minPlayers} - {game.maxPlayers}
+        </div>
+        <div>
+          <strong>Price:</strong> ${game.price}
+        </div>
+      </div>
+      <div style={{ marginTop: "2rem" }}>
+        <a
+          href={getExternalLink()}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="btn-primary"
+          style={{ textDecoration: "none", display: "inline-block" }}
+        >
+          View on {game.source === Source.STEAM ? "Steam" : "Roblox"}
+        </a>
+      </div>
+    </div>
+  );
+}