add basics for stances, pretty sure this wont build

chrisinajar · Jan 22, 2024 · 4a5ba70 · 4a5ba70
1 parent 68216b5
commit 4a5ba70
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 34 deletions.
diff --git a/src/components/combat/index.tsx b/src/components/combat/index.tsx
@@ -28,6 +28,7 @@ import { useDelay } from "src/hooks/use-delay";
 import { useLocation } from "src/hooks/use-location";
 
 import { CombatDisplay } from "./combat-display";
+import { StanceSelector } from "./stance-selector";
 import { itemAllowsAutoBattle, itemImprovesAutoBattle } from "src/helpers";
 
 type PartialMonsterInstance = Pick<MonsterInstance, "monster" | "id">;
@@ -42,7 +43,7 @@ declare global {
 
 export function Combat(): JSX.Element {
   const [autoBattleAttackType, setAutoBattleAttackType] = useState<AttackType>(
-    AttackType.Melee
+    AttackType.Melee,
   );
   const [mobKillCount, setMobKillCount] = useState<number>(0);
   const [autoBattleCount, setAutoBattleCount] = useState<number>(0);
@@ -73,17 +74,17 @@ export function Combat(): JSX.Element {
   let playerList: PublicHero[] = locationDetails?.players ?? [];
 
   const fightingMonster = monstersData?.monsters?.find(
-    (m) => m.id === currentFight
+    (m) => m.id === currentFight,
   );
   let canAutoBattle = false;
   let improvedAutoBattleCount = 0;
 
   if (hero) {
     canAutoBattle = !!hero.inventory.find((item) =>
-      itemAllowsAutoBattle(item.baseItem)
+      itemAllowsAutoBattle(item.baseItem),
     );
     improvedAutoBattleCount = hero.inventory.filter((item) =>
-      itemImprovesAutoBattle(item.baseItem)
+      itemImprovesAutoBattle(item.baseItem),
     ).length;
   }
 
@@ -104,7 +105,7 @@ export function Combat(): JSX.Element {
   autoBattleRef.current = async () => {
     setAutoBattleCount(
       (autoBattleCount + 1) %
-        (autoBattleSkipCount / Math.pow(2, improvedAutoBattleCount))
+        (autoBattleSkipCount / Math.pow(2, improvedAutoBattleCount)),
     );
     setAutoBattleBars([
       Math.random() > 0.5 ? Math.random() * 100 : autoBattleBars[0],
@@ -162,7 +163,7 @@ export function Combat(): JSX.Element {
         setMonster(monsterList[0].id);
       } else {
         const existingMonster = monstersData.monsters.find(
-          (m) => m.id === monster
+          (m) => m.id === monster,
         );
         if (!existingMonster) {
           setMonster(monsterList[0].id);
@@ -183,7 +184,7 @@ export function Combat(): JSX.Element {
 
   async function handleFight() {
     const existingMonster = monstersData?.monsters.find(
-      (m) => m.id === monster
+      (m) => m.id === monster,
     );
     setCurrentFight(monster);
     setActiveDuel("");
@@ -413,35 +414,41 @@ export function Combat(): JSX.Element {
           </Grid>
         )}
         {fightingMonster && (
-          <CombatDisplay
-            key={`${fightingMonster.id}-${currentFightId}`}
-            fight={fightingMonster}
-            onError={() => {
-              refetch();
-              setCurrentFight(null);
-            }}
-            autoBattle={autoBattle}
-            canAutoBattle={canAutoBattle}
-            onAutoBattle={handleAutoBattle}
-            fightMutationRef={fightMutationRef}
-            onVictory={() => setMobKillCount(mobKillCount + 1)}
-          />
+          <React.Fragment>
+            <StanceSelector />
+            <CombatDisplay
+              key={`${fightingMonster.id}-${currentFightId}`}
+              fight={fightingMonster}
+              onError={() => {
+                refetch();
+                setCurrentFight(null);
+              }}
+              autoBattle={autoBattle}
+              canAutoBattle={canAutoBattle}
+              onAutoBattle={handleAutoBattle}
+              fightMutationRef={fightMutationRef}
+              onVictory={() => setMobKillCount(mobKillCount + 1)}
+            />
+          </React.Fragment>
         )}
         {activeDuelPlayer && (
-          <CombatDisplay
-            key={`${activeDuelPlayer.id}-${currentFightId}`}
-            fight={{
-              id: activeDuelPlayer.id,
-              monster: activeDuelPlayer,
-            }}
-            onError={() => {
-              refetch();
-              setCurrentFight(null);
-            }}
-            duel
-            autoBattle={false}
-            canAutoBattle={false}
-          />
+          <React.Fragment>
+            <StanceSelector />
+            <CombatDisplay
+              key={`${activeDuelPlayer.id}-${currentFightId}`}
+              fight={{
+                id: activeDuelPlayer.id,
+                monster: activeDuelPlayer,
+              }}
+              onError={() => {
+                refetch();
+                setCurrentFight(null);
+              }}
+              duel
+              autoBattle={false}
+              canAutoBattle={false}
+            />
+          </React.Fragment>
         )}
         <Grid item lg={3} xs={6}>
           <Button

diff --git a/src/components/combat/stance-selector.tsx b/src/components/combat/stance-selector.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+
+import { useHero } from "src/hooks/use-hero";
+import { HeroStance } from "src/generated/graphql";
+
+const stanceDescriptions: { [x in HeroStance]: string } = {
+  [HeroStance.Normal]: "Normal stance with no pros or cons.",
+};
+
+export function StanceSelector(): JSX.Element {
+  const hero = useHero();
+
+  console.log(hero.availableStances);
+
+  const stances = hero.availableStances.map((stance) => ({
+    name: stance,
+    tooltip: stanceDescriptions[stance],
+  }));
+
+  function handleChangeStance(stance) {
+    console.log("Setting stance to", stance, hero);
+  }
+
+  // do not show selector if there aren't enough stances
+  if (stances.length < 2) {
+    return null;
+  }
+
+  return (
+    <Grid item xs={12}>
+      <Grid container sx={{ textAlign: "center" }} columns={6}>
+        <Grid item xs={6}>
+          <hr />
+        </Grid>
+        <Grid item lg={1} xs={6}>
+          <Typography variant="h5">Select Stance</Typography>
+        </Grid>
+        {stances.map((stance) => (
+          <Grid item lg={1} md={2} sm={3} xs={6} key={stance.name}>
+            <Tooltip title={stance.tooltip}>
+              <Button
+                variant={
+                  hero.activeStance === stance.name ? "outlined" : "text"
+                }
+                sx={{ fontSize: "1rem", padding: 2 }}
+                size="large"
+                id={`set-stance-${stance.name.toLowerCase()}`}
+                onClick={() => handleChangeStance(stance.name)}
+                aria-label={`set stance ${stance.name}`}
+                /* startIcon={<ShieldIcon />} */
+              >
+                {stance.name}
+              </Button>
+            </Tooltip>
+          </Grid>
+        ))}
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/src/me.graphql b/src/me.graphql
@@ -334,6 +334,8 @@ query Me {
             }
           }
         }
+        activeStance
+        availableStances
       }
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -334,6 +334,8 @@ query Me { @@
                 }
               }
             }
+            activeStance
+            availableStances
           }
         }
       }
@@ Expand Down @@