Provide a help popup explaining the autoscore panel in GameLog

src/views/Game/GameLog.tsx

@@ -18,6 +18,7 @@ import * as React from "react";
 import * as moment from "moment";
 
 import { _, pgettext } from "translate";
+import * as DynamicHelp from "react-dynamic-help";
 
 import { LogEntry } from "Game";
 import { GobanEngineConfig } from "goban";
@@ -42,8 +43,13 @@ export function GameLog({
     const [log, setLog] = React.useState<LogEntry[]>([]);
     const [shouldDisplayFullLog, setShouldDisplayFullLog] = React.useState(false);
 
+    const { registerTargetItem } = React.useContext(DynamicHelp.Api);
+    const { ref: autoscoreRef } = registerTargetItem("autoscore-game-log-entry");
+
     const game_id = goban_config.game_id as number;
 
+    let firstAutoscoringEntryRendered = false;
+
     React.useEffect(() => {
         socket.send(`game/log`, { game_id }, (log) => {
             setLog(log);
@@ -70,6 +76,14 @@ export function GameLog({
         [goban_config],
     );
 
+    function firstAutoScoreEntry(): boolean {
+        if (firstAutoscoringEntryRendered) {
+            return false;
+        }
+        firstAutoscoringEntryRendered = true;
+        return true;
+    }
+
     return (
         <>
             <h3>{_("Game Log")}</h3>
@@ -101,6 +115,13 @@ export function GameLog({
                                 )
                                 .map((entry, idx) => (
                                     <tr
+                                        ref={
+                                            entry.data &&
+                                            "needs_sealing" in entry.data &&
+                                            firstAutoScoreEntry()
+                                                ? autoscoreRef
+                                                : null
+                                        }
                                         key={entry.timestamp + ":" + idx}
                                         className={
                                             "entry" +

src/views/HelpFlows/GameLogHelp.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C)  Online-Go.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+
+import { HelpFlow, HelpItem } from "react-dynamic-help";
+
+import { _, pgettext } from "translate";
+
+/**
+ * A help flow intended for moderators and CMs wondering about mysterious auto score entries
+ */
+
+export function GameLogHelp(): JSX.Element {
+    return (
+        <HelpFlow
+            id="game-log-help"
+            showInitially={true}
+            debug={true}
+            description={pgettext("Name of a dynamic help flow", "Game Log Help")}
+        >
+            <HelpItem target="autoscore-game-log-entry" position={"bottom-center"}>
+                <div>
+                    {_(
+                        "These come from the user's browser during autoscoring.   Two of these from each user, at the beginning of the scoring phase, and if the users presses 'auto-score'",
+                    )}
+                </div>
+            </HelpItem>
+        </HelpFlow>
+    );
+}

src/views/HelpFlows/HelpFlows.tsx

@@ -28,6 +28,7 @@ import { UndoRequestedIntro } from "./UndoIntro";
 import { UndoRequestReceivedIntro } from "./UndoIntro";
 import { CommunityModeratorIntro } from "./CommunityModeratorIntro";
 import { OJEIntro } from "./OJEIntro";
+import { GameLogHelp } from "./GameLogHelp";
 
 /**
  * This component is a handy wrapper for all the Help Flows, and reset on login/logout
@@ -87,6 +88,7 @@ export function HelpFlows(): JSX.Element {
             <UndoRequestReceivedIntro />
 
             <CommunityModeratorIntro />
+            <GameLogHelp />
 
             <OJEIntro />
         </>