- finish reveal all animation

- fix method of fetching reveal all data
Provable-Games · Aug 31, 2024 · 5d17d86 · 5d17d86
1 parent e9eecd1
commit 5d17d86
Show file tree

Hide file tree

Showing 12 changed files with 175 additions and 247 deletions.
diff --git a/public/animations/victory.png b/public/animations/victory.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -31,8 +31,6 @@ const App = () => {
 
   const network: Network = import.meta.env.VITE_NETWORK;
 
-  // console.log(claimedData);
-
   useEffect(() => {
     if (
       freeGamesData.length > 0 &&
@@ -49,7 +47,6 @@ const App = () => {
             )
           )
         );
-        console.log(adventurersMetadata);
         setAdventurersMetadata(adventurersMetadata);
         setClaiming(false);
         setFetchingMetadata(false);

diff --git a/src/api/fetchMetadata.ts b/src/api/fetchMetadata.ts
@@ -34,8 +34,6 @@ export const fetchAdventurerMetadata = async (
     console.error("Error in response:", data);
   }
 
-  console.log(data);
-
   // Step 1: Convert hex strings to a single string
   const hexString = data.result.slice(1).join("").slice(2); // Remove '0x' prefix
 

diff --git a/src/components/AdventurerCard.tsx b/src/components/AdventurerCard.tsx
@@ -121,8 +121,6 @@ const AdventurerCard = ({ meta, adventurerId }: AdventurerCardProps) => {
     }
   }, []);
 
-  console.log(isRevealing);
-
   return (
     <div
       className={`relative flex flex-col bg-black border border-terminal-green border-5 sm:w-[200px] 2xl:w-[275px] 3xl:w-[350px]`}

diff --git a/src/components/animations/RevealAll.tsx b/src/components/animations/RevealAll.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import RevealCard from "./RevealCard";
 import { useUIStore } from "../../hooks/useUIStore";
+import { Button } from "../Button";
 
 interface RevealAllProps {
   adventurersMetadata: any[];
@@ -38,12 +39,19 @@ const RevealAll = ({
   }, [interval, adventurersMetadata.length, setIsRevealingAll]);
 
   return (
-    <div className="flex relative w-72 h-[480px]">
+    <div className="absolute inset-0 w-full min-h-screen z-20">
+      <Button
+        className="absolute top-1/2 right-40 transform -translate-y-1/2"
+        onClick={() => setIsRevealingAll(false)}
+        size="xl"
+      >
+        Skip
+      </Button>
       {adventurersMetadata.map((adventurer, index) => (
         <div
           key={adventurer.name}
           className={`
-            absolute left-1/2 top-1/2 w-full h-full
+            absolute left-1/2 top-1/2
             transform -translate-x-1/2 -translate-y-1/2
             transition-all duration-500 ease-in-out
             ${
@@ -54,7 +62,6 @@ const RevealAll = ({
         >
           <RevealCard
             adventurerMetadata={adventurer}
-            adventurerId={adventurer.name.split("#")[1]}
             isActive={index === currentIndex}
             interval={2000}
           />

diff --git a/src/components/animations/RevealCard.tsx b/src/components/animations/RevealCard.tsx
@@ -1,20 +1,14 @@
-import { useCallback, useEffect, useState } from "react";
-import { colorMap, statsRevealed } from "../../lib/utils";
-import { fetchAdventurerMetadata } from "../../api/fetchMetadata";
-import { networkConfig } from "../../lib/networkConfig";
-import { Network } from "../../lib/types";
-import { useUIStore } from "../../hooks/useUIStore";
+import { useEffect, useState } from "react";
+import { colorMap } from "../../lib/utils";
 
 interface RevealCardProps {
   adventurerMetadata: any;
-  adventurerId: number;
   isActive: boolean;
   interval?: number;
 }
 
 const RevealCard = ({
   adventurerMetadata,
-  adventurerId,
   isActive,
   interval = 2000,
 }: RevealCardProps) => {
@@ -27,26 +21,6 @@ const RevealCard = ({
     wis: "?",
     cha: "?",
   });
-  const [revealedMetadata, setRevealedMetadata] = useState(null);
-  const network: Network = import.meta.env.VITE_NETWORK;
-  const gameAddress = networkConfig[network!].gameAddress;
-
-  const cardMetadata = revealedMetadata ? revealedMetadata : adventurerMetadata;
-
-  const updateFreeGamesData = useCallback(() => {
-    setFreeGamesData(
-      freeGamesData.map((game) =>
-        game.adventurerId === adventurerId ? { ...game, revealed: true } : game
-      )
-    );
-  }, [adventurerId]);
-
-  const {
-    adventurersMetadata,
-    setAdventurersMetadata,
-    freeGamesData,
-    setFreeGamesData,
-  } = useUIStore();
 
   useEffect(() => {
     if (isActive) {
@@ -70,59 +44,44 @@ const RevealCard = ({
         setRevealedStats(randomStats as typeof revealedStats);
       }, 100);
 
-      const fetchMetadataRecursive = async () => {
-        const metadata = await fetchAdventurerMetadata(
-          gameAddress,
-          adventurerId,
-          networkConfig[network!].rpcUrl
-        );
+      // Set final stats and clear interval after 2 seconds
+      const timeoutId = setTimeout(() => {
+        clearInterval(animationInterval);
 
-        if (statsRevealed(metadata)) {
-          // Stats are revealed, update the UI
-          clearInterval(animationInterval);
-          setRevealedStats({
-            str: metadata.attributes.find(
-              (attr: any) => attr.trait === "Strength"
-            ).value,
-            dex: metadata.attributes.find(
-              (attr: any) => attr.trait === "Dexterity"
-            ).value,
-            int: metadata.attributes.find(
-              (attr: any) => attr.trait === "Intelligence"
-            ).value,
-            vit: metadata.attributes.find(
-              (attr: any) => attr.trait === "Vitality"
-            ).value,
-            wis: metadata.attributes.find(
-              (attr: any) => attr.trait === "Wisdom"
-            ).value,
-            cha: metadata.attributes.find(
-              (attr: any) => attr.trait === "Charisma"
-            ).value,
-          });
-          const index = adventurersMetadata.findIndex(
-            (meta) => meta.name.split("#")[1] === metadata.name.split("#")[1]
-          );
-          setAdventurersMetadata(
-            adventurersMetadata.map((meta, i) =>
-              i === index ? metadata : meta
-            )
-          );
-          setRevealedMetadata(metadata);
-          updateFreeGamesData();
-          setIsRevealing(false);
-        } else {
-          // Stats are not revealed yet, try again in 4 seconds
-          setTimeout(fetchMetadataRecursive, 4000);
-        }
-      };
+        setRevealedStats({
+          str: adventurerMetadata.attributes.find(
+            (attr: any) => attr.trait === "Strength"
+          ).value,
+          dex: adventurerMetadata.attributes.find(
+            (attr: any) => attr.trait === "Dexterity"
+          ).value,
+          int: adventurerMetadata.attributes.find(
+            (attr: any) => attr.trait === "Intelligence"
+          ).value,
+          vit: adventurerMetadata.attributes.find(
+            (attr: any) => attr.trait === "Vitality"
+          ).value,
+          wis: adventurerMetadata.attributes.find(
+            (attr: any) => attr.trait === "Wisdom"
+          ).value,
+          cha: adventurerMetadata.attributes.find(
+            (attr: any) => attr.trait === "Charisma"
+          ).value,
+        });
+
+        setIsRevealing(false);
+      }, interval);
 
-      fetchMetadataRecursive();
+      // Cleanup function
+      return () => {
+        clearInterval(animationInterval);
+        clearTimeout(timeoutId);
+      };
     }
-  }, [isActive, adventurerId, interval]);
+  }, [isActive, adventurerMetadata, interval]);
 
   return (
-    <div className="relative flex flex-col bg-black border border-terminal-green border-5 h-full w-full">
+    <div className="flex flex-col bg-black border border-terminal-green border-5 w-[350px]">
       <div
         className={`flex flex-row ${isRevealing ? "animate-pulseFast" : ""}`}
       >
@@ -136,18 +95,18 @@ const RevealCard = ({
                     parseInt(revealedStats[stat as keyof typeof revealedStats]),
                     isRevealing
                   )
-            } w-12 flex flex-col text-center`}
+            } w-full flex flex-col text-center`}
           >
             <p>{stat.toUpperCase()}</p>
             <p>{revealedStats[stat as keyof typeof revealedStats]}</p>
           </span>
         ))}
       </div>
-      <div className="relative w-72 h-96">
+      <div className="relative w-full">
         <img
-          key={cardMetadata?.name}
-          src={cardMetadata?.image}
-          alt={cardMetadata?.name}
+          key={adventurerMetadata.name}
+          src={adventurerMetadata.image}
+          alt={adventurerMetadata.name}
         />
       </div>
     </div>

diff --git a/src/containers/Claim-2.tsx b/src/containers/Claim-2.tsx
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       }, []);
-      console.log(isRevealing);
       return (
         <div
           className={`relative flex flex-col bg-black border border-terminal-green border-5 sm:w-[200px] 2xl:w-[275px] 3xl:w-[350px]`}
@@ Expand Down @@