Patch/2 styling consistency mainnav

.github/workflows/deploy-cloudflare-pages.yml

@@ -0,0 +1,35 @@
+name: Deploy Cloudflare Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build site
+        run: npm run build
+
+      - name: Deploy to Cloudflare Pages
+        run: npx wrangler@4 pages deploy build --project-name=ror-killboard-preview
+        env:
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

package.json

@@ -44,6 +44,7 @@
     "vite": "^8.0.14"
   },
   "scripts": {
+    "dev": "vite",
     "start": "vite",
     "build": "vite build",
     "test": "tsc -p . && vite build && oxlint --type-aware src",

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/App.tsx

@@ -4,6 +4,7 @@ import './i18n/config';
 import React from 'react';
 import { Character } from '@/pages/Character';
 import { Home } from '@/pages/Home';
+import { MainNav } from '@/components/global/MainNav';
 import { Kill } from '@/pages/Kill';
 import { Guild } from '@/pages/Guild';
 import { Search } from '@/pages/Search';
@@ -54,103 +55,121 @@ const App = () => {
   usePageViews();
 
   return (
-    <Routes>
-      <Route path="/" element={<Home tab="players" />} />
-      <Route path="/guilds" element={<Home tab="guilds" />} />
-      <Route path="/scenarios" element={<Home tab="scenarios" />} />
-      <Route path="/kill/:id" element={<Kill />} />
-      <Route path="/kills" element={<Kills />} />
-      <Route path="/character/:id" element={<Character tab="kills" />} />
-      <Route
-        path="/character/:id/scenarios"
-        element={<Character tab="scenarios" />}
-      />
-      <Route
-        path="/character/:id/skirmishes"
-        element={<Character tab="skirmishes" />}
-      />
-      <Route
-        path="/character/:id/armory"
-        element={<Character tab="armory" />}
-      />
-      <Route
-        path="/character/:playerId1/feud/:playerId2"
-        element={<PlayerFeudPage />}
-      />
-
-      <Route path="/creatures" element={<Creatures />} />
-      <Route path="/creature/:id" element={<Creature />} />
-      <Route path="/creature/:id/quests" element={<Creature tab="quests" />} />
-      <Route
-        path="/creature/:id/vendorItems"
-        element={<Creature tab="vendorItems" />}
-      />
-      <Route path="/creature/:id/zone/:zoneId" element={<Creature />} />
-
-      <Route path="/gameobject/:id" element={<GameObject />} />
-      <Route path="/creature/:id/quests" element={<GameObject />} />
-      <Route path="/creature/:id/zone/:zoneId" element={<GameObject />} />
-
-      <Route path="/guild/:id" element={<Guild tab="kills" />} />
-      <Route path="/guild/:id/members" element={<Guild tab="members" />} />
-      <Route path="/guild/:id/scenarios" element={<Guild tab="scenarios" />} />
-      <Route
-        path="/guild/:id/skirmishes"
-        element={<Guild tab="skirmishes" />}
-      />
-      <Route
-        path="/guild/:guildId1/feud/:guildId2"
-        element={<GuildFeudPage />}
-      />
-
-      <Route path="/quests" element={<Quests />} />
-      <Route path="/quest/:id" element={<Quest />} />
-
-      <Route path="/search/:query" element={<Search />} />
-      <Route path="/search/guild/:query" element={<SearchGuild />} />
-
-      <Route path="/scenario/:id" element={<Scenario tab="scoreboard" />} />
-      <Route path="/scenario/:id/kills" element={<Scenario tab="kills" />} />
-      <Route
-        path="/scenario/:id/skirmishes"
-        element={<Scenario tab="skirmishes" />}
-      />
-      <Route path="/scenario/:id/map" element={<Scenario tab="map" />} />
-      <Route path="/skirmishes" element={<Home tab="skirmishes" />} />
-      <Route path="/skirmish/:id" element={<Skirmish tab="scoreboard" />} />
-      <Route path="/skirmish/:id/kills" element={<Skirmish tab="kills" />} />
-      <Route
-        path="/skirmish/:id/damage/:characterId"
-        element={<Skirmish tab="characterDamage" />}
-      />
-      <Route path="/skirmish/:id/damage" element={<Skirmish tab="damage" />} />
-      <Route path="/zone_heatmap/:id" element={<ZoneMap />} />
-
-      <Route path="/items" element={<Items />} />
-      <Route path="/item/:id" element={<Item tab="vendors" />} />
-      <Route path="/item/:id/purchase" element={<Item tab="purchase" />} />
-      <Route path="/item/:id/quests" element={<Item tab="quests" />} />
-
-      <Route path="/instance-runs" element={<InstanceRuns />} />
-      <Route path="/instance-run/:id" element={<InstanceRun />} />
-      <Route
-        path="/instance-run/:instanceRunId/:id"
-        element={<InstanceEncounterRun />}
-      />
-
-      <Route path="/instances" element={<Instances />} />
-      <Route path="/instance-statistics/:id" element={<InstanceStatistics />} />
-
-      <Route path="/storylines" element={<Storylines />} />
-      <Route path="/storylines/:id" element={<Storyline />} />
-      <Route path="/storylines/:storylineId/:id" element={<StorylineEntry />} />
-      <Route
-        path="/storylines/:storylineId/:storylineEntryId/:id"
-        element={<StorylineActivity />}
-      />
-
-      <Route path="/ranked-leaderboard" element={<RankedLeaderboard />} />
-    </Routes>
+    <>
+      <MainNav />
+      <Routes>
+        <Route path="/" element={<Home tab="players" />} />
+        <Route path="/guilds" element={<Home tab="guilds" />} />
+        <Route path="/scenarios" element={<Home tab="scenarios" />} />
+        <Route path="/kill/:id" element={<Kill />} />
+        <Route path="/kills" element={<Kills />} />
+        <Route path="/character/:id" element={<Character tab="kills" />} />
+        <Route
+          path="/character/:id/scenarios"
+          element={<Character tab="scenarios" />}
+        />
+        <Route
+          path="/character/:id/skirmishes"
+          element={<Character tab="skirmishes" />}
+        />
+        <Route
+          path="/character/:id/armory"
+          element={<Character tab="armory" />}
+        />
+        <Route
+          path="/character/:playerId1/feud/:playerId2"
+          element={<PlayerFeudPage />}
+        />
+
+        <Route path="/creatures" element={<Creatures />} />
+        <Route path="/creature/:id" element={<Creature />} />
+        <Route
+          path="/creature/:id/quests"
+          element={<Creature tab="quests" />}
+        />
+        <Route
+          path="/creature/:id/vendorItems"
+          element={<Creature tab="vendorItems" />}
+        />
+        <Route path="/creature/:id/zone/:zoneId" element={<Creature />} />
+
+        <Route path="/gameobject/:id" element={<GameObject />} />
+        <Route path="/creature/:id/quests" element={<GameObject />} />
+        <Route path="/creature/:id/zone/:zoneId" element={<GameObject />} />
+
+        <Route path="/guild/:id" element={<Guild tab="kills" />} />
+        <Route path="/guild/:id/members" element={<Guild tab="members" />} />
+        <Route
+          path="/guild/:id/scenarios"
+          element={<Guild tab="scenarios" />}
+        />
+        <Route
+          path="/guild/:id/skirmishes"
+          element={<Guild tab="skirmishes" />}
+        />
+        <Route
+          path="/guild/:guildId1/feud/:guildId2"
+          element={<GuildFeudPage />}
+        />
+
+        <Route path="/quests" element={<Quests />} />
+        <Route path="/quest/:id" element={<Quest />} />
+
+        <Route path="/search/:query" element={<Search />} />
+        <Route path="/search/guild/:query" element={<SearchGuild />} />
+
+        <Route path="/scenario/:id" element={<Scenario tab="scoreboard" />} />
+        <Route path="/scenario/:id/kills" element={<Scenario tab="kills" />} />
+        <Route
+          path="/scenario/:id/skirmishes"
+          element={<Scenario tab="skirmishes" />}
+        />
+        <Route path="/scenario/:id/map" element={<Scenario tab="map" />} />
+        <Route path="/skirmishes" element={<Home tab="skirmishes" />} />
+        <Route path="/skirmish/:id" element={<Skirmish tab="scoreboard" />} />
+        <Route path="/skirmish/:id/kills" element={<Skirmish tab="kills" />} />
+        <Route
+          path="/skirmish/:id/damage/:characterId"
+          element={<Skirmish tab="characterDamage" />}
+        />
+        <Route
+          path="/skirmish/:id/damage"
+          element={<Skirmish tab="damage" />}
+        />
+        <Route path="/zone_heatmap/:id" element={<ZoneMap />} />
+
+        <Route path="/items" element={<Items />} />
+        <Route path="/item/:id" element={<Item tab="vendors" />} />
+        <Route path="/item/:id/purchase" element={<Item tab="purchase" />} />
+        <Route path="/item/:id/quests" element={<Item tab="quests" />} />
+
+        <Route path="/instance-runs" element={<InstanceRuns />} />
+        <Route path="/instance-run/:id" element={<InstanceRun />} />
+        <Route
+          path="/instance-run/:instanceRunId/:id"
+          element={<InstanceEncounterRun />}
+        />
+
+        <Route path="/instances" element={<Instances />} />
+        <Route
+          path="/instance-statistics/:id"
+          element={<InstanceStatistics />}
+        />
+
+        <Route path="/storylines" element={<Storylines />} />
+        <Route path="/storylines/:id" element={<Storyline />} />
+        <Route
+          path="/storylines/:storylineId/:id"
+          element={<StorylineEntry />}
+        />
+        <Route
+          path="/storylines/:storylineId/:storylineEntryId/:id"
+          element={<StorylineActivity />}
+        />
+
+        <Route path="/ranked-leaderboard" element={<RankedLeaderboard />} />
+      </Routes>
+    </>
   );
 };
 

src/components/WarIcon.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement } from 'react';
+import { assetUrl } from '@/utils';
 
 export const WarIcon = ({
   icon,
@@ -19,18 +20,18 @@ export const WarIcon = ({
     switch (frameType) {
       case 'circle': {
         return selected
-          ? '/images/icons/round_frame_press.png'
-          : '/images/icons/round_frame.png';
+          ? assetUrl('/images/icons/round_frame_press.png')
+          : assetUrl('/images/icons/round_frame.png');
       }
       case 'hex': {
         return selected
-          ? '/images/icons/hex_frame_press.png'
-          : '/images/icons/hex_frame.png';
+          ? assetUrl('/images/icons/hex_frame_press.png')
+          : assetUrl('/images/icons/hex_frame.png');
       }
       default: {
         return selected
-          ? '/images/icons/square_frame_press.png'
-          : '/images/icons/square_frame.png';
+          ? assetUrl('/images/icons/square_frame_press.png')
+          : assetUrl('/images/icons/square_frame.png');
       }
     }
   })();

src/components/ZoneHeatmap.tsx

@@ -6,7 +6,7 @@ export const ZoneHeatmap = ({
   zoneId,
   max,
   data,
-  size = 640,
+  size,
 }: {
   zoneId: string;
   max: number;

src/components/global/MainNav.tsx

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router';
+import type { ReactElement } from 'react';
+
+// Persistent top nav, rendered on every page (see App.tsx). Nav links are
+// alphabetical by label. Items, Quests, Creatures, Instances, and
+// Storylines each have their own route and full page layout; the
+// ranked leaderboard page intentionally isn't added here.
+export const MainNav = (): ReactElement => {
+  const { t } = useTranslation();
+  const { pathname } = useLocation();
+
+  return (
+    <div className="container is-max-widescreen mt-2">
+      <div className="tabs is-fullwidth">
+        <li className={clsx({ 'is-active': pathname.startsWith('/creature') })}>
+          <Link to="/creatures">{t('pages:home.showCreatures')}</Link>
+        </li>
+        <li className={clsx({ 'is-active': pathname === '/guilds' })}>
+          <Link to="/guilds">{t('pages:home.showGuildLeaderboard')}</Link>
+        </li>
+        <li className={clsx({ 'is-active': pathname.startsWith('/instance') })}>
+          <Link to="/instances">{t('pages:home.showInstances')}</Link>
+        </li>
+        <li className={clsx({ 'is-active': pathname.startsWith('/item') })}>
+          <Link to="/items">{t('pages:home.showItems')}</Link>
+        </li>
+        <li className={clsx({ 'is-active': pathname === '/' })}>
+          <Link to="/">{t('pages:home.showPlayerLeaderboard')}</Link>
+        </li>
+        <li className={clsx({ 'is-active': pathname.startsWith('/quest') })}>
+          <Link to="/quests">{t('pages:home.showQuests')}</Link>
+        </li>
+        <li className={clsx({ 'is-active': pathname === '/scenarios' })}>
+          <Link to="/scenarios">{t('pages:home.showScenarios')}</Link>
+        </li>
+        <li className={clsx({ 'is-active': pathname === '/skirmishes' })}>
+          <Link to="/skirmishes">{t('pages:home.showSkirmishes')}</Link>
+        </li>
+        <li
+          className={clsx({ 'is-active': pathname.startsWith('/storylines') })}
+        >
+          <Link to="/storylines">{t('pages:home.showStorylines')}</Link>
+        </li>
+      </div>
+    </div>
+  );
+};