feat(homebrew): Continued updating gm screen with new expansion content

scottbenton · Mar 11, 2024 · 895a3fd · 895a3fd
1 parent 4927746
commit 895a3fd
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 85 deletions.
diff --git a/src/pages/Campaign/CampaignGMScreenPage/components/CharacterCard/CharacterCard.tsx b/src/pages/Campaign/CampaignGMScreenPage/components/CharacterCard/CharacterCard.tsx
@@ -32,9 +32,12 @@ export function CharacterCard(props: CharacterCardProps) {
 
   const showNewExpansions = useNewCustomContentPage();
   const stats = useStore((store) => store.rules.stats);
+  const conditionMeters = useStore((store) => store.rules.conditionMeters);
 
   const trackLabel = useGameSystemValue<string>({
-    [GAME_SYSTEMS.IRONSWORN]: "XP and Bonds",
+    [GAME_SYSTEMS.IRONSWORN]: showNewExpansions
+      ? "XP and Legacy Tracks"
+      : "XP and Bonds",
     [GAME_SYSTEMS.STARFORGED]: "Legacy Tracks",
   });
   const TrackComponent = useGameSystemValue<
@@ -155,42 +158,64 @@ export function CharacterCard(props: CharacterCardProps) {
           )}
         </Box>
         <Box display={"flex"} px={2} pb={2}>
-          <StatComponent
-            label={"Health"}
-            value={character.health}
-            disableRoll
-            sx={{ mr: 1, mt: 1 }}
-          />
-          <StatComponent
-            label={"Spirit"}
-            value={character.spirit}
-            disableRoll
-            sx={{ mr: 1, mt: 1 }}
-          />
+          {showNewExpansions ? (
+            <>
+              {Object.keys(conditionMeters)
+                .filter((cm) => !conditionMeters[cm].shared)
+                .map((cm) => (
+                  <StatComponent
+                    key={cm}
+                    label={conditionMeters[cm].label}
+                    value={
+                      character.conditionMeters?.[cm] ??
+                      conditionMeters[cm].value
+                    }
+                    sx={{ mr: 1, mt: 1 }}
+                    disableRoll
+                  />
+                ))}
+            </>
+          ) : (
+            <>
+              <StatComponent
+                label={"Health"}
+                value={character.health}
+                disableRoll
+                sx={{ mr: 1, mt: 1 }}
+              />
+              <StatComponent
+                label={"Spirit"}
+                value={character.spirit}
+                disableRoll
+                sx={{ mr: 1, mt: 1 }}
+              />
+              {customTracks.map((customTrack) => {
+                const index = customTrackValues[customTrack.label];
+                const value =
+                  index !== undefined &&
+                  typeof customTrack.values[index].value === "number"
+                    ? (customTrack.values[index].value as number)
+                    : 0;
+
+                return (
+                  <StatComponent
+                    key={customTrack.label}
+                    label={customTrack.label}
+                    value={value}
+                    disableRoll
+                    sx={{ mr: 1, mt: 1 }}
+                  />
+                );
+              })}
+            </>
+          )}
+
           <StatComponent
             label={"Momentum"}
             value={character.momentum}
             disableRoll
             sx={{ mr: 1, mt: 1 }}
           />
-          {customTracks.map((customTrack) => {
-            const index = customTrackValues[customTrack.label];
-            const value =
-              index !== undefined &&
-              typeof customTrack.values[index].value === "number"
-                ? (customTrack.values[index].value as number)
-                : 0;
-
-            return (
-              <StatComponent
-                key={customTrack.label}
-                label={customTrack.label}
-                value={value}
-                disableRoll
-                sx={{ mr: 1, mt: 1 }}
-              />
-            );
-          })}
         </Box>
         <Accordion>
           <AccordionSummary expandIcon={<ExpandMoreIcon />}>
@@ -216,23 +241,6 @@ export function CharacterCard(props: CharacterCardProps) {
             <TrackComponent characterId={characterId} />
           </AccordionDetails>
         </Accordion>
-
-        {/* <Accordion>
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            Notes
-          </AccordionSummary>
-          <AccordionDetails>
-            {character.shareNotesWithGM ? (
-              <CharacterNotesComponent uid={uid} characterId={characterId} />
-            ) : (
-              <Typography>
-                {user?.displayName ?? "User"} has not opted-in to sharing their
-                character notes with you. They can change this under the
-                character tab on their character sheet.
-              </Typography>
-            )}
-          </AccordionDetails>
-        </Accordion> */}
       </Box>
     </Card>
   );

diff --git a/src/pages/Campaign/CampaignGMScreenPage/components/CharacterCard/IronswornTracks.tsx b/src/pages/Campaign/CampaignGMScreenPage/components/CharacterCard/IronswornTracks.tsx
@@ -2,8 +2,9 @@ import SpentIcon from "@mui/icons-material/RadioButtonChecked";
 import EarnedIcon from "@mui/icons-material/HighlightOff";
 import EmptyIcon from "@mui/icons-material/RadioButtonUnchecked";
 import { useStore } from "stores/store";
-import { Box, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { ProgressTrack } from "components/features/ProgressTrack";
+import { useNewCustomContentPage } from "hooks/featureFlags/useNewCustomContentPage";
 
 const totalExp = 30;
 export interface IronswornTracksProps {
@@ -12,6 +13,15 @@ export interface IronswornTracksProps {
 
 export function IronswornTracks(props: IronswornTracksProps) {
   const { characterId } = props;
+
+  const showNewExpansions = useNewCustomContentPage();
+  const specialTracks = useStore((store) => store.rules.specialTracks);
+  const specialTrackValues = useStore(
+    (store) =>
+      store.campaigns.currentCampaign.characters.characterMap[characterId]
+        .specialTracks ?? {}
+  );
+
   const xp = useStore(
     (store) =>
       store.campaigns.currentCampaign.characters.characterMap[characterId]
@@ -44,10 +54,30 @@ export function IronswornTracks(props: IronswornTracksProps) {
           ))}
         </Box>
       </Box>
-      <Typography fontFamily={(theme) => theme.fontFamilyTitle} sx={{ mt: 2 }}>
-        Bonds
-      </Typography>
-      <ProgressTrack value={bondValue} max={40} />
+      {showNewExpansions ? (
+        <Stack spacing={2} mt={2}>
+          {Object.keys(specialTracks)
+            .filter((specialTrack) => !specialTracks[specialTrack].shared)
+            .map((specialTrack) => (
+              <ProgressTrack
+                key={specialTrack}
+                label={specialTracks[specialTrack].label}
+                value={specialTrackValues[specialTrack]?.value ?? 0}
+                max={40}
+              />
+            ))}
+        </Stack>
+      ) : (
+        <>
+          <Typography
+            fontFamily={(theme) => theme.fontFamilyTitle}
+            sx={{ mt: 2 }}
+          >
+            Bonds
+          </Typography>
+          <ProgressTrack value={bondValue} max={40} />
+        </>
+      )}
     </Box>
   );
 }
diff --git a/src/pages/Campaign/CampaignGMScreenPage/components/CharacterCard/LegacyTracks.tsx b/src/pages/Campaign/CampaignGMScreenPage/components/CharacterCard/LegacyTracks.tsx
@@ -1,4 +1,5 @@
 import { Stack } from "@mui/material";
+import { useNewCustomContentPage } from "hooks/featureFlags/useNewCustomContentPage";
 import { LegacyTrack } from "pages/Character/CharacterSheetPage/Tabs/TracksSection/LegacyTrack";
 import { useStore } from "stores/store";
 
@@ -15,26 +16,54 @@ export function LegacyTracks(props: LegacyTracksProps) {
         .legacyTracks ?? {}
   );
 
+  const showNewExpansions = useNewCustomContentPage();
+  const specialTracks = useStore((store) => store.rules.specialTracks);
+  const specialTrackValues = useStore(
+    (store) =>
+      store.campaigns.currentCampaign.characters.characterMap[characterId]
+        .specialTracks ?? {}
+  );
+
   return (
     <Stack spacing={2} px={2} sx={{ overflowX: "auto" }}>
-      <LegacyTrack
-        label={"Quests"}
-        value={legacyTracks.quests?.value ?? 0}
-        checkedExperience={legacyTracks.quests?.spentExperience ?? {}}
-        isLegacy={legacyTracks.quests?.isLegacy ?? false}
-      />
-      <LegacyTrack
-        label={"Bonds"}
-        value={legacyTracks.bonds?.value ?? 0}
-        checkedExperience={legacyTracks.bonds?.spentExperience ?? {}}
-        isLegacy={legacyTracks.bonds?.isLegacy ?? false}
-      />
-      <LegacyTrack
-        label={"Discoveries"}
-        value={legacyTracks.discoveries?.value ?? 0}
-        checkedExperience={legacyTracks.discoveries?.spentExperience ?? {}}
-        isLegacy={legacyTracks.discoveries?.isLegacy ?? false}
-      />
+      {showNewExpansions ? (
+        <>
+          {Object.keys(specialTracks)
+            .filter((st) => !specialTracks[st].shared)
+            .map((st) => (
+              <LegacyTrack
+                key={st}
+                label={specialTracks[st].label}
+                value={specialTrackValues[st]?.value}
+                checkedExperience={
+                  specialTrackValues[st]?.spentExperience ?? {}
+                }
+                isLegacy={specialTrackValues[st]?.isLegacy ?? false}
+              />
+            ))}
+        </>
+      ) : (
+        <>
+          <LegacyTrack
+            label={"Quests"}
+            value={legacyTracks.quests?.value ?? 0}
+            checkedExperience={legacyTracks.quests?.spentExperience ?? {}}
+            isLegacy={legacyTracks.quests?.isLegacy ?? false}
+          />
+          <LegacyTrack
+            label={"Bonds"}
+            value={legacyTracks.bonds?.value ?? 0}
+            checkedExperience={legacyTracks.bonds?.spentExperience ?? {}}
+            isLegacy={legacyTracks.bonds?.isLegacy ?? false}
+          />
+          <LegacyTrack
+            label={"Discoveries"}
+            value={legacyTracks.discoveries?.value ?? 0}
+            checkedExperience={legacyTracks.discoveries?.spentExperience ?? {}}
+            isLegacy={legacyTracks.discoveries?.isLegacy ?? false}
+          />
+        </>
+      )}
     </Stack>
   );
 }
diff --git a/src/pages/Campaign/CampaignGMScreenPage/components/TracksSection.tsx b/src/pages/Campaign/CampaignGMScreenPage/components/TracksSection.tsx
@@ -1,4 +1,4 @@
-import { Stack } from "@mui/material";
+import { Grid, Stack } from "@mui/material";
 import { SectionHeading } from "components/shared/SectionHeading";
 import { supplyTrack } from "data/defaultTracks";
 import { Track } from "components/features/Track";
@@ -8,6 +8,7 @@ import { useStore } from "stores/store";
 import { ClockSection } from "components/features/charactersAndCampaigns/Clocks/ClockSection";
 import { useGameSystem } from "hooks/useGameSystem";
 import { GAME_SYSTEMS } from "types/GameSystems.type";
+import { useNewCustomContentPage } from "hooks/featureFlags/useNewCustomContentPage";
 
 export interface TracksSectionProps {
   supply: number;
@@ -21,6 +22,15 @@ export function TracksSection(props: TracksSectionProps) {
     (store) => store.campaigns.currentCampaign.updateCampaignSupply
   );
 
+  const conditionMeterRules = useStore((store) => store.rules.conditionMeters);
+  const conditionMeterValues = useStore(
+    (store) => store.campaigns.currentCampaign.currentCampaign?.conditionMeters
+  );
+  const showNewConditionMeters = useNewCustomContentPage();
+  const updateCampaignConditionMeter = useStore(
+    (store) => store.campaigns.currentCampaign.updateCampaignConditionMeter
+  );
+
   const tracks = useStore(
     (store) => store.campaigns.currentCampaign.tracks.trackMap
   );
@@ -48,19 +58,49 @@ export function TracksSection(props: TracksSectionProps) {
 
   return (
     <Stack spacing={2} sx={{ pb: 2 }}>
-      <SectionHeading label={"Supply"} />
-      <Track
-        sx={{
-          mt: 4,
-          mb: 4,
-          maxWidth: 400,
-          px: { xs: 2, sm: 3 },
-        }}
-        min={supplyTrack.min}
-        max={supplyTrack.max}
-        value={supply}
-        onChange={(newValue) => updateCampaignSupply(newValue).catch(() => {})}
-      />
+      {showNewConditionMeters ? (
+        <>
+          <SectionHeading label={"Shared Condition Meters"} />
+          <Grid container spacing={2}>
+            {Object.keys(conditionMeterRules)
+              .filter((cm) => conditionMeterRules[cm].shared)
+              .map((cm) => (
+                <Grid key={cm} item xs={12} sm={6} md={4}>
+                  <Track
+                    min={conditionMeterRules[cm].min}
+                    max={conditionMeterRules[cm].max}
+                    value={
+                      conditionMeterValues?.[cm] ??
+                      conditionMeterRules[cm].value
+                    }
+                    label={conditionMeterRules[cm].label}
+                    onChange={(newValue) =>
+                      updateCampaignConditionMeter(cm, newValue).catch(() => {})
+                    }
+                  />
+                </Grid>
+              ))}
+          </Grid>
+        </>
+      ) : (
+        <>
+          <SectionHeading label={"Supply"} />
+          <Track
+            sx={{
+              mt: 4,
+              mb: 4,
+              maxWidth: 400,
+              px: { xs: 2, sm: 3 },
+            }}
+            min={supplyTrack.min}
+            max={supplyTrack.max}
+            value={supply}
+            onChange={(newValue) =>
+              updateCampaignSupply(newValue).catch(() => {})
+            }
+          />
+        </>
+      )}
       <div>
         <ProgressTrackList
           tracks={frays}