Add profile photo uploads and custom difficulty support

components/MultiplayerRoom.tsx

@@ -12,6 +12,8 @@ import { api } from "@/lib/client-api";
 import { roundClock } from "@/shared/round-clock";
 import type { RoomView } from "@/shared/multiplayer";
 import { Username } from "./Username";
+import { PlayerAvatar } from "./PixelArt";
+import { difficulties } from "@/shared/protocol";
 
 export function MultiplayerRoom({ id }: { id: string }) {
   const { t, formatNumber } = useI18n();
@@ -181,6 +183,18 @@ export function MultiplayerRoom({ id }: { id: string }) {
             <span className="eyebrow">
               <Users size={16} /> {t("Multiplayer")} · {room.name}
             </span>
+            <p className="muted">
+              {t("Difficulty")}: <strong>
+                {room.difficultySettings.id in difficulties
+                  ? t(room.difficultySettings.name)
+                  : room.difficultySettings.name}
+              </strong>
+              {" · "}
+              {room.difficultySettings.seconds} {t("s per round")} ·{" "}
+              {room.difficultySettings.zoom
+                ? t("Zoom allowed")
+                : t("No zoom")}
+            </p>
             <h1>
               {finished
                 ? t("Final standings")
@@ -317,6 +331,11 @@ export function MultiplayerRoom({ id }: { id: string }) {
                   {room.players.map((player) => (
                     <li key={player.id}>
                       <span>
+                        <PlayerAvatar
+                          id={player.id}
+                          avatarPath={player.appearance?.avatar_path}
+                          className="multiplayer-avatar"
+                        />
                         {player.id === room.hostId && (
                           <Crown size={17} aria-label={t("Room owner")} />
                         )}{" "}
@@ -419,6 +438,11 @@ export function MultiplayerRoom({ id }: { id: string }) {
                         >
                           <td>{player.rank}</td>
                           <td>
+                            <PlayerAvatar
+                              id={player.id}
+                              avatarPath={player.appearance?.avatar_path}
+                              className="multiplayer-final-avatar"
+                            />
                             <Username
                               name={player.name}
                               appearance={player.appearance}