Improve MineGeo UI and application flows

components/MultiplayerGame.tsx

@@ -25,6 +25,9 @@ export function MultiplayerGame({
   action,
   remaining,
   onLeave,
+  mediaPath,
+  embedded = false,
+  leaveLabel = "Leave room",
 }: {
   id: string;
   room: RoomView;
@@ -32,6 +35,9 @@ export function MultiplayerGame({
   action: (type: string, payload?: object) => Promise<boolean>;
   remaining: (deadline: string) => number;
   onLeave: () => void;
+  mediaPath?: string;
+  embedded?: boolean;
+  leaveLabel?: string;
 }) {
   const { t, formatNumber } = useI18n();
   const [media, setMedia] = useState<RoomMedia | null>(null);
@@ -50,7 +56,7 @@ export function MultiplayerGame({
   const deadline = turn.deadline;
   useEffect(() => {
     let disposed = false;
-    api<RoomMedia>(`rooms/${id}/media`)
+    api<RoomMedia>(mediaPath ?? `rooms/${id}/media`)
       .then((next) => {
         if (!disposed && next.round === room.round) setMedia(next);
       })
@@ -60,7 +66,7 @@ export function MultiplayerGame({
     return () => {
       disposed = true;
     };
-  }, [id, room.round]);
+  }, [id, room.round, mediaPath]);
   useEffect(() => {
     if (
       room.status !== "loading" ||
@@ -95,13 +101,18 @@ export function MultiplayerGame({
     [],
   );
   const mediaError = useCallback((message: string) => setError(message), []);
+  const Root = embedded ? "section" : "main";
   const roundScores = [...turn.results].sort((a, b) => b.score - a.score);
   return (
-    <main className="game-page multiplayer-game">
+    <Root
+      className="game-page multiplayer-game"
+      aria-label={embedded ? t("Tournament game") : undefined}
+    >
       {media && (
         <Panorama
           urls={media.faces}
           zoom={room.difficultySettings.zoom}
+          pan={room.difficultySettings.pan}
           onReady={panoramaReady}
           onError={mediaError}
         />
@@ -164,7 +175,7 @@ export function MultiplayerGame({
           ))}
         </ul>
         <button className="text-link" onClick={onLeave} disabled={busy}>
-          {t("Leave room")}
+          {t(leaveLabel)}
         </button>
       </details>
       {media && (
@@ -180,7 +191,13 @@ export function MultiplayerGame({
           </button>
           <div className="game-map-content" id="multiplayer-guess-map">
             <div className="map-topline">
-              <span>{t("↑ N · PLACE YOUR GUESS")}</span>
+              <span>
+                {t(
+                  room.difficultySettings.compass === false
+                    ? "PLACE YOUR GUESS"
+                    : "↑ N · PLACE YOUR GUESS",
+                )}
+              </span>
               <button
                 aria-label={expanded ? t("Collapse map") : t("Expand map")}
                 onClick={() => setExpanded((value) => !value)}
@@ -196,6 +213,8 @@ export function MultiplayerGame({
               onPin={setPin}
               onReady={mapReady}
               onError={mediaError}
+              zoom={room.difficultySettings.mapZoom}
+              compass={room.difficultySettings.compass}
               disabled={
                 room.status !== "playing" || submitted || busy || seconds === 0
               }
@@ -205,7 +224,9 @@ export function MultiplayerGame({
                 {submitted
                   ? t("Guess locked. Waiting for the other players.")
                   : pin
-                    ? `X ${Math.round(pin.x)} · Z ${Math.round(pin.z)}`
+                    ? room.difficultySettings.coordinates !== false
+                      ? `X ${Math.round(pin.x)} · Z ${Math.round(pin.z)}`
+                      : t("Guess selected")
                     : t("Click the map to drop a pin")}
               </small>
               <button
@@ -315,6 +336,6 @@ export function MultiplayerGame({
           </p>
         </div>
       )}
-    </main>
+    </Root>
   );
 }