SRETSS/tssbot.web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): readable header (duration 6m 37s, faded id by GAME) + skyquake font for vehicle country glyphs

Browse Source
This commit is contained in:
FURRO404
2026-06-18 01:54:54 -07:00
parent 29ef4fb346
commit 98a0c4fd9e
3 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/fonts/symbols_skyquake.ttf
BIN
View File
Binary file not shown.
frontend/src/App.jsx
+8 -5
View File
@@ -122,7 +122,8 @@ function formatDuration(seconds) {
if (!total) return '' if (!total) return ''
const m = Math.floor(total / 60) const m = Math.floor(total / 60)
const s = total % 60 const s = total % 60
return `${m}:${String(s).padStart(2, '0')}` if (!m) return `${s}s`
return `${m}m ${s}s`
} }
function gameParticipants(game) { function gameParticipants(game) {
@@ -2842,7 +2843,10 @@ function GamePage({ gameId, navigate }) {
</button> </button>
<div className="rounded-lg border border-border bg-fury-white p-6 shadow-sm"> <div className="rounded-lg border border-border bg-fury-white p-6 shadow-sm">
<p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">Game</p> <div className="flex flex-wrap items-baseline gap-x-3">
<p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">Game</p>
<span className="break-all text-xs text-text-muted opacity-70">{game?.session_id || gameId}</span>
</div>
<div className="mt-1 flex flex-wrap items-center gap-3"> <div className="mt-1 flex flex-wrap items-center gap-3">
<h1 className="text-4xl font-bold">{game?.map_name || 'Battle log'}</h1> <h1 className="text-4xl font-bold">{game?.map_name || 'Battle log'}</h1>
{game?.draw ? ( {game?.draw ? (
@@ -2852,10 +2856,9 @@ function GamePage({ gameId, navigate }) {
) : null} ) : null}
</div> </div>
{subtitle ? <p className="mt-1 text-sm font-medium text-fury-violet">{subtitle}</p> : null} {subtitle ? <p className="mt-1 text-sm font-medium text-fury-violet">{subtitle}</p> : null}
<p className="mt-2 break-all text-sm text-text-soft"> <p className="mt-2 text-sm text-text-soft">
{game ? formatDate(game.timestamp) : ''} {game ? formatDate(game.timestamp) : ''}
{duration ? ` · ${duration}` : ''} {duration ? ` · ${duration}` : ''}
{game ? ` · ${game.session_id}` : gameId}
</p> </p>
<div className="mt-3"> <div className="mt-3">
<ParticipantNames participants={participantNames} /> <ParticipantNames participants={participantNames} />
@@ -2922,7 +2925,7 @@ function GamePage({ gameId, navigate }) {
{(player.vehicles || []).length ? ( {(player.vehicles || []).length ? (
player.vehicles.map((vehicle) => ( player.vehicles.map((vehicle) => (
<span <span
className="inline-flex items-center gap-1 text-xs text-text-soft" className="vehicle-name inline-flex items-center gap-1 text-xs text-text-soft"
key={vehicle.cdk} key={vehicle.cdk}
> >
<img <img
frontend/src/styles.css
+14
View File
@@ -119,6 +119,20 @@
box-sizing: border-box; box-sizing: border-box;
} }
@font-face {
font-family: "skyquakesymbols";
src: url("/fonts/symbols_skyquake.ttf") format("truetype");
font-display: swap;
}
/* War Thunder vehicle names carry country/event glyphs (▀ ▄ ◊ + PUA markers)
that only the skyquake symbol font renders; list it first, then fall back. */
.vehicle-name {
font-family:
"skyquakesymbols", "SF Pro Rounded", "SF Pro Text", -apple-system, BlinkMacSystemFont,
"Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
}
body { body {
margin: 0; margin: 0;
min-width: 320px; min-width: 320px;