a bunch of attacker UI, fix dust in header

src/components/app-bar-hero-stats.tsx

@@ -17,6 +17,7 @@ export type AppBarHero = Pick<
   | "location"
   | "stats"
   | "needed"
+  | "enchantingDust"
   | "class"
 >;
 

src/game/locations/settlement-manager.graphql

@@ -55,6 +55,8 @@ query SettlementManager {
         }
       }
       type
+      health
+      maxHealth
       availableUpgrades {
         cost {
           name
@@ -90,6 +92,8 @@ query SettlementManager {
           }
         }
         type
+        health
+        maxHealth
         availableUpgrades {
           cost {
             name
@@ -121,6 +125,8 @@ query SettlementManager {
         }
       }
       type
+      health
+      maxHealth
     }
   }
 }

src/game/locations/settlement/attack-location.graphql

@@ -27,6 +27,21 @@ mutation AttackLocation($target: LocationInput!, $units: MilitaryUnitInput!) {
       }
       type
     }
+    damage
+    totalDamage
+    targetCasualties {
+      enlisted
+      soldier
+      veteran
+      ghost
+      fortifications
+    }
+    attackerCasualties {
+      enlisted
+      soldier
+      veteran
+      ghost
+    }
     account {
       id
       nextAllowedAction

src/game/locations/settlement/attack-results-modal.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+
+import CircularProgress from "@mui/material/CircularProgress";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Typography from "@mui/material/Typography";
+
+import {
+  Hero,
+  AttackLocationMutation,
+  AttackCasualties,
+} from "src/generated/graphql";
+
+export function AttackResultsModal({
+  open,
+  onClose,
+  loading,
+  attackResults,
+  hero,
+}: {
+  open: boolean;
+  onClose: () => void;
+  loading: boolean;
+  attackResults?: AttackLocationMutation["attackLocation"];
+  hero: Hero;
+}): JSX.Element {
+  // console.log(attackResults);
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          bgcolor: "background.paper",
+          padding: [2, 4],
+          minWidth: "320px",
+          maxWidth: "580px",
+          width: "80%",
+          textAlign: "center",
+        }}
+        aria-labelledby="attack-results-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        {loading && <CircularProgress />}
+        {attackResults && (
+          <>
+            {attackResults.target.owner === hero.id && (
+              <Typography
+                id="attack-results-modal-title"
+                variant="h5"
+                component="h2"
+              >
+                Your troops have claimed this location in your name, it now
+                belongs to your settlement.
+              </Typography>
+            )}
+            {attackResults.target.owner !== hero.id && (
+              <>
+                <Typography
+                  id="attack-results-modal-title"
+                  variant="h5"
+                  component="h2"
+                >
+                  Attack results for {attackResults.target.location.x},{" "}
+                  {attackResults.target.location.y}
+                </Typography>
+                <Typography variant="subtitle1">
+                  Owner:{" "}
+                  <strong>
+                    {attackResults?.target?.publicOwner?.name ?? "Unknown"}
+                  </strong>
+                </Typography>
+              </>
+            )}
+            <br />
+            <Typography>
+              You lost {casualtiesToString(attackResults.attackerCasualties)}
+            </Typography>
+            <Typography>
+              Your opponent lost{" "}
+              {casualtiesToString(attackResults.targetCasualties)}
+            </Typography>
+            {attackResults.totalDamage > 0 && (
+              <Typography>
+                Your troops dealt {attackResults.totalDamage.toLocaleString()}{" "}
+                damage
+              </Typography>
+            )}
+            {attackResults.damage > 0 && (
+              <Typography>
+                The target location received{" "}
+                {attackResults.damage.toLocaleString()} damage
+                {attackResults.totalDamage > attackResults.damage &&
+                  ", the rest was absorbed by garrisons."}
+              </Typography>
+            )}
+            {attackResults.damage === 0 && (
+              <Typography>All damage was absorbed by garrisons.</Typography>
+            )}
+          </>
+        )}
+      </Box>
+    </Modal>
+  );
+}
+
+function casualtiesToString(casualties: AttackCasualties) {
+  const results = Object.keys(casualties)
+    .map((name) => {
+      const value = casualties[name as keyof AttackCasualties];
+
+      if (value && value > 0) {
+        return `${value.toLocaleString()} ${name}`;
+      }
+      return false;
+    })
+    .filter((val): val is string => !!val);
+  if (results.length) {
+    return results.join(", ");
+  }
+  return "nothing";
+}

src/game/locations/settlement/index.tsx

@@ -508,6 +508,7 @@ export function SettlementManager({
                 location={selectedBuilding}
                 resources={resources}
                 hero={hero}
+                refetch={refetch}
               />
             </TabPanel>
           </Grid>

src/game/locations/settlement/military.tsx

@@ -18,21 +18,27 @@ import {
   useAttackLocationMutation,
 } from "src/generated/graphql";
 
+import { AttackResultsModal } from "./attack-results-modal";
+
 export function Military({
   location,
   hero,
   resources,
+  refetch,
 }: {
   location: PlayerLocation | null;
   hero: Hero;
   resources: CampResources[];
+  refetch: () => void;
 }): JSX.Element {
   const [enlistedCount, setEnlistedCount] = useState(0);
   const [soldierCount, setSoldierCount] = useState(0);
   const [veteranCount, setVeteranCount] = useState(0);
   const [ghostCount, setGhostCount] = useState(0);
+  const [isAttackResultsOpen, setAttackResultsOpen] = useState(false);
   const [moveTroupsMutation] = useMoveTroupsMutation();
-  const [attackLocationMutation] = useAttackLocationMutation();
+  const [attackLocationMutation, { data: attackData, loading: attackLoading }] =
+    useAttackLocationMutation();
   const hostileTarget = location?.owner !== hero.id;
 
   const enlistedResource = location?.resources?.find(
@@ -46,14 +52,6 @@ export function Military({
   );
   const ghostResource = location?.resources?.find((r) => r.name === "ghost");
 
-  console.log({
-    hostileTarget,
-    enlistedResource,
-    soldierResource,
-    veteranResource,
-    ghostResource,
-  });
-
   const handleSliderChange = (event: Event, newValue: number | number[]) => {
     setEnlistedCount(newValue as number);
   };
@@ -90,11 +88,11 @@ export function Military({
     });
   }
 
-  function handleAttackLocation() {
+  async function handleAttackLocation() {
     if (!location) {
       return;
     }
-    attackLocationMutation({
+    const { data } = await attackLocationMutation({
       variables: {
         target: {
           x: location.location.x,
@@ -109,10 +107,24 @@ export function Military({
         },
       },
     });
+
+    if (data?.attackLocation) {
+      setAttackResultsOpen(true);
+      if (data.attackLocation.target.owner === hero.id) {
+        refetch();
+      }
+    }
   }
 
   return (
     <>
+      <AttackResultsModal
+        open={isAttackResultsOpen}
+        onClose={() => setAttackResultsOpen(false)}
+        attackResults={attackData?.attackLocation}
+        loading={attackLoading}
+        hero={hero}
+      />
       <Typography variant="h4">Military actions</Typography>
       <Typography variant="body1">
         Use this UI to move your tropps or attack adjacent empires. You can only