feat: v2 dashboard — React + Vite parallel implementation
New modern dashboard at /v2 running alongside the existing UI at /. Same backend, same APIs, same WebSocket — zero backend changes. Stack: React 19 + Vite + TypeScript + Recharts Source: frontend/ — build output: static/v2/ Phase 1 delivers: - Character overview cards in a responsive CSS Grid - Live HP/Stamina/Mana bars via WebSocket vitals - Kills/hr, total kills, deaths, session uptime - VTank state badge (Combat/Nav/Idle) - Location coordinates - Click to expand: combat stats, prismatic count, CPU/RAM - Global stats header: active chars, total kills, total rares, server health - WebSocket hook with auto-reconnect - HTTP poll fallback for initial load + server health - Mobile responsive (single column on narrow screens) - Dark theme matching the MosswartOverlord palette Build: cd frontend && npm run build Access: /v2 (served by existing NoCacheStaticFiles mount) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
ee30ad2636
commit
e58c05c895
24 changed files with 3213 additions and 0 deletions
21
frontend/src/App.tsx
Normal file
21
frontend/src/App.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Layout } from './components/Layout';
|
||||
import { GlobalStats } from './components/GlobalStats';
|
||||
import { CharacterGrid } from './components/CharacterGrid';
|
||||
import { useLiveData } from './hooks/useLiveData';
|
||||
import './styles/global.css';
|
||||
|
||||
export default function App() {
|
||||
const { characters, serverHealth, totalRares, totalKills } = useLiveData();
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<GlobalStats
|
||||
activeChars={characters.size}
|
||||
totalKills={totalKills}
|
||||
totalRares={totalRares}
|
||||
serverHealth={serverHealth}
|
||||
/>
|
||||
<CharacterGrid characters={characters} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue