From 4dbec21fd4fffaeab7b074d215f2580f9341759d Mon Sep 17 00:00:00 2001
From: GreenAsJade <greenasjade@gregories.net>
Date: Tue, 20 Aug 2024 10:13:42 +0930
Subject: [PATCH 1/2] give autoscore entries in game log a grey background

---
 src/views/Game/GameLog.styl |  4 ++++
 src/views/Game/GameLog.tsx  | 14 +++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/views/Game/GameLog.styl b/src/views/Game/GameLog.styl
index 9834e49153..955cadee51 100644
--- a/src/views/Game/GameLog.styl
+++ b/src/views/Game/GameLog.styl
@@ -29,4 +29,8 @@
     .field {
         margin-right: 1rem;
     }
+
+    .auto-score {
+        themed background shade5;
+    }
 }
diff --git a/src/views/Game/GameLog.tsx b/src/views/Game/GameLog.tsx
index b52000ea60..4c693b2884 100644
--- a/src/views/Game/GameLog.tsx
+++ b/src/views/Game/GameLog.tsx
@@ -35,6 +35,8 @@ interface GameLogProps {
 
 export function GameLog({ goban_config, onContainsTimeout }: GameLogProps): JSX.Element {
     const [log, setLog] = React.useState<LogEntry[]>([]);
+    const [shouldDisplayFullLog, setShouldDisplayFullLog] = React.useState(false);
+
     const game_id = goban_config.game_id as number;
 
     React.useEffect(() => {
@@ -55,8 +57,6 @@ export function GameLog({ goban_config, onContainsTimeout }: GameLogProps): JSX.
         [goban_config],
     );
 
-    const [shouldDisplayFullLog, setShouldDisplayFullLog] = React.useState(false);
-
     return (
         <>
             <h3>{_("Game Log")}</h3>
@@ -87,7 +87,15 @@ export function GameLog({ goban_config, onContainsTimeout }: GameLogProps): JSX.
                                         shouldDisplayFullLog || idx < TRUNCATED_GAME_LOG_LENGTH,
                                 )
                                 .map((entry, idx) => (
-                                    <tr key={entry.timestamp + ":" + idx} className="entry">
+                                    <tr
+                                        key={entry.timestamp + ":" + idx}
+                                        className={
+                                            "entry" +
+                                            (entry.data && "needs_sealing" in entry.data
+                                                ? " auto-score"
+                                                : "")
+                                        }
+                                    >
                                         <td className="timestamp">
                                             {moment(entry.timestamp).format("L LTS")}
                                         </td>

From bf88915df263821d4373f0614ed7a66456587081 Mon Sep 17 00:00:00 2001
From: GreenAsJade <greenasjade@gregories.net>
Date: Tue, 20 Aug 2024 11:18:27 +0930
Subject: [PATCH 2/2] Tweak & customize auto-score entry layout further

---
 src/views/Game/GameLog.styl |  5 ++++-
 src/views/Game/GameLog.tsx  | 33 +++++++++++++++++++++++++--------
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/views/Game/GameLog.styl b/src/views/Game/GameLog.styl
index 955cadee51..4e9a2b9fde 100644
--- a/src/views/Game/GameLog.styl
+++ b/src/views/Game/GameLog.styl
@@ -25,12 +25,15 @@
     .timestamp {
         width: 12rem;
     }
-
     .field {
         margin-right: 1rem;
     }
 
     .auto-score {
         themed background shade5;
+
+        a.Player, .game-log-player {
+            themed color shade1;
+        }
     }
 }
diff --git a/src/views/Game/GameLog.tsx b/src/views/Game/GameLog.tsx
index 4c693b2884..a6a222374d 100644
--- a/src/views/Game/GameLog.tsx
+++ b/src/views/Game/GameLog.tsx
@@ -195,12 +195,27 @@ export function LogData({
         try {
             for (const k in data) {
                 if (k === "player_id") {
-                    ret.push(
-                        <span key={k} className="field">
-                            <Player user={data[k]} />
-                            {data.color ? (data.color === "black" ? " (black)" : " (white)") : ""}
-                        </span>,
-                    );
+                    if ("needs_sealing" in data) {
+                        // this is an auto-score update, make that clear.
+                        ret.push(
+                            <span key={k} className="field game-log-player">
+                                {"(from "}
+                                <Player user={data[k]} rank={false} />
+                                {")"}
+                            </span>,
+                        );
+                    } else {
+                        ret.push(
+                            <span key={k} className="field game-log-player">
+                                <Player user={data[k]} />
+                                {data.color
+                                    ? data.color === "black"
+                                        ? " (black)"
+                                        : " (white)"
+                                    : ""}
+                            </span>,
+                        );
+                    }
                 } else if (k === "winner") {
                     ret.push(
                         <span key={k} className="field">
@@ -220,14 +235,16 @@ export function LogData({
                         );
                     }
                 } else if (k === "removed") {
-                    ret.push(
+                    // put this near the top
+                    ret.unshift(
                         <span key={k} className="field">
                             {data[k] ? "stones marked dead" : "stones marked alive"}
                         </span>,
                     );
                 } else if (k === "needs_sealing") {
                     // this only comes with autoscore updates
-                    ret.push(
+                    // put it near the top
+                    ret.unshift(
                         <span key={k} className="field">
                             {pgettext(
                                 "This is telling a moderator that they are looking at an update from the auto scorer",