add track specific badges

Author: LinaBell

client/src/components/BadgesScreen/BadgesScreen.jsx

@@ -52,7 +52,8 @@ export const BadgesScreen = () => {
         <div className="grid grid-cols-3 gap-6 pt-4">
           {Object.values(badges).map((badge) => {
             const hasBadge = visitorInventory && Object.keys(visitorInventory).includes(badge.name);
-            const style = hasBadge ? {} : { filter: "grayscale(1)" };
+            const style = { width: "90px" };
+            if (!hasBadge) style.filter = "grayscale(1)";
             return (
               <div className="tooltip" key={badge.id}>
                 <span className="tooltip-content">{badge.name}</span>

client/src/components/SwitchRace/SwitchTrackScreen.jsx

@@ -33,7 +33,7 @@ export const SwitchTrackScreen = () => {
     setAreAllButtonsDisabled(true);
 
     await backendAPI
-      .post(`/race/switch-track?trackSceneId=${selectedTrack.sceneId}`)
+      .post("/race/switch-track", { selectedTrack })
       .then((response) => {
         const { leaderboard, numberOfCheckpoints, trackLastSwitchedDate } = response.data.sceneData;
 

server/controllers/handleSwitchTrack.js

@@ -12,7 +12,8 @@ export const handleSwitchTrack = async (req, res) => {
   try {
     const credentials = getCredentials(req.query);
     const { assetId, profileId, urlSlug, sceneDropId } = credentials;
-    const { trackSceneId } = req.query;
+    const { selectedTrack } = req.body;
+    const { sceneId, name } = selectedTrack;
 
     const world = await World.create(urlSlug, { credentials });
     const { visitor } = await getVisitor(credentials);
@@ -54,7 +55,7 @@ export const handleSwitchTrack = async (req, res) => {
 
     await world.dropScene({
       allowNonAdmins: true,
-      sceneId: trackSceneId,
+      sceneId,
       position,
       sceneDropId,
     });
@@ -65,6 +66,7 @@ export const handleSwitchTrack = async (req, res) => {
     });
 
     const sceneData = {
+      trackName: name,
       numberOfCheckpoints: numberOfCheckpoints?.length,
       leaderboard: {},
       position,

server/utils/checkpoints/finishLineEntered.js

@@ -185,6 +185,24 @@ export const finishLineEntered = async ({ credentials, currentElapsedTime, wasWr
       );
     }
 
+    // Award Track Completion badge for specific track by name if available
+    promises.push(
+      awardBadge({
+        credentials,
+        visitor,
+        visitorInventory,
+        badgeName: raceObject.trackName,
+        redisObj,
+        profileId,
+      }).catch((error) =>
+        errorHandler({
+          error,
+          functionName: "finishLineEntered",
+          message: `Error awarding ${raceObject.trackName} completion badge`,
+        }),
+      ),
+    );
+
     const results = await Promise.allSettled(promises);
     results.forEach((result) => {
       if (result.status === "rejected") console.error(result.reason);