- add vitality and charisma item swap warnings

- add swap warning when in a beast battle
Provable-Games · Sep 16, 2024 · aed15a5 · aed15a5
1 parent ca73455
commit aed15a5
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 43 deletions.
diff --git a/ui/src/app/components/adventurer/BeastSwapWarning.tsx b/ui/src/app/components/adventurer/BeastSwapWarning.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@/app/components/buttons/Button";
+
+interface BeastSwapWarningProps {
+  handleConfirmAction: () => void;
+}
+
+export const BeastSwapWarning = ({
+  handleConfirmAction,
+}: BeastSwapWarningProps) => {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-terminal-black border border-terminal-green p-4 max-w-md w-full">
+        <div className="mb-4">
+          <h1 className="text-xl font-bold uppercase">Beast Attack Warming</h1>
+        </div>
+        <p className="mb-2">
+          Swapping an item during a beast battle will result in a beast counter
+          attack.
+        </p>
+        <p className="mb-2 uppercase">
+          Swap multiple items together to avoid multiple attacks.
+        </p>
+        <div className="flex justify-end gap-2">
+          <Button onClick={handleConfirmAction}>Confirm</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/ui/src/app/components/adventurer/StatRemovalWarning.tsx b/ui/src/app/components/adventurer/StatRemovalWarning.tsx
@@ -0,0 +1,43 @@
+import { Button } from "@/app/components/buttons/Button";
+
+interface StatRemovalWarningProps {
+  statWarning: "charisma" | "vitality";
+  handleConfirmAction: () => void;
+}
+
+export const StatRemovalWarning = ({
+  statWarning,
+  handleConfirmAction,
+}: StatRemovalWarningProps) => {
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-terminal-black border border-terminal-green p-4 max-w-md w-full">
+        <div className="mb-4">
+          <h1 className="text-xl font-bold uppercase">
+            {statWarning} Removal Warning
+          </h1>
+        </div>
+        {statWarning === "vitality" ? (
+          <>
+            <p className="mb-2">
+              Removing vitality will reduce your max health by 15hp per vitality
+              removed.
+            </p>
+            <p className="mb-2 uppercase">
+              If your current health is larger than the new calculated max
+              health, it will be lost and cannot be recovered.
+            </p>
+          </>
+        ) : (
+          <p className="mb-2">
+            Removing charisma will reduce your max health by 15hp per vitality
+            removed.
+          </p>
+        )}
+        <div className="flex justify-end gap-2">
+          <Button onClick={handleConfirmAction}>Confirm</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/ui/src/app/containers/BeastScreen.tsx b/ui/src/app/containers/BeastScreen.tsx
@@ -1,31 +1,32 @@
-import React, { useState, useEffect } from "react";
-import { Contract } from "starknet";
+import { BeastSwapWarning } from "@/app/components/adventurer/BeastSwapWarning";
+import { BattleDialog } from "@/app/components/BattleDialog";
 import { BattleDisplay } from "@/app/components/beast/BattleDisplay";
 import { BeastDisplay } from "@/app/components/beast/BeastDisplay";
-import useLoadingStore from "@/app/hooks/useLoadingStore";
-import useAdventurerStore from "@/app/hooks/useAdventurerStore";
-import { useQueriesStore } from "@/app/hooks/useQueryStore";
-import { processBeastName, getItemData, getBeastData } from "@/app/lib/utils";
-import { Battle, NullBeast, ButtonData, Beast } from "@/app/types";
 import { Button } from "@/app/components/buttons/Button";
-import useUIStore from "@/app/hooks/useUIStore";
+import { FleeDialog } from "@/app/components/FleeDialog";
+import {
+  CompleteIcon,
+  GiBattleGearIcon,
+  HeartIcon,
+  SkullCrossedBonesIcon,
+} from "@/app/components/icons/Icons";
 import ActionMenu from "@/app/components/menu/ActionMenu";
 import { useController } from "@/app/context/ControllerContext";
+import useAdventurerStore from "@/app/hooks/useAdventurerStore";
+import useLoadingStore from "@/app/hooks/useLoadingStore";
+import { useQueriesStore } from "@/app/hooks/useQueryStore";
+import { soundSelector, useUiSounds } from "@/app/hooks/useUiSound";
+import useUIStore from "@/app/hooks/useUIStore";
+import { getBeastData, getItemData, processBeastName } from "@/app/lib/utils";
 import {
   getGoldReward,
   nextAttackResult,
   simulateBattle,
   simulateFlee,
 } from "@/app/lib/utils/processFutures";
-import {
-  GiBattleGearIcon,
-  HeartIcon,
-  SkullCrossedBonesIcon,
-  CompleteIcon,
-} from "@/app/components/icons/Icons";
-import { FleeDialog } from "@/app/components/FleeDialog";
-import { BattleDialog } from "@/app/components/BattleDialog";
-import { useUiSounds, soundSelector } from "@/app/hooks/useUiSound";
+import { Battle, Beast, ButtonData, NullBeast } from "@/app/types";
+import React, { useEffect, useState } from "react";
+import { Contract } from "starknet";
 
 interface BeastScreenProps {
   attack: (
@@ -56,6 +57,7 @@ export default function BeastScreen({
   const showFleeDialog = useUIStore((state) => state.showFleeDialog);
   const tillDeath = useUIStore((state) => state.tillDeath);
   const setTillDeath = useUIStore((state) => state.setTillDeath);
+  const equipItems = useUIStore((state) => state.equipItems);
   const resetNotification = useLoadingStore((state) => state.resetNotification);
   const [showBattleLog, setShowBattleLog] = useState(false);
   const [showFutures, setShowFutures] = useState(false);
@@ -67,6 +69,7 @@ export default function BeastScreen({
   const formatBattles = useQueriesStore(
     (state) => state.data.battlesByBeastQuery?.battles || []
   );
+  const [beastSwapWarning, setBeastSwapWarning] = useState<boolean>(false);
 
   const { play: clickPlay } = useUiSounds(soundSelector.click);
 
@@ -237,12 +240,25 @@ export default function BeastScreen({
     </div>
   );
 
+  useEffect(() => {
+    if (equipItems.length > 0 && hasBeast) {
+      setBeastSwapWarning(true);
+    }
+  }, [equipItems]);
+
   if (showBattleLog) {
     return <BattleLog />;
   }
 
   return (
     <div className="sm:w-2/3 flex flex-col sm:flex-row h-full">
+      {beastSwapWarning && (
+        <BeastSwapWarning
+          handleConfirmAction={() => {
+            setBeastSwapWarning(false);
+          }}
+        />
+      )}
       <div className="sm:w-1/2 order-1 sm:order-2 h-3/4 sm:h-full">
         {hasBeast ? (
           <BeastDisplay beastData={beastData} beastsContract={beastsContract} />

diff --git a/ui/src/app/containers/UpgradeScreen.tsx b/ui/src/app/containers/UpgradeScreen.tsx
@@ -23,8 +23,6 @@ import useUIStore from "@/app/hooks/useUIStore";
 import { vitalityIncrease } from "@/app/lib/constants";
 import { GameData } from "@/app/lib/data/GameData";
 import {
-  calculateChaBoostRemoved,
-  calculateVitBoostRemoved,
   getItemData,
   getItemPrice,
   getPotionPrice,
@@ -80,14 +78,11 @@ export default function UpgradeScreen({
   const setUpgrades = useUIStore((state) => state.setUpgrades);
   const purchaseItems = useUIStore((state) => state.purchaseItems);
   const setPurchaseItems = useUIStore((state) => state.setPurchaseItems);
-  const equipItems = useUIStore((state) => state.equipItems);
   const dropItems = useUIStore((state) => state.dropItems);
   const entropyReady = useUIStore((state) => state.entropyReady);
   const onKatana = useUIStore((state) => state.onKatana);
   const chaBoostRemoved = useUIStore((state) => state.chaBoostRemoved);
   const vitBoostRemoved = useUIStore((state) => state.vitBoostRemoved);
-  const setVitBoostRemoved = useUIStore((state) => state.setVitBoostRemoved);
-  const setChaBoostRemoved = useUIStore((state) => state.setChaBoostRemoved);
   const pendingMessage = useLoadingStore((state) => state.pendingMessage);
   const [summary, setSummary] = useState<UpgradeSummary>({
     Stats: { ...ZeroUpgrade },
@@ -237,26 +232,6 @@ export default function UpgradeScreen({
     (state) => state.data.itemsByAdventurerQuery?.items || []
   );
 
-  useEffect(() => {
-    const chaBoostRemoved = calculateChaBoostRemoved(
-      purchaseItems,
-      adventurer!,
-      adventurerItems,
-      equipItems,
-      dropItems
-    );
-    setChaBoostRemoved(chaBoostRemoved);
-
-    const vitBoostRemoved = calculateVitBoostRemoved(
-      purchaseItems,
-      adventurer!,
-      adventurerItems,
-      equipItems,
-      dropItems
-    );
-    setVitBoostRemoved(vitBoostRemoved);
-  }, [purchaseItems, adventurer, adventurerItems, equipItems, dropItems]);
-
   useEffect(() => {
     setTotalVitality((adventurer?.vitality ?? 0) + selectedVitality);
     setTotalCharisma(

diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
@@ -56,7 +56,12 @@ 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 { indexAddress, padAddress } from "@/app/lib/utils";
+import {
+  calculateChaBoostRemoved,
+  calculateVitBoostRemoved,
+  indexAddress,
+  padAddress,
+} from "@/app/lib/utils";
 import { useSyscalls } from "@/app/lib/utils/syscalls";
 import { BurnerStorage, Menu, ZeroUpgrade } from "@/app/types";
 import { useQuery } from "@apollo/client";
@@ -65,6 +70,7 @@ import { sepolia } from "@starknet-react/chains";
 import { useConnect, useContract, useProvider } from "@starknet-react/core";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { constants } from "starknet";
+import { StatRemovalWarning } from "./components/adventurer/StatRemovalWarning";
 import CollectionsLeaderboardScreen from "./containers/CollectionsLeaderboardScreen";
 import Onboarding from "./containers/Onboarding";
 
@@ -735,6 +741,49 @@ function Home() {
     fetchFreeVRF();
   }, []);
 
+  const vitBoostRemoved = useUIStore((state) => state.vitBoostRemoved);
+  const setVitBoostRemoved = useUIStore((state) => state.setVitBoostRemoved);
+  const chaBoostRemoved = useUIStore((state) => state.chaBoostRemoved);
+  const setChaBoostRemoved = useUIStore((state) => state.setChaBoostRemoved);
+  const purchaseItems = useUIStore((state) => state.purchaseItems);
+  const equipItems = useUIStore((state) => state.equipItems);
+  const dropItems = useUIStore((state) => state.dropItems);
+  const adventurerItems = useQueriesStore(
+    (state) => state.data.itemsByAdventurerQuery?.items || []
+  );
+
+  const [statRemovalWarning, setStatRemovalWarning] = useState<
+    "vitality" | "charisma" | ""
+  >("");
+
+  useEffect(() => {
+    const chaBoostRemoved = calculateChaBoostRemoved(
+      purchaseItems,
+      adventurer!,
+      adventurerItems,
+      equipItems,
+      dropItems
+    );
+    setChaBoostRemoved(chaBoostRemoved);
+
+    const vitBoostRemoved = calculateVitBoostRemoved(
+      purchaseItems,
+      adventurer!,
+      adventurerItems,
+      equipItems,
+      dropItems
+    );
+    setVitBoostRemoved(vitBoostRemoved);
+  }, [purchaseItems, adventurer, adventurerItems, equipItems, dropItems]);
+
+  useEffect(() => {
+    if (vitBoostRemoved > 0) {
+      setStatRemovalWarning("vitality");
+    } else if (chaBoostRemoved > 0) {
+      setStatRemovalWarning("charisma");
+    }
+  }, [vitBoostRemoved, chaBoostRemoved]);
+
   return (
     <>
       {openInterlude && !onKatana && (
@@ -770,6 +819,14 @@ function Home() {
                 showTopUpDialog={showTopUpDialog}
               />
             )}
+            {statRemovalWarning && (
+              <StatRemovalWarning
+                statWarning={statRemovalWarning}
+                handleConfirmAction={() => {
+                  setStatRemovalWarning("");
+                }}
+              />
+            )}
             {!spawnLoader && hash && (
               <div className="sm:hidden">
                 <TxActivity />