Add player bug reports and profile identity features

components/MultiplayerRoom.tsx

@@ -11,6 +11,7 @@ import { useI18n } from "./I18nProvider";
 import { api } from "@/lib/client-api";
 import { roundClock } from "@/shared/round-clock";
 import type { RoomView } from "@/shared/multiplayer";
+import { Username } from "./Username";
 
 export function MultiplayerRoom({ id }: { id: string }) {
   const { t, formatNumber } = useI18n();
@@ -247,7 +248,10 @@ export function MultiplayerRoom({ id }: { id: string }) {
                         {player.id === room.hostId && (
                           <Crown size={17} aria-label={t("Room owner")} />
                         )}{" "}
-                        {player.name}{" "}
+                        <Username
+                          name={player.name}
+                          appearance={player.appearance}
+                        />{" "}
                         {player.id === room.you && <small>{t("(you)")}</small>}
                       </span>
                       {owner && player.id !== room.you && (
@@ -304,7 +308,16 @@ export function MultiplayerRoom({ id }: { id: string }) {
               <>
                 <p className="lead">
                   <Trophy size={24} aria-hidden="true" />{" "}
-                  {winners.map((player) => player.name).join(" & ")} ·{" "}
+                  {winners.map((player, index) => (
+                    <span key={player.id}>
+                      {index > 0 ? " & " : ""}
+                      <Username
+                        name={player.name}
+                        appearance={player.appearance}
+                      />
+                    </span>
+                  ))}{" "}
+                  ·{" "}
                   {t("{count} points", {
                     count: formatNumber(winners[0]?.total ?? 0),
                   })}
@@ -334,7 +347,10 @@ export function MultiplayerRoom({ id }: { id: string }) {
                         >
                           <td>{player.rank}</td>
                           <td>
-                            {player.name}
+                            <Username
+                              name={player.name}
+                              appearance={player.appearance}
+                            />
                             {player.left && <small> · {t("Left room")}</small>}
                           </td>
                           {room.rounds.map((turn) => (