- fix optimistic updates

- add loader
- add filling content
- get countdown working

indexer/env-goerli

@@ -1,3 +1,3 @@
-GAME="0x06be55931ec7e63fe429d677677b03302f724b966dde8241cb08c2da76ed5895"
+GAME="0x055b3d17ac13c34e758e58c522724edab81163abe4ca1a5b2acc06b258e5d783"
 START=873000
 MONGO_CONNECTION_STRING="mongodb://mongo:mongo@indexer-mongo-1:27017"

indexer/src/adventurers.ts

@@ -99,7 +99,6 @@ export default function transform({ header, events }: Block) {
       case START_GAME: {
         console.log("START_GAME", "->", "ADVENTURER UPDATES");
         const { value } = parseStartGame(event.data, 0);
-        console.log(value);
         const as = value.adventurerState;
         const am = value.adventurerMeta;
         return [

ui/src/app/api/api.ts

@@ -1,9 +1,33 @@
-import { useAccount } from "@starknet-react/core";
+import { getRPCUrl } from "../lib/constants";
 
 interface MintEthProps {
   address: string;
 }
 
+export const getBlock = async (blockNumber: number) => {
+  const rpcUrl = getRPCUrl();
+  try {
+    const requestBody = {
+      jsonrpc: "2.0",
+      method: "starknet_getBlockWithTxHashes",
+      params: [{ block_number: blockNumber }],
+      id: 1,
+    };
+    const response = await fetch(rpcUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    const data = await response.json();
+    return data.result;
+  } catch (error) {
+    console.error("Error posting data:", error);
+  }
+};
+
 export const mintEth = async ({ address }: MintEthProps) => {
   try {
     const requestBody = {

ui/src/app/components/ArcadeDialog.tsx

@@ -109,7 +109,6 @@ export const ArcadeDialog = () => {
 
   const getAccountBalances = async (account: string) => {
     const balances = await fetchBalanceWithRetry(account);
-    console.log(balances);
     setArcadeBalances({
       ...arcadebalances,
       [account]: {

ui/src/app/components/CountDown.tsx

@@ -7,9 +7,9 @@ const formatTime = (totalSeconds: number) => {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds - hours * 3600) / 60);
   const seconds = totalSeconds % 60;
-  return `${hours.toString().padStart(2, "0")}:${minutes
+  return `${minutes.toString().padStart(2, "0")}:${seconds
     .toString()
-    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+    .padStart(2, "0")}`;
 };
 
 export const HealthCountDown = ({ health }: any) => {
@@ -100,17 +100,27 @@ export const PenaltyCountDown = ({
 };
 
 export interface EntropyCountDownProps {
-  targetTime: number;
+  targetTime: number | null;
+  countDownExpired: () => void;
 }
 
-export const EntropyCountDown = ({ targetTime }: EntropyCountDownProps) => {
+export const EntropyCountDown = ({
+  targetTime,
+  countDownExpired,
+}: EntropyCountDownProps) => {
   const [seconds, setSeconds] = useState(0);
   useEffect(() => {
     if (targetTime) {
       const updateCountdown = () => {
         const currentTime = new Date().getTime();
         const timeRemaining = targetTime - currentTime;
         setSeconds(Math.floor(timeRemaining / 1000));
+
+        if (timeRemaining <= 0) {
+          countDownExpired(); // Call the countDownExpired function when countdown expires
+        } else {
+          setSeconds(Math.floor(timeRemaining / 1000));
+        }
       };
 
       updateCountdown();
@@ -122,12 +132,27 @@ export const EntropyCountDown = ({ targetTime }: EntropyCountDownProps) => {
     }
   }, [targetTime]);
   return (
-    <div className="text-xs sm:text-6xl self-center h-full w-full">
-      {seconds > 0 && (
-        <span className="flex flex-row gap-1 items-center justify-center h-full">
-          <p className="animate-pulse">{formatTime(seconds)}</p>
-        </span>
-      )}
+    <div className="h-1/4 flex items-center justify-center">
+      <span className="flex flex-col gap-1 items-center justify-center">
+        {targetTime ? (
+          <>
+            <p className="sm:text-2xl">Session Starts in</p>
+            <p
+              className={`sm:text-6xl ${
+                seconds < 10
+                  ? "animate-pulse text-red-600"
+                  : "text-terminal-yellow"
+              }`}
+            >
+              {seconds === 0 ? "GO" : formatTime(seconds)}
+            </p>
+          </>
+        ) : (
+          <p className="sm:text-6xl animate-pulse text-terminal-yellow">
+            Loading
+          </p>
+        )}
+      </span>
     </div>
   );
 };

ui/src/app/components/adventurer/InventoryDisplay.tsx

@@ -77,7 +77,6 @@ export const InventoryCard = ({
 
   const handleEquipItems = (item: string) => {
     const formattedNewEquipItems = handleCheckSameSlot(slot, equipItems);
-    console.log(equipItems);
     const newEquipItems = [
       ...formattedNewEquipItems,
       getKeyFromValue(gameData.ITEMS, item) ?? "",

ui/src/app/components/animations/RowLoadre.tsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+
+const RowLoader: React.FC = () => {
+  const cols = 6; // Change to 6 columns
+  const [loaderData, setLoaderData] = useState<number[]>(Array(cols).fill(-1));
+
+  useEffect(() => {
+    const row = loaderData;
+    const randomStartX = Math.floor(Math.random() * cols);
+
+    row[randomStartX] = 0; // Set the initial square to 0
+
+    let order = 0;
+    for (let i = 0; i < cols; i++) {
+      row[i] = order++;
+    }
+
+    setLoaderData([...row]);
+  }, []);
+
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <div className="w-full h-full relative flex items-center justify-between gap-1">
+        {loaderData.map((order, colIndex) => (
+          <div
+            key={colIndex}
+            className={`w-6 h-6 ${
+              order !== -1 ? "bg-terminal-green animate-ping" : ""
+            }`}
+            style={{
+              animationDelay: order !== -1 ? `${order * 0.2}s` : "0s",
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RowLoader;

ui/src/app/components/interlude/Hints.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { ActionsTutorial } from "../tutorial/ActionsTutorial";
+import { AdventurerTutorial } from "../tutorial/AdventurerTutorial";
+import { BeastTutorial } from "../tutorial/BeastTutorial";
+import { UpgradeTutorial } from "../tutorial/UpgradeTutorial";
+import RowLoader from "../animations/RowLoadre";
+
+export default function Hints() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const tutorials = [
+    <ActionsTutorial key={0} />,
+    <AdventurerTutorial key={1} />,
+    <BeastTutorial key={2} />,
+    <UpgradeTutorial key={3} />,
+  ];
+  useEffect(() => {
+    if (currentIndex < tutorials.length - 1) {
+      const timer = setTimeout(() => {
+        setCurrentIndex((prev) => prev + 1);
+      }, 10000);
+      return () => {
+        clearTimeout(timer);
+      };
+    } else if (currentIndex === tutorials.length - 1) {
+      const timer = setTimeout(() => {
+        setCurrentIndex(0);
+      }, 10000);
+      return () => clearTimeout(timer);
+    }
+  }, [currentIndex]);
+
+  return (
+    <div className="flex flex-col w-1/2 items-center justify-center h-full">
+      <p className="text-4xl h-1/6 flex justify-center items-center">Hints</p>
+      <div className="flex flex-col border border-terminal-green bg-black p-12 h-5/6 w-3/4">
+        <div className="w-full h-1/6">
+          <RowLoader />
+        </div>
+        <div className="w-full h-5/6">{tutorials[currentIndex]}</div>
+      </div>
+    </div>
+  );
+}

ui/src/app/components/interlude/Lobby.tsx

@@ -64,7 +64,11 @@ export default function Lobby() {
       <table className="w-full xl:text-lg 2xl:text-xl border border-terminal-green">
         <thead className="border border-terminal-green">
           <tr>
-            <th className="p-1">Adventurer</th>
+            <th className="p-1">Name</th>
+            <th className="p-1">Account</th>
+            <th className="p-1">Death Toll</th>
+            <th className="p-1">Best Run</th>
+            <th className="p-1">Blocks Left</th>
           </tr>
         </thead>
         <tbody>
@@ -74,6 +78,7 @@ export default function Lobby() {
                 key={index}
                 adventurer={adventurer}
                 handleRowSelected={handleRowSelected}
+                currentBlock={blockData?.block_number!}
               />
             )
           )}

ui/src/app/components/interlude/LobbyRow.tsx

@@ -6,16 +6,22 @@ import { soundSelector } from "@/app/hooks/useUiSound";
 interface LobbyRowProps {
   adventurer: Adventurer;
   handleRowSelected: (id: number) => void;
+  currentBlock: number;
 }
 
-const LobbyRow = ({ adventurer, handleRowSelected }: LobbyRowProps) => {
+const LobbyRow = ({
+  adventurer,
+  handleRowSelected,
+  currentBlock,
+}: LobbyRowProps) => {
   const { play: clickPlay } = useUiSounds(soundSelector.click);
   const adventurersByOwner = useQueriesStore(
     (state) => state.data.adventurersByOwnerQuery?.adventurers ?? []
   );
   const ownedAdventurer = adventurersByOwner.some(
     (a) => a.id === adventurer.id
   );
+
   return (
     <tr
       className={`text-center border-b border-terminal-green hover:bg-terminal-green hover:text-terminal-black cursor-pointer xl:h-2 xl:text-lg 2xl:text-xl 2xl:h-10 ${
@@ -27,6 +33,10 @@ const LobbyRow = ({ adventurer, handleRowSelected }: LobbyRowProps) => {
       }}
     >
       <td>{`${adventurer.name} - ${adventurer.id}`}</td>
+      <td>{adventurer.owner}</td>
+      <td>10</td>
+      <td>100 XP</td>
+      <td>{adventurer?.revealBlock! - currentBlock}</td>
     </tr>
   );
 };

ui/src/app/components/leaderboard/ScoreTable.tsx

@@ -32,8 +32,6 @@ const ScoreLeaderboardTable = ({
 
   const scoreIds = scores?.map((score) => score.id ?? 0);
 
-  console.log(scoreIds);
-
   const scoresData = useCustomQuery("topScoresQuery", getScoresInList, {
     ids: scoreIds,
   });

ui/src/app/components/tutorial/ActionsTutorial.tsx

@@ -1,6 +1,6 @@
 export const ActionsTutorial = () => {
   return (
-    <div className="flex flex-col uppercase">
+    <div className="flex flex-col uppercase justify-center items-center h-full">
       <h3 className="mt-0">Explore</h3>
       <p className="text-sm sm:text-lg mb-2">
         During your exploration, you will encounter a number of things. These

ui/src/app/components/tutorial/AdventurerTutorial.tsx

@@ -1,6 +1,6 @@
 export const AdventurerTutorial = () => {
   return (
-    <div className="flex flex-col uppercase">
+    <div className="flex flex-col uppercase justify-center h-full">
       <h3 className="mt-0">Welcome to Loot Survivor!</h3>
 
       {/* <h3 className="text-xl sm:text-2xl">Create an Adventurer</h3> */}

ui/src/app/components/tutorial/BeastTutorial.tsx

@@ -1,6 +1,6 @@
 export const BeastTutorial = () => {
   return (
-    <div className="flex flex-col uppercase">
+    <div className="flex flex-col uppercase justify-center items-center h-full">
       <h3 className="mt-0">Beast</h3>
       <p className="text-sm sm:text-lg">
         Oh dear! You&apos;ve stumbled upon a beast! A potential ambush lurks.

ui/src/app/components/tutorial/UpgradeTutorial.tsx

@@ -1,6 +1,6 @@
 export const UpgradeTutorial = () => {
   return (
-    <div className="uppercase">
+    <div className="flex flex-col uppercase justify-center items-center h-full">
       <h3 className="mt-0">Level Up</h3>
       <h3 className="text-sm sm:text-lg">Health Potions</h3>
       <p className="text-sm sm:text-lg">

ui/src/app/containers/AdventurerScreen.tsx

@@ -33,7 +33,6 @@ export default function AdventurerScreen({
   const adventurers = useQueriesStore(
     (state) => state.data.adventurersByOwnerQuery?.adventurers || []
   );
-  console.log(adventurers);
   const resetData = useQueriesStore((state) => state.resetData);
   const startOption = useUIStore((state) => state.startOption);
   const setStartOption = useUIStore((state) => state.setStartOption);

ui/src/app/containers/BeastScreen.tsx

@@ -12,6 +12,8 @@ import useUIStore from "../hooks/useUIStore";
 import useCustomQuery from "../hooks/useCustomQuery";
 import { getLastestEntropy } from "../hooks/graphql/queries";
 import InterludeScreen from "./InterludeScreen";
+import { getBlock } from "../api/api";
+import { useBlock } from "@starknet-react/core";
 
 interface BeastScreenProps {
   attack: (...args: any[]) => any;
@@ -23,7 +25,6 @@ interface BeastScreenProps {
  * @description Provides the beast screen for adventurer battles.
  */
 export default function BeastScreen({ attack, flee }: BeastScreenProps) {
-  const [nextEntropyTime, setNextEntropyTime] = useState(0);
   const adventurer = useAdventurerStore((state) => state.adventurer);
   const loading = useLoadingStore((state) => state.loading);
   const estimatingFee = useUIStore((state) => state.estimatingFee);
@@ -39,6 +40,10 @@ export default function BeastScreen({ attack, flee }: BeastScreenProps) {
     (state) => state.data.battlesByBeastQuery?.battles || []
   );
 
+  const { data: blockData } = useBlock({
+    refetchInterval: false,
+  });
+
   const [buttonText, setButtonText] = useState("Flee");
 
   const handleMouseEnter = () => {
@@ -148,38 +153,15 @@ export default function BeastScreen({ attack, flee }: BeastScreenProps) {
     </div>
   );
 
-  const latestEntropyData = useCustomQuery(
-    "latestEntropyQuery",
-    getLastestEntropy,
-    undefined
-  );
-
-  useEffect(() => {
-    if (latestEntropyData) {
-      setData("latestEntropyQuery", latestEntropyData);
-      const nextEntropyRotationBlock = adventurer?.revealBlock!;
-      const adventurerStartBlock = adventurer?.startBlock!;
-      const blockDifference = nextEntropyRotationBlock - adventurerStartBlock;
-      const blocksPerHour = latestEntropyData.entropy[0].blocksPerHour;
-      const blocksPerMillisecond = blocksPerHour / (60 * 60 * 1000);
-      const secondsUntilNextEntropy = blockDifference / blocksPerMillisecond;
-      const adventurerCreatedTime = new Date(
-        adventurer?.createdTime!
-      ).getTime();
-      const nextEntropyTime = adventurerCreatedTime + secondsUntilNextEntropy;
-      setNextEntropyTime(nextEntropyTime);
-    }
-  }, [latestEntropyData]);
-
-  const currentTime = new Date().getTime();
-
   if (showBattleLog) {
     return <BattleLog />;
   }
 
   return (
     <div className="sm:w-2/3 flex flex-col sm:flex-row h-full">
-      <InterludeScreen nextEntropyTime={nextEntropyTime} />
+      {blockData?.block_number! < adventurer?.revealBlock! && (
+        <InterludeScreen />
+      )}
       <div className="sm:w-1/2 order-1 sm:order-2">
         {hasBeast ? (
           <BeastDisplay beastData={beastData} />