a59296867d
1. Player click → zoom: clicking a player in sidebar or on map dot zooms to their position at 3x zoom, centered on screen. Click again to deselect. Uses direct DOM transform (no React state). 2. Selected dot blink: selected player dot gets 10px size + blink animation (0.6s step-end infinite) matching v1's .dot.highlight. 3. Version display: fetches /api-version on mount, shows "vX.Y.Z" in small text positioned just right of sidebar (fixed, top: 6px). 4. Missing sidebar buttons: added Combat Stats (⚔️) alongside existing Issues (📋) and Vital Sharing (🤝) in SidebarWindowButtons. 5. Rare notification: added 🎆 emojis to "LEGENDARY RARE!" title matching v1's notification text. 6. Dungeon map in radar — verbatim port from v1 lines 3596-3930: - loadDungeonTiles(): fetches dungeon_tiles.json, processes each tile image (color remap: UB source colors → display colors, white → transparent, black → semi-transparent) - cellRotation(): maps rotation values to radians (v1's exact logic) - Dungeon rendering: sorts z_levels (current floor on top at 85% opacity, others at 12%), draws each cell with per-cell rotation, uses processed tile canvases or colored rectangle fallback - Requests dungeon map via WebSocket when radar detects dungeon - Caches dungeon maps on window.__dungeonMapCache - Overworld map: fixed srcSize calculation to use range * pixPerCoord Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 line
17 KiB
CSS
1 line
17 KiB
CSS
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-body: #0d0d0d;--bg-card: #1a1a1a;--bg-card-hover: #222;--bg-header: #111;--border: #333;--text: #ddd;--text-muted: #888;--text-dim: #555;--accent: #4488ff;--hp: linear-gradient(90deg, #ff4444, #ff6666);--hp-bg: #330000;--sta: linear-gradient(90deg, #ffaa00, #ffcc44);--sta-bg: #331a00;--mana: linear-gradient(90deg, #4488ff, #66aaff);--mana-bg: #001433;--badge-combat: #44cc44;--badge-nav: #ffaa00;--badge-idle: #666;--radius: 6px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-body);color:var(--text);line-height:1.4;min-height:100vh}.dashboard{display:flex;flex-direction:column;min-height:100vh}.dashboard-header{background:var(--bg-header);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}.dashboard-title{font-size:1.2rem;font-weight:600;color:var(--accent)}.dashboard-nav{display:flex;gap:16px}.nav-link{color:var(--text-muted);text-decoration:none;font-size:.85rem;transition:color .2s}.nav-link:hover{color:var(--text)}.dashboard-main{flex:1;padding:16px 24px;max-width:1600px;margin:0 auto;width:100%}.global-stats{display:flex;gap:24px;padding:12px 0;margin-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap}.global-stat{display:flex;align-items:center;gap:6px}.global-value{font-size:1.1rem;font-weight:600;color:var(--text)}.global-label{font-size:.75rem;color:var(--text-muted)}.server-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.server-dot.online{background:#4c4}.server-dot.offline{background:#c44}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}.grid-empty{text-align:center;color:var(--text-muted);padding:48px;font-size:1rem}.char-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;cursor:pointer;transition:background .15s,border-color .15s}.char-card:hover{background:var(--bg-card-hover);border-color:#444}.char-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.char-name{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.char-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;padding:2px 8px;border-radius:3px;letter-spacing:.5px}.badge-combat{background:#4c43;color:var(--badge-combat)}.badge-nav{background:#fa03;color:var(--badge-nav)}.badge-idle{background:#64646433;color:var(--badge-idle)}.char-vitals{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}.char-vitals-placeholder{font-size:.75rem;color:var(--text-dim);margin-bottom:8px;font-style:italic}.vital-bar{display:flex;align-items:center;gap:6px}.vital-label{font-size:.65rem;color:var(--text-muted);width:20px;text-align:right}.vital-track{flex:1;height:6px;border-radius:3px;overflow:hidden}.vital-fill{height:100%;border-radius:3px;transition:width .3s ease-out}.vital-text{font-size:.65rem;color:var(--text-muted);width:65px;text-align:right;font-variant-numeric:tabular-nums}.char-stats-row{display:flex;gap:12px;margin-bottom:4px}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}.stat-label{font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.char-location{font-size:.7rem;color:var(--text-dim);text-align:right}.char-expanded{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.expanded-row{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-bottom:2px}.vitae-warn{color:#f66;font-size:.8rem;font-weight:600;margin-bottom:4px}.tab-container{margin-top:24px;border-top:1px solid var(--border);padding-top:16px}.tab-bar{display:flex;gap:4px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-btn{padding:8px 20px;font-size:.85rem;background:var(--bg-card);color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.tab-btn:hover{background:var(--bg-card-hover);color:var(--text)}.tab-btn.active{background:var(--bg-card-hover);color:var(--accent);border-bottom-color:var(--bg-body)}.tab-content{min-height:300px}.chart-section{margin-bottom:24px}.chart-title{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:12px}.rares-summary{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}.rare-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 20px;display:flex;flex-direction:column;align-items:center;min-width:140px}.rare-stat-value{font-size:1.3rem;font-weight:700;color:#fc0}.rare-stat-label{font-size:.7rem;color:var(--text-muted);margin-top:4px}.rare-timeline{max-height:200px;overflow-y:auto}.rare-event{display:flex;gap:12px;padding:4px 0;border-bottom:1px solid #222;font-size:.8rem}.rare-time{color:var(--text-dim);width:80px}.rare-char{color:var(--text-muted);width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rare-name{color:#fc0;font-weight:600}.map-tab{display:flex;flex-direction:column;align-items:center}.map-container{position:relative;width:100%;max-width:800px;aspect-ratio:1}.map-image{width:100%;height:100%;object-fit:contain;display:block}.map-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.map-legend{display:flex;gap:16px;align-items:center;margin-top:8px;font-size:.75rem;color:var(--text-muted)}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.legend-dot.hunting{background:#4c4}.legend-dot.other{background:#fa0}.map-count{margin-left:auto}.inventory-tab{width:100%}.search-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px}.search-input{flex:1;padding:8px 12px;font-size:.9rem;background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);outline:none}.search-input:focus{border-color:var(--accent)}.search-spinner{font-size:.75rem;color:var(--text-muted)}.search-count{font-size:.75rem;color:var(--text-muted);margin-bottom:8px}.search-empty{text-align:center;color:var(--text-dim);padding:24px}.results-table{width:100%;border-collapse:collapse;font-size:.8rem}.results-table th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);color:var(--text-muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.3px}.results-table td{padding:4px 8px;border-bottom:1px solid #1a1a1a;color:var(--text)}.results-table tr:hover td{background:var(--bg-card-hover)}.item-name{font-weight:500}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:8px;padding:10px 16px}.dashboard-main{padding:12px}.global-stats{gap:16px}.char-grid{grid-template-columns:1fr}.char-stats-row{gap:8px}}@media(max-width:480px){.dashboard-nav{gap:10px;font-size:.8rem}.char-card{padding:10px}}.ml-layout{display:flex;height:100vh;overflow:hidden;background:#111;color:#eee;font-family:Segoe UI,sans-serif}.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:.85rem;font-weight:600;color:#88f}.ml-view-toggle{font-size:.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}.ml-server-status{display:flex;align-items:center;gap:6px;padding:4px 0 8px;font-size:.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-detail{color:#888;font-size:.7rem}.ml-status-latency{margin-left:auto;color:#888}.ml-tool-links{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.ml-tool-link{font-size:.68rem;color:#8ac;text-decoration:none;padding:2px 6px;background:#4488ff14;border:1px solid rgba(68,136,255,.15);border-radius:3px;transition:all .15s}.ml-tool-link:hover{background:#4488ff2e;color:#adf}@keyframes ml-pulse{0%,to{opacity:1}50%{opacity:.4}}.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:.6rem;color:#888;text-transform:uppercase;letter-spacing:.3px}.ml-counter.rares .ml-counter-val{color:#fc0}.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%,to{box-shadow:0 0 4px #4af3}50%{box-shadow:0 0 12px #44aaff80}}.ml-sort-buttons{display:flex;gap:2px;margin:8px 0}.ml-sort-btn{flex:1;padding:4px 0;font-size:.65rem;font-weight:600;background:#2a2a2a;color:#888;border:1px solid #444;border-radius:3px;cursor:pointer;text-transform:uppercase;letter-spacing:.3px}.ml-sort-btn:hover{background:#333;color:#ccc}.ml-sort-btn.active{background:#334;color:#88f;border-color:#88f}.ml-filter{width:100%;padding:5px 8px;font-size:.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}.ml-player-list{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.ml-player-list::-webkit-scrollbar{display:none}.ml-player-row{padding:6px 8px;border-bottom:1px solid #2a2a2a;border-left:3px solid transparent;cursor:pointer;transition:background .1s}.ml-player-row:hover{background:#252525}.ml-pr-name{font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ml-pr-coords{font-size:.65rem;color:#888;margin-bottom:3px}.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:#300}.ml-vital-bar.sta{background:#331a00}.ml-vital-bar.mana{background:#001433}.ml-vital-bar.hp .ml-vital-fill{background:linear-gradient(90deg,#f44,#f66)}.ml-vital-bar.sta .ml-vital-fill{background:linear-gradient(90deg,#fa0,#fc4)}.ml-vital-bar.mana .ml-vital-fill{background:linear-gradient(90deg,#48f,#6af)}.ml-vital-fill{height:100%;border-radius:2px;transition:width .3s ease-out}.ml-pr-header{display:flex;justify-content:space-between;align-items:baseline;cursor:pointer}.ml-pr-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px 8px;font-size:.68rem;color:#aaa;margin-bottom:4px}.ml-gs{font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-suffix{font-size:.58rem;color:#666;text-transform:uppercase;letter-spacing:.3px}.ml-taper-icon{width:14px;height:14px;margin-right:2px;vertical-align:text-bottom}.ml-meta-pill{font-size:.6rem;padding:0 6px;border-radius:3px;background:#333;color:#888;text-align:center;justify-self:end}.ml-pr-buttons{display:flex;gap:3px;margin-top:4px}.ml-btn{padding:2px 8px;font-size:.63rem;font-weight:500;border:1px solid #3a3a3a;border-radius:4px;background:#2a2a2a;color:#999;cursor:pointer;white-space:nowrap;transition:all .15s;letter-spacing:.2px}.ml-btn:hover{background:#383838;color:#ddd;border-color:#555}.ml-btn.accent{background:#4488ff1f;color:#6aadff;border-color:#4488ff4d}.ml-btn.accent:hover{background:#4488ff38;color:#8ec5ff;border-color:#4488ff80}.ml-meta-pill.active{background:#44cc4426;color:#4c4}.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;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.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,.5);pointer-events:all;cursor:pointer;z-index:5}.ml-dot:hover{width:10px;height:10px;z-index:10}.ml-dot.ml-dot-selected{width:10px;height:10px;z-index:10;animation:ml-blink .6s step-end infinite}@keyframes ml-blink{50%{opacity:0}}.ml-version{position:fixed;top:6px;left:410px;font-size:.6rem;color:#555;z-index:50;pointer-events:none}.ml-tooltip{position:absolute;background:#001e3ceb;color:#eee;padding:6px 10px;border-radius:4px;font-size:.75rem;pointer-events:none;z-index:1000;white-space:nowrap;border:1px solid #335}.ml-coords{position:absolute;bottom:8px;left:8px;background:#003264d9;color:#eee;padding:4px 10px;border-radius:4px;font-size:.75rem;pointer-events:none;z-index:100;font-variant-numeric:tabular-nums}.ml-toggles{display:flex;gap:12px;margin-bottom:8px;font-size:.72rem}.ml-toggle-label{display:flex;align-items:center;gap:4px;color:#aaa;cursor:pointer}.ml-toggle-label input{accent-color:#4488ff}.ml-trails-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.ml-heatmap-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.8}.ml-portals-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.ml-portal-icon{position:absolute;width:6px;height:6px;transform:translate(-50%,-50%);pointer-events:all;cursor:help}.ml-portal-icon:before{content:"🌀";font-size:10px;position:absolute;transform:translate(-50%,-50%)}.ml-window{position:fixed;background:#1a1a1a;border:1px solid #444;border-radius:6px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #00000080}.ml-window-header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:linear-gradient(135deg,#2a3a5a,#1a2a40);cursor:move;-webkit-user-select:none;user-select:none;border-bottom:1px solid #334}.ml-window-title{font-size:.8rem;font-weight:600;color:#acf}.ml-window-close{background:none;border:none;color:#888;font-size:1.1rem;cursor:pointer;line-height:1;padding:0 4px}.ml-window-close:hover{color:#f66}.ml-window-content{flex:1;overflow:auto;display:flex;flex-direction:column}.ml-stats-controls{display:flex;gap:4px;padding:6px 10px;border-bottom:1px solid #333}.ml-stats-range-btn{padding:3px 10px;font-size:.7rem;background:#2a2a2a;color:#888;border:1px solid #444;border-radius:3px;cursor:pointer}.ml-stats-range-btn.active{background:#4488ff26;color:#6aadff;border-color:#4488ff4d}.ml-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;flex:1}.ml-stats-panel{min-height:200px;background:#fff;border-radius:3px;overflow:hidden}.ml-stats-panel iframe{border:none}.ml-chat-messages{flex:1;overflow-y:auto;padding:6px 10px;font-size:.75rem;font-family:Consolas,Courier New,monospace;line-height:1.4}.ml-chat-line{word-break:break-word}.ml-chat-form{display:flex;border-top:1px solid #333;padding:4px}.ml-chat-input{flex:1;background:#222;color:#eee;border:1px solid #444;border-radius:3px;padding:4px 8px;font-size:.78rem;outline:none}.ml-chat-input:focus{border-color:#48f}.ml-chat-input::placeholder{color:#666}.ml-rare-notifications{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}.ml-rare-notif{background:linear-gradient(135deg,#1a0a2e,#2a1040);border:2px solid #ffcc00;border-radius:8px;padding:16px 32px;text-align:center;animation:ml-notif-in .5s ease-out;box-shadow:0 0 40px #ffcc004d}.ml-rare-notif.exiting{animation:ml-notif-out .5s ease-in forwards}.ml-rare-notif-title{font-size:1.4rem;font-weight:800;color:#fc0;text-shadow:0 0 20px rgba(255,204,0,.5);margin-bottom:4px}.ml-rare-notif-name{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:4px}.ml-rare-notif-by{font-size:.75rem;color:#888}.ml-rare-notif-char{font-size:1rem;font-weight:700;color:#fc0}@keyframes ml-notif-in{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes ml-notif-out{to{transform:translateY(-60px);opacity:0}}.ml-fireworks{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99998}.ml-firework-particle{position:absolute;width:6px;height:6px;border-radius:50%;animation:ml-particle 2s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes ml-particle{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}@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}}
|