- improve prescience dialog styles

- fix golden tokens
Provable-Games · Sep 18, 2024 · b0a7d55 · b0a7d55
1 parent 598ab8b
commit b0a7d55
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 79 deletions.
diff --git a/ui/src/app/components/adventurer/Info.tsx b/ui/src/app/components/adventurer/Info.tsx
@@ -1,24 +1,22 @@
-import { useMemo } from "react";
-import { Contract } from "starknet";
-import { Adventurer, NullAdventurer, NullItem } from "@/app/types";
+import { ItemDisplay } from "@/app/components/adventurer/ItemDisplay";
+import LevelBar from "@/app/components/adventurer/LevelBar";
+import AutoScrolling from "@/app/components/animations/AutoScrolling";
+import { HealthCountDown } from "@/app/components/CountDown";
 import {
-  HeartIcon,
   CoinIcon,
+  HeartIcon,
   QuestionMarkIcon,
 } from "@/app/components/icons/Icons";
-import { ItemDisplay } from "@/app/components/adventurer/ItemDisplay";
-import LevelBar from "@/app/components/adventurer/LevelBar";
-import { getItemData, getKeyFromValue } from "@/app/lib/utils";
+import LootIconLoader from "@/app/components/icons/Loader";
 import { useQueriesStore } from "@/app/hooks/useQueryStore";
-import useUIStore from "@/app/hooks/useUIStore";
-import { Item } from "@/app/types";
-import { HealthCountDown } from "@/app/components/CountDown";
-import { GameData } from "@/app/lib/data/GameData";
 import useTransactionCartStore from "@/app/hooks/useTransactionCartStore";
-import { calculateLevel } from "@/app/lib/utils";
+import useUIStore from "@/app/hooks/useUIStore";
 import { vitalityIncrease } from "@/app/lib/constants";
-import LootIconLoader from "@/app/components/icons/Loader";
-import AutoScrolling from "@/app/components/animations/AutoScrolling";
+import { GameData } from "@/app/lib/data/GameData";
+import { calculateLevel, getItemData, getKeyFromValue } from "@/app/lib/utils";
+import { Adventurer, Item, NullAdventurer, NullItem } from "@/app/types";
+import { useMemo } from "react";
+import { Contract } from "starknet";
 
 interface InfoProps {
   adventurer: Adventurer | undefined;
@@ -281,7 +279,7 @@ export default function Info({
               {attributes.map((attribute) => (
                 <div
                   key={attribute.key}
-                  className="flex flex-wrap justify-between p-1 bg-terminal-green text-terminal-black w-full border border-terminal-black relative"
+                  className="flex flex-wrap justify-between p-1 bg-terminal-green text-terminal-black w-full border border-terminal-black relative whitespace-nowrap"
                 >
                   {attribute.key}
                   <span className="flex flex-row items-center">

diff --git a/ui/src/app/components/encounters/EncounterTable.tsx b/ui/src/app/components/encounters/EncounterTable.tsx
@@ -58,6 +58,9 @@ const EncounterTable = () => {
   let armoritems: Item[] =
     data.itemsByAdventurerQuery?.items
       .map((item) => ({ ...item, ...getItemData(item.item ?? "") }))
+      .filter((item) => {
+        return item.equipped;
+      })
       .filter((item) => {
         return !["Weapon", "Ring", "Neck"].includes(item.slot!);
       }) || [];
@@ -91,7 +94,7 @@ const EncounterTable = () => {
             <th className="py-2 px-1 sm:pr-3 border-b border-terminal-green">
               XP
             </th>
-            <th className="py-2 px-1 sm:pr-3 border-b border-terminal-green">
+            <th className="py-2 px-1 sm:pr-3 border-b border-terminal-green w-20">
               Type
             </th>
             <th className="py-2 px-1 sm:pr-3 border-b border-terminal-green">
@@ -158,18 +161,20 @@ const EncounterTable = () => {
                       <span className="flex">{encounter.xp}</span>
                     </td>
                     <td
-                      className={`py-2 border-b border-terminal-green tooltip flex flex-row gap-1 ${
-                        nameMatch
-                          ? "text-red-500"
-                          : weaponMatch
-                          ? "text-green-500"
-                          : "text-terminal-yellow"
-                      }`}
+                      className={`relative py-2 border-b border-terminal-green tooltip flex flex-row gap-1 w-20`}
                     >
                       <span className="uppercase">{encounter.encounter}</span>
                       {encounter.encounter === "Beast" &&
                         encounter.level >= 19 && (
-                          <span className="tooltiptext bottom">
+                          <span
+                            className={`absolute bottom-[0px] text-xs w-20 whitespace-nowrap uppercase text-ellipsis overflow-hidden ${
+                              nameMatch
+                                ? "text-red-500"
+                                : weaponMatch
+                                ? "text-green-500"
+                                : "text-terminal-yellow"
+                            }`}
+                          >
                             {encounter.specialName}
                           </span>
                         )}

diff --git a/ui/src/app/components/encounters/EnounterDialog.tsx b/ui/src/app/components/encounters/EnounterDialog.tsx
@@ -30,7 +30,7 @@ const EncounterDialog = () => {
             className="w-10 h-10 absolute top-0 left-[-40px] z-10 border-y border-l border-bottom border-terminal-green bg-terminal-black cursor-pointer"
             onClick={() => showEncounterTable(false)}
           />
-          <div className="flex flex-col gap-5 sm:gap-0 sm:flex-row justify-between w-[600px] bg-terminal-black max-h-[300px] border border-terminal-green text-xs sm:text-base overflow-y-scroll default-scroll cursor-pointer hover:shadow-lg">
+          <div className="flex flex-col gap-5 sm:gap-0 sm:flex-row justify-between w-[625px] bg-terminal-black max-h-[350px] border border-terminal-green text-xs sm:text-base overflow-y-scroll default-scroll cursor-pointer hover:shadow-lg">
             <EncounterTable />
           </div>
         </div>

diff --git a/ui/src/app/components/encounters/Paths.tsx b/ui/src/app/components/encounters/Paths.tsx
@@ -16,7 +16,7 @@ import { GameData } from "@/app/lib/data/GameData";
 import { calculateLevel, getItemData, getPotionPrice } from "@/app/lib/utils";
 import { Step } from "@/app/lib/utils/processFutures";
 import { Item } from "@/app/types";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   getItems,
   getPaths,
@@ -98,6 +98,10 @@ const Paths = () => {
     [updatedAdventurer, updatedAdventurer?.xp, adventurerEntropy, items]
   );
 
+  useEffect(() => {
+    setSelectedBeastEncounter(null);
+  }, [items, outcomesWithPath]);
+
   const startingLevel = adventurer?.level;
 
   return (
@@ -255,20 +259,22 @@ const Paths = () => {
                               <span className="flex">{encounter.xp}</span>
                             </td>
                             <td
-                              className={`py-2 border-b border-terminal-green tooltip flex flex-row gap-1 ${
-                                nameMatch
-                                  ? "text-red-500"
-                                  : weaponMatch
-                                  ? "text-green-500"
-                                  : "text-terminal-yellow"
-                              }`}
+                              className={`relative py-2 border-b border-terminal-green tooltip flex flex-row gap-1 w-20`}
                             >
                               <span className="uppercase">
                                 {encounter.encounter}
                               </span>
                               {encounter.encounter === "Beast" &&
                                 (encounter?.level || 1) >= 19 && (
-                                  <span className="tooltiptext bottom">
+                                  <span
+                                    className={`absolute bottom-[0px] text-xs w-20 whitespace-nowrap uppercase text-ellipsis overflow-hidden ${
+                                      nameMatch
+                                        ? "text-red-500"
+                                        : weaponMatch
+                                        ? "text-green-500"
+                                        : "text-terminal-yellow"
+                                    }`}
+                                  >
                                     {encounter.specialName}
                                   </span>
                                 )}
@@ -395,10 +401,8 @@ const Paths = () => {
                               }`}
                             >
                               {encounter.isCritical! && (
-                                <span className="flex justify-center">
-                                  {encounter.isCritical!
-                                    ? `${encounter.isCritical}%`
-                                    : "No"}
+                                <span className="flex justify-center uppercase">
+                                  Yes
                                 </span>
                               )}
                             </td>

diff --git a/ui/src/app/lib/utils/syscalls.ts b/ui/src/app/lib/utils/syscalls.ts
@@ -410,7 +410,8 @@ export function createSyscalls({
     spawnCalls: Call[],
     dollarPrice: bigint,
     freeVRF: boolean,
-    costToPlay?: number
+    costToPlay?: number,
+    goldenTokenId?: string
   ) => [
     ...(freeVRF
       ? []
@@ -425,16 +426,19 @@ export function createSyscalls({
             ],
           },
         ]),
-
-    {
-      contractAddress: lordsContract?.address ?? "",
-      entrypoint: "approve",
-      calldata: [
-        gameContract?.address ?? "",
-        (costToPlay! * 1.1)!.toString(),
-        "0",
-      ],
-    },
+    ...(goldenTokenId === "0"
+      ? [
+          {
+            contractAddress: lordsContract?.address ?? "",
+            entrypoint: "approve",
+            calldata: [
+              gameContract?.address ?? "",
+              (costToPlay! * 1.1)!.toString(),
+              "0",
+            ],
+          },
+        ]
+      : []),
     ...spawnCalls,
   ];
 
@@ -478,22 +482,19 @@ export function createSyscalls({
       if (!enoughEth && !freeVRF) {
         return handleInsufficientFunds("eth");
       }
-      if (!enoughLords) {
+      if (!enoughLords && goldenTokenId === "0") {
         return handleInsufficientFunds("lords");
       }
 
-      if (goldenTokenId === "0") {
-        spawnCalls = addApprovalCalls(
-          spawnCalls,
-          dollarPrice,
-          freeVRF,
-          costToPlay
-        );
-      }
+      spawnCalls = addApprovalCalls(
+        spawnCalls,
+        dollarPrice,
+        freeVRF,
+        costToPlay,
+        goldenTokenId
+      );
     }
 
-    console.log(spawnCalls);
-
     await executeSpawn(formData, spawnCalls);
   };
 

diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
@@ -52,18 +52,16 @@ import useTransactionManager from "@/app/hooks/useTransactionManager";
 import useUIStore, { ScreenPage } from "@/app/hooks/useUIStore";
 import { fetchBalances, fetchEthBalance } from "@/app/lib/balances";
 import { goldenTokenClient } from "@/app/lib/clients";
-import { checkArcadeConnector } from "@/app/lib/connectors";
 import { VRF_WAIT_TIME } from "@/app/lib/constants";
 import { networkConfig } from "@/app/lib/networkConfig";
-import Storage from "@/app/lib/storage";
 import {
   calculateChaBoostRemoved,
   calculateVitBoostRemoved,
   indexAddress,
   padAddress,
 } from "@/app/lib/utils";
 import { useSyscalls } from "@/app/lib/utils/syscalls";
-import { BurnerStorage, Menu, ZeroUpgrade } from "@/app/types";
+import { Menu, ZeroUpgrade } from "@/app/types";
 import { useQuery } from "@apollo/client";
 import CartridgeConnector from "@cartridge/connector";
 import { sepolia } from "@starknet-react/chains";
@@ -470,22 +468,10 @@ function Home() {
   );
 
   const goldenTokenVariables = useMemo(() => {
-    const storage: BurnerStorage = Storage.get("burners");
-    const isArcade = checkArcadeConnector(connector);
-    if (isArcade && address) {
-      const masterAccount = storage[address].masterAccount;
-      return {
-        contractAddress:
-          networkConfig[network!].goldenTokenAddress.toLowerCase(),
-        owner: padAddress(masterAccount ?? ""),
-      };
-    } else {
-      return {
-        contractAddress:
-          networkConfig[network!].goldenTokenAddress.toLowerCase(),
-        owner: padAddress(address ?? ""),
-      };
-    }
+    return {
+      contractAddress: networkConfig[network!].goldenTokenAddress.toLowerCase(),
+      owner: padAddress(address ?? ""),
+    };
   }, [address]);
 
   const goldenTokenClientInstance = useMemo(