diff --git a/ui/src/app/components/beast/BeastDisplay.tsx b/ui/src/app/components/beast/BeastDisplay.tsx index d8b30e699..8aaf052a4 100644 --- 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(null); + const animationFrameRef = React.useRef(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 (
-

{beastName}

+

+ {beastName} +

diff --git a/ui/src/app/lib/networkConfig.ts b/ui/src/app/lib/networkConfig.ts index 8e9dc5860..d93c74e6c 100644 --- 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 index c594c8ea3..dc78362cb 100644 --- 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" );