chore: more feedback fixes (#129)

## Summary

- Fix `NaN` displayed in Sync New Content / Force Unlock notifications by guarding against undefined counts
- Poll server for exploration claimability before showing Collect button to prevent client/server desync
- Return authoritative materials list from craft API to prevent client desync causing false affordability
- Add test coverage for `sync-new-content` and `explore/claimable` endpoints

Closes #125
Closes #127
Closes #128

## Test plan

- [ ] Trigger a sync with new content and verify the notification shows a real count instead of `NaN`
- [ ] Start an exploration, wait for it to complete, and verify the Collect button only appears after the server confirms claimable
- [ ] Attempt to craft a recipe and verify the material counts in the UI update to match the server's authoritative values

✨ This issue was created with help from Hikari~ 🌸

Reviewed-on: #129
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>

apps/web/src/api/client.ts

@@ -17,6 +17,7 @@ import type {
   BuyPrestigeUpgradeResponse,
   CraftRecipeRequest,
   CraftRecipeResponse,
+  ExploreClaimableResponse,
   ExploreCollectRequest,
   ExploreCollectResponse,
   ExploreStartRequest,
@@ -244,6 +245,19 @@ const collectExploration = async(
   });
 };
 
+/**
+ * Checks whether a given exploration area is ready to claim on the server.
+ * @param areaId - The area ID to check.
+ * @returns Whether the exploration is claimable.
+ */
+const checkExplorationClaimable = async(
+  areaId: string,
+): Promise<ExploreClaimableResponse> => {
+  return await fetchJson<ExploreClaimableResponse>(
+    `/explore/claimable?areaId=${encodeURIComponent(areaId)}`,
+  );
+};
+
 /**
  * Crafts a recipe on the server.
  * @param body - The craft recipe request payload.
@@ -316,6 +330,7 @@ export {
   buyEchoUpgrade,
   buyPrestigeUpgrade,
   challengeBoss,
+  checkExplorationClaimable,
   collectExploration,
   craftRecipe,
   debugHardReset,

apps/web/src/components/game/debugPanel.tsx

@@ -13,18 +13,22 @@ import { ConfirmationModal } from "../ui/confirmationModal.js";
 type ActiveModal = "force-unlocks" | "hard-reset" | "sync-new-content" | null;
 
 interface SyncNewContentResult {
-  achievementsAdded:     number;
-  adventurersAdded:      number;
-  bossesAdded:           number;
-  bossRewardsPatched:    number;
-  equipmentAdded:        number;
-  explorationAreasAdded: number;
-  questRewardsPatched:   number;
-  questsAdded:           number;
-  upgradesAdded:         number;
-  zonesAdded:            number;
+  achievementsAdded:     number | undefined;
+  adventurersAdded:      number | undefined;
+  bossesAdded:           number | undefined;
+  bossRewardsPatched:    number | undefined;
+  equipmentAdded:        number | undefined;
+  explorationAreasAdded: number | undefined;
+  questRewardsPatched:   number | undefined;
+  questsAdded:           number | undefined;
+  upgradesAdded:         number | undefined;
+  zonesAdded:            number | undefined;
 }
 
+const safeNumber = (value: number | undefined): number => {
+  return value ?? 0;
+};
+
 /**
  * Builds a human-readable summary of what the sync-new-content operation added.
  * @param result - The counts returned by the operation.
@@ -32,16 +36,16 @@ interface SyncNewContentResult {
  */
 const buildSyncNewContentMessage = (result: SyncNewContentResult): string => {
   const entries: Array<[ number, string ]> = [
-    [ result.zonesAdded, "zone(s)" ],
-    [ result.questsAdded, "quest(s)" ],
-    [ result.questRewardsPatched, "quest reward(s) patched" ],
-    [ result.bossesAdded, "boss(es)" ],
-    [ result.bossRewardsPatched, "boss reward(s) patched" ],
-    [ result.explorationAreasAdded, "exploration area(s)" ],
-    [ result.adventurersAdded, "adventurer tier(s)" ],
-    [ result.upgradesAdded, "upgrade(s)" ],
-    [ result.equipmentAdded, "equipment item(s)" ],
-    [ result.achievementsAdded, "achievement(s)" ],
+    [ safeNumber(result.zonesAdded), "zone(s)" ],
+    [ safeNumber(result.questsAdded), "quest(s)" ],
+    [ safeNumber(result.questRewardsPatched), "quest reward(s) patched" ],
+    [ safeNumber(result.bossesAdded), "boss(es)" ],
+    [ safeNumber(result.bossRewardsPatched), "boss reward(s) patched" ],
+    [ safeNumber(result.explorationAreasAdded), "exploration area(s)" ],
+    [ safeNumber(result.adventurersAdded), "adventurer tier(s)" ],
+    [ safeNumber(result.upgradesAdded), "upgrade(s)" ],
+    [ safeNumber(result.equipmentAdded), "equipment item(s)" ],
+    [ safeNumber(result.achievementsAdded), "achievement(s)" ],
   ];
   const parts = entries.
     filter(([ count ]) => {
@@ -60,14 +64,14 @@ const buildSyncNewContentMessage = (result: SyncNewContentResult): string => {
 };
 
 interface ForceUnlocksResult {
-  adventurersUnlocked: number;
-  bossesUnlocked:      number;
-  equipmentUnlocked:   number;
-  explorationUnlocked: number;
-  questsUnlocked:      number;
-  storyUnlocked:       number;
-  upgradesUnlocked:    number;
-  zonesUnlocked:       number;
+  adventurersUnlocked: number | undefined;
+  bossesUnlocked:      number | undefined;
+  equipmentUnlocked:   number | undefined;
+  explorationUnlocked: number | undefined;
+  questsUnlocked:      number | undefined;
+  storyUnlocked:       number | undefined;
+  upgradesUnlocked:    number | undefined;
+  zonesUnlocked:       number | undefined;
 }
 
 /**
@@ -77,14 +81,14 @@ interface ForceUnlocksResult {
  */
 const buildForceUnlocksMessage = (result: ForceUnlocksResult): string => {
   const entries: Array<[ number, string ]> = [
-    [ result.zonesUnlocked, "zone(s)" ],
-    [ result.questsUnlocked, "quest(s)" ],
-    [ result.bossesUnlocked, "boss(es)" ],
-    [ result.explorationUnlocked, "exploration area(s)" ],
-    [ result.adventurersUnlocked, "adventurer tier(s)" ],
-    [ result.upgradesUnlocked, "upgrade(s)" ],
-    [ result.equipmentUnlocked, "equipment item(s)" ],
-    [ result.storyUnlocked, "story chapter(s)" ],
+    [ safeNumber(result.zonesUnlocked), "zone(s)" ],
+    [ safeNumber(result.questsUnlocked), "quest(s)" ],
+    [ safeNumber(result.bossesUnlocked), "boss(es)" ],
+    [ safeNumber(result.explorationUnlocked), "exploration area(s)" ],
+    [ safeNumber(result.adventurersUnlocked), "adventurer tier(s)" ],
+    [ safeNumber(result.upgradesUnlocked), "upgrade(s)" ],
+    [ safeNumber(result.equipmentUnlocked), "equipment item(s)" ],
+    [ safeNumber(result.storyUnlocked), "story chapter(s)" ],
   ];
   const parts = entries.
     filter(([ count ]) => {

apps/web/src/components/game/explorationPanel.tsx

@@ -7,12 +7,17 @@
 /* eslint-disable max-lines-per-function -- Complex component with many render paths */
 /* eslint-disable complexity -- Complex component with many conditional render paths */
 /* eslint-disable max-lines -- Exploration panel requires many render paths and result display */
-import { type JSX, useState } from "react";
+/* eslint-disable max-statements -- Component function requires many state declarations and handlers */
+import { type JSX, useEffect, useRef, useState } from "react";
+import { checkExplorationClaimable } from "../../api/client.js";
 import { useGame } from "../../context/gameContext.js";
 import { EXPLORATION_AREAS } from "../../data/explorations.js";
 import { cdnImage } from "../../utils/cdn.js";
 import { ZoneSelector } from "./zoneSelector.js";
-import type { ExploreCollectResponse } from "@elysium/types";
+import type {
+  ExploreClaimableResponse,
+  ExploreCollectResponse,
+} from "@elysium/types";
 
 /**
  * Formats a duration in seconds to a human-readable string.
@@ -83,6 +88,61 @@ const ExplorationPanel = (): JSX.Element => {
   });
   const [ pendingAreaId, setPendingAreaId ] = useState<string | null>(null);
   const [ lastResult, setLastResult ] = useState<CollectResult | null>(null);
+  const [ claimableAreaIds, setClaimableAreaIds ]
+    = useState<ReadonlySet<string>>(new Set());
+
+  const stateReference = useRef(state);
+  stateReference.current = state;
+
+  const claimableReference = useRef(claimableAreaIds);
+  claimableReference.current = claimableAreaIds;
+
+  useEffect(() => {
+    const pollClaimable = async(): Promise<void> => {
+      const currentState = stateReference.current;
+      if (currentState === null) {
+        return;
+      }
+      const inProgressArea = currentState.exploration?.areas.find((a) => {
+        return a.status === "in_progress";
+      });
+      if (inProgressArea === undefined) {
+        return;
+      }
+      if (claimableReference.current.has(inProgressArea.id)) {
+        return;
+      }
+      const areaData = EXPLORATION_AREAS.find((a) => {
+        return a.id === inProgressArea.id;
+      });
+      if (areaData === undefined) {
+        return;
+      }
+      const remaining = timeRemaining(
+        inProgressArea.endsAt,
+        inProgressArea.startedAt ?? 0,
+        areaData.durationSeconds,
+      );
+      if (remaining > 0) {
+        return;
+      }
+      const result: ExploreClaimableResponse
+        = await checkExplorationClaimable(inProgressArea.id);
+      if (result.claimable) {
+        setClaimableAreaIds((previous) => {
+          return new Set([ ...previous, inProgressArea.id ]);
+        });
+      }
+    };
+
+    const intervalId = setInterval(() => {
+      void pollClaimable();
+    }, 1000);
+
+    return (): void => {
+      clearInterval(intervalId);
+    };
+  }, []);
 
   if (state === null) {
     return (
@@ -134,6 +194,11 @@ const ExplorationPanel = (): JSX.Element => {
     try {
       const result = await collectExploration(areaId);
       setLastResult({ areaId: areaId, response: result });
+      setClaimableAreaIds((previous) => {
+        const next = new Set(previous);
+        next.delete(areaId);
+        return next;
+      });
     } finally {
       setPendingAreaId(null);
     }
@@ -269,7 +334,7 @@ const ExplorationPanel = (): JSX.Element => {
           const endsAt = areaState?.endsAt;
           const isReady
             = status === "in_progress"
-            && timeRemaining(endsAt, startedAt, area.durationSeconds) <= 0;
+            && claimableAreaIds.has(area.id);
           const isPending = pendingAreaId === area.id;
 
           function handleStartClick(): void {

apps/web/src/context/gameContext.tsx

@@ -1864,14 +1864,6 @@ export const GameProvider = ({
         if (previous?.exploration === undefined) {
           return previous;
         }
-        let materials = [ ...previous.exploration.materials ];
-        for (const request of recipe.requiredMaterials) {
-          materials = materials.map((mat) => {
-            return mat.materialId === request.materialId
-              ? { ...mat, quantity: mat.quantity - request.quantity }
-              : mat;
-          });
-        }
         return {
           ...previous,
           exploration: {
@@ -1884,7 +1876,7 @@ export const GameProvider = ({
               ...previous.exploration.craftedRecipeIds,
               recipeId,
             ],
-            materials: materials,
+            materials: result.materials,
           },
         };
       });