NotSoToothless
1044 lines
43 KiB
Plaintext
1044 lines
43 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="<%= lang %>">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Match Detail | <%= botName %></title>
|
|
<meta name="description" content="View detailed match scoreboard and battle logs.">
|
|
<link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preload" href="/Fonts/symbols_skyquake.ttf" as="font" type="font/ttf" crossorigin="anonymous">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/output.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" media="print" onload="this.media='all'">
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: 'skyquakesymbols';
|
|
src: url('/Fonts/symbols_skyquake.ttf') format('truetype');
|
|
font-display: swap;
|
|
}
|
|
|
|
body { background: #1b1b1b; min-height: 100vh; }
|
|
.text-accent { color: #F5F5DC; }
|
|
.text-muted { color: #90EE90; }
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
|
|
box-shadow: 0 4px 20px rgba(245, 245, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
color: #1E1E1E; font-weight: 700;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.btn-primary:hover {
|
|
box-shadow: 0 8px 25px rgba(245, 245, 220, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.game-detail-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 6rem 1rem 2rem 1rem;
|
|
min-height: calc(100vh - 200px);
|
|
}
|
|
|
|
/* Map Hero */
|
|
.map-hero {
|
|
position: relative;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
min-height: 200px;
|
|
background: rgba(30, 30, 30, 0.8);
|
|
border: 1px solid rgba(144, 238, 144, 0.15);
|
|
}
|
|
.map-hero-bg {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: 0.25;
|
|
}
|
|
.map-hero-overlay {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: linear-gradient(to bottom, rgba(27,27,27,0.4), rgba(27,27,27,0.95));
|
|
}
|
|
.map-hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
padding: 2.5rem 2rem;
|
|
text-align: center;
|
|
}
|
|
.match-type-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
background: rgba(144, 238, 144, 0.15);
|
|
color: #90EE90;
|
|
border: 1px solid rgba(144, 238, 144, 0.3);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.match-map-name {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.match-squadrons {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.sq-winner { color: #90EE90; text-shadow: 0 0 10px rgba(144, 238, 144, 0.3); font-family: 'skyquakesymbols', 'Inter', sans-serif; }
|
|
.sq-loser { color: rgba(255, 255, 255, 0.7); font-family: 'skyquakesymbols', 'Inter', sans-serif; }
|
|
.sq-vs { color: rgba(255, 255, 255, 0.4); font-size: 1rem; font-weight: 400; }
|
|
.match-meta {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 2rem;
|
|
font-size: 0.9rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
flex-wrap: wrap;
|
|
}
|
|
.match-meta-item i { margin-right: 0.4rem; color: #90EE90; }
|
|
|
|
/* Replay Video */
|
|
.video-container {
|
|
display: inline-block;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(144, 238, 144, 0.15);
|
|
background: rgba(30, 30, 30, 0.6);
|
|
position: relative;
|
|
}
|
|
.video-container video {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.video-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4rem;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
gap: 0.75rem;
|
|
flex-direction: column;
|
|
}
|
|
.video-loading .spinner {
|
|
width: 24px; height: 24px;
|
|
border: 2px solid rgba(144, 238, 144, 0.2);
|
|
border-top-color: #90EE90;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
.video-loading .subtext {
|
|
font-size: 0.8rem;
|
|
color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
.video-fallback {
|
|
padding: 2rem;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 120px;
|
|
}
|
|
|
|
/* Ground / Air toggle */
|
|
.rc-mode-toggle {
|
|
display: none; /* shown via JS when air data available */
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 6px;
|
|
padding: 2px;
|
|
gap: 2px;
|
|
margin-left: auto;
|
|
margin-right: 1rem;
|
|
}
|
|
.rc-mode-toggle.visible { display: inline-flex; }
|
|
.rc-mode-btn {
|
|
padding: 4px 14px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
.rc-mode-btn:hover { color: rgba(255, 255, 255, 0.75); }
|
|
.rc-mode-btn.active {
|
|
background: rgba(144, 238, 144, 0.15);
|
|
color: #90EE90;
|
|
box-shadow: 0 0 8px rgba(144, 238, 144, 0.1);
|
|
}
|
|
|
|
/* Scoreboard */
|
|
.scoreboard-section { margin-bottom: 2rem; }
|
|
.teams-detailed {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.teams-detailed { grid-template-columns: 1fr; }
|
|
.match-squadrons { font-size: 1.1rem; gap: 0.75rem; }
|
|
.match-map-name { font-size: 1.8rem; }
|
|
}
|
|
.team-detailed {
|
|
background: linear-gradient(135deg, rgba(62, 78, 62, 0.15) 0%, rgba(44, 44, 44, 0.15) 100%);
|
|
border-radius: 0.75rem;
|
|
padding: 1.25rem;
|
|
border: 1px solid rgba(144, 238, 144, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.team-detailed h4 {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
text-align: center;
|
|
font-family: 'skyquakesymbols', 'Inter', sans-serif;
|
|
}
|
|
.team-detailed.winning-team h4 { color: #90EE90; text-shadow: 0 0 10px rgba(144, 238, 144, 0.3); }
|
|
.team-detailed.losing-team h4 { color: rgba(255, 255, 255, 0.6); }
|
|
|
|
.players-table {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
.player-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 50px 50px 50px 50px 50px;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: rgba(144, 238, 144, 0.6);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
}
|
|
.player-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 50px 50px 50px 50px 50px;
|
|
padding: 0.45rem 0.75rem;
|
|
align-items: center;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
|
|
transition: background 0.15s ease;
|
|
}
|
|
.player-row:hover { background: rgba(255, 255, 255, 0.04); }
|
|
.player-identity { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
|
|
.player-info { display: flex; flex-direction: column; min-width: 0; }
|
|
.player-name {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: rgb(250, 227, 200);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.player-name a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color 0.15s;
|
|
}
|
|
.player-name a:hover { color: #90EE90; text-decoration: underline; }
|
|
.player-squadron-live {
|
|
font-family: 'skyquakesymbols', monospace;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
font-size: 0.8rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
.player-vehicle {
|
|
font-family: 'skyquakesymbols', 'Inter', sans-serif;
|
|
font-size: 0.7rem;
|
|
color: rgba(255, 255, 255, 0.35);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.player-vehicle.dead { color: rgba(255, 60, 60, 0.4); }
|
|
.vehicle-icon {
|
|
width: 28px; height: 28px;
|
|
object-fit: contain;
|
|
border-radius: 3px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 2px;
|
|
filter: brightness(1.1) contrast(1.2);
|
|
flex-shrink: 0;
|
|
}
|
|
.stat-col {
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
.stat-col.stat-kill { color: rgb(60, 255, 60); }
|
|
.stat-col.stat-death { color: rgb(255, 60, 60); }
|
|
.stat-col.stat-cap { color: rgb(255, 255, 0); }
|
|
.stat-col.stat-assist { color: rgb(230, 150, 90); }
|
|
.stat-col.stat-zero { color: rgba(255, 255, 255, 0.2); }
|
|
|
|
/* Logs */
|
|
.logs-section { margin-bottom: 2rem; }
|
|
.log-card {
|
|
background: linear-gradient(135deg, rgba(62, 78, 62, 0.15) 0%, rgba(44, 44, 44, 0.15) 100%);
|
|
border-radius: 0.75rem;
|
|
border: 1px solid rgba(144, 238, 144, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
.log-header {
|
|
padding: 0.75rem 1.25rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 600;
|
|
color: #F5F5DC;
|
|
transition: background 0.15s;
|
|
}
|
|
.log-header:hover { background: rgba(255, 255, 255, 0.03); }
|
|
.log-header > i { color: #90EE90; transition: transform 0.3s; }
|
|
.log-header.expanded > i { transform: rotate(180deg); }
|
|
.log-body {
|
|
display: none;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
padding: 0 1.25rem 1rem;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8rem;
|
|
line-height: 1.6;
|
|
}
|
|
.log-body.show { display: block; }
|
|
.log-entry { padding: 0.15rem 0; color: rgba(255,255,255,0.4); }
|
|
.log-entry .bl-win { color: rgb(100, 255, 100); }
|
|
.log-entry .bl-lose { color: rgb(255, 100, 100); }
|
|
.log-entry .bl-time { color: rgba(255,255,255,0.25); }
|
|
.log-entry .bl-action { color: rgba(255,255,255,0.4); }
|
|
.log-entry.chat-team { color: rgba(255, 255, 255, 0.7); }
|
|
.log-entry.chat-all { color: rgba(255, 200, 100, 0.9); }
|
|
.log-entry.chat-team.chat-win { color: rgb(100, 255, 100); }
|
|
.log-entry.chat-team.chat-lose { color: rgb(255, 100, 100); }
|
|
|
|
/* Loading state */
|
|
.loading-state {
|
|
text-align: center;
|
|
padding: 6rem 2rem;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
.loading-state .spinner {
|
|
width: 40px; height: 40px;
|
|
border: 3px solid rgba(144, 238, 144, 0.2);
|
|
border-top-color: #90EE90;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin: 0 auto 1.5rem;
|
|
}
|
|
|
|
/* Error state */
|
|
.error-state {
|
|
text-align: center;
|
|
padding: 6rem 2rem;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
display: none;
|
|
}
|
|
.error-state i { font-size: 3rem; margin-bottom: 1rem; color: rgba(255, 60, 60, 0.5); }
|
|
|
|
/* Back link */
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #90EE90;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1.5rem;
|
|
text-decoration: none;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.back-link:hover { opacity: 0.8; }
|
|
|
|
/* ── Replay Canvas Viewer ── */
|
|
#replayViewerContainer {
|
|
width: 100%;
|
|
}
|
|
.rc-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(190px, 230px) minmax(560px, 720px) minmax(190px, 230px);
|
|
width: min(100%, 1210px);
|
|
gap: 0.5rem;
|
|
align-items: start;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
@media (max-width: 1120px) {
|
|
.rc-layout { grid-template-columns: 1fr; }
|
|
.rc-panel { max-height: 200px; }
|
|
}
|
|
.rc-panel {
|
|
background: rgba(255,255,255,0.025);
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
border-radius: 0.4rem;
|
|
overflow-y: auto;
|
|
font-size: 0.78rem;
|
|
}
|
|
.rc-panel-head {
|
|
padding: 0.5rem 0.6rem 0.4rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
position: sticky;
|
|
top: 0;
|
|
background: rgba(27,27,27,0.95);
|
|
backdrop-filter: blur(4px);
|
|
z-index: 1;
|
|
text-align: center;
|
|
}
|
|
.rc-panel-label {
|
|
font-weight: 700;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
.rc-clan-tag {
|
|
font-family: 'skyquakesymbols', monospace;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
}
|
|
.rc-panel-list { padding: 0.25rem 0; }
|
|
.rc-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
padding: 0.35rem 0.6rem;
|
|
cursor: pointer;
|
|
transition: background 0.12s, opacity 0.3s;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
.rc-row:hover, .rc-row.rc-hl {
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
.rc-panel-win .rc-row.rc-hl { border-left-color: rgba(0,200,0,0.5); }
|
|
.rc-panel-lose .rc-row.rc-hl { border-left-color: rgba(220,30,30,0.5); }
|
|
.rc-row.rc-dead { opacity: 0.4; }
|
|
.rc-row.rc-gone { opacity: 0.2; cursor: default; }
|
|
.rc-row.rc-dead:hover, .rc-row.rc-gone:hover { background: transparent; }
|
|
.rc-type-icon {
|
|
width: 28px;
|
|
height: 22px;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
filter: brightness(0) invert(1);
|
|
opacity: 0.55;
|
|
}
|
|
.rc-panel-win .rc-type-icon { filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(80deg); opacity: 0.6; }
|
|
.rc-panel-lose .rc-type-icon { filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(-10deg); opacity: 0.6; }
|
|
.rc-row-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.rc-row-name {
|
|
color: rgba(255,255,255,0.82);
|
|
font-size: 0.76rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.rc-row-veh {
|
|
color: rgba(255,255,255,0.32);
|
|
font-size: 0.65rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.rc-row-status {
|
|
flex-shrink: 0;
|
|
font-size: 0.6rem;
|
|
color: rgba(255,255,255,0.3);
|
|
width: 16px;
|
|
text-align: center;
|
|
}
|
|
.rc-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
.rc-canvas {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.4rem;
|
|
background: #111;
|
|
cursor: crosshair;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
.rc-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
width: 100%;
|
|
padding: 0.45rem 0;
|
|
}
|
|
.rc-btn {
|
|
background: rgba(255,255,255,0.07);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
color: rgba(255,255,255,0.6);
|
|
padding: 0.25rem 0.45rem;
|
|
border-radius: 0.2rem;
|
|
cursor: pointer;
|
|
font-size: 0.72rem;
|
|
transition: all 0.12s;
|
|
font-family: inherit;
|
|
}
|
|
.rc-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
|
|
.rc-play { font-size: 0.8rem; padding: 0.25rem 0.55rem; }
|
|
.rc-speeds { display: flex; gap: 1px; }
|
|
.rc-sp.active {
|
|
background: rgba(245,245,220,0.15);
|
|
color: #F5F5DC;
|
|
border-color: rgba(245,245,220,0.2);
|
|
}
|
|
.rc-scrub {
|
|
flex: 1;
|
|
height: 6px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: linear-gradient(to right, #2a6e2a var(--rc-progress, 0%), rgba(255,255,255,0.12) var(--rc-progress, 0%));
|
|
border-radius: 3px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 6px 0;
|
|
box-sizing: content-box;
|
|
background-clip: content-box;
|
|
}
|
|
.rc-scrub::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: #90ee90;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 3px rgba(0,0,0,0.5);
|
|
}
|
|
.rc-scrub::-moz-range-thumb {
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: #90ee90;
|
|
border: none;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 3px rgba(0,0,0,0.5);
|
|
}
|
|
.rc-time {
|
|
font-size: 0.65rem;
|
|
color: rgba(255,255,255,0.4);
|
|
white-space: nowrap;
|
|
min-width: 65px;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* ── Battle Log (glass morphism) ── */
|
|
.rc-log-wrap {
|
|
width: 100%;
|
|
margin-top: 0.4rem;
|
|
}
|
|
.rc-log {
|
|
max-height: 130px;
|
|
overflow-y: auto;
|
|
padding: 0.6rem 0.8rem;
|
|
border-radius: 0.5rem;
|
|
background: rgba(255,255,255,0.04);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04);
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255,255,255,0.1) transparent;
|
|
}
|
|
.rc-log::-webkit-scrollbar { width: 4px; }
|
|
.rc-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
|
.rc-log:empty::after {
|
|
content: 'Waiting for events...';
|
|
color: rgba(255,255,255,0.15);
|
|
font-size: 0.7rem;
|
|
font-style: italic;
|
|
}
|
|
.rc-ev {
|
|
font-size: 0.72rem;
|
|
padding: 0.2rem 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.03);
|
|
animation: rcFadeIn 0.3s ease-out;
|
|
}
|
|
.rc-ev:last-child { border-bottom: none; }
|
|
.rc-ev-kill { }
|
|
.rc-ev-damage { opacity: 0.55; }
|
|
.rc-ev-time {
|
|
display: inline-block;
|
|
width: 32px;
|
|
color: rgba(255,255,255,0.25);
|
|
font-size: 0.65rem;
|
|
font-variant-numeric: tabular-nums;
|
|
margin-right: 0.4rem;
|
|
}
|
|
.rc-ev-win { color: #5cdf5c; font-weight: 500; }
|
|
.rc-ev-lose { color: #e85555; font-weight: 500; }
|
|
.rc-ev-action { color: rgba(255,255,255,0.35); font-size: 0.68rem; }
|
|
.rc-ev-weapon {
|
|
color: rgba(255,255,255,0.2);
|
|
font-size: 0.62rem;
|
|
margin-left: 0.3rem;
|
|
}
|
|
@keyframes rcFadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-white antialiased">
|
|
<%- include('partials/nav', { activePage: 'games' }) %>
|
|
|
|
<div class="game-detail-container">
|
|
<a href="/games" class="back-link"><i class="fas fa-arrow-left"></i> <%= t('nav.games') %></a>
|
|
|
|
<!-- Loading -->
|
|
<div id="loadingState" class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p><%= t('games.loadingMatch') %></p>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div id="errorState" class="error-state">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3 id="errorMessage"><%= t('games.matchNotFound') %></h3>
|
|
</div>
|
|
|
|
<!-- Content (hidden until loaded) -->
|
|
<div id="matchContent" style="display: none;">
|
|
<!-- Map Hero -->
|
|
<div class="map-hero" id="mapHero">
|
|
<div class="map-hero-bg" id="mapHeroBg"></div>
|
|
<div class="map-hero-overlay"></div>
|
|
<div class="map-hero-content">
|
|
<div class="match-type-badge" id="matchTypeBadge"></div>
|
|
<div class="match-map-name" id="matchMapName"></div>
|
|
<div class="match-squadrons">
|
|
<span class="sq-winner" id="sqWinner"></span>
|
|
<span class="sq-vs">VS</span>
|
|
<span class="sq-loser" id="sqLoser"></span>
|
|
</div>
|
|
<div class="match-meta" id="matchMeta"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scoreboard -->
|
|
<div class="scoreboard-section">
|
|
<div class="teams-detailed" id="scoreboardContainer"></div>
|
|
</div>
|
|
|
|
<!-- Replay Canvas Viewer (collapsible) -->
|
|
<div class="logs-section">
|
|
<div class="log-card">
|
|
<div class="log-header" onclick="toggleReplayViewer()">
|
|
<span><i class="fas fa-play-circle" style="margin-right: 0.5rem;"></i><%= t('games.replayVideo') %></span>
|
|
<div class="rc-mode-toggle" id="rcModeToggle" onclick="event.stopPropagation()">
|
|
<button class="rc-mode-btn active" data-mode="ground" onclick="switchReplayMode('ground')"><i class="fas fa-crosshairs" style="margin-right: 4px;"></i><%= t('games.modeGround') %></button>
|
|
<button class="rc-mode-btn" data-mode="air" onclick="switchReplayMode('air')"><i class="fas fa-plane" style="margin-right: 4px;"></i><%= t('games.modeAir') %></button>
|
|
</div>
|
|
<i class="fas fa-chevron-down" id="replayViewerToggleIcon"></i>
|
|
</div>
|
|
<div class="log-body" id="replayViewerBody" style="max-height: none; padding: 1rem; font-family: inherit;">
|
|
<div class="video-loading" id="replayLoading">
|
|
<div class="spinner"></div>
|
|
<span><%= t('games.loadingReplay') %></span>
|
|
</div>
|
|
<div id="replayViewerContainer" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs -->
|
|
<div class="logs-section" id="logsSection" style="display: none;">
|
|
<div class="log-card">
|
|
<div class="log-header" onclick="toggleLog('chatLog')">
|
|
<span><i class="fas fa-comment-dots" style="margin-right: 0.5rem;"></i><%= t('games.chatLog') %></span>
|
|
<i class="fas fa-chevron-down" id="chatLogIcon"></i>
|
|
</div>
|
|
<div class="log-body" id="chatLogBody"></div>
|
|
</div>
|
|
<div class="log-card">
|
|
<div class="log-header" onclick="toggleLog('battleLog')">
|
|
<span><i class="fas fa-crosshairs" style="margin-right: 0.5rem;"></i><%= t('games.battleLog') %></span>
|
|
<i class="fas fa-chevron-down" id="battleLogIcon"></i>
|
|
</div>
|
|
<div class="log-body" id="battleLogBody"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<%- include('partials/footer') %>
|
|
|
|
<script>
|
|
window.__lang = '<%= lang %>';
|
|
window.__i18n = <%- localeJson %>;
|
|
window.__t = function(key) {
|
|
var parts = key.split('.'), obj = window.__i18n;
|
|
for (var i = 0; i < parts.length; i++) { obj = obj && obj[parts[i]]; }
|
|
return obj !== undefined ? obj : key;
|
|
};
|
|
window.switchLanguage = function(lang) {
|
|
var next = lang || (document.documentElement.lang === 'en' ? 'ru' : 'en');
|
|
if (next === document.documentElement.lang) return;
|
|
document.cookie = 'lang=' + next + ';path=/;max-age=31536000;SameSite=Lax';
|
|
window.location.reload();
|
|
};
|
|
</script>
|
|
<script src="/js/main.js?v=3"></script>
|
|
<script src="/js/api-client.js?v=3"></script>
|
|
<script src="/js/vehicle-i18n.js"></script>
|
|
<script src="/js/header-search.js?v=2"></script>
|
|
<script src="/js/replay-canvas.js?v=13"></script>
|
|
<script>
|
|
const sessionId = '<%= sessionId %>';
|
|
const __t = window.__t;
|
|
let vehicleIconMappings = null;
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function normalizeSquadronTag(tag) {
|
|
return String(tag || '').replace(/^\[|\]$/g, '').trim();
|
|
}
|
|
|
|
function sameSquadronTag(a, b) {
|
|
const left = normalizeSquadronTag(a).toLowerCase();
|
|
const right = normalizeSquadronTag(b).toLowerCase();
|
|
return Boolean(left && right && left === right);
|
|
}
|
|
|
|
function chatTeamClass(line, replay) {
|
|
if (!line.includes('[TEAM]')) return 'chat-all';
|
|
const m = line.match(/^\[[^\]]*\]\s+\[TEAM\]\s+\[([^\]]*)\]/);
|
|
const squadron = m ? m[1] : '';
|
|
if (sameSquadronTag(squadron, replay.winning_team_squadron)) return 'chat-team chat-win';
|
|
if (sameSquadronTag(squadron, replay.losing_team_squadron)) return 'chat-team chat-lose';
|
|
return 'chat-team';
|
|
}
|
|
|
|
function buildReplayPlayerSquadronMap(replay) {
|
|
const map = new Map();
|
|
for (const team of replay.teams || []) {
|
|
const squadron = normalizeSquadronTag(team.squadron || team.squadron_tagged);
|
|
if (!squadron) continue;
|
|
for (const player of team.players || []) {
|
|
const nick = String(player.nick || '').trim();
|
|
if (nick) map.set(nick, squadron);
|
|
}
|
|
}
|
|
return map;
|
|
}
|
|
|
|
function addVictimSquadron(victim, playerSquadrons) {
|
|
if (/^\[[^\]]+\]\s+/.test(victim)) return victim;
|
|
const nameMatch = victim.match(/^(.+?)\s+\(/);
|
|
const victimName = nameMatch ? nameMatch[1].trim() : victim.trim();
|
|
const squadron = playerSquadrons.get(victimName);
|
|
return squadron ? `[${squadron}] ${victim}` : victim;
|
|
}
|
|
|
|
function formatBattleLogLine(line, playerSquadrons = new Map()) {
|
|
// Format: +[TIME] [SQUAD] Player (Vehicle) ACTION [SQUAD] Player (Vehicle)
|
|
// or: -[TIME] [SQUAD] Player (Vehicle) ACTION [SQUAD] Player (Vehicle)
|
|
// Parse: sign[TIME] rest
|
|
const m = line.match(/^([+-])(\[[^\]]*\])\s+(.+)$/);
|
|
if (!m) return escapeHtml(line);
|
|
const isWinnerAction = m[1] === '+';
|
|
const winCls = isWinnerAction ? 'bl-win' : 'bl-lose';
|
|
const loseCls = isWinnerAction ? 'bl-lose' : 'bl-win';
|
|
const time = m[2];
|
|
const rest = m[3];
|
|
// Split on action words
|
|
const actionMatch = rest.match(/^(.+?)\s+(destroyed|damaged|shot down|crashed|killed)\s+(?:\(([^)]*)\)\s+)?(.+)$/i);
|
|
if (!actionMatch) {
|
|
return `<span class="bl-time">${escapeHtml(m[1] + time)}</span> <span class="${winCls}">${escapeHtml(rest)}</span>`;
|
|
}
|
|
const attacker = actionMatch[1];
|
|
const action = actionMatch[2];
|
|
const actionExtra = actionMatch[3] || '';
|
|
const victim = addVictimSquadron(actionMatch[4], playerSquadrons);
|
|
const actionText = actionExtra ? `${action} (${actionExtra})` : action;
|
|
return `<span class="bl-time">${escapeHtml(m[1] + time)}</span> `
|
|
+ `<span class="${winCls}">${escapeHtml(attacker)}</span> `
|
|
+ `<span class="bl-action">${escapeHtml(actionText)}</span> `
|
|
+ `<span class="${loseCls}">${escapeHtml(victim)}</span>`;
|
|
}
|
|
|
|
function normalizeVehicleName(name) {
|
|
if (!name) return name;
|
|
// Mirror BOT/data_parser.py + server.js: drop ace-pilot prefixes
|
|
// and the (TEL) tag, but keep visible decoration glyphs (▄ ◢ ◊
|
|
// etc.) — they're country / event indicators rendered through
|
|
// the skyquake font. Only the Private Use Area gets stripped
|
|
// (truly nothing renders that legibly).
|
|
name = name.replace(/Weizman[\u2019\u0027]s\s*/g, '');
|
|
name = name.replace(/Plagis[\u2019\u0027]\s*/g, '');
|
|
name = name.replace(/\s*\(TEL\)/g, '');
|
|
name = name.replace(/[\uE000-\uF8FF]/g, '');
|
|
return name.trim();
|
|
}
|
|
|
|
function getVehicleIcon(vehicleInternal) {
|
|
if (!vehicleInternal || !vehicleIconMappings) return null;
|
|
const vehicleName = vehicleInternal.toString().toLowerCase();
|
|
if (vehicleIconMappings[vehicleName]) return vehicleIconMappings[vehicleName];
|
|
const variations = [
|
|
vehicleName, vehicleName.replace(/\s+/g, '_'), vehicleName.replace(/\s+/g, '-'),
|
|
vehicleName.replace(/_/g, '-'), vehicleName.replace(/-/g, '_'),
|
|
vehicleName.replace(/\./g, ''), vehicleName.replace(/\./g, '_'), vehicleName.replace(/[^\w\s-]/g, '')
|
|
];
|
|
for (const v of variations) { if (vehicleIconMappings[v]) return vehicleIconMappings[v]; }
|
|
return null;
|
|
}
|
|
|
|
function getMapImage(mapName) {
|
|
if (!mapName) return null;
|
|
const cleanMapName = mapName.replace(/^\s*\[[^\]]+\]\s*/, '').trim();
|
|
const fileName = cleanMapName.replace(/\s+/g, '_').replace(/[^\w\u00C0-\u024F\-_.()]/g, '').replace(/_+/g, '_').replace(/^_|_$/g, '').toLowerCase();
|
|
return `/MAPS/${fileName}.jpg`;
|
|
}
|
|
|
|
function renderTeamTable(players, isWinner) {
|
|
const sorted = [...players].sort((a, b) => (b.score || 0) - (a.score || 0));
|
|
return sorted.map(player => {
|
|
const icon = getVehicleIcon(player.vehicle_internal || player.vehicle_new || player.vehicle || player.vehicleInternal || player.vehicleName);
|
|
const iconHtml = icon ? `<img src="${icon}" alt="" class="vehicle-icon" loading="lazy" onerror="this.style.display='none'">` : '';
|
|
const sqTag = player.squadron_name ? `<span class="player-squadron-live">[${escapeHtml(player.squadron_name)}]</span>` : '';
|
|
const dead = (parseInt(player.deaths) || 0) > 0;
|
|
const veh = normalizeVehicleName(player.vehicle_new || player.vehicle) || 'Unknown';
|
|
const uid = player.uid || player.UID;
|
|
const nameHtml = uid ? `<a href="/players/${uid}">${sqTag}${escapeHtml(player.nick || 'Unknown')}</a>` : `${sqTag}${escapeHtml(player.nick || 'Unknown')}`;
|
|
const ak = player.air_kills || 0, gk = player.ground_kills || 0;
|
|
const ast = player.assists || 0, dth = player.deaths || 0, cap = player.captures || 0;
|
|
|
|
return `<div class="player-row">
|
|
<div class="player-identity">
|
|
${iconHtml}
|
|
<div class="player-info">
|
|
<span class="player-name">${nameHtml}</span>
|
|
<span class="player-vehicle${dead || veh === 'DISCONNECTED' ? ' dead' : ''}" data-vehicle-internal="${escapeHtml(player.vehicle_internal || player.vehicleInternal || '')}">${escapeHtml(veh)}</span>
|
|
</div>
|
|
</div>
|
|
<span class="stat-col ${ak > 0 ? 'stat-kill' : 'stat-zero'}">${ak}</span>
|
|
<span class="stat-col ${gk > 0 ? 'stat-kill' : 'stat-zero'}">${gk}</span>
|
|
<span class="stat-col ${ast > 0 ? 'stat-assist' : 'stat-zero'}">${ast}</span>
|
|
<span class="stat-col ${dth > 0 ? 'stat-death' : 'stat-zero'}">${dth}</span>
|
|
<span class="stat-col ${cap > 0 ? 'stat-cap' : 'stat-zero'}">${cap}</span>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
let replayViewerLoaded = false;
|
|
let replayViewer = null;
|
|
function toggleReplayViewer() {
|
|
const body = document.getElementById('replayViewerBody');
|
|
const icon = document.getElementById('replayViewerToggleIcon');
|
|
const header = icon.closest('.log-header');
|
|
body.classList.toggle('show');
|
|
header.classList.toggle('expanded');
|
|
if (body.classList.contains('show') && !replayViewerLoaded) {
|
|
replayViewerLoaded = true;
|
|
loadReplayViewer();
|
|
}
|
|
}
|
|
|
|
async function loadReplayViewer() {
|
|
const container = document.getElementById('replayViewerContainer');
|
|
const loading = document.getElementById('replayLoading');
|
|
try {
|
|
const resp = await fetch(`/api/match/${sessionId}/replay-canvas`);
|
|
if (!resp.ok) {
|
|
if (resp.status === 404) throw new Error('No paths data found');
|
|
let reason = '';
|
|
try {
|
|
const errJson = await resp.json();
|
|
reason = errJson && (errJson.reason || errJson.error) ? (errJson.reason || errJson.error) : '';
|
|
} catch (_) {}
|
|
throw new Error(reason || `HTTP ${resp.status}`);
|
|
}
|
|
const data = await resp.json();
|
|
if (!data.entities || !data.players) throw new Error('Invalid replay data');
|
|
loading.style.display = 'none';
|
|
container.style.display = 'block';
|
|
if (typeof ReplayCanvas === 'undefined') {
|
|
throw new Error('ReplayCanvas class not loaded');
|
|
}
|
|
replayViewer = new ReplayCanvas(container, data);
|
|
await replayViewer.init();
|
|
// Show toggle if air mode is available
|
|
if (replayViewer.hasAirMode) {
|
|
document.getElementById('rcModeToggle').classList.add('visible');
|
|
}
|
|
} catch (err) {
|
|
loading.style.display = 'block';
|
|
loading.innerHTML = '<div class="video-fallback" style="color:#ff6666;">' + (err.message || 'Unknown error') + '</div>';
|
|
}
|
|
}
|
|
|
|
function switchReplayMode(mode) {
|
|
if (!replayViewer) return;
|
|
replayViewer.setMode(mode);
|
|
document.querySelectorAll('.rc-mode-btn').forEach(btn => {
|
|
btn.classList.toggle('active', btn.dataset.mode === mode);
|
|
});
|
|
}
|
|
|
|
function toggleLog(logId) {
|
|
const body = document.getElementById(logId + 'Body');
|
|
const icon = document.getElementById(logId + 'Icon');
|
|
const header = icon.closest('.log-header');
|
|
body.classList.toggle('show');
|
|
header.classList.toggle('expanded');
|
|
}
|
|
|
|
async function loadMatchDetail() {
|
|
try {
|
|
const match = await window.apiClient.getMatch(sessionId);
|
|
|
|
// Hide loading, show content
|
|
document.getElementById('loadingState').style.display = 'none';
|
|
document.getElementById('matchContent').style.display = 'block';
|
|
|
|
// Map hero
|
|
const mapName = match.map_name || 'Unknown Map';
|
|
const cleanMapName = mapName.replace(/^\s*\[[^\]]+\]\s*/, '').trim() || 'Unknown Map';
|
|
const mapImg = getMapImage(mapName);
|
|
if (mapImg) document.getElementById('mapHeroBg').style.backgroundImage = `url('${mapImg}')`;
|
|
|
|
const TYPE_LABELS = { sqb: __t('live.squadronBattle'), rb: __t('live.randomBattle') };
|
|
document.getElementById('matchTypeBadge').textContent = TYPE_LABELS[match.game_type] || match.game_type || 'Match';
|
|
document.getElementById('matchMapName').textContent = cleanMapName;
|
|
document.getElementById('sqWinner').textContent = match.winning_tag || match.winning_squadron || 'Unknown';
|
|
document.getElementById('sqLoser').textContent = match.losing_tag || match.losing_squadron || 'Unknown';
|
|
|
|
// Meta
|
|
const endTime = match.endtime_iso ? new Date(match.endtime_iso).toISOString().replace('T', ' ').substring(0, 16) + ' UTC' : 'Unknown';
|
|
document.getElementById('matchMeta').innerHTML = `
|
|
<span class="match-meta-item"><i class="fas fa-clock"></i>${endTime}</span>
|
|
<span class="match-meta-item"><i class="fas fa-fingerprint"></i>${escapeHtml(sessionId)}</span>
|
|
`;
|
|
|
|
// Scoreboard
|
|
const winPlayers = match.winning_team?.players || [];
|
|
const losePlayers = match.losing_team?.players || [];
|
|
const headerHtml = `<div class="player-header">
|
|
<span>${__t('common.player')}</span>
|
|
<span style="text-align:center">${__t('live.air')}</span>
|
|
<span style="text-align:center">${__t('live.gnd')}</span>
|
|
<span style="text-align:center">${__t('live.ast')}</span>
|
|
<span style="text-align:center">${__t('live.dth')}</span>
|
|
<span style="text-align:center">${__t('live.cap')}</span>
|
|
</div>`;
|
|
|
|
document.getElementById('scoreboardContainer').innerHTML = `
|
|
<div class="team-detailed winning-team">
|
|
<h4><i class="fas fa-trophy" style="margin-right: 0.5rem; font-size: 0.9rem;"></i>${escapeHtml(match.winning_tag || match.winning_squadron || 'Unknown')}</h4>
|
|
<div class="players-table">${headerHtml}${renderTeamTable(winPlayers, true)}</div>
|
|
</div>
|
|
<div class="team-detailed losing-team">
|
|
<h4>${escapeHtml(match.losing_tag || match.losing_squadron || 'Unknown')}</h4>
|
|
<div class="players-table">${headerHtml}${renderTeamTable(losePlayers, false)}</div>
|
|
</div>
|
|
`;
|
|
|
|
// Replay data (chat/battle logs)
|
|
if (match.replay_available) {
|
|
loadReplayData();
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load match:', error);
|
|
document.getElementById('loadingState').style.display = 'none';
|
|
document.getElementById('errorState').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
async function loadReplayData() {
|
|
try {
|
|
const replay = await window.apiClient.getMatchReplay(sessionId);
|
|
if (!replay.available) return;
|
|
|
|
document.getElementById('logsSection').style.display = 'block';
|
|
|
|
// Add duration/mode to meta
|
|
const metaEl = document.getElementById('matchMeta');
|
|
if (replay.duration) {
|
|
const mins = Math.floor(replay.duration / 60);
|
|
const secs = replay.duration % 60;
|
|
metaEl.innerHTML += `<span class="match-meta-item"><i class="fas fa-hourglass-half"></i>${mins}m ${secs}s</span>`;
|
|
}
|
|
if (replay.mode) {
|
|
metaEl.innerHTML += `<span class="match-meta-item"><i class="fas fa-gamepad"></i>${escapeHtml(replay.mode)}</span>`;
|
|
}
|
|
|
|
// Chat log
|
|
const chatBody = document.getElementById('chatLogBody');
|
|
if (replay.chat_log && replay.chat_log.length > 0) {
|
|
chatBody.innerHTML = replay.chat_log.map(line => {
|
|
const cls = chatTeamClass(line, replay);
|
|
return `<div class="log-entry ${cls}">${escapeHtml(line)}</div>`;
|
|
}).join('');
|
|
} else {
|
|
chatBody.innerHTML = `<div class="log-entry" style="color: rgba(255,255,255,0.3);">${__t('games.noChatLog')}</div>`;
|
|
}
|
|
|
|
// Battle log
|
|
const battleBody = document.getElementById('battleLogBody');
|
|
if (replay.battle_log && replay.battle_log.length > 0) {
|
|
const playerSquadrons = buildReplayPlayerSquadronMap(replay);
|
|
battleBody.innerHTML = replay.battle_log.map(line => {
|
|
return `<div class="log-entry">${formatBattleLogLine(line, playerSquadrons)}</div>`;
|
|
}).join('');
|
|
} else {
|
|
battleBody.innerHTML = `<div class="log-entry" style="color: rgba(255,255,255,0.3);">${__t('games.noBattleLog')}</div>`;
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load replay data:', error);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
try {
|
|
const iconsRes = await window.apiClient.getVehicleIcons();
|
|
vehicleIconMappings = iconsRes.mappings || {};
|
|
} catch (e) { vehicleIconMappings = {}; }
|
|
loadMatchDetail();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|