feat(call-for-fire): add page, server actions and fire mission UI

Page, actions, and components are one vertical feature slice; the actions types are imported by the client components

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/app/(frontend)/call-for-fire/actions.ts

@@ -0,0 +1,231 @@
+"use server";
+
+import config from "@payload-config";
+import { getPayload } from "payload";
+import { emitGameEvent } from "@/utils/event-log/emit";
+import { EventTypes } from "@/utils/event-log/eventTypes";
+import { broadcastToUser } from "@/lib/realtime/bus";
+import {
+  BEST_MISSIONS_FIELDS,
+  CALL_FOR_FIRE_DIFFICULTIES,
+  MAX_MISSIONS_PER_RUN,
+  METERS_PER_CELL,
+  calculateScore,
+  calculateXp,
+  isCallForFireDifficulty,
+  type CallForFireDifficulty,
+} from "@/lib/call-for-fire";
+
+export type { CallForFireDifficulty };
+
+interface ActionResult<T = undefined> {
+  success: boolean;
+  error?: string;
+  data?: T;
+}
+
+export interface CallForFireStats {
+  gamesPlayed: number;
+  wins: number;
+  losses: number;
+  bestScore: number;
+  callForFireXp: number;
+  xpEarned: number;
+  bestPatrolMissions: number;
+  bestCheckpointMissions: number;
+  bestCompoundMissions: number;
+}
+
+type BestMissionsField = (typeof BEST_MISSIONS_FIELDS)[CallForFireDifficulty];
+
+async function authenticate() {
+  const payloadConfig = await config;
+  const payload = await getPayload({ config: payloadConfig });
+  const { headers } = await import("next/headers");
+  const hdrs = await headers();
+  const { user } = await payload.auth({
+    headers: hdrs,
+    canSetHeaders: false,
+  });
+
+  if (!user) {
+    throw new Error("Unauthorized");
+  }
+
+  return { payload, user };
+}
+
+export async function submitCallForFireResult(input: {
+  difficulty: CallForFireDifficulty;
+  roundsUsed: number;
+  seconds: number;
+  finalDistanceM: number;
+  won: boolean;
+}): Promise<ActionResult<CallForFireStats>> {
+  try {
+    const { payload, user } = await authenticate();
+
+    if (typeof input.difficulty !== "string" || !isCallForFireDifficulty(input.difficulty)) {
+      return { success: false, error: "Invalid result." };
+    }
+
+    const difficulty = input.difficulty;
+    const difficultyConfig = CALL_FOR_FIRE_DIFFICULTIES[difficulty];
+    if (
+      !Number.isInteger(input.roundsUsed) ||
+      input.roundsUsed <= 0 ||
+      input.roundsUsed > Math.min(difficultyConfig.maxRounds, MAX_MISSIONS_PER_RUN)
+    ) {
+      return { success: false, error: "Invalid result." };
+    }
+    if (
+      !Number.isInteger(input.seconds) ||
+      input.seconds <= 0 ||
+      input.seconds > difficultyConfig.maxSeconds
+    ) {
+      return { success: false, error: "Invalid result." };
+    }
+    if (
+      typeof input.finalDistanceM !== "number" ||
+      !Number.isFinite(input.finalDistanceM) ||
+      input.finalDistanceM < 0 ||
+      input.finalDistanceM > difficultyConfig.size * METERS_PER_CELL
+    ) {
+      return { success: false, error: "Invalid result." };
+    }
+    if (typeof input.won !== "boolean") {
+      return { success: false, error: "Invalid result." };
+    }
+    if (input.won && input.finalDistanceM > difficultyConfig.lethalRadiusM) {
+      return { success: false, error: "Invalid result." };
+    }
+
+    const profileRes = await payload.find({
+      collection: "profiles",
+      where: { user: { equals: user.id as number } },
+      limit: 1,
+      depth: 0,
+      overrideAccess: true,
+    });
+    const profile = profileRes.docs[0];
+    if (!profile) {
+      return { success: false, error: "No profile found for this user." };
+    }
+
+    const progression = (profile.progression ?? {}) as {
+      xp?: unknown;
+      minigames?: {
+        callForFire?: {
+          gamesPlayed?: number;
+          wins?: number;
+          losses?: number;
+          bestScore?: number;
+          xpEarned?: number;
+          bestPatrolMissions?: number;
+          bestCheckpointMissions?: number;
+          bestCompoundMissions?: number;
+        };
+      };
+    };
+    const current = progression.minigames?.callForFire ?? {};
+    const score = calculateScore(
+      difficulty,
+      input.roundsUsed,
+      input.seconds,
+      input.finalDistanceM,
+      input.won,
+    );
+    const runXp = calculateXp(score, input.won);
+    const gamesPlayed = (current.gamesPlayed ?? 0) + 1;
+    const wins = (current.wins ?? 0) + (input.won ? 1 : 0);
+    const losses = (current.losses ?? 0) + (input.won ? 0 : 1);
+    const bestScore = Math.max(current.bestScore ?? 0, score);
+    const totalXp = (current.xpEarned ?? 0) + runXp;
+    const bestMissionsField = BEST_MISSIONS_FIELDS[difficulty];
+    const previousBestMissions = current[bestMissionsField as keyof typeof current] ?? 0;
+    const isBestRun =
+      input.won && (previousBestMissions === 0 || input.roundsUsed < previousBestMissions);
+    const bestMissions = isBestRun ? input.roundsUsed : previousBestMissions;
+
+    const { xp: _xp, ...progressionRest } = progression;
+
+    await payload.update({
+      collection: "profiles",
+      id: profile.id,
+      data: {
+        progression: {
+          ...progressionRest,
+          minigames: {
+            ...(progressionRest.minigames ?? {}),
+            callForFire: {
+              gamesPlayed,
+              wins,
+              losses,
+              bestScore,
+              xpEarned: totalXp,
+              bestPatrolMissions: current.bestPatrolMissions ?? 0,
+              bestCheckpointMissions: current.bestCheckpointMissions ?? 0,
+              bestCompoundMissions: current.bestCompoundMissions ?? 0,
+              [bestMissionsField]: bestMissions,
+            },
+          },
+        },
+      },
+      overrideAccess: true,
+      depth: 0,
+    });
+    broadcastToUser("profile-update", Number(user.id), {
+      reason: "xp",
+      xpGained: runXp,
+      profileId: profile.id,
+    });
+
+    if (input.won) {
+      await emitGameEvent(payload, {
+        type: EventTypes.MinigameCallForFire,
+        message: `Brought fire onto target in ${difficultyConfig.label} with ${input.roundsUsed} round(s) (+${runXp} XP)`,
+        actor: user.id as number,
+        targetCollection: "users",
+        targetId: user.id as number,
+        data: {
+          difficulty,
+          roundsUsed: input.roundsUsed,
+          seconds: input.seconds,
+          finalDistanceM: input.finalDistanceM,
+          score,
+          xpEarned: runXp,
+        },
+      });
+    }
+
+    return {
+      success: true,
+      data: {
+        gamesPlayed,
+        wins,
+        losses,
+        bestScore,
+        callForFireXp: totalXp,
+        xpEarned: runXp,
+        bestPatrolMissions:
+          bestMissionsField === "bestPatrolMissions"
+            ? bestMissions
+            : (current.bestPatrolMissions ?? 0),
+        bestCheckpointMissions:
+          bestMissionsField === "bestCheckpointMissions"
+            ? bestMissions
+            : (current.bestCheckpointMissions ?? 0),
+        bestCompoundMissions:
+          bestMissionsField === "bestCompoundMissions"
+            ? bestMissions
+            : (current.bestCompoundMissions ?? 0),
+      },
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    if (message === "Unauthorized") {
+      return { success: false, error: "You must be logged in." };
+    }
+    return { success: false, error: message };
+  }
+}

src/app/(frontend)/call-for-fire/page.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import config from "@payload-config";
+import { getPayload } from "payload";
+import { headers as nextHeaders } from "next/headers";
+import { redirect } from "next/navigation";
+import { Target } from "lucide-react";
+import { CallForFireArena } from "@/components/frontend/call-for-fire/CallForFireArena";
+
+export const metadata: Metadata = {
+  title: "Call for Fire (Polaris Task Force)",
+  description:
+    "Adjust artillery onto hidden targets across three sectors to earn XP for the task force.",
+};
+
+export default async function CallForFirePage() {
+  const headers = await nextHeaders();
+  const payloadConfig = await config;
+  const payload = await getPayload({ config: payloadConfig });
+  const { user } = await payload.auth({ headers, canSetHeaders: false });
+
+  if (!user) {
+    redirect(`/login?returnTo=${encodeURIComponent("/call-for-fire")}`);
+  }
+
+  const profileRes = await payload.find({
+    collection: "profiles",
+    where: { user: { equals: user.id as number } },
+    limit: 1,
+    depth: 0,
+    overrideAccess: true,
+    select: {
+      progression: {
+        minigames: true,
+      },
+    },
+  });
+
+  const callForFire = profileRes.docs[0]?.progression?.minigames?.callForFire ?? {};
+  const stats = {
+    gamesPlayed: callForFire.gamesPlayed ?? 0,
+    wins: callForFire.wins ?? 0,
+    losses: callForFire.losses ?? 0,
+    bestScore: callForFire.bestScore ?? 0,
+    callForFireXp: callForFire.xpEarned ?? 0,
+    xpEarned: 0,
+    bestPatrolMissions: callForFire.bestPatrolMissions ?? 0,
+    bestCheckpointMissions: callForFire.bestCheckpointMissions ?? 0,
+    bestCompoundMissions: callForFire.bestCompoundMissions ?? 0,
+  };
+
+  return (
+    <div className="flex min-w-0 flex-col gap-6 p-5">
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Target className="size-5 text-muted-foreground" />
+          <h1 className="text-lg font-semibold">Call for Fire</h1>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          Adjust artillery onto the hidden target. Fewer fire missions score higher.
+        </p>
+      </div>
+
+      <CallForFireArena initialStats={stats} currentUserId={user.id as number} />
+    </div>
+  );
+}

src/components/frontend/call-for-fire/CallForFireArena.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { CallForFireDifficulty, CallForFireStats } from "@/app/(frontend)/call-for-fire/actions";
+import { useRealtimePresence } from "@/hooks/useRealtimePresence";
+import { useSidebar } from "@/components/ui/sidebar";
+import { CallForFireLeaderboard } from "./CallForFireLeaderboard";
+import { FireMissionBoard } from "./FireMissionBoard";
+
+export function CallForFireArena({
+  initialStats,
+  currentUserId,
+}: {
+  initialStats: CallForFireStats;
+  currentUserId: number | string;
+}) {
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [selectedDifficulty, setSelectedDifficulty] = useState<CallForFireDifficulty>("patrol");
+  const { isMobile, setOpenMobile } = useSidebar();
+  const activeTeams = useRealtimePresence("call-for-fire", playing, true);
+  const onPhaseChange = useCallback((phase: "ready" | "playing" | "over") => {
+    setPlaying(phase === "playing");
+  }, []);
+
+  useEffect(() => {
+    if (playing && isMobile) setOpenMobile(false);
+  }, [isMobile, playing, setOpenMobile]);
+
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <FireMissionBoard
+        initialStats={initialStats}
+        onGameRecorded={() => setRefreshKey((key) => key + 1)}
+        onPhaseChange={onPhaseChange}
+        onDifficultyChange={setSelectedDifficulty}
+      />
+      <CallForFireLeaderboard
+        refreshKey={refreshKey}
+        currentUserId={currentUserId}
+        activeTeams={activeTeams}
+        difficulty={selectedDifficulty}
+        onDifficultyChange={setSelectedDifficulty}
+      />
+    </div>
+  );
+}

src/components/frontend/call-for-fire/CallForFireLeaderboard.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Trophy } from "lucide-react";
+import type { CallForFireDifficulty } from "@/app/(frontend)/call-for-fire/actions";
+import type { PresenceParticipant } from "@/hooks/useRealtimePresence";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+
+interface ApiProfile {
+  id: number;
+  profileTitle?: string | null;
+  user?: {
+    id: number;
+    displayName?: string | null;
+    username?: string | null;
+  } | null;
+  progression?: {
+    minigames?: {
+      callForFire?: Record<string, number | undefined>;
+    };
+  };
+}
+
+interface LeaderboardRow {
+  id: number;
+  userId: number | null;
+  name: string;
+  gamesPlayed: number;
+  wins: number;
+  bestScore: number;
+  xpEarned: number;
+  bestMissions: number;
+  isCurrentUser: boolean;
+  isOutsideTopTen?: boolean;
+}
+
+interface CallForFireLeaderboardProps {
+  refreshKey?: number;
+  currentUserId?: number | string;
+  activeTeams?: PresenceParticipant[];
+  difficulty: CallForFireDifficulty;
+  onDifficultyChange: (difficulty: CallForFireDifficulty) => void;
+}
+
+const DIFFICULTY_LABELS: Record<CallForFireDifficulty, string> = {
+  patrol: "Patrol",
+  checkpoint: "Checkpoint",
+  compound: "Compound",
+};
+
+function rankClass(index: number) {
+  if (index === 0) return "font-bold text-amber-400";
+  if (index === 1) return "font-semibold text-slate-300";
+  if (index === 2) return "font-semibold text-amber-700";
+  return "text-muted-foreground";
+}
+
+export function CallForFireLeaderboard({
+  refreshKey = 0,
+  currentUserId,
+  activeTeams = [],
+  difficulty,
+  onDifficultyChange,
+}: CallForFireLeaderboardProps) {
+  const [rows, setRows] = useState<LeaderboardRow[] | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    setFailed(false);
+
+    const missionsField = `progression.minigames.callForFire.best${DIFFICULTY_LABELS[difficulty]}Missions`;
+    const params = new URLSearchParams({
+      sort: missionsField,
+      limit: "100",
+      depth: "1",
+    });
+    params.set(`where[${missionsField}][greater_than]`, "0");
+
+    fetch(`/api/profiles?${params.toString()}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("leaderboard fetch failed");
+        return res.json() as Promise<{ docs?: ApiProfile[] }>;
+      })
+      .then((data) => {
+        if (cancelled) return;
+        const mapped: LeaderboardRow[] = (data.docs ?? []).map((doc) => {
+          const game = doc.progression?.minigames?.callForFire ?? {};
+          const user = typeof doc.user === "object" && doc.user !== null ? doc.user : null;
+          const name =
+            user?.displayName || doc.profileTitle || user?.username || `Operator #${doc.id}`;
+          return {
+            id: doc.id,
+            userId: user?.id ?? null,
+            name,
+            gamesPlayed: game.gamesPlayed ?? 0,
+            wins: game.wins ?? 0,
+            bestScore: game.bestScore ?? 0,
+            xpEarned: game.xpEarned ?? 0,
+            bestMissions: game[`best${DIFFICULTY_LABELS[difficulty]}Missions`] ?? 0,
+            isCurrentUser: user ? String(user.id) === String(currentUserId) : false,
+          };
+        });
+        const scored = mapped
+          .filter((row) => row.bestMissions > 0)
+          .sort((a, b) => a.bestMissions - b.bestMissions || b.bestScore - a.bestScore);
+        const visible = scored.slice(0, 10);
+        const current = mapped.find((row) => row.isCurrentUser);
+        if (current && !visible.some((row) => row.id === current.id)) {
+          visible.push({ ...current, isOutsideTopTen: true });
+        }
+        setRows(visible);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [difficulty, refreshKey, currentUserId]);
+
+  return (
+    <div className="w-full max-w-[520px] rounded-xl border border-border bg-card">
+      <div className="flex items-center gap-2 border-b border-border px-4 py-3">
+        <Trophy className="size-4 text-amber-400" />
+        <h2 className="text-sm font-semibold">Call for Fire Leaderboard</h2>
+        <div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
+          <Select
+            value={difficulty}
+            onValueChange={(value) => onDifficultyChange(value as CallForFireDifficulty)}
+          >
+            <SelectTrigger aria-label="Leaderboard sector" className="h-8 w-[150px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="patrol">Patrol Support</SelectItem>
+              <SelectItem value="checkpoint">Checkpoint Defence</SelectItem>
+              <SelectItem value="compound">Compound Strike</SelectItem>
+            </SelectContent>
+          </Select>
+          <span>Top 10 · fewest missions</span>
+        </div>
+      </div>
+      <div
+        className="border-b border-border px-4 py-2 text-xs text-muted-foreground"
+        aria-live="polite"
+      >
+        <span className="font-medium text-emerald-400">
+          {activeTeams.length} observers on the net
+        </span>
+        {activeTeams.length > 0 && (
+          <span className="ml-1 text-foreground">
+            ({activeTeams.map((team) => team.name).join(", ")})
+          </span>
+        )}
+      </div>
+
+      {failed ? (
+        <p className="px-4 py-4 text-sm text-muted-foreground">Could not load the leaderboard.</p>
+      ) : rows === null ? (
+        <div className="space-y-2 px-4 py-4">
+          <div className="h-4 w-full animate-pulse rounded bg-border" />
+          <div className="h-4 w-3/4 animate-pulse rounded bg-border" />
+          <div className="h-4 w-1/2 animate-pulse rounded bg-border" />
+        </div>
+      ) : rows.length === 0 ? (
+        <p className="px-4 py-4 text-sm text-muted-foreground">
+          No effective missions yet. Take the first sector!
+        </p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-left text-xs uppercase tracking-wider text-muted-foreground">
+                <th className="px-4 py-2 font-medium">#</th>
+                <th className="px-2 py-2 font-medium">Operator</th>
+                <th className="px-2 py-2 text-right font-medium">Missions</th>
+                <th className="px-2 py-2 text-right font-medium">Games</th>
+                <th className="px-2 py-2 text-right font-medium">Wins</th>
+                <th className="px-4 py-2 text-right font-medium">XP</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {rows.map((row, index) => (
+                <tr
+                  key={row.id}
+                  className={cn(
+                    row.isCurrentUser && "bg-accent/40",
+                    row.isOutsideTopTen && "text-muted-foreground opacity-70",
+                  )}
+                  title={
+                    row.isOutsideTopTen
+                      ? "Operator status (not currently ranked in the top 10)"
+                      : undefined
+                  }
+                >
+                  <td className="px-4 py-2">
+                    <span className={rankClass(index)}>
+                      {row.isOutsideTopTen ? "-" : index + 1}
+                    </span>
+                  </td>
+                  <td className="px-2 py-2 font-medium">
+                    <span className="flex items-center gap-2">
+                      <span className="max-w-[180px] truncate">{row.name}</span>
+                      {row.isCurrentUser && (
+                        <span className="shrink-0 text-xs text-muted-foreground">(you)</span>
+                      )}
+                      {row.isOutsideTopTen && (
+                        <span className="shrink-0 text-[10px] font-normal uppercase tracking-wide text-muted-foreground">
+                          unranked
+                        </span>
+                      )}
+                      {row.userId !== null &&
+                        activeTeams.some((team) => team.id === row.userId) && (
+                          <span
+                            className="size-2 rounded-full bg-emerald-400"
+                            title="Firing now"
+                            aria-label="Firing now"
+                          />
+                        )}
+                    </span>
+                  </td>
+                  <td className="px-2 py-2 text-right font-semibold tabular-nums">
+                    {row.bestMissions}
+                  </td>
+                  <td className="px-2 py-2 text-right tabular-nums text-muted-foreground">
+                    {row.gamesPlayed}
+                  </td>
+                  <td className="px-2 py-2 text-right tabular-nums text-muted-foreground">
+                    {row.wins}
+                  </td>
+                  <td className="px-4 py-2 text-right tabular-nums text-muted-foreground">
+                    {row.xpEarned}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/frontend/call-for-fire/FireMissionBoard.tsx

@@ -0,0 +1,688 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { Crosshair, Radio, RotateCcw, Target, Timer } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  submitCallForFireResult,
+  type CallForFireDifficulty,
+  type CallForFireStats,
+} from "@/app/(frontend)/call-for-fire/actions";
+import {
+  CALL_FOR_FIRE_DIFFICULTIES,
+  METERS_PER_CELL,
+  applyCorrection,
+  createScenario,
+  distanceMeters,
+  gridDesignation,
+  calculateScore,
+  isEffectiveHit,
+  observerReport,
+  type FireScenario,
+  type GridPoint,
+} from "@/lib/call-for-fire";
+import { PROFILE_UPDATE_EVENT } from "@/hooks/useGameTick";
+import { useSessionExpired } from "@/hooks/useSessionExpired";
+import { LoginLink } from "@/components/frontend/auth/LoginLink";
+import { cn } from "@/lib/utils";
+
+type Phase = "ready" | "playing" | "over";
+
+type LastRun = {
+  readonly won: boolean;
+  readonly roundsUsed: number;
+  readonly seconds: number;
+  readonly finalDistanceM: number;
+  readonly score: number;
+  readonly xpEarned: number;
+  readonly best: number;
+  readonly reason?: "rounds" | "time";
+  readonly error?: string;
+};
+
+type Impact = {
+  readonly point: GridPoint;
+  readonly effective: boolean;
+  readonly spotting: boolean;
+};
+
+const DIFFICULTY_KEYS: readonly CallForFireDifficulty[] = ["patrol", "checkpoint", "compound"];
+const CORRECTION_STEP = 50;
+
+function formatClock(totalSeconds: number): string {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
+export function FireMissionBoard({
+  initialStats: serverStats,
+  onGameRecorded,
+  onPhaseChange,
+  onDifficultyChange,
+}: {
+  initialStats: CallForFireStats;
+  onGameRecorded: () => void;
+  onPhaseChange: (phase: Phase) => void;
+  onDifficultyChange: (difficulty: CallForFireDifficulty) => void;
+}) {
+  const router = useRouter();
+  const { expired, expiredRef } = useSessionExpired();
+  const [difficulty, setDifficulty] = useState<CallForFireDifficulty>("patrol");
+  const [phase, setPhase] = useState<Phase>("ready");
+  const [scenario, setScenario] = useState<FireScenario | null>(null);
+  const [impacts, setImpacts] = useState<Impact[]>([]);
+  const [lastImpact, setLastImpact] = useState<GridPoint | null>(null);
+  const [radioLog, setRadioLog] = useState<string[]>([]);
+  const [roundsUsed, setRoundsUsed] = useState(0);
+  const [secondsLeft, setSecondsLeft] = useState(0);
+  const [rangeM, setRangeM] = useState(0);
+  const [deflectionM, setDeflectionM] = useState(0);
+  const [stats, setStats] = useState<CallForFireStats>(serverStats);
+  const [lastRun, setLastRun] = useState<LastRun | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const submittingRef = useRef(false);
+  const statsRef = useRef<CallForFireStats>(serverStats);
+  const secondsLeftRef = useRef(0);
+
+  const config = CALL_FOR_FIRE_DIFFICULTIES[difficulty];
+  const roundsLeft = config.maxRounds - roundsUsed;
+  const elapsedSeconds = config.maxSeconds - secondsLeftRef.current;
+
+  const setPhaseSafe = useCallback(
+    (nextPhase: Phase) => {
+      setPhase(nextPhase);
+      onPhaseChange(nextPhase);
+    },
+    [onPhaseChange],
+  );
+
+  useEffect(() => {
+    onPhaseChange("ready");
+  }, [onPhaseChange]);
+
+  const reset = useCallback(
+    (nextDifficulty: CallForFireDifficulty = difficulty) => {
+      if (submittingRef.current) return;
+      if (expiredRef.current) return;
+      setDifficulty(nextDifficulty);
+      onDifficultyChange(nextDifficulty);
+      setScenario(null);
+      setImpacts([]);
+      setLastImpact(null);
+      setRadioLog([]);
+      setRoundsUsed(0);
+      setRangeM(0);
+      setDeflectionM(0);
+      setLastRun(null);
+      secondsLeftRef.current = CALL_FOR_FIRE_DIFFICULTIES[nextDifficulty].maxSeconds;
+      setSecondsLeft(CALL_FOR_FIRE_DIFFICULTIES[nextDifficulty].maxSeconds);
+      setPhaseSafe("ready");
+    },
+    [difficulty, expiredRef, onDifficultyChange, setPhaseSafe],
+  );
+
+  const recordResult = useCallback(
+    async (won: boolean, used: number, seconds: number, finalDistanceM: number) => {
+      if (submittingRef.current) return;
+      if (expiredRef.current) {
+        setLastRun({
+          won,
+          roundsUsed: used,
+          seconds,
+          finalDistanceM,
+          score: 0,
+          xpEarned: 0,
+          best: 0,
+          error: "Your session expired. Result not recorded.",
+        });
+        return;
+      }
+      submittingRef.current = true;
+      setSubmitting(true);
+      const result = await submitCallForFireResult({
+        difficulty,
+        roundsUsed: used,
+        seconds,
+        finalDistanceM,
+        won,
+      });
+      submittingRef.current = false;
+      setSubmitting(false);
+      const score = calculateScore(difficulty, used, seconds, finalDistanceM, won);
+      if (result.success && result.data) {
+        statsRef.current = result.data;
+        setStats(result.data);
+        onGameRecorded();
+        if (result.data.xpEarned > 0) {
+          window.dispatchEvent(
+            new CustomEvent(PROFILE_UPDATE_EVENT, {
+              detail: { reason: "xp", xpGained: result.data.xpEarned },
+            }),
+          );
+          window.setTimeout(() => router.refresh(), 1700);
+        }
+        setLastRun({
+          won,
+          roundsUsed: used,
+          seconds,
+          finalDistanceM,
+          score,
+          xpEarned: result.data.xpEarned,
+          best: result.data.bestScore,
+        });
+      } else {
+        setLastRun({
+          won,
+          roundsUsed: used,
+          seconds,
+          finalDistanceM,
+          score,
+          xpEarned: 0,
+          best: statsRef.current.bestScore,
+          error: result.error ?? "Could not record fire mission.",
+        });
+      }
+    },
+    [difficulty, expiredRef, onGameRecorded, router],
+  );
+
+  const finishGameRef = useRef<(won: boolean, reason?: "rounds" | "time") => void>(() => {});
+  finishGameRef.current = (won: boolean, reason?: "rounds" | "time") => {
+    if (submittingRef.current || phase === "over") return;
+    setPhaseSafe("over");
+    if (!scenario || !lastImpact) return;
+    const seconds = reason === "time" ? config.maxSeconds : elapsedSeconds;
+    const distance = distanceMeters(scenario.target, lastImpact);
+    void recordResult(won, roundsUsed, seconds, distance);
+  };
+
+  useEffect(() => {
+    if (phase !== "playing") return;
+    const interval = window.setInterval(() => {
+      setSecondsLeft((prev) => {
+        const next = prev - 1;
+        secondsLeftRef.current = next;
+        if (next <= 0) {
+          window.clearInterval(interval);
+          finishGameRef.current(false, "time");
+          return 0;
+        }
+        return next;
+      });
+    }, 1000);
+    return () => window.clearInterval(interval);
+  }, [phase]);
+
+  const begin = useCallback(() => {
+    if (expiredRef.current || submittingRef.current) return;
+    const nextScenario = createScenario(difficulty);
+    const report = observerReport(nextScenario.target, nextScenario.spotting);
+    setScenario(nextScenario);
+    setImpacts([
+      { point: nextScenario.spotting, effective: false, spotting: true },
+    ]);
+    setLastImpact(nextScenario.spotting);
+    setRadioLog([
+      `Splash, over. Spotting round ${gridDesignation(nextScenario.spotting)}: ${report.message}`,
+    ]);
+    setRoundsUsed(1);
+    secondsLeftRef.current = config.maxSeconds;
+    setSecondsLeft(config.maxSeconds);
+    setRangeM(0);
+    setDeflectionM(0);
+    setLastRun(null);
+    setPhaseSafe("playing");
+  }, [config.maxSeconds, difficulty, expiredRef, setPhaseSafe]);
+
+  const fireMission = useCallback(() => {
+    if (phase !== "playing" || submittingRef.current || expiredRef.current) return;
+    if (!scenario || !lastImpact) return;
+
+    const impactPoint = applyCorrection(lastImpact, { rangeM, deflectionM }, config.size);
+    const distance = distanceMeters(scenario.target, impactPoint);
+    const effective = isEffectiveHit(scenario.target, impactPoint, config.lethalRadiusM);
+    const nextImpacts = [
+      ...impacts,
+      { point: impactPoint, effective, spotting: false },
+    ];
+    const nextUsed = roundsUsed + 1;
+    setImpacts(nextImpacts);
+    setLastImpact(impactPoint);
+    setRoundsUsed(nextUsed);
+    setRangeM(0);
+    setDeflectionM(0);
+
+    if (effective) {
+      setRadioLog((log) =>
+        [
+          ...log,
+          `Splash, over. Effective on grid ${gridDesignation(impactPoint)}. Target destroyed.`,
+        ].slice(-6),
+      );
+      setPhaseSafe("over");
+      void recordResult(true, nextUsed, elapsedSeconds, distance);
+      return;
+    }
+
+    const report = observerReport(scenario.target, impactPoint);
+    setRadioLog((log) =>
+      [
+        ...log,
+        `Impact grid ${gridDesignation(impactPoint)}: ${report.message}`,
+      ].slice(-6),
+    );
+
+    if (nextUsed >= config.maxRounds) {
+      setPhaseSafe("over");
+      void recordResult(false, nextUsed, elapsedSeconds, distance);
+    }
+  }, [
+    config.lethalRadiusM,
+    config.maxRounds,
+    config.size,
+    elapsedSeconds,
+    expiredRef,
+    impacts,
+    lastImpact,
+    phase,
+    rangeM,
+    roundsUsed,
+    scenario,
+    setPhaseSafe,
+  ]);
+
+  const timeCritical = phase === "playing" && secondsLeft <= 15;
+  const statusClass =
+    phase === "over"
+      ? lastRun?.won
+        ? "border-emerald-500/40 bg-emerald-500/10"
+        : "border-destructive/40 bg-destructive/10"
+      : "border-border bg-card";
+
+  return (
+    <div className="flex w-full max-w-5xl flex-col gap-4">
+      {expired && (
+        <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-amber-500/40 bg-amber-500/10 p-6 text-center">
+          <span className="text-xl font-black uppercase tracking-widest text-amber-400">
+            Session Ending Soon
+          </span>
+          <span className="max-w-md text-sm text-white/80">
+            Your session is about to end. The app will refresh when it expires.
+          </span>
+          <LoginLink>
+            <Button type="button" size="sm">
+              Log in
+            </Button>
+          </LoginLink>
+        </div>
+      )}
+      <div className="flex select-none flex-col gap-4 rounded-xl border border-border bg-card p-4 shadow">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <Target className="size-4 text-amber-500" />
+              Fire mission console
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Bracket the hidden target from the spotting report, then walk fire on with range and
+              deflection corrections.
+            </p>
+          </div>
+          <div className="flex items-center gap-4 font-mono text-sm tabular-nums">
+            {phase !== "ready" && (
+              <span
+                className={cn("flex items-center gap-1.5", timeCritical && "text-destructive")}
+                aria-label={`${formatClock(Math.max(0, secondsLeft))} remaining`}
+              >
+                <Timer className="size-4" />
+                {formatClock(Math.max(0, secondsLeft))}
+              </span>
+            )}
+            {phase !== "ready" && (
+              <span
+                className="flex items-center gap-1.5"
+                aria-label={`${Math.max(0, roundsLeft)} rounds remaining`}
+              >
+                <Crosshair className="size-4 text-amber-400" />
+                {Math.max(0, roundsLeft)}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <fieldset
+          disabled={phase === "playing"}
+          className={cn(
+            "m-0 flex min-w-0 flex-col gap-4 border-0 p-0 transition-opacity duration-300",
+            phase === "playing" && "pointer-events-none opacity-40",
+          )}
+        >
+          <div className="grid gap-2 md:grid-cols-3">
+            {DIFFICULTY_KEYS.map((key) => {
+              const option = CALL_FOR_FIRE_DIFFICULTIES[key];
+              return (
+                <Button
+                  key={key}
+                  type="button"
+                  variant={difficulty === key ? "default" : "outline"}
+                  className="h-auto justify-start px-3 py-2 text-left"
+                  disabled={submitting || expired}
+                  aria-pressed={difficulty === key}
+                  onClick={() => reset(key)}
+                >
+                  <span className="flex flex-col items-start gap-0.5">
+                    <span>{option.label}</span>
+                    <span className="text-[10px] font-normal opacity-75">
+                      {option.size}×{option.size} grid · {option.maxRounds} rounds max ·{" "}
+                      {option.parRounds} par · {formatClock(option.maxSeconds)} limit
+                    </span>
+                  </span>
+                </Button>
+              );
+            })}
+          </div>
+        </fieldset>
+
+        <div
+          className={cn(
+            "flex flex-wrap items-center justify-between gap-3 rounded-lg border px-3 py-2 text-sm",
+            statusClass,
+          )}
+          aria-live="polite"
+        >
+          <div className="flex flex-col gap-0.5">
+            {phase === "ready" && (
+              <span>Ready to observe. Begin the fire mission to receive your spotting round.</span>
+            )}
+            {phase === "playing" && (
+              <span>
+                Live fire mission: correct range (ADD/DROP) and deflection (RIGHT/LEFT) from the
+                last impact.
+              </span>
+            )}
+            {phase === "over" && lastRun?.won && (
+              <span>
+                Fire effect achieved. {config.label} target destroyed with {lastRun.roundsUsed}{" "}
+                round{lastRun.roundsUsed === 1 ? "" : "s"} in {lastRun.seconds}s.
+              </span>
+            )}
+            {phase === "over" && !lastRun?.won && lastRun?.reason === "rounds" && (
+              <span>Mission failed. Rounds expended before effect. Adjust and try again.</span>
+            )}
+            {phase === "over" && !lastRun?.won && lastRun?.reason === "time" && (
+              <span>Mission failed. Time expired before fire effect.</span>
+            )}
+            {phase === "over" && !lastRun && <span>Recording fire mission…</span>}
+            {lastRun?.won && (
+              <span className="text-xs text-emerald-500">
+                Score {lastRun.score} · accuracy {Math.round(lastRun.finalDistanceM)}m · + 
+                {lastRun.xpEarned} XP earned.
+              </span>
+            )}
+            {lastRun?.error && <span className="text-xs text-destructive">{lastRun.error}</span>}
+          </div>
+          {phase === "ready" && (
+            <Button type="button" size="sm" disabled={submitting || expired} onClick={begin}>
+              <Crosshair /> Begin fire mission
+            </Button>
+          )}
+          {phase === "over" && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={submitting || expired}
+              onClick={() => reset()}
+            >
+              <RotateCcw /> New fire mission
+            </Button>
+          )}
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)]">
+          <div
+            className="flex min-w-0 items-start justify-center overflow-auto rounded-lg border border-border bg-background p-2"
+            style={{ containerType: "inline-size" }}
+          >
+            <div
+              className="grid min-w-max gap-1"
+              style={
+                {
+                  "--board-cols": config.size,
+                  "--cell-size": `max(1.25rem, min(2rem, calc((100cqw - ${(config.size + 1) * 0.25}rem) / ${config.size})))`,
+                  gridTemplateColumns: `auto repeat(var(--board-cols), var(--cell-size))`,
+                } as CSSProperties
+              }
+              role="grid"
+              aria-label={`${config.label} fire mission grid`}
+            >
+              <div />
+              {Array.from({ length: config.size }, (_, column) => (
+                <div
+                  key={`col-${column}`}
+                  className="flex size-[var(--cell-size)] items-center justify-center font-mono text-[10px] text-muted-foreground"
+                >
+                  {String.fromCharCode(65 + column)}
+                </div>
+              ))}
+              {Array.from({ length: config.size }, (_, row) => (
+                <ImpactRow
+                  key={`row-${row}`}
+                  row={row}
+                  size={config.size}
+                  impacts={impacts}
+                  target={phase === "over" ? scenario?.target : undefined}
+                  disabled={phase !== "playing" || expired}
+                />
+              ))}
+            </div>
+          </div>
+
+          <div className="flex min-w-0 flex-col gap-3">
+            <form
+              className="flex flex-col gap-3 rounded-lg border border-border/70 bg-background/50 p-3"
+              onSubmit={(event) => {
+                event.preventDefault();
+                fireMission();
+              }}
+            >
+              <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                <Crosshair className="size-3.5" />
+                Correction (metres, from last impact)
+              </div>
+              <CorrectionField
+                id="cff-range"
+                label="Range (+ ADD / - DROP)"
+                value={rangeM}
+                disabled={phase !== "playing"}
+                onChange={setRangeM}
+              />
+              <CorrectionField
+                id="cff-deflection"
+                label="Deflection (+ RIGHT / - LEFT)"
+                value={deflectionM}
+                disabled={phase !== "playing"}
+                onChange={setDeflectionM}
+              />
+              <Button type="submit" disabled={phase !== "playing" || submitting || expired}>
+                Fire mission
+              </Button>
+              <p className="text-[10px] text-muted-foreground">
+                1 cell = {METERS_PER_CELL}m. ADD pushes the burst north, RIGHT pushes it east.
+              </p>
+            </form>
+
+            <div className="min-w-0 rounded-lg border border-border/70 bg-background/50 px-3 py-2">
+              <div className="mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                <Radio className="size-3.5" />
+                Observer net
+              </div>
+              {radioLog.length === 0 ? (
+                <p className="text-xs text-muted-foreground">Net quiet. Awaiting your first call.</p>
+              ) : (
+                <ul className="space-y-1 font-mono text-xs tabular-nums">
+                  {radioLog.map((line, index) => (
+                    <li
+                      key={`${index}-${line}`}
+                      className={cn(
+                        line.includes("Effective") ? "text-emerald-400" : "text-muted-foreground",
+                      )}
+                    >
+                      &gt; {line}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Read the spotting report, correct range and deflection, and walk the rounds onto the target
+          before time runs out
+        </p>
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground">
+        <div className="flex items-center gap-1.5">
+          <span>Missions</span>
+          <span className="font-semibold text-foreground">{stats.gamesPlayed}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span>Wins</span>
+          <span className="font-semibold text-foreground">{stats.wins}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span>Best score</span>
+          <span className="font-semibold text-foreground">{stats.bestScore}</span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span>XP from fires</span>
+          <span className="font-semibold text-foreground">{stats.callForFireXp}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ImpactRow({
+  row,
+  size,
+  impacts,
+  target,
+  disabled,
+}: {
+  row: number;
+  size: number;
+  impacts: Impact[];
+  target?: GridPoint;
+  disabled: boolean;
+}) {
+  const impactByColumn = new Map<number, Impact>();
+  for (const impact of impacts) {
+    if (impact.point.y === row) {
+      impactByColumn.set(impact.point.x, impact);
+    }
+  }
+  return (
+    <>
+      <div className="flex size-[var(--cell-size)] items-center justify-center font-mono text-[10px] text-muted-foreground">
+        {row + 1}
+      </div>
+      {Array.from({ length: size }, (_, column) => {
+        const impact = impactByColumn.get(column);
+        const isTarget = target !== undefined && target.x === column && target.y === row;
+        return (
+          <div
+            key={`${row}-${column}`}
+            role="gridcell"
+            aria-label={`grid ${gridDesignation({ x: column, y: row })}${
+              impact ? (impact.effective ? " effective impact" : impact.spotting ? " spotting round" : " impact") : ""
+            }`}
+            className={cn(
+              "flex size-[var(--cell-size)] items-center justify-center rounded-sm border text-xs font-bold transition-colors",
+              "border-border bg-card",
+              impact?.effective &&
+                "border-emerald-400 bg-emerald-600/80 text-emerald-50 shadow-[0_0_8px_rgb(16_185_129_/_0.6)]",
+              impact && !impact.effective && impact.spotting &&
+                "border-sky-400/80 bg-sky-500/20 text-sky-200",
+              impact && !impact.effective && !impact.spotting &&
+                "border-amber-500/70 bg-amber-500/20 text-amber-200",
+              isTarget && "border-destructive bg-destructive/25 text-red-300",
+              disabled && "opacity-90",
+            )}
+          >
+            {impact ? (
+              <Crosshair
+                className={cn("size-3.5", impact.spotting && "text-sky-300")}
+                strokeWidth={impact.spotting ? 2.5 : 2}
+              />
+            ) : null}
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+function CorrectionField({
+  id,
+  label,
+  value,
+  disabled,
+  onChange,
+}: {
+  id: string;
+  label: string;
+  value: number;
+  disabled: boolean;
+  onChange: (next: number) => void;
+}) {
+  const clamp = (next: number) => Math.min(2000, Math.max(-2000, next));
+  return (
+    <div className="flex flex-col gap-1">
+      <label htmlFor={id} className="text-xs text-muted-foreground">
+        {label}
+      </label>
+      <div className="flex items-center gap-1">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="size-8 shrink-0 p-0"
+          disabled={disabled}
+          aria-label={`Decrease ${label}`}
+          onClick={() => onChange(clamp(value - CORRECTION_STEP))}
+        >
+          -{CORRECTION_STEP}
+        </Button>
+        <Input
+          id={id}
+          type="number"
+          step={CORRECTION_STEP}
+          value={value}
+          disabled={disabled}
+          className="h-8 text-center font-mono tabular-nums"
+          onChange={(event) => {
+            const parsed = Number(event.target.value);
+            onChange(Number.isFinite(parsed) ? clamp(Math.round(parsed)) : 0);
+          }}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="size-8 shrink-0 p-0"
+          disabled={disabled}
+          aria-label={`Increase ${label}`}
+          onClick={() => onChange(clamp(value + CORRECTION_STEP))}
+        >
+          +{CORRECTION_STEP}
+        </Button>
+      </div>
+    </div>
+  );
+}