send selected stance with combat data

chrisinajar · Jul 30, 2024 · 6cdf622 · 6cdf622
1 parent 5ff28a7
commit 6cdf622
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 18 deletions.
diff --git a/src/components/combat/attack-hero.graphql b/src/components/combat/attack-hero.graphql
@@ -1,5 +1,5 @@
-mutation AttackHero($id: ID!, $attackType: AttackType) {
-  attackHero(id: $id, attackType: $attackType) {
+mutation AttackHero($id: ID!, $attackType: AttackType, $stance: HeroStance) {
+  attackHero(id: $id, attackType: $attackType, stance: $stance) {
     account {
       id
       nextAllowedAction

diff --git a/src/components/combat/combat-display.tsx b/src/components/combat/combat-display.tsx
@@ -22,10 +22,14 @@ import {
   useAttackHeroMutation,
   EnchantmentType,
   InventoryItem,
+  HeroStance,
+  Hero,
 } from "src/generated/graphql";
 
 import { itemDisplayName } from "src/helpers";
 
+import { StanceSelector } from "./stance-selector";
+
 type CombatDisplayProps = {
   autoBattle: boolean;
   canAutoBattle: boolean;
@@ -45,6 +49,7 @@ type CombatDisplayProps = {
   onError?: (e: any) => void;
   onAutoBattle?: (monsterId: string, attackType: AttackType) => void;
   fightMutationRef?: React.MutableRefObject<(attackType: AttackType) => void>;
+  hero: Hero;
 };
 
 export function CombatDisplay(props: CombatDisplayProps): JSX.Element | null {
@@ -57,6 +62,7 @@ export function CombatDisplay(props: CombatDisplayProps): JSX.Element | null {
     onAutoBattle,
     fightMutationRef,
     duel,
+    hero,
   } = props;
   const [killedByAnother, setKilledByAnother] = useState<boolean>(false);
   const [fightMutation, { data: fightData, loading: fightLoading }] =
@@ -79,6 +85,10 @@ export function CombatDisplay(props: CombatDisplayProps): JSX.Element | null {
     null;
   const theme = useTheme();
 
+  const [desiredStance, setDesiredStance] = useState<HeroStance>(
+    hero.activeStance || HeroStance.Normal,
+  );
+
   const showAutoBattle = !autoBattle && canAutoBattle;
 
   useEffect(() => {
@@ -110,6 +120,7 @@ export function CombatDisplay(props: CombatDisplayProps): JSX.Element | null {
           variables: {
             id: monsterId,
             attackType,
+            stance: desiredStance,
           },
         });
         if (data.data?.attackHero.victory) {
@@ -122,6 +133,7 @@ export function CombatDisplay(props: CombatDisplayProps): JSX.Element | null {
           variables: {
             monster: monsterId,
             attackType,
+            stance: desiredStance,
           },
         });
         if (data.data?.fight.victory) {
@@ -162,6 +174,7 @@ export function CombatDisplay(props: CombatDisplayProps): JSX.Element | null {
 
   return (
     <React.Fragment>
+      <StanceSelector onChange={setDesiredStance} />
       <Grid
         id="combat-display"
         sx={{

diff --git a/src/components/combat/fight.graphql b/src/components/combat/fight.graphql
@@ -1,5 +1,5 @@
-mutation Fight($monster: ID!, $attackType: AttackType) {
-  fight(monster: $monster, attackType: $attackType) {
+mutation Fight($monster: ID!, $attackType: AttackType, $stance: HeroStance) {
+  fight(monster: $monster, attackType: $attackType, stance: $stance) {
     victory
     experience
     gold

diff --git a/src/components/combat/index.tsx b/src/components/combat/index.tsx
@@ -21,14 +21,14 @@ import {
   MonsterInstance,
   AttackType,
   PublicHero,
+  HeroStance,
 } from "src/generated/graphql";
 
 import { useHero } from "src/hooks/use-hero";
 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">;
@@ -41,7 +41,7 @@ declare global {
   }
 }
 
-export function Combat(): JSX.Element {
+export function Combat(): JSX.Element | null {
   const [autoBattleAttackType, setAutoBattleAttackType] = useState<AttackType>(
     AttackType.Melee,
   );
@@ -241,11 +241,13 @@ export function Combat(): JSX.Element {
     duelPlayer = "";
   }
 
-  if (hero) {
-    const showAll = hero.levelCap > 100;
-    if (!showAll) {
-      challenges = challenges.slice(0, hero.level);
-    }
+  if (!hero) {
+    return null;
+  }
+
+  const showAll = hero.levelCap > 100;
+  if (!showAll) {
+    challenges = challenges.slice(0, hero.level);
   }
 
   playerList = playerList.filter((p) => p.combat.health > 0);
@@ -419,9 +421,9 @@ export function Combat(): JSX.Element {
         )}
         {fightingMonster && (
           <React.Fragment>
-            <StanceSelector />
             <CombatDisplay
               key={`${fightingMonster.id}-${currentFightId}`}
+              hero={hero}
               fight={fightingMonster}
               onError={() => {
                 refetch();
@@ -437,9 +439,9 @@ export function Combat(): JSX.Element {
         )}
         {activeDuelPlayer && (
           <React.Fragment>
-            <StanceSelector />
             <CombatDisplay
               key={`${activeDuelPlayer.id}-${currentFightId}`}
+              hero={hero}
               fight={{
                 id: activeDuelPlayer.id,
                 monster: activeDuelPlayer,

diff --git a/src/components/combat/stance-selector.tsx b/src/components/combat/stance-selector.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
@@ -33,8 +33,13 @@ const stanceDescriptions: { [x in HeroStance]: string } = {
   [HeroStance.Focus]: "???",
 };
 
-export function StanceSelector(): JSX.Element | null {
+export function StanceSelector(props: {
+  onChange?: (stance: HeroStance) => void;
+}): JSX.Element | null {
   const hero = useHero();
+  const [selectedStance, setSelectedStance] = useState(
+    hero?.activeStance || HeroStance.Normal,
+  );
 
   if (!hero) {
     return null;
@@ -46,6 +51,10 @@ export function StanceSelector(): JSX.Element | null {
 
   function handleChangeStance(stance: HeroStance) {
     console.log("Setting stance to", stance, hero);
+    setSelectedStance(stance);
+    if (props.onChange) {
+      props.onChange(stance);
+    }
   }
 
   // do not show selector if there aren't enough stances
@@ -66,9 +75,7 @@ export function StanceSelector(): JSX.Element | null {
           <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"
-                }
+                variant={selectedStance === stance.name ? "outlined" : "text"}
                 sx={{ fontSize: "1rem", padding: 2 }}
                 size="large"
                 id={`set-stance-${stance.name.toLowerCase()}`}