Add account based multiplayer hosting and bug report retention

components/StartGame.tsx

@@ -2,16 +2,22 @@
 import { useI18n } from "@/components/I18nProvider";
 
 import { useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { ArrowRight, Timer, ZoomIn, Users } from "lucide-react";
 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 }) {
+export function StartGame({
+  datasetId,
+  hostName,
+}: {
+  datasetId: string;
+  hostName: string | null;
+}) {
   const { t } = useI18n();
   const [difficulty, setDifficulty] = useState<Difficulty>("normal"),
     [mode, setMode] = useState<"solo" | "multiplayer">("solo"),
-    [displayName, setDisplayName] = useState(""),
     [playerLimit, setPlayerLimit] = useState(4),
     [loading, setLoading] = useState(false),
     [error, setError] = useState("");
@@ -25,7 +31,7 @@ export function StartGame({ datasetId }: { datasetId: string }) {
         {
           datasetId,
           difficulty,
-          ...(mode === "multiplayer" ? { displayName, playerLimit } : {}),
+          ...(mode === "multiplayer" ? { playerLimit } : {}),
         },
       );
       router.push((mode === "solo" ? "/play/" : "/multiplayer/") + session.id);
@@ -82,17 +88,16 @@ export function StartGame({ datasetId }: { datasetId: string }) {
       </p>
       {mode === "multiplayer" && (
         <div className="multiplayer-settings">
-          <label htmlFor="room-display-name">{t("Your player name")}</label>
-          <input
-            id="room-display-name"
-            value={displayName}
-            onChange={(event) => setDisplayName(event.target.value)}
-            minLength={2}
-            maxLength={32}
-            placeholder={t("Enter a player name")}
-            autoComplete="nickname"
-            disabled={loading}
-          />
+          {hostName ? (
+            <p>
+              {t("Host display name")}: <strong>{hostName}</strong>
+            </p>
+          ) : (
+            <p className="muted">
+              {t("Log in to create a multiplayer room")}{" "}
+              <Link href="/log-in?next=/servers">{t("Log in")}</Link>
+            </p>
+          )}
           <label htmlFor="room-player-limit">
             {t("Player limit (including you)")}
           </label>
@@ -118,9 +123,7 @@ export function StartGame({ datasetId }: { datasetId: string }) {
       <button
         className="button primary full"
         onClick={start}
-        disabled={
-          loading || (mode === "multiplayer" && displayName.trim().length < 2)
-        }
+        disabled={loading || (mode === "multiplayer" && !hostName)}
       >
         {loading
           ? t("Preparing your world…")