Merge pull request online-go#2792 from GreenAsJade/lowlight_autoscore…

…_entries_in_game_log Lowlight autoscore entries in game log
GreenAsJade · Aug 20, 2024 · 778bc5a · 778bc5a
2 parents 21623e5 + bf88915
commit 778bc5a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 12 deletions.
diff --git a/src/views/Game/GameLog.styl b/src/views/Game/GameLog.styl
@@ -25,8 +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
@@ -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>
@@ -187,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">
@@ -212,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",