From 3c5376616ace0f10b0ea709bd64854d213c947e8 Mon Sep 17 00:00:00 2001 From: Florian Kinder Date: Sat, 7 Mar 2026 18:52:04 +0100 Subject: [PATCH 1/3] fix: improve readability of force totals and event timestamps Bump color from --text-dimmest to --text-dimmer for the force total counts in the top bar and event timestamps in the side panel, as they were too dark to read comfortably. --- ui/src/pages/recording-playback/components/SidePanel.module.css | 2 +- ui/src/pages/recording-playback/components/TopBar.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/pages/recording-playback/components/SidePanel.module.css b/ui/src/pages/recording-playback/components/SidePanel.module.css index 8a7d758a..17c849f3 100644 --- a/ui/src/pages/recording-playback/components/SidePanel.module.css +++ b/ui/src/pages/recording-playback/components/SidePanel.module.css @@ -511,7 +511,7 @@ .eventTime { font-size: var(--font-size-sm); font-family: var(--font-mono); - color: var(--text-dimmest); + color: var(--text-dimmer); display: flex; align-items: center; gap: 3px; diff --git a/ui/src/pages/recording-playback/components/TopBar.module.css b/ui/src/pages/recording-playback/components/TopBar.module.css index 1fd1414f..eb0e4bee 100644 --- a/ui/src/pages/recording-playback/components/TopBar.module.css +++ b/ui/src/pages/recording-playback/components/TopBar.module.css @@ -132,7 +132,7 @@ .forceTotal { font-size: var(--font-size-sm); - color: var(--text-dimmest); + color: var(--text-dimmer); font-family: var(--font-mono); } From e90f1756b3154bbf284b184a2b79a36736cb04f3 Mon Sep 17 00:00:00 2001 From: Florian Kinder Date: Sat, 7 Mar 2026 19:21:06 +0100 Subject: [PATCH 2/3] fix: add distinct icons and colors for event types (#332) * fix: add distinct icons and colors for capture/contested/terminal events - Add FlagIcon for captured/capturedFlag events (blue) - Use AlertTriangleIcon for contested events (orange) - Use TerminalIcon for terminal hack events (orange) - Remove invisible em dash separator from EndMissionEvent rows * fix: use DoorExitIcon for EndMissionEvent events Replace TargetIcon with a door/exit icon for mission end events, better conveying that the mission has ended. * refactor: merge eventIcon and eventColor into single eventStyle function --- ui/src/components/Icons.tsx | 15 ++++++++ .../components/EventsTab.tsx | 38 +++++++++---------- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/ui/src/components/Icons.tsx b/ui/src/components/Icons.tsx index 574a00ae..9c561348 100644 --- a/ui/src/components/Icons.tsx +++ b/ui/src/components/Icons.tsx @@ -498,6 +498,21 @@ export const BracketInIcon = (p: IconProps): JSX.Element => ( ); +export const DoorExitIcon = (p: IconProps): JSX.Element => ( + + + + + +); + +export const FlagIcon = (p: IconProps): JSX.Element => ( + + + + +); + export const BracketOutIcon = (p: IconProps): JSX.Element => ( diff --git a/ui/src/pages/recording-playback/components/EventsTab.tsx b/ui/src/pages/recording-playback/components/EventsTab.tsx index e87f0d1c..65987a5a 100644 --- a/ui/src/pages/recording-playback/components/EventsTab.tsx +++ b/ui/src/pages/recording-playback/components/EventsTab.tsx @@ -11,7 +11,7 @@ import { TerminalHackEvent } from "../../../playback/events/terminalHackEvent"; import type { GameEvent } from "../../../playback/events/gameEvent"; import { SIDE_COLORS_UI } from "../../../config/sideColors"; import { formatElapsedTime } from "../../../playback/time"; -import { SkullIcon, BulletIcon, LinkIcon, ClockIcon, TargetIcon, ActivityIcon } from "../../../components/Icons"; +import { SkullIcon, BulletIcon, LinkIcon, ClockIcon, DoorExitIcon, ActivityIcon, FlagIcon, AlertTriangleIcon, TerminalIcon } from "../../../components/Icons"; import styles from "./SidePanel.module.css"; function sideColor(side?: string): string { @@ -24,26 +24,27 @@ function sideColor(side?: string): string { } } -function eventIcon(event: GameEvent): JSX.Element { +function eventStyle(event: GameEvent): { icon: JSX.Element; color: string } { if (event instanceof HitKilledEvent) { return event.type === "killed" - ? - : ; - } - if (event instanceof ConnectEvent) return ; - if (event instanceof EndMissionEvent) return ; - return ; -} - -function eventColor(event: GameEvent): string { - if (event instanceof HitKilledEvent) { - return event.type === "killed" ? "var(--accent-danger)" : "var(--accent-warning)"; + ? { icon: , color: "var(--accent-danger)" } + : { icon: , color: "var(--accent-warning)" }; } if (event instanceof ConnectEvent) { - return event.type === "connected" ? "var(--accent-success)" : "#888"; + return { icon: , color: event.type === "connected" ? "var(--accent-success)" : "#888" }; + } + if (event instanceof EndMissionEvent) { + return { icon: , color: "var(--accent-purple)" }; + } + if (event instanceof CapturedEvent) { + return event.type === "contested" + ? { icon: , color: "var(--accent-warning)" } + : { icon: , color: "var(--accent-primary)" }; + } + if (event instanceof TerminalHackEvent) { + return { icon: , color: "var(--accent-warning)" }; } - if (event instanceof EndMissionEvent) return "var(--accent-purple)"; - return "#888"; + return { icon: , color: "#888" }; } export function EventsTab(): JSX.Element { @@ -154,7 +155,7 @@ export function EventsTab(): JSX.Element { }> {(event) => { - const color = eventColor(event); + const { icon, color } = eventStyle(event); return ( - {eventIcon(event)} + {icon} {event instanceof HitKilledEvent ? ( @@ -223,7 +224,6 @@ export function EventsTab(): JSX.Element { {event.side} - {" \u2014 "} {event.message} From 4ae696e927bae25a913afa22706438e6e182a01d Mon Sep 17 00:00:00 2001 From: Florian Kinder Date: Sat, 7 Mar 2026 19:25:53 +0100 Subject: [PATCH 3/3] fix: also improve readability of event weapon text --- ui/src/pages/recording-playback/components/SidePanel.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/pages/recording-playback/components/SidePanel.module.css b/ui/src/pages/recording-playback/components/SidePanel.module.css index 17c849f3..5d2c6c8a 100644 --- a/ui/src/pages/recording-playback/components/SidePanel.module.css +++ b/ui/src/pages/recording-playback/components/SidePanel.module.css @@ -526,7 +526,7 @@ .eventWeapon { font-size: var(--font-size-sm); font-family: var(--font-mono); - color: var(--text-dimmest); + color: var(--text-dimmer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;