- fix beast name display

- fix mobile notification size - fix item xp updates
Provable-Games · Jun 26, 2024 · bbe7ff6 · bbe7ff6
1 parent eb5255c
commit bbe7ff6
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 47 deletions.
diff --git a/ui/src/app/components/beast/BeastDisplay.tsx b/ui/src/app/components/beast/BeastDisplay.tsx
@@ -1,5 +1,5 @@
 import { Contract, CallData } from "starknet";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { getBeastData } from "@/app/lib/utils";
 import { HeartIcon } from "@/app/components/icons/Icons";
@@ -9,6 +9,7 @@ import { Beast } from "@/app/types";
 import { HealthCountDown } from "@/app/components/CountDown";
 import { getKeyFromValue } from "@/app/lib/utils";
 import { GameData } from "@/app/lib/data/GameData";
+import useUIStore from "@/app/hooks/useUIStore";
 
 interface BeastDisplayProps {
   beastData: Beast;
@@ -31,6 +32,8 @@ export const BeastDisplay = ({
 
   const gameData = new GameData();
 
+  const onKatana = useUIStore((state) => state.onKatana);
+
   const handleIsMinted = async () => {
     const minted = await beastsContract.call(
       "isMinted",
@@ -54,16 +57,71 @@ export const BeastDisplay = ({
   };
 
   useEffect(() => {
-    if (namedBeast) {
+    if (namedBeast && !onKatana) {
       handleIsMinted();
     }
   }, [namedBeast]);
 
+  // handle name scroll
+  const scrollableRef = React.useRef<HTMLDivElement | null>(null);
+  const animationFrameRef = React.useRef<number | null>(null);
+
+  function startScrolling() {
+    const el = scrollableRef.current;
+    if (!el) return; // Guard clause
+    const endPos = el.scrollWidth - el.offsetWidth; // Calculate the width of the overflow
+
+    // Use this to control the speed of the scroll
+    const duration = 4000; // In milliseconds
+
+    const start = performance.now();
+    const initialScrollLeft = el.scrollLeft;
+
+    requestAnimationFrame(function step(now) {
+      const elapsed = now - start;
+      let rawProgress = elapsed / duration;
+
+      let progress;
+      if (rawProgress <= 0.5) {
+        // For the first half, we scale rawProgress from [0, 0.5] to [0, 1]
+        progress = rawProgress * 2;
+      } else {
+        // For the second half, we scale rawProgress from [0.5, 1] to [1, 0]
+        progress = 2 - rawProgress * 2;
+      }
+
+      el.scrollLeft = initialScrollLeft + progress * endPos;
+
+      if (rawProgress < 1) {
+        animationFrameRef.current = requestAnimationFrame(step);
+      } else {
+        // Restart the animation once it's done
+        startScrolling();
+      }
+    });
+  }
+
+  useEffect(() => {
+    startScrolling();
+
+    // Cleanup animation frame on unmount
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []); // Empty dependency array means this effect runs once when component mounts
+
   return (
     <div className="relative flex flex-col items-center h-full border-2 border-terminal-green">
       <div className="flex flex-col w-full sm:p-3 uppercase">
         <div className="flex justify-between items-center py-1 sm:py-3 text-2xl sm:text-4xl border-b border-terminal-green px-2 ">
-          <p className="w-1/4">{beastName}</p>
+          <p
+            className="w-3/4 overflow-x-auto whitespace-nowrap item-scroll"
+            ref={scrollableRef}
+          >
+            {beastName}
+          </p>
           <div
             className={`text-4xl flex ${
               beastData?.health === 0 ? "text-red-600" : "text-terminal-green"

diff --git a/ui/src/app/components/notifications/NotificationComponent.tsx b/ui/src/app/components/notifications/NotificationComponent.tsx
@@ -106,7 +106,7 @@ const NotificationComponent = ({
       unmountOnExit
     >
       <div
-        className={`fixed top-1/16 left-[5%] w-[90%] sm:left-3/8 sm:w-1/4 border-4 z-50 shadow-xl bg-terminal-black h-1/4 sm:h-1/6 ${
+        className={`fixed top-0 sm:top-1/16 left-[5%] w-[90%] sm:left-3/8 sm:w-1/4 border-4 z-50 shadow-xl bg-terminal-black h-1/6 ${
           error ? "border-red-600" : "border-terminal-green"
         }`}
       >

diff --git a/ui/src/app/lib/networkConfig.ts b/ui/src/app/lib/networkConfig.ts
@@ -8,9 +8,9 @@ export const networkConfig = {
     ethAddress:
       "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
     gameAddress:
-      "0x05545d79b497a9b924ed3321361520566c90dc1abb0aa1643cc4839b12c73136",
+      "0x07001aadba2bd1c15305c7f8aff04326df337841b9f495382611d13f34f4594a",
     lordsAddress:
-      "0x0213c1cd576885fac65226505f8e01b908ad569c138e34f17ca220d67dd3c106",
+      "0x07c0ee4ec03d7ac318212ae19d0214fd94d060b376e70aa3c6d7c263a0430dfb",
     beastsAddress:
       "0x020c7c02c973ffa3a48fb78e9472b679c72c11b59512f524154ade0a39f54136",
     goldenTokenAddress:
@@ -60,7 +60,7 @@ export const networkConfig = {
     tokensGQLURL: "",
     ethAddress: "0x0",
     gameAddress:
-      "0x0450b39bb6f163dca690a13f71b8fce368f86f3a04285967ccea55c033bd6448",
+      "0x032b1aff0c52827277524dd899e420f2fe3560efd0631984f76f230006d0aa29",
     lordsAddress: "0x0",
     beastsAddress: "0x0",
     goldenTokenAddress: "0x0",

diff --git a/ui/src/app/lib/utils/syscalls.ts b/ui/src/app/lib/utils/syscalls.ts
@@ -217,8 +217,8 @@ export function syscalls({
     const weaponIndex = queryData.itemsByAdventurerQuery?.items.findIndex(
       (item: Item) => item.item == weapon
     );
-    const chest = adventurerState.chest;
     setData("itemsByAdventurerQuery", itemsXP[0], "xp", weaponIndex);
+    const chest = adventurerState.chest;
     const chestIndex = queryData.itemsByAdventurerQuery?.items.findIndex(
       (item: Item) => item.item == chest
     );
@@ -515,45 +515,6 @@ export function syscalls({
           });
           setAdventurer(discovery.data[0]);
           discoveries.unshift(discovery.data[1]);
-          if (
-            discovery.name === "DodgedObstacle" ||
-            discovery.name === "HitByObstacle"
-          ) {
-            updateItemsXP(discovery.data[0], discovery.data[2]);
-            const itemsLeveledUpEvents = events.filter(
-              (event) => event.name === "ItemsLeveledUp"
-            );
-            for (let itemsLeveledUpEvent of itemsLeveledUpEvents) {
-              for (let itemLeveled of itemsLeveledUpEvent.data[1]) {
-                const ownedItemIndex =
-                  queryData.itemsByAdventurerQuery?.items.findIndex(
-                    (item: Item) => item.item == itemLeveled.item
-                  );
-                if (itemLeveled.suffixUnlocked) {
-                  setData(
-                    "itemsByAdventurerQuery",
-                    itemLeveled.special1,
-                    "special1",
-                    ownedItemIndex
-                  );
-                }
-                if (itemLeveled.prefixesUnlocked) {
-                  setData(
-                    "itemsByAdventurerQuery",
-                    itemLeveled.special2,
-                    "special2",
-                    ownedItemIndex
-                  );
-                  setData(
-                    "itemsByAdventurerQuery",
-                    itemLeveled.special3,
-                    "special3",
-                    ownedItemIndex
-                  );
-                }
-              }
-            }
-          }
           if (discovery.name === "DiscoveredLoot") {
             const filteredEquipmentChangedEvents = events.filter(
               (event) => event.name === "EquipmentChanged"
@@ -579,6 +540,49 @@ export function syscalls({
         ],
       });
 
+      const filteredObstacles = events.filter(
+        (event) =>
+          event.name === "DodgedObstacle" || event.name === "HitByObstacle"
+      );
+      if (filteredObstacles.length > 0) {
+        for (let discovery of filteredDiscoveries) {
+          updateItemsXP(discovery.data[0], discovery.data[2]);
+          const itemsLeveledUpEvents = events.filter(
+            (event) => event.name === "ItemsLeveledUp"
+          );
+          for (let itemsLeveledUpEvent of itemsLeveledUpEvents) {
+            for (let itemLeveled of itemsLeveledUpEvent.data[1]) {
+              const ownedItemIndex =
+                queryData.itemsByAdventurerQuery?.items.findIndex(
+                  (item: Item) => item.item == itemLeveled.item
+                );
+              if (itemLeveled.suffixUnlocked) {
+                setData(
+                  "itemsByAdventurerQuery",
+                  itemLeveled.special1,
+                  "special1",
+                  ownedItemIndex
+                );
+              }
+              if (itemLeveled.prefixesUnlocked) {
+                setData(
+                  "itemsByAdventurerQuery",
+                  itemLeveled.special2,
+                  "special2",
+                  ownedItemIndex
+                );
+                setData(
+                  "itemsByAdventurerQuery",
+                  itemLeveled.special3,
+                  "special3",
+                  ownedItemIndex
+                );
+              }
+            }
+          }
+        }
+      }
+
       const filteredBeastDiscoveries = events.filter(
         (event) => event.name === "DiscoveredBeast"
       );