feat(v2): Phase 1 — map-first layout matching v1
Rebuilds the v1 map-centric experience in React: Layout: - 400px sidebar on left, interactive map on right (flex, 100vh) - Exact same proportions and dark theme as v1 Sidebar (top→bottom): - Header with active player count + Dashboard toggle button - Server status dot (Coldeve online/offline with pulse) - Aggregate counters: Rares (gold), Server KPH (blue glow), Kills (red) - 6 sort buttons (Name, KPH, S.Kills, S.Rares, T.Kills, KPR) - Player name filter - Scrollable player list with per-row: - Name + coordinates - HP/Stamina/Mana vital bars (red/orange/blue gradients) - Session kills, total kills, KPH - Session rares, total rares, VTank meta state pill - Online time, deaths, prismatic tapers - Color-coded left border per player Map: - dereth.png with CSS transform pan (drag) + zoom (wheel, 1.1x factor, max 20x) - Player dots (6px circles, color-matched to sidebar) - Hover tooltip (name, coords, kph, kills) - World coordinate display at cursor position - Fit-to-window on first load View toggle: Map View ↔ Dashboard with localStorage persistence. All v1 CSS ported under ml-* prefix, scoped via map-layout.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik
parent
3791c01bf3
commit
2c4b8d3afb
16 changed files with 995 additions and 151 deletions
320
frontend/src/styles/map-layout.css
Normal file
320
frontend/src/styles/map-layout.css
Normal file
|
|
@ -0,0 +1,320 @@
|
|||
/* ═══════════════════════════════════════════════════════════
|
||||
Map Layout — faithful reproduction of v1 style.css
|
||||
Scoped under .ml-* prefix to avoid conflicts with dashboard
|
||||
═══════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Layout ───────────────────────────────────────────── */
|
||||
.ml-layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
/* ── Sidebar ──────────────────────────────────────────── */
|
||||
.ml-sidebar {
|
||||
width: 400px;
|
||||
min-width: 400px;
|
||||
background: #1a1a1a;
|
||||
border-right: 2px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.ml-sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ml-sidebar-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #88f;
|
||||
}
|
||||
|
||||
.ml-view-toggle {
|
||||
font-size: 0.7rem;
|
||||
padding: 3px 10px;
|
||||
background: #333;
|
||||
color: #aaa;
|
||||
border: 1px solid #555;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ml-view-toggle:hover { background: #444; color: #fff; }
|
||||
|
||||
/* ── Server status ────────────────────────────────────── */
|
||||
.ml-server-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 0 8px;
|
||||
font-size: 0.75rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.ml-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ml-status-dot.online { background: #4c4; animation: ml-pulse 2s ease-in-out infinite; }
|
||||
.ml-status-dot.offline { background: #c44; }
|
||||
.ml-status-latency { margin-left: auto; color: #888; }
|
||||
|
||||
@keyframes ml-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
|
||||
/* ── Aggregate counters ───────────────────────────────── */
|
||||
.ml-counters {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ml-counter {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 6px 4px;
|
||||
border-radius: 4px;
|
||||
background: #222;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.ml-counter-val {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ml-counter-lbl {
|
||||
display: block;
|
||||
font-size: 0.6rem;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.ml-counter.rares .ml-counter-val { color: #ffcc00; }
|
||||
.ml-counter.kph .ml-counter-val { color: #4af; }
|
||||
.ml-counter.kph { border-color: #234; animation: ml-kph-glow 3s ease-in-out infinite; }
|
||||
.ml-counter.kph.ultra { background: linear-gradient(135deg, #112, #221); animation: ml-kph-glow 1.5s ease-in-out infinite; }
|
||||
.ml-counter.kills .ml-counter-val { color: #f66; }
|
||||
|
||||
@keyframes ml-kph-glow {
|
||||
0%, 100% { box-shadow: 0 0 4px rgba(68, 170, 255, 0.2); }
|
||||
50% { box-shadow: 0 0 12px rgba(68, 170, 255, 0.5); }
|
||||
}
|
||||
|
||||
/* ── Sort buttons ─────────────────────────────────────── */
|
||||
.ml-sort-buttons {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.ml-sort-btn {
|
||||
flex: 1;
|
||||
padding: 4px 0;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
background: #2a2a2a;
|
||||
color: #888;
|
||||
border: 1px solid #444;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.ml-sort-btn:hover { background: #333; color: #ccc; }
|
||||
.ml-sort-btn.active { background: #334; color: #88f; border-color: #88f; }
|
||||
|
||||
/* ── Filter input ─────────────────────────────────────── */
|
||||
.ml-filter {
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
font-size: 0.78rem;
|
||||
background: #222;
|
||||
color: #eee;
|
||||
border: 1px solid #444;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
margin-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ml-filter:focus { border-color: #88f; }
|
||||
.ml-filter::placeholder { color: #666; }
|
||||
|
||||
/* ── Player list ──────────────────────────────────────── */
|
||||
.ml-player-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ml-player-row {
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
border-left: 3px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.ml-player-row:hover { background: #252525; }
|
||||
|
||||
.ml-pr-name {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ml-pr-coords {
|
||||
font-size: 0.65rem;
|
||||
color: #888;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
/* ── Vital bars ───────────────────────────────────────── */
|
||||
.ml-pr-vitals {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.ml-vital-bar {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ml-vital-bar.hp { background: #330000; }
|
||||
.ml-vital-bar.sta { background: #331a00; }
|
||||
.ml-vital-bar.mana { background: #001433; }
|
||||
|
||||
.ml-vital-bar.hp .ml-vital-fill { background: linear-gradient(90deg, #ff4444, #ff6666); }
|
||||
.ml-vital-bar.sta .ml-vital-fill { background: linear-gradient(90deg, #ffaa00, #ffcc44); }
|
||||
.ml-vital-bar.mana .ml-vital-fill { background: linear-gradient(90deg, #4488ff, #66aaff); }
|
||||
|
||||
.ml-vital-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* ── Stats row ────────────────────────────────────────── */
|
||||
.ml-pr-stats {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 0.68rem;
|
||||
color: #aaa;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.ml-stat {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.ml-meta-pill {
|
||||
font-size: 0.6rem;
|
||||
padding: 0 6px;
|
||||
border-radius: 3px;
|
||||
background: #333;
|
||||
color: #888;
|
||||
margin-left: auto;
|
||||
}
|
||||
.ml-meta-pill.active { background: rgba(68, 204, 68, 0.15); color: #4c4; }
|
||||
|
||||
/* ── Map container ────────────────────────────────────── */
|
||||
.ml-map-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
cursor: grab;
|
||||
}
|
||||
.ml-map-container:active { cursor: grabbing; }
|
||||
|
||||
.ml-map-group {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.ml-map-img {
|
||||
display: block;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
/* ── Player dots ──────────────────────────────────────── */
|
||||
.ml-dots-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ml-dot {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
.ml-dot:hover {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* ── Tooltip ──────────────────────────────────────────── */
|
||||
.ml-tooltip {
|
||||
position: absolute;
|
||||
background: rgba(0, 30, 60, 0.92);
|
||||
color: #eee;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #335;
|
||||
}
|
||||
|
||||
/* ── Coordinate display ───────────────────────────────── */
|
||||
.ml-coords {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
background: rgba(0, 50, 100, 0.85);
|
||||
color: #eee;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── Mobile ───────────────────────────────────────────── */
|
||||
@media (max-width: 768px) {
|
||||
.ml-layout { flex-direction: column; }
|
||||
.ml-sidebar { width: 100%; min-width: 100%; max-height: 40vh; border-right: none; border-bottom: 2px solid #333; }
|
||||
.ml-map-container { min-height: 60vh; }
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue