Improve MineGeo interface and functionality

components/Results.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -6,6 +8,7 @@ import { api } from "./StartGame";
 import { GuessMap } from "./GuessMap";
 import type { SessionView } from "./Game";
 export function Results({ id }: { id: string }) {
+  const { t, formatNumber } = useI18n();
   const [session, setSession] = useState<SessionView | null>(null),
     [selected, setSelected] = useState(0),
     [error, setError] = useState("");
@@ -28,21 +31,23 @@ export function Results({ id }: { id: string }) {
       disposed = true;
     };
   }, [id, router]);
-  if (error) return <p role="alert">{error}</p>;
-  if (!session) return <p className="muted">Unpacking your expedition…</p>;
+  if (error) return <p role="alert">{t(error)}</p>;
+  if (!session)
+    return <p className="muted">{t("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()}
+        {t("EXPEDITION COMPLETE ·")}{" "}
+        {t(session.difficulty[0].toUpperCase() + session.difficulty.slice(1))}
       </span>
-      <h1>Every guess is a story.</h1>
+      <h1>{t("Every guess is a story.")}</h1>
       <p className="lead">
-        {session.name} · Here’s where your instincts took you.
+        {session.name} {t("· Here’s where your instincts took you.")}
       </p>
       <div className="results-total">
-        {total.toLocaleString()}
+        {formatNumber(total)}
         <small> / 25,000</small>
       </div>
       <div className="results-grid">
@@ -56,7 +61,7 @@ export function Results({ id }: { id: string }) {
           />
         </div>
         <div className="result-summary">
-          <h2>Your five-round journey</h2>
+          <h2>{t("Your five-round journey")}</h2>
           <div className="tabs">
             {session.rounds.map((r, i) => (
               <button
@@ -65,16 +70,16 @@ export function Results({ id }: { id: string }) {
                 aria-pressed={i === selected}
                 onClick={() => setSelected(i)}
               >
-                Round {i + 1}
+                {t("Round")} {i + 1}
               </button>
             ))}
           </div>
           <table className="history-table">
             <thead>
               <tr>
-                <th>ROUND</th>
-                <th>DISTANCE</th>
-                <th>POINTS</th>
+                <th>{t("ROUND")}</th>
+                <th>{t("DISTANCE")}</th>
+                <th>{t("POINTS")}</th>
               </tr>
             </thead>
             <tbody>
@@ -83,23 +88,27 @@ export function Results({ id }: { id: string }) {
                   <td>{i + 1}</td>
                   <td>
                     {r.result?.timedOut
-                      ? "Timed out"
-                      : `${Math.round(r.result?.distance || 0)} blocks`}
+                      ? t("Timed out")
+                      : t("{count} blocks", {
+                          count: formatNumber(
+                            Math.round(r.result?.distance || 0),
+                          ),
+                        })}
                   </td>
-                  <td>{r.result?.score.toLocaleString()}</td>
+                  <td>{r.result ? formatNumber(r.result.score) : "—"}</td>
                 </tr>
               ))}
             </tbody>
           </table>
           <div className="inline-actions">
             <Link className="button primary" href="/servers">
-              Another adventure →
+              {t("Another adventure →")}
             </Link>
             <Link className="button" href="/dashboard">
-              My maps
+              {t("My maps")}
             </Link>
             <Link className="text-link" href="/leaderboard">
-              View leaderboard →
+              {t("View leaderboard →")}
             </Link>
           </div>
         </div>