event log

frontend/src/App.jsx

@@ -2789,16 +2789,33 @@ function battleLineColor(line) {
   return 'text-text-soft'
 }
 
+function deadVehicleKey(uid, cdk) {
+  return `${String(uid || '').trim()}:${String(cdk || '').trim()}`
+}
+
+function deadVehicleKeysFromEventLog(eventLog) {
+  const keys = new Set()
+  const kills = Array.isArray(eventLog?.kills) ? eventLog.kills : []
+  kills.forEach((kill) => {
+    const uid = kill?.offended_uid
+    const cdk = kill?.offended_unit
+    if (uid !== undefined && uid !== null && cdk) {
+      keys.add(deadVehicleKey(uid, cdk))
+    }
+  })
+  return keys
+}
+
 function GamePage({ gameId, navigate }) {
   const [gameState, setGameState] = useState({ status: 'loading', data: null, error: null })
-  const [logs, setLogs] = useState({ chat_log: [], battle_log: [] })
+  const [logs, setLogs] = useState({ chat_log: [], battle_log: [], event_log: { kills: [], damage: [] } })
 
   useEffect(() => {
     if (!gameId) return
 
     const controller = new AbortController()
     setGameState({ status: 'loading', data: null, error: null })
-    setLogs({ chat_log: [], battle_log: [] })
+    setLogs({ chat_log: [], battle_log: [], event_log: { kills: [], damage: [] } })
 
     fetchJson(apiEndpoints.game(gameId), controller.signal)
       .then((data) => {
@@ -2818,6 +2835,7 @@ function GamePage({ gameId, navigate }) {
           setLogs({
             chat_log: Array.isArray(data?.chat_log) ? data.chat_log : [],
             battle_log: Array.isArray(data?.battle_log) ? data.battle_log : [],
+            event_log: data?.event_log || { kills: [], damage: [] },
           })
         }
       })
@@ -2830,6 +2848,7 @@ function GamePage({ gameId, navigate }) {
 
   const game = gameState.data?.game
   const participants = gameState.data?.participants || []
+  const deadVehicleKeys = useMemo(() => deadVehicleKeysFromEventLog(logs.event_log), [logs.event_log])
   const participantNames = participants.length
     ? participants.map((participant) => ({
       name: participant.team_name,
@@ -2931,21 +2950,24 @@ function GamePage({ gameId, navigate }) {
                           <p className="truncate font-semibold text-text">{player.nick || player.uid}</p>
                           <div className="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5">
                             {(player.vehicles || []).length ? (
-                              player.vehicles.map((vehicle) => (
-                                <span
-                                  className="vehicle-name inline-flex items-center gap-1 text-xs text-text-soft"
-                                  key={vehicle.cdk}
-                                >
-                                  <img
-                                    alt=""
-                                    className="h-4 w-4 object-contain"
-                                    loading="lazy"
-                                    onError={(event) => { event.currentTarget.style.display = 'none' }}
-                                    src={`/vehicle-icons/${vehicle.icon}`}
-                                  />
-                                  {vehicle.name}
-                                </span>
-                              ))
+                              player.vehicles.map((vehicle) => {
+                                const isDead = deadVehicleKeys.has(deadVehicleKey(player.uid, vehicle.cdk))
+                                return (
+                                  <span
+                                    className={`vehicle-name inline-flex items-center gap-1 text-xs text-text-soft transition-opacity ${isDead ? 'vehicle-dead' : ''}`}
+                                    key={vehicle.cdk}
+                                  >
+                                    <img
+                                      alt=""
+                                      className="h-4 w-4 object-contain"
+                                      loading="lazy"
+                                      onError={(event) => { event.currentTarget.style.display = 'none' }}
+                                      src={`/vehicle-icons/${vehicle.icon}`}
+                                    />
+                                    {vehicle.name}
+                                  </span>
+                                )
+                              })
                             ) : (
                               <span className="text-xs text-text-muted">{player.uid}</span>
                             )}

frontend/src/styles.css

@@ -133,6 +133,10 @@
     "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
 }
 
+.vehicle-dead {
+  opacity: 0.45;
+}
+
 /* Chat/battle logs: monospace for column alignment, with skyquake before the
    generic keyword so country/event glyphs still resolve per-character. */
 .log-mono {