Midnight S1 Tank Guide

WoW Midnight Season 1 M+ tanking quick-reference webapp. Built to be read at a glance on a second monitor during gameplay.

Stack

React 19 + Vite + TypeScript + Tailwind v4 + shadcn/ui. No router — hash-based dungeon switching.

Commands

make dev — start dev server on port 8000
make build — production build
source ~/.zshrc before any node/npm/npx command (lazy nvm)

Design Rules

Dark only. Deep abyss navy (#050810). No light mode, no toggle.
Frosted glass cards. Use .frost class (backdrop-blur + semi-transparent bg). Never plain bg.
Square edges. All radii are 0. No rounded corners anywhere.
Colours that pop. Cyan (#22d3ee), sky blue (#38bdf8), purple (#a78bfa), amber (#fbbf24), red (#f87171), green (#34d399).
Readable at a glance. Body text text-base minimum. Headers bump up. Bullet spacing mb-2.5.
Centre-aligned content. Main container max-w-7xl mx-auto. 2-col grid on lg:.
Font: Geist Variable.

Role Colours

Tank: #38bdf8 (sky blue) — text-tank, border-l-tank
Healer: #34d399 (green) — text-healer
DPS: #f87171 (red) — text-dps
Everyone: #fbbf24 (amber) — text-everyone

Project Layout

src/
  data/*.ts          — one file per dungeon, typed DungeonData exports
  data/index.ts      — dungeonList (sidebar order) + dungeonDataMap
  types/dungeon.ts   — all shared types
  components/
    dungeon/         — DungeonPage, BossHeader, AbilityCard, MobCard, TrashSection, etc.
    layout/          — AppSidebar
    ui/              — shadcn primitives (badge, button, card, etc.)
  index.css          — theme vars, .frost utility, wowhead overrides
public/assets/       — all images (dungeon headers, boss screenshots, icons)
dungeons/            — raw method.gg HTML source files

Adding a Dungeon

Use /parse-dungeon skill. It runs parse_dungeon.py against a dungeons/*.html file, creates src/data/<slug>.ts, and registers it in src/data/index.ts.

Content Rules

HTML strings in data files (wowhead links, <span class="warn">, <span class="tip">).
Ability card order per boss: tank first, then healer, then everyone, then dps.
Include healer and DPS-specific mechanics — not just tank-focused content.
DPS cards use role: "dps" with importance: null (red badge, no left border).
Max 1-2 sentences per ability. No paragraphs.
CC-immune mobs get red "(Immune to CC)" span in nameHtml.

2.5 KiB Raw Permalink Blame History