Improve MineGeo interface and functionality

components/StartGame.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useI18n } from "@/components/I18nProvider";
+
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { ArrowRight, Timer, ZoomIn } from "lucide-react";
@@ -6,6 +8,7 @@ import { difficulties, type Difficulty } from "@/shared/protocol";
 import { api } from "@/lib/client-api";
 export { api } from "@/lib/client-api";
 export function StartGame({ datasetId }: { datasetId: string }) {
+  const { t } = useI18n();
   const [difficulty, setDifficulty] = useState<Difficulty>("normal"),
     [loading, setLoading] = useState(false),
     [error, setError] = useState("");
@@ -26,8 +29,8 @@ export function StartGame({ datasetId }: { datasetId: string }) {
   }
   return (
     <div className="start-panel">
-      <span className="eyebrow">YOUR EXPEDITION</span>
-      <h2>Choose your challenge.</h2>
+      <span className="eyebrow">{t("YOUR EXPEDITION")}</span>
+      <h2>{t("Choose your challenge.")}</h2>
       <div className="difficulty-options">
         {Object.entries(difficulties).map(([key, value]) => (
           <button
@@ -36,30 +39,33 @@ export function StartGame({ datasetId }: { datasetId: string }) {
             className={difficulty === key ? "selected" : ""}
             onClick={() => setDifficulty(key as Difficulty)}
           >
-            <strong>{value.label}</strong>
+            <strong>{t(value.label)}</strong>
             <span>
               <Timer size={13} />
-              {value.seconds}s per round
+              {value.seconds}
+              {t("s per round")}
             </span>
             <span>
               <ZoomIn size={13} />
-              {value.zoom ? "Zoom allowed" : "No zoom"}
+              {value.zoom ? t("Zoom allowed") : t("No zoom")}
             </span>
           </button>
         ))}
       </div>
-      <p className="muted">5 rounds · 25,000 possible points · No movement</p>
+      <p className="muted">
+        {t("5 rounds · 25,000 possible points · No movement")}
+      </p>
       <button
         className="button primary full"
         onClick={start}
         disabled={loading}
       >
-        {loading ? "Preparing your world…" : "Start exploring"}
+        {loading ? t("Preparing your world…") : t("Start exploring")}
         <ArrowRight size={17} />
       </button>
       {error && (
         <p role="alert" className="error-message">
-          {error}
+          {t(error)}
         </p>
       )}
     </div>