Add profile photo uploads and custom difficulty support

components/MultiplayerGame.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Username } from "./Username";
+import { PlayerAvatar } from "./PixelArt";
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
@@ -15,7 +16,6 @@ import { GuessMap, type Pin } from "./GuessMap";
 import { ReportContent } from "./ReportContent";
 import { useI18n } from "./I18nProvider";
 import { api } from "@/lib/client-api";
-import { difficulties } from "@/shared/protocol";
 import type { RoomView, RoomMedia } from "@/shared/multiplayer";
 
 export function MultiplayerGame({
@@ -101,7 +101,7 @@ export function MultiplayerGame({
       {media && (
         <Panorama
           urls={media.faces}
-          zoom={difficulties[room.difficulty].zoom}
+          zoom={room.difficultySettings.zoom}
           onReady={panoramaReady}
           onError={mediaError}
         />
@@ -139,6 +139,11 @@ export function MultiplayerGame({
         <ul>
           {room.players.map((player) => (
             <li key={player.id}>
+              <PlayerAvatar
+                id={player.id}
+                avatarPath={player.appearance?.avatar_path}
+                className="multiplayer-avatar"
+              />
               <span>
                 <Username name={player.name} appearance={player.appearance} />
                 {player.id === room.you && <small> {t("(you)")}</small>}