header rearranging

chrisinajar · Feb 29, 2024 · ac16595 · ac16595
1 parent daf77d2
commit ac16595
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/src/components/app-bar.tsx b/src/components/app-bar.tsx
@@ -26,18 +26,17 @@ export function AppBar({ hero }: AppBarProps): JSX.Element {
       createTheme({
         palette: {
           mode: darkMode ? "dark" : "light",
-          primary: darkMode 
-            ?{
-              main: "#0d2b4a" 
-            }
-            :{
-              main: "#1976d2"
-            }
-        }
+          primary: darkMode
+            ? {
+                main: "#0d2b4a",
+              }
+            : {
+                main: "#1976d2",
+              },
+        },
       }),
-    [darkMode]
+    [darkMode],
   );
-
 
   return (
     <ThemeProvider theme={theme}>
@@ -46,7 +45,9 @@ export function AppBar({ hero }: AppBarProps): JSX.Element {
           <Container>
             <Grid container columns={3}>
               <Grid item xs={2}>
-                <Typography variant="h4">Proof of Combat</Typography>
+                <Typography variant="h4" component="p">
+                  Proof of Combat
+                </Typography>
               </Grid>
               <Grid item xs={1} aria-hidden="true">
                 {hero && (

diff --git a/src/game/locations/camp.tsx b/src/game/locations/camp.tsx
@@ -94,7 +94,7 @@ function SettleCamp({ hero }: { hero: Hero }): JSX.Element {
 
   return (
     <Box>
-      <Typography variant="h5" sx={{ mb: 2 }}>
+      <Typography component="h2" variant="h5" sx={{ mb: 2 }}>
         Settle Camp
       </Typography>
       <Typography sx={{ mb: 2 }}>
@@ -186,7 +186,7 @@ function ManageCamp({
             </LoadingButton>
           </DialogActions>
         </Dialog>
-        <Typography sx={{ mb: 2 }} component="h5">
+        <Typography sx={{ mb: 2 }} component="h2">
           Your {hasSettlement ? "settlement" : "campsite"} is at{" "}
           <b>
             {hero.home.location.x}, {hero.home.location.y}
@@ -243,7 +243,7 @@ function ManageCamp({
           </LoadingButton>
         </DialogActions>
       </Dialog>
-      <Typography variant="h5" sx={{ mb: 2 }}>
+      <Typography variant="h5" component="h2" sx={{ mb: 2 }}>
         Your {hasSettlement ? "Settlement" : "Campsite"}
       </Typography>
       <Typography sx={{ mb: 2 }}>

diff --git a/src/game/locations/docks.tsx b/src/game/locations/docks.tsx
@@ -43,7 +43,7 @@ export function Docks({
       return;
     }
     const targetDock = docksData.docks.find(
-      (otherDock) => otherDock.name === dock
+      (otherDock) => otherDock.name === dock,
     );
 
     if (!targetDock) {

diff --git a/src/game/locations/index.tsx b/src/game/locations/index.tsx
@@ -166,12 +166,12 @@ export function Locations(): JSX.Element | null {
               <Camp hero={hero} onShowSettlement={handleShowSettlement} />
             </Grid>
             <Grid item style={{ textAlign: "center" }} xs={6}>
-              <Typography variant="h5">Travel</Typography>
+              <Typography variant="h3">Travel</Typography>
               {hero.combat.health > 0 && (
                 <Typography>Use buttons to move around the map.</Typography>
               )}
               {hero.combat.health === 0 && (
-                <Typography variant="h6">
+                <Typography component="p" variant="h6">
                   You cannot move while dead. Heal yourself in the Combat tab.
                 </Typography>
               )}
@@ -228,7 +228,12 @@ export function Locations(): JSX.Element | null {
             {hero.stats.intelligence > 100 && (
               <Grid item style={{ textAlign: "center" }} xs={6}>
                 <Divider />
-                <Typography variant="h5" color="secondary" sx={{ margin: 1 }}>
+                <Typography
+                  variant="h5"
+                  component="h3"
+                  color="secondary"
+                  sx={{ margin: 1 }}
+                >
                   Teleport
                 </Typography>
                 <TextField
@@ -275,30 +280,36 @@ export function Locations(): JSX.Element | null {
         </Grid>
         <Grid item style={{ textAlign: "center" }} xs={2} sm={1}>
           {specialLocation && (
-            <Typography variant="h6">{specialLocation.name}</Typography>
+            <Typography component="h4" variant="h6">
+              {specialLocation.name}
+            </Typography>
           )}
           {specialLocation && (
             <Typography variant="subtitle2">{specialLocation.type}</Typography>
           )}
           {playerLocation && (
             <React.Fragment>
-              <Typography variant="h6">
+              <Typography variant="h6" component="h4">
                 {playerLocation.publicOwner?.name ?? "???"}'s Settlement
               </Typography>
               <Typography variant="subtitle2">{playerLocation.type}</Typography>
             </React.Fragment>
           )}
           {!specialLocation && !playerLocation && locationDetails && (
             <React.Fragment>
-              <Typography variant="h6">Wilderness</Typography>
+              <Typography variant="h6" component="h4">
+                Wilderness
+              </Typography>
               <Typography variant="subtitle2">
                 {locationDetails.terrain.terrain}
               </Typography>
             </React.Fragment>
           )}
           {!specialLocation && !playerLocation && !locationDetails && (
             <React.Fragment>
-              <Typography variant="h6">&nbsp;</Typography>
+              <Typography variant="h6" component="h4">
+                &nbsp;
+              </Typography>
               <Typography variant="subtitle2">loading...</Typography>
             </React.Fragment>
           )}
@@ -325,15 +336,15 @@ export function Locations(): JSX.Element | null {
           />
           {specialLocation?.description &&
             specialLocation.description.map((line, i) => (
-              <Typography component="h6" variant="body1" key={`loc-desc-${i}`}>
+              <Typography component="h4" variant="body1" key={`loc-desc-${i}`}>
                 {line}
               </Typography>
             ))}
           {hints
             .filter((a) => !!a)
             .map((hint) => (
               <Typography
-                component="h6"
+                component="h4"
                 variant="body1"
                 key={hint}
                 role="status"

diff --git a/src/game/locations/npc-shop.tsx b/src/game/locations/npc-shop.tsx
@@ -36,7 +36,7 @@ export function NpcShop({ shop }: { shop: NpcShopType }): JSX.Element {
   return (
     <React.Fragment>
       <Divider sx={{ mt: 1, mb: 1 }} />
-      <Typography variant="h4" color="info.main">
+      <Typography variant="h4" component="h5" color="info.main">
         {shop.name}
       </Typography>
       <Typography sx={{ mb: 2 }} variant="subtitle2" color="info.main">