Update mobile styles to use slimmer, more evenly spaced stat buttons

scottbenton · Nov 3, 2024 · 603cfdf · 603cfdf
1 parent 0e086f3
commit 603cfdf
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 193 deletions.
diff --git a/src/components/shared/Layout/PageHeader.tsx b/src/components/shared/Layout/PageHeader.tsx
@@ -30,7 +30,6 @@ export function PageHeader(props: PageHeaderProps) {
           pt: isEmpty ? 4 : 2,
           pb: isEmpty ? 8 : 6,
           mb: isEmpty ? -8 : -4,
-          // width: "100vw",
           backgroundColor:
             isLightTheme && background?.type === "separator"
               ? theme.palette.darkGrey.main

diff --git a/src/pages/Character/CharacterSheetPage/components/MobileStatTrack.tsx b/src/pages/Character/CharacterSheetPage/components/MobileStatTrack.tsx
@@ -5,6 +5,7 @@ import { StatComponent } from "components/features/characters/StatComponent";
 import { useEffect, useRef } from "react";
 import { useDebouncedState } from "hooks/useDebouncedState";
 import { useStore } from "stores/store";
+import ResetIcon from "@mui/icons-material/Replay";
 
 export interface MobileStatTrackProps {
   label: string;
@@ -15,10 +16,11 @@ export interface MobileStatTrackProps {
   disableRoll: boolean;
   smallSize?: boolean;
   ignoreAdds?: boolean;
+  resetValue?: number;
 }
 
 export function MobileStatTrack(props: MobileStatTrackProps) {
-  const { label, value, min, max, onChange, disableRoll, smallSize, ignoreAdds } = props;
+  const { label, value, min, max, onChange, disableRoll, smallSize, ignoreAdds, resetValue } = props;
 
   const hasUnsavedChangesRef = useRef(false);
   const announce = useStore((store) => store.appState.announce);
@@ -50,6 +52,7 @@ export function MobileStatTrack(props: MobileStatTrackProps) {
   return (
     <Stack
       alignItems="center"
+      justifyContent="space-between"
       direction={smallSize ? "column" : "row"}
       sx={(theme) => ({
         boxShadow: smallSize ? `inset 0px 0px 0px 1px ${theme.palette.divider}` : undefined,
@@ -63,17 +66,51 @@ export function MobileStatTrack(props: MobileStatTrackProps) {
     >
       { smallSize && (
         <>
-          <StatComponent
-            disableRoll={disableRoll}
-            label={label}
-            value={localValue}
-            sx={{
-              width: 65,
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-            }}
-            ignoreAdds={ignoreAdds}
-          />
+          <Box
+            onClick={() => resetValue !== undefined ? handleChange(resetValue) : {}}
+            position={"relative"}
+            sx={resetValue !== undefined ? (theme) => ({
+              outlineColor: theme.palette.primary.main,
+              outlineWidth: 0,
+              outlineStyle: "solid",
+              borderTopLeftRadius: 8,
+              borderTopRightRadius: 8,
+              transition: theme.transitions.create(
+                ["border-color", "outline-width"],
+                { duration: theme.transitions.duration.shorter }
+              ),
+              "&:hover": {
+                outlineWidth: 2,
+                borderColor: theme.palette.primary.main,
+                cursor: "pointer",
+              },
+            }) : undefined }
+          >
+            <StatComponent
+              disableRoll={disableRoll}
+              label={label}
+              value={localValue}
+              sx={{
+                width: 60,
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+              }}
+              ignoreAdds={ignoreAdds}
+            />
+            {resetValue !== undefined && (
+              <ResetIcon
+                aria-label={"Reset Momentum Button"}
+                sx={(theme) => ({
+                  position: "absolute",
+                  top: theme.spacing(3.25),
+                  left: theme.spacing(0.25),
+                  width: theme.spacing(1.5),
+                  height: theme.spacing(1.5),
+                  color: theme.palette.action.active,
+                })}
+              />
+            )}
+          </Box>
           <Box>
             <IconButton
               disabled={localValue <= min}

diff --git a/src/pages/Character/CharacterSheetPage/components/MomentumTrackMobile.tsx b/src/pages/Character/CharacterSheetPage/components/MomentumTrackMobile.tsx
diff --git a/src/pages/Character/CharacterSheetPage/components/StatsSectionMobile.tsx b/src/pages/Character/CharacterSheetPage/components/StatsSectionMobile.tsx
@@ -10,13 +10,6 @@ export function StatsSectionMobile() {
     (store) => store.characters.currentCharacter.currentCharacter?.stats
   );
 
-  const adds = useStore(
-    (store) => store.characters.currentCharacter.currentCharacter?.adds ?? 0
-  );
-  const updateAdds = useStore(
-    (store) => store.characters.currentCharacter.updateCurrentCharacter
-  );
-
   return (
     <Box mt={1} mx={-1}>
       <Box
@@ -25,22 +18,16 @@ export function StatsSectionMobile() {
         justifyContent={"center"}
         flexDirection={"row"}
         flexWrap={"wrap"}
-        gap={0.5}
+        gap={0.75}
       >
         {Object.keys(ruleStats).map((statKey) => (
           <StatComponent
             key={statKey}
             label={ruleStats[statKey].label}
             value={stats?.[statKey] ?? 0}
-            sx={{ width: 54 }}
+            sx={{ width: 60 }}
           />
         ))}
-        <StatComponent
-          label={"Adds"}
-          updateTrack={(newValue) => updateAdds({ adds: newValue })}
-          value={adds}
-          sx={{ width: 54 }}
-        />
       </Box>
     </Box>
   );

diff --git a/src/pages/Character/CharacterSheetPage/components/TracksSection.tsx b/src/pages/Character/CharacterSheetPage/components/TracksSection.tsx
@@ -5,11 +5,8 @@ import ResetIcon from "@mui/icons-material/Replay";
 import { useStore } from "stores/store";
 import { useIsMobile } from "hooks/useIsMobile";
 import { MobileStatTrack } from "./MobileStatTrack";
-import { MomentumTrackMobile } from "./MomentumTrackMobile";
 import { NonLinearMeters } from "./NonLinearMeters";
 
-export type TRACK_KEYS = "health" | "spirit" | "supply" | "momentum";
-
 export function TracksSection() {
   const conditionMeters = useStore((store) => store.rules.conditionMeters);
 
@@ -89,15 +86,22 @@ export function TracksSection() {
 
   const isMobile = useIsMobile();
 
+  const adds = useStore(
+    (store) => store.characters.currentCharacter.currentCharacter?.adds ?? 0
+  );
+  const updateAdds = useStore(
+    (store) => store.characters.currentCharacter.updateCurrentCharacter
+  );
+
   return (
     <Grid
       container
-      spacing={isMobile ? 1 : 2}
-      sx={isMobile ? { mt: 0 } : undefined}
+      spacing={isMobile ? 0.75 : 2}
+      sx={isMobile ? { mt: 0, justifyContent: "center" } : undefined}
     >
       {Object.keys(conditionMeters).map((conditionMeterKey) =>
         isMobile ? (
-          <Grid item xs={6} key={conditionMeterKey}>
+          <Grid item key={conditionMeterKey}>
             <MobileStatTrack
               label={conditionMeters[conditionMeterKey].label}
               value={getConditionMeterValue(conditionMeterKey)}
@@ -107,6 +111,7 @@ export function TracksSection() {
               disableRoll={!conditionMeters[conditionMeterKey].rollable}
               min={conditionMeters[conditionMeterKey].min}
               max={conditionMeters[conditionMeterKey].max}
+              smallSize
             />
           </Grid>
         ) : (
@@ -124,15 +129,33 @@ export function TracksSection() {
         )
       )}
       {isMobile ? (
-        <Grid item xs={6}>
-          <MomentumTrackMobile
-            value={momentum}
-            onChange={(newValue) => updateMomentum(newValue)}
-            min={momentumTrack.min}
-            max={maxMomentum ?? momentumTrack.max}
-            resetValue={momentumResetValue ?? momentumTrack.startingValue}
-          />
-        </Grid>
+        <>
+          <Grid item>
+            <MobileStatTrack
+              label={"Momentum"}
+              value={momentum}
+              onChange={(newValue) => updateMomentum(newValue)}
+              disableRoll={true}
+              min={momentumTrack.min}
+              max={maxMomentum ?? momentumTrack.max}
+              smallSize
+              ignoreAdds={true}
+              resetValue={momentumResetValue}
+            />
+          </Grid>
+          <Grid item>
+            <MobileStatTrack
+              label={"Adds"}
+              value={adds}
+              onChange={(newValue) => updateAdds({ adds: newValue })}
+              disableRoll={true}
+              min={-9}
+              max={9}
+              smallSize
+              resetValue={0}
+            />
+          </Grid>
+        </>
       ) : (
         <Grid item xs={12}>
           <Box display={"flex"}>

diff --git a/...ages/Character/CharacterSheetPage/noteLayout/CharacterSidebar/AssetsPanel/AssetsPanel.tsx b/...ages/Character/CharacterSheetPage/noteLayout/CharacterSidebar/AssetsPanel/AssetsPanel.tsx
@@ -121,7 +121,7 @@ export function AssetsPanel() {
     (store) => store.campaigns.currentCampaign.assets.updateAssetControl
   );
   return (
-    <>
+    <Box pl={2} width={"calc(100% - 16px)"} >
       {isInCampaign && isStarforged && (
         <>
           <SidebarHeading
@@ -229,6 +229,6 @@ export function AssetsPanel() {
           })
         }
       />
-    </>
+    </Box>
   );
 }