some a11y changes for the homies

src/game/locations/index.tsx

@@ -27,6 +27,7 @@ import { Docks } from "./docks";
 import { NpcShop } from "./npc-shop";
 import { Camp } from "./camp";
 import { SettlementManager } from "./settlement";
+import { MapModal } from "./map-modal";
 
 export function Locations(): JSX.Element | null {
   const hero = useHero();
@@ -43,6 +44,19 @@ export function Locations(): JSX.Element | null {
   const specialLocation = useSpecialLocation();
   const playerLocation = usePlayerLocation();
 
+  const northTerrain = locationDetails?.neighborTerrain.north
+    ? locationDetails.neighborTerrain.north.terrain
+    : "blocked";
+  const southTerrain = locationDetails?.neighborTerrain.south
+    ? locationDetails.neighborTerrain.south.terrain
+    : "blocked";
+  const eastTerrain = locationDetails?.neighborTerrain.east
+    ? locationDetails.neighborTerrain.east.terrain
+    : "blocked";
+  const westTerrain = locationDetails?.neighborTerrain.west
+    ? locationDetails.neighborTerrain.west.terrain
+    : "blocked";
+
   useEffect(() => {
     if (hero) {
       setTeleportX(hero.location.x);
@@ -131,6 +145,7 @@ export function Locations(): JSX.Element | null {
               <Camp hero={hero} onShowSettlement={handleShowSettlement} />
             </Grid>
             <Grid item style={{ textAlign: "center" }} xs={6}>
+              <Typography variant="h5">Travel</Typography>
               {hero.combat.health > 0 && (
                 <Typography>Use buttons to move around the map.</Typography>
               )}
@@ -143,6 +158,7 @@ export function Locations(): JSX.Element | null {
             <Grid item style={{ textAlign: "center" }} xs={2}></Grid>
             <Grid item style={{ textAlign: "center" }} xs={2}>
               <Button
+                aria-label={`North terrain: ${northTerrain}`}
                 disabled={shouldDisable}
                 variant="contained"
                 onClick={() => handleMove(MoveDirection.North)}
@@ -153,6 +169,7 @@ export function Locations(): JSX.Element | null {
             <Grid item style={{ textAlign: "center" }} xs={2}></Grid>
             <Grid item style={{ textAlign: "center" }} xs={2}>
               <Button
+                aria-label={`West terrain: ${westTerrain}`}
                 disabled={shouldDisable}
                 variant="contained"
                 onClick={() => handleMove(MoveDirection.West)}
@@ -167,6 +184,7 @@ export function Locations(): JSX.Element | null {
             </Grid>
             <Grid item style={{ textAlign: "center" }} xs={2}>
               <Button
+                aria-label={`East terrain: ${eastTerrain}`}
                 disabled={shouldDisable}
                 variant="contained"
                 onClick={() => handleMove(MoveDirection.East)}
@@ -177,6 +195,7 @@ export function Locations(): JSX.Element | null {
             <Grid item style={{ textAlign: "center" }} xs={2}></Grid>
             <Grid item style={{ textAlign: "center" }} xs={2}>
               <Button
+                aria-label={`South terrain: ${southTerrain}`}
                 disabled={shouldDisable}
                 variant="contained"
                 onClick={() => handleMove(MoveDirection.South)}
@@ -188,7 +207,7 @@ export function Locations(): JSX.Element | null {
             {hero.stats.intelligence > 100 && (
               <Grid item style={{ textAlign: "center" }} xs={6}>
                 <Divider />
-                <Typography variant="h6" color="secondary" sx={{ margin: 1 }}>
+                <Typography variant="h5" color="secondary" sx={{ margin: 1 }}>
                   Teleport
                 </Typography>
                 <TextField
@@ -269,6 +288,7 @@ export function Locations(): JSX.Element | null {
                 {line}
               </Typography>
             ))}
+          {/*<MapModal />*/}
         </Grid>
         {specialLocation?.type === "dock" && (
           <Grid item style={{ textAlign: "center" }} xs={2}>

src/game/locations/location-details.graphql

@@ -106,5 +106,20 @@ query LocationDetails($location: LocationInput!) {
         maxHealth
       }
     }
+
+    neighborTerrain {
+      north {
+        terrain
+      }
+      south {
+        terrain
+      }
+      east {
+        terrain
+      }
+      west {
+        terrain
+      }
+    }
   }
 }

src/game/locations/map-modal.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+import Modal from "@mui/material/Modal";
+
+import { useHero } from "src/hooks/use-hero";
+
+export function MapModal(): JSX.Element | null {
+  const [mapModalOpen, setMapModalOpen] = useState<boolean>(false);
+  const hero = useHero();
+
+  if (!hero) {
+    return null;
+  }
+
+  return (
+    <>
+      <Modal open={mapModalOpen} onClose={() => setMapModalOpen(false)}>
+        <Box
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            bgcolor: "background.paper",
+            padding: [2, 4],
+            minWidth: "320px",
+            width: "90%",
+            textAlign: "center",
+          }}
+        >
+          <img
+            src={`/maps/${hero.location.map}.jpg`}
+            style={{ width: "100%" }}
+          />
+        </Box>
+      </Modal>
+      <Fab
+        color="primary"
+        aria-label="add"
+        variant="extended"
+        onClick={() => setMapModalOpen(true)}
+      >
+        <FullscreenIcon /> View Travelors Map
+      </Fab>
+    </>
+  );
+}

src/game/locations/map.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { useHero } from "src/hooks/use-hero";
-
 import { Location } from "src/generated/graphql";
 
 const imageCellSize = 16;
@@ -23,14 +22,14 @@ export function Map({
     Math.round(
       Math.min(
         gridSize[0] - minimapSize[0],
-        Math.max(0, location.x - minimapSize[0] / 2)
-      )
+        Math.max(0, location.x - minimapSize[0] / 2),
+      ),
     ),
     Math.round(
       Math.min(
         gridSize[1] - minimapSize[1],
-        Math.max(0, location.y - minimapSize[1] / 2)
-      )
+        Math.max(0, location.y - minimapSize[1] / 2),
+      ),
     ),
   ];
 

src/game/shop/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import Divider from "@mui/material/Divider";
+import Typography from "@mui/material/Typography";
 
 import { useLocation, useSpecialLocation } from "src/hooks/use-location";
 import { useHero } from "src/hooks/use-hero";
@@ -32,6 +33,9 @@ export function Shop(): JSX.Element {
 
   return (
     <React.Fragment>
+      <Typography variant="h3" sx={{ textAlign: "center" }}>
+        Item Shop
+      </Typography>
       <ItemShop />
 
       {locationDetails?.shop && <NpcShop shop={locationDetails?.shop} />}