Annotate Players in ViewReport

src/components/Player/Player.styl

@@ -40,6 +40,26 @@
         margin-left: 0.1rem;
     }
 
+    // Styling to support the "ShowPlayersInReportContext" context that we provide
+    .show-players-in-report & {
+        align-items: center;
+        &::after {
+            padding-left: 0.25rem;
+            width: 0.8rem;
+            font-family: 'FontAwesome';
+            font-size: 0.7rem;
+            content: "";
+        }
+        &.reported::after {
+            content: fa-exclamation-triangle-content;
+            themed color danger
+        }
+        &.reporter::after {
+            content: fa-bullhorn-content;
+            themed color supporter
+        }
+    }
+
     &.with-flare {
         align-items: baseline;  // if we have flare, then we don't have presence indicator, and it's better to line up the baselines (looks better in chat)
     }

src/components/Player/Player.tsx

@@ -73,6 +73,14 @@ export interface PlayerProperties {
     forceShowRank?: boolean;
 }
 
+type ShowPlayersInReportContextType = {
+    reporter: player_cache.PlayerCacheEntry;
+    reported: player_cache.PlayerCacheEntry;
+};
+
+export const ShowPlayersInReportContext =
+    React.createContext<ShowPlayersInReportContextType | null>(null);
+
 export function Player(props: PlayerProperties): JSX.Element {
     const user = data.get("user");
     const player_id: number =
@@ -99,6 +107,8 @@ export function Player(props: PlayerProperties): JSX.Element {
     const base = player || historical;
     const combined = base ? Object.assign({}, base, historical ? historical : {}) : null;
 
+    const viewReportContext = React.useContext(ShowPlayersInReportContext);
+
     React.useEffect(() => {
         if (!props.disableCacheUpdate) {
             if (player?.id && player.id > 0) {
@@ -283,6 +293,14 @@ export function Player(props: PlayerProperties): JSX.Element {
         main_attrs.className += " " + combined.ui_class;
     }
 
+    if (viewReportContext && viewReportContext.reported.id === player_id) {
+        main_attrs.className += " reported";
+    }
+
+    if (viewReportContext && viewReportContext.reporter.id === player_id) {
+        main_attrs.className += " reporter";
+    }
+
     if (player_id < 0) {
         main_attrs.className += " guest";
     }

src/global_styl/font-awesome-hacks.styl

@@ -20,4 +20,6 @@ fa-circle-content="\f111";
 fa-wrench-content="\f0ad";
 fa-sort-asc-content="\f0de";
 fa-sort-desc-content="\f0dd";
+fa-bullhorn-content="\f0a1";
+fa-exclamation-triangle-content="\f071";
 fa-graduation-cap="\f19d";

src/views/ReportsCenter/ReportedGame.tsx

@@ -339,15 +339,8 @@ function GameOutcomeSummary({
                 <div>
                     {_("Player timed out:")}
                     <Player user={timedOutPlayer} />
-                    {timedOutPlayer === reported_by
-                        ? pgettext(
-                              "A note of surprise telling a moderator that the person who timed out is the reporter",
-                              " (reporter!)",
-                          )
-                        : pgettext(
-                              "A label next to a player name telling a moderator that a they are the one who was reported",
-                              " (the reported player)",
-                          )}
+                    {timedOutPlayer === reported_by && "!!"}
+                    {/* we are surprised if the reporter timed out */}
                 </div>
             )}
             {scoringAbandoned && <div>{_("Scoring abandoned by both players")}</div>}