Maps

.github/workflows/azure-static-web-apps-lively-pebble-0b97b301e.yml

@@ -0,0 +1,46 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - maps
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - maps
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_PEBBLE_0B97B301E }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/" # App source code path
+          api_location: "" # Api source code path - optional
+          output_location: "build" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_LIVELY_PEBBLE_0B97B301E }}
+          action: "close"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lynn",
-  "version": "22.2.az",
+  "version": "23.0.0",
   "private": true,
   "dependencies": {
     "@date-io/dayjs": "^2.16.0",

src/App.jsx

@@ -24,6 +24,7 @@ import ChangelogComponent from './ChangelogComponent';
 import DRSNewHolsterMainComponent from './drs/DRSNewHolsterMainComponent';
 import DRSRunHolsterCreatorContainerComponent from './drs/create/DRSRunHolsterCreatorContainerComponent';
 import BAMorbolMapComponent from './BAMorbolMapComponent';
+import MapPageComponent from './map/MapPageComponent';
 
 export const ColorModeContext = React.createContext({ toggleColorMode: () => { } });
 
@@ -104,6 +105,15 @@ function WrappedMainComponent({ component, page }) {
         colorModeContext={ColorModeContext}
       />
     );
+  } if (page === 'map') {
+    return (
+      <MainComponent
+        component={component}
+        mapId={params.mapId}
+        page={page}
+        colorModeContext={ColorModeContext}
+      />
+    );
   }
 
   return (
@@ -194,6 +204,16 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: '/map',
+    element: <WrappedMainComponent component={<MapPageComponent />} page="map" />,
+    children: [
+      {
+        path: '/map/:mapId',
+        element: <WrappedMainComponent component={<MapPageComponent />} page="map" />,
+      },
+    ],
+  },
   {
     path: '/weather-finder',
     element: <WrappedMainComponent component={<FavorableWeatherFinderComponent />} page="weatherfinder" />,

src/BAPortalMapComponent.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { Helmet } from 'react-helmet';
+import MapPageComponent from './map/MapPageComponent';
 
 export default function BAPortalMapComponent() {
   return (
-    <Box flexGrow={1} height="100%" sx={{ pt: { xs: 14, md: 5 } }}>
+    <Box flexGrow={1} height="100%">
       <Helmet bodyAttributes={{ style: 'background-color : #000' }}>
         <meta name="description" content="Portal map for Baldesion Arsenal runs on the Primal data center" data-react-helmet="true" />
         <meta property="og:title" content="BA Portal Map" data-react-helmet="true" />
@@ -24,7 +25,10 @@ export default function BAPortalMapComponent() {
         <title>BA Portal Map - forays.info</title>
       </Helmet>
       <Box maxWidth={1400} minWidth={800} height="100%" margin="auto" sx={{ backgroundColor: '#000' }}>
-        <img src={`${process.env.PUBLIC_URL}/assets/portalmap.jpg`} alt="BA Portal Map" style={{ maxWidth: '100%' }} />
+        <MapPageComponent
+          mapId="hydatos"
+          inputSelectedLayers={['baPortals', 'aetherytes']}
+        />
       </Box>
     </Box>
   );

src/MainComponent.jsx

@@ -15,6 +15,7 @@ export default function MainComponent({
   encodedHolster,
   lostAction,
   logosAction,
+  mapId,
   colorModeContext,
 }) {
   /**
@@ -83,11 +84,12 @@ export default function MainComponent({
               encodedHolster,
               lostAction,
               logosAction,
+              mapId,
               resetTimer,
             })}
 
           </Box>
-          <FooterComponent />
+          { (page !== 'map' && page !== 'portals') ? <FooterComponent /> : null}
         </Stack>
       </Box>
     </Stack>

src/SidebarComponent.jsx

@@ -41,6 +41,7 @@ function SidebarComponent({
 
   const handleSidebarClickFromSidebar = useCallback((event, item) => {
     navigate(`/${item}`);
+
     handleSidebarClick();
   }, [navigate, handleSidebarClick]);
 
@@ -85,92 +86,122 @@ function SidebarComponent({
     <List pt={4} pb={4} sx={{ overflowX: 'hidden' }}>
       <Stack direction="row" height="3rem" alignItems="center">
         <Box width={24} />
-        <Typography color="#fff" fontWeight={600} fontSize={16}>EUREKA AND BA</Typography>
+        <Typography color="#fff" fontWeight={600} fontSize={16}>OCCULT CRESCENT</Typography>
       </Stack>
 
       <StyledButton
-        onClick={(e) => { handleSidebarClickFromSidebar(e, 'ba'); }}
+        disabled
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'oc'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>BA Loadouts</Typography>
+        <Typography>Coming soon!</Typography>
       </StyledButton>
 
+      <Stack direction="row" height="3rem" alignItems="center">
+        <Box width={24} />
+        <Typography color="#fff" fontWeight={600} fontSize={16}>BOZJA AND DRS</Typography>
+      </Stack>
+
       <StyledButton
-        onClick={(e) => { handleSidebarClickFromSidebar(e, 'portals'); }}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'drs/holster'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>BA Portal Map</Typography>
+        <Typography>DRS Holsters</Typography>
       </StyledButton>
 
       <StyledButton
-        onClick={(e) => { handleSidebarClickFromSidebar(e, 'eureka/logos'); }}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'drs/holster/c'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>Logos Action Info</Typography>
+        <Typography>Holster Creator</Typography>
       </StyledButton>
 
       <StyledButton
-        onClick={(e) => { handleSidebarClickFromSidebar(e, 'eureka/loadout'); }}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'map/bsf'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>Loadout Creator</Typography>
+        <Typography>Bozja Maps</Typography>
       </StyledButton>
 
       <StyledButton
-        onClick={(e) => handleSidebarForecastClickFromSidebar(e, ResultsFilter.EUREKA_NMS)}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'bozja/lostaction'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>NM Spawn Times</Typography>
+        <Typography>Lost Action Info</Typography>
       </StyledButton>
 
       <StyledButton
-        onClick={(e) => handleSidebarForecastClickFromSidebar(e, ResultsFilter.EUREKA_FARMS)}
+        onClick={(e) => handleSidebarForecastClickFromSidebar(e, ResultsFilter.FRAGMENT_FARM)}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>Logogram/Box Farm Times</Typography>
+        <Typography>Fragment Farm Times</Typography>
       </StyledButton>
 
       <Stack direction="row" height="3rem" alignItems="center">
         <Box width={24} />
-        <Typography color="#fff" fontWeight={600} fontSize={16}>BOZJA AND DRS</Typography>
+        <Typography color="#fff" fontWeight={600} fontSize={16}>EUREKA AND BA</Typography>
       </Stack>
 
       <StyledButton
-        onClick={(e) => { handleSidebarClickFromSidebar(e, 'drs/holster'); }}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'ba'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>DRS Holsters</Typography>
+        <Typography>BA Loadouts</Typography>
       </StyledButton>
 
       <StyledButton
-        onClick={(e) => { handleSidebarClickFromSidebar(e, 'drs/holster/c'); }}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'portals'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>Holster Creator</Typography>
+        <Typography>BA Portal Map</Typography>
       </StyledButton>
 
       <StyledButton
-        onClick={(e) => { handleSidebarClickFromSidebar(e, 'bozja/lostaction'); }}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'map/hydatos'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>Lost Action Info</Typography>
+        <Typography>Eureka Maps</Typography>
       </StyledButton>
 
       <StyledButton
-        onClick={(e) => handleSidebarForecastClickFromSidebar(e, ResultsFilter.FRAGMENT_FARM)}
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'eureka/logos'); }}
         key={uuidv4()}
       >
         <Box width={32} />
-        <Typography>Fragment Farm Times</Typography>
+        <Typography>Logos Action Info</Typography>
+      </StyledButton>
+
+      <StyledButton
+        onClick={(e) => { handleSidebarClickFromSidebar(e, 'eureka/loadout'); }}
+        key={uuidv4()}
+      >
+        <Box width={32} />
+        <Typography>Loadout Creator</Typography>
+      </StyledButton>
+
+      <StyledButton
+        onClick={(e) => handleSidebarForecastClickFromSidebar(e, ResultsFilter.EUREKA_NMS)}
+        key={uuidv4()}
+      >
+        <Box width={32} />
+        <Typography>NM Spawn Times</Typography>
+      </StyledButton>
+
+      <StyledButton
+        onClick={(e) => handleSidebarForecastClickFromSidebar(e, ResultsFilter.EUREKA_FARMS)}
+        key={uuidv4()}
+      >
+        <Box width={32} />
+        <Typography>Logogram/Box Farm Times</Typography>
       </StyledButton>
 
       <Stack direction="row" height="3rem" alignItems="center">

src/TimeAndWeatherPopoverComponent.jsx

@@ -86,6 +86,7 @@ export default function TimeAndWeatherPopoverComponent() {
       spacing={1}
       alignItems="center"
       justifyContent="center"
+      key={uuidv4()}
     >
       <Box>
         <Typography width={300}>{name}</Typography>
@@ -97,33 +98,35 @@ export default function TimeAndWeatherPopoverComponent() {
         alignItems="center"
       >
         {conditions.map((item, index) => (
-          <Tooltip title={(
-            <Stack>
-              <Typography textAlign="center">
-                {dayjs(item.time.getTime())
-                  .format('h:mm:ss A')}
-              </Typography>
-              <Typography textAlign="center">
-                {
+          <Tooltip
+            title={(
+              <Stack>
+                <Typography textAlign="center">
+                  {dayjs(item.time.getTime())
+                    .format('h:mm:ss A')}
+                </Typography>
+                <Typography textAlign="center">
+                  {
                   new EorzeaTime(
                     dayjs(item.time.getTime())
                       .toDate(),
                   )
                     .getHours().toLocaleString('en-US', { minimumIntegerDigits: 2 })
                 }
-                :
-                {
+                  :
+                  {
                   new EorzeaTime(
                     dayjs(item.time.getTime())
                       .toDate(),
                   )
                     .getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2 })
                 }
-                {' '}
-                ET
-              </Typography>
-            </Stack>
+                  {' '}
+                  ET
+                </Typography>
+              </Stack>
           )}
+            key={uuidv4()}
           >
             <Stack direction="row" alignItems="center">
               <Grid

src/changelog.json

@@ -1,5 +1,21 @@
 {
   "changes": [
+    {
+      "version": "23.0",
+      "timestamp": "2025-03-21",
+      "changes": [
+        "Added a new interactive map, starting with the Bozjan Southern Front and Eureka Hydatos",
+        "Updated the BA Portals page to use the interactive map",
+        "(Please let me know if anything isn't working!)"
+      ]
+    },
+    {
+      "version": "22.2.az",
+      "timestamp": "2025-03-01",
+      "changes": [
+        "Migrated site backend"
+      ]
+    },
     {
       "version": "22.2",
       "timestamp": "2024-05-18",