The first commit, the core and all files is adding to repo

components/Results.tsx

@@ -0,0 +1,95 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { api } from "./StartGame";
+import { GuessMap } from "./GuessMap";
+import type { SessionView } from "./Game";
+export function Results({ id }: { id: string }) {
+  const [session, setSession] = useState<SessionView | null>(null),
+    [selected, setSelected] = useState(0),
+    [error, setError] = useState("");
+  const router = useRouter();
+  useEffect(() => {
+    api<SessionView>("sessions/" + id)
+      .then((s) => {
+        if (s.round < 5) router.replace("/play/" + id);
+        else setSession(s);
+      })
+      .catch((e) => setError(e.message));
+  }, [id, router]);
+  if (error) return <p role="alert">{error}</p>;
+  if (!session) return <p className="muted">Unpacking your expedition…</p>;
+  const total = session.rounds.reduce((n, r) => n + (r.result?.score || 0), 0);
+  const current = session.rounds[selected].result;
+  return (
+    <>
+      <span className="eyebrow">
+        EXPEDITION COMPLETE · {session.difficulty.toUpperCase()}
+      </span>
+      <h1>Every guess is a story.</h1>
+      <p className="lead">
+        {session.name} · Here’s where your instincts took you.
+      </p>
+      <div className="results-total">
+        {total.toLocaleString()}
+        <small> / 25,000</small>
+      </div>
+      <div className="results-grid">
+        <div className="result-map">
+          <GuessMap
+            bounds={session.bounds}
+            image={session.map}
+            pin={current?.guess}
+            actual={current?.actual}
+            disabled
+          />
+        </div>
+        <div className="result-summary">
+          <h2>Your five-round journey</h2>
+          <div className="tabs">
+            {session.rounds.map((r, i) => (
+              <button
+                key={i}
+                className={i === selected ? "active" : ""}
+                onClick={() => setSelected(i)}
+              >
+                Round {i + 1}
+              </button>
+            ))}
+          </div>
+          <table className="history-table">
+            <thead>
+              <tr>
+                <th>ROUND</th>
+                <th>DISTANCE</th>
+                <th>POINTS</th>
+              </tr>
+            </thead>
+            <tbody>
+              {session.rounds.map((r, i) => (
+                <tr key={i}>
+                  <td>{i + 1}</td>
+                  <td>
+                    {r.result?.timedOut
+                      ? "Timed out"
+                      : `${Math.round(r.result?.distance || 0)} blocks`}
+                  </td>
+                  <td>{r.result?.score.toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <div className="inline-actions">
+            <Link className="button primary" href="/servers">
+              Another adventure →
+            </Link>
+            <Link className="button" href="/dashboard">
+              My expeditions
+            </Link>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}