vantzs/corrosion-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feat(redesign): design-system tokens, 23 Vue components, game-aware shell + Fleet/Solo dashboard
All checks were successful
Test Asgard Runner / test (push) Successful in 4s
Details

Browse Source 
Tokens ported 1:1 from the Claude Design bundle (colors/game-themes/type/spacing/elevation/motion/fonts) with the data-theme/data-game theming contract via useThemeGame (+ cc-skin-swap repaint guard). 23 design-system components reimplemented as Vue SFCs (core/forms/data/navigation/feedback/brand). DashboardLayout rebuilt as the game-aware shell (GameSwitcher, grouped nav with permission gating preserved, agent-health footer, topbar). DashboardView: Fleet + Solo with per-game GAME_FIELDS rows and the themed ECharts PlayersChart; Solo wired to the real server store, Fleet on representative data pending the multi-instance backend. All four game skins (Rust/Dune/Conan/Soulmask). vue-tsc + vite build green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
2026-06-11 02:12:35 -04:00
parent ef128b47d2
commit f91ef84832
42 changed files with 3577 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/index.html
View File

@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" class="dark">
<html lang="en" class="dark" data-theme="dark" data-game="rust">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" sizes="any" />
@@ -9,8 +9,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0a0a0a" />
<title>Corrosion Management</title>
<script>
/* FOUC guard — apply persisted theme/game to <html> before the app mounts,
so the design-system tokens paint with the right skin from frame one. */
(function () {
try {
var el = document.documentElement;
var t = localStorage.getItem('cc-theme');
var g = localStorage.getItem('cc-game');
if (t === 'dark' || t === 'light') {
el.setAttribute('data-theme', t);
el.classList.toggle('dark', t === 'dark');
}
if (g) el.setAttribute('data-game', g);
} catch (e) {}
})();
</script>
</head>
<body class="bg-neutral-950">
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>