Function ChallengeView

frontend/src/App.tsx:647–1161

({
  config,
  challengeId,
  participant,
  onBack,
}: {
  config: AppConfig | null;
  challengeId: string;
  participant: Participant | null;
  onBack: () => void | Promise<void>;
})

}

function ChallengeView({
  config,
  challengeId,
  participant,
  onBack,
}: {
  config: AppConfig | null;
  challengeId: string;
  participant: Participant | null;
  onBack: () => void | Promise<void>;
}) {
  const [challenge, setChallenge] = useState<Challenge | null>(null);
  const [cells, setCells] = useState<ChallengeCell[]>([]);
  const [unlocked, setUnlocked] = useState<Set<string>>(new Set());
  const [mine, setMine] = useState<Set<string>>(new Set());
  const [leaderboard, setLeaderboard] = useState<LeaderboardRow[]>([]);
  const [tracking, setTracking] = useState(false);
  const [message, setMessage] = useState("准备开始。保持页面打开，走动后会点亮格子。");
  const [permissionHint, setPermissionHint] = useState("");
  const [gpsPosition, setGpsPosition] = useState<MapPosition | null>(null);
  const [gpsCellId, setGpsCellId] = useState<string | null>(null);
  const [desktopMode, setDesktopMode] = useState(() => isDesktopSimulatorLayout());
  const [activePanel, setActivePanel] = useState<ChallengePanel | null>(null);
  const [simPosition, setSimPosition] = useState<{ lat: number; lng: number } | null>(null);
  const [simMine, setSimMine] = useState<Set<string>>(new Set());
  const [simStepM, setSimStepM] = useState(30);
  const [mapRotationDeg, setMapRotationDeg] = useState(0);
  const [simMessage, setSimMessage] = useState("每步按经纬度移动，默认 30 米。");
  const [shareNotice, setShareNotice] = useState("");
  const [shareFallbackText, setShareFallbackText] = useState("");
  const watchRef = useRef<number | null>(null);
  const cellIdSet = useMemo(() => new Set(cells.map((cell) => cell.cell_id)), [cells]);
  const cellKey = useMemo(() => cells.map((cell) => cell.cell_id).join("|"), [cells]);
  const simCellId = useMemo(() => {
    if (!challenge || !simPosition) return "";
    return safeLatLngToCell(simPosition.lat, simPosition.lng, challenge.h3_resolution);
  }, [challenge, simPosition]);
  const simCellInside = Boolean(simCellId && cellIdSet.has(simCellId));
  const visibleMine = useMemo(() => {
    if (!desktopMode) return mine;
    return simMine;
  }, [desktopMode, mine, simMine]);
  const simulatorPosition = useMemo<MapPosition | null>(() => {
    if (!desktopMode || !simPosition) return null;
    return {
      lat: simPosition.lat,
      lng: simPosition.lng,
      mode: "simulator",
      label: "本地模拟位置",
    };
  }, [desktopMode, simPosition]);
  const mapPosition = simulatorPosition || gpsPosition;
  const mapCellId = simulatorPosition ? (simCellInside ? simCellId : null) : gpsCellId;

  async function load() {
    const [detail, board] = await Promise.all([
      api.getChallenge(challengeId),
      api.leaderboard(challengeId),