From bb04121507fc8ed5062d6127766c1f4e86fe0fa2 Mon Sep 17 00:00:00 2001
From: GreenAsJade <greenasjade@gregories.net>
Date: Fri, 23 Aug 2024 13:02:13 +0930
Subject: [PATCH 1/2] Pull more bits into components, and shuffle for effect.

---
 src/views/ReportsCenter/ReportedGame.styl  |  49 +++--
 src/views/ReportsCenter/ReportedGame.tsx   | 205 +++++++++++----------
 src/views/ReportsCenter/ReportsCenter.styl |   4 -
 3 files changed, 146 insertions(+), 112 deletions(-)

diff --git a/src/views/ReportsCenter/ReportedGame.styl b/src/views/ReportsCenter/ReportedGame.styl
index 6f7371adf4..1f3890dfb4 100644
--- a/src/views/ReportsCenter/ReportedGame.styl
+++ b/src/views/ReportsCenter/ReportedGame.styl
@@ -12,24 +12,12 @@
         margin-bottom: 0;
     }
 
-    .reported-game-info {
-        order: -1; // put this first so mobile layout is nice
-        .reported-turn {
-            padding: 0.25rem;
-        }
-    }
-
-    .reported-game-mini-goban {
-        .MiniGoban  {
-            justify-content: flex-start;
-        }
-    }
-
-    .col {
+    .reported-game-element {
         flex: 1;
-        flex-basis: 45%;
+        flex-basis: 40%;
         display: inline-flex;
         min-width: 20rem;
+        max-width: 30rem;
         flex-direction: column;
         align-items: stretch;
         justify-content: stretch;
@@ -41,6 +29,37 @@
         }
     }
 
+    .reported-game-mini-goban {
+        max-width: 20rem;
+        max-height: 20rem;
+        padding: 2rem;
+    }
+
+    #move-tree-container {
+        height: 2rem;
+    }
+
+    .reported-game-info {
+        order: -1; // put this first so mobile layout is nice
+        .reported-turn {
+            padding: 0.25rem;
+        }
+    }
+
+    .moderator-reported-game-actions {
+        padding: 0.5rem;
+        text-align: center;
+    }
+
+    .reported-game-chat {
+        max-width: 5rem;
+        max-height: 15rem;
+    }
+
+    .reported-game-timing {
+        text-align: center;
+    }
+
     // We have horizontal less room than `GameLog` expects
     .GameLog {
         tr {
diff --git a/src/views/ReportsCenter/ReportedGame.tsx b/src/views/ReportsCenter/ReportedGame.tsx
index 47b799ea0b..66c1abcfc0 100644
--- a/src/views/ReportsCenter/ReportedGame.tsx
+++ b/src/views/ReportsCenter/ReportedGame.tsx
@@ -67,47 +67,6 @@ export function ReportedGame({
     const [timedOutPlayer, setTimedOutPlayer] = React.useState<number | null>(null);
     const [scoringAbandoned, setScoringAbandoned] = React.useState<boolean>(false);
 
-    const user = useUser();
-
-    const decide = React.useCallback(
-        (winner: string) => {
-            if (!game_id) {
-                void alert.fire(_("Game ID missing"));
-                return;
-            }
-
-            let moderation_note: string | null = null;
-            do {
-                moderation_note = prompt(
-                    "Deciding for " + winner.toUpperCase() + " - Moderator note:",
-                );
-                if (moderation_note == null) {
-                    return;
-                }
-                moderation_note = moderation_note.trim();
-            } while (moderation_note === "");
-
-            post(`games/${game_id}/moderate`, {
-                decide: winner,
-                moderation_note: moderation_note,
-            }).catch(errorAlerter);
-        },
-        [game_id, goban],
-    );
-
-    const do_annul = React.useCallback(
-        (tf: boolean): void => {
-            if (!game_id) {
-                void alert.fire(_("Game ID missing"));
-                return;
-            }
-
-            const engine = goban!.engine;
-            doAnnul(engine.config, tf);
-        },
-        [game_id, goban],
-    );
-
     React.useEffect(() => {
         if (goban) {
             goban.on("update", refresh);
@@ -157,17 +116,37 @@ export function ReportedGame({
     return (
         <div className="reported-game">
             <div className="reported-game-container">
-                <div className="col reported-game-mini-goban">
+                <div className="reported-game-element">
+                    {/*  This element is providing the goban used by the goban provider wrapped around the rest of them */}
                     <MiniGoban
+                        className="reported-game-mini-goban"
                         game_id={game_id}
                         noLink={true}
                         onGobanCreated={onGobanCreated}
                         chat={true}
                     />
+                    {goban && goban.engine && (
+                        <GobanContext.Provider value={goban}>
+                            <Resizable
+                                id="move-tree-container"
+                                className="vertically-resizable"
+                                ref={(ref) => ref?.div && goban.setMoveTreeContainer(ref.div)}
+                            />
+
+                            <div className="reported-game-timing">
+                                {`Time control: ${shortTimeControl(goban.engine.time_control)}`}
+                            </div>
+                            <ModeratorReportedGameActions
+                                game_id={game_id}
+                                goban={goban}
+                                annulled={annulled}
+                            />
+                        </GobanContext.Provider>
+                    )}
                 </div>
                 {goban && goban.engine && (
                     <GobanContext.Provider value={goban}>
-                        <div className="col reported-game-info">
+                        <div className="reported-game-element reported-game-info">
                             <h3>
                                 Game: <Link to={`/game/${game_id}`}>#{game_id}</Link>
                                 <span className="created-note">
@@ -182,7 +161,7 @@ export function ReportedGame({
                             <div>White: {game && <Player user={game.white} />}</div>
                             <div>Game Phase: {goban.engine.phase}</div>
                             {(goban.engine.phase === "finished" || null) && (
-                                <GameSummary
+                                <GameOutcomeSummary
                                     winner={winner}
                                     finalActionTime={finalActionTime}
                                     timedOutPlayer={timedOutPlayer}
@@ -191,39 +170,7 @@ export function ReportedGame({
                                     scoringAbandoned={scoringAbandoned}
                                 />
                             )}
-                            {user.is_moderator && (
-                                <>
-                                    {goban.engine.phase === "finished" ? (
-                                        <div className="decide-buttons">
-                                            {goban.engine.config.ranked && !annulled && (
-                                                <button onClick={() => do_annul(true)}>
-                                                    {_("Annul")}
-                                                </button>
-                                            )}
-                                            {goban.engine.config.ranked && annulled && (
-                                                <button onClick={() => do_annul(false)}>
-                                                    {_("Remove annulment")}
-                                                </button>
-                                            )}
-                                        </div>
-                                    ) : (
-                                        <div className="decide-buttons">
-                                            <button
-                                                className="decide-button"
-                                                onClick={() => decide("black")}
-                                            >
-                                                Black ({goban.engine.players?.black?.username}) Wins
-                                            </button>
-                                            <button
-                                                className="decide-button"
-                                                onClick={() => decide("white")}
-                                            >
-                                                White ({goban.engine.players?.white?.username}) Wins
-                                            </button>
-                                        </div>
-                                    )}
-                                </>
-                            )}
+
                             {cur_move &&
                                 ((goban.engine.phase === "finished" &&
                                     goban.engine.game_id === game_id &&
@@ -238,20 +185,9 @@ export function ReportedGame({
                                         hidden={false}
                                     />
                                 )}
-
-                            <Resizable
-                                id="move-tree-container"
-                                className="vertically-resizable"
-                                ref={(ref) => ref?.div && goban.setMoveTreeContainer(ref.div)}
-                            />
-                            {!!goban?.engine && (
-                                <div className="reported-game-timing">
-                                    {`Time control: ${shortTimeControl(goban.engine.time_control)}`}
-                                </div>
-                            )}
                         </div>
 
-                        <div className="col">
+                        <div className="reported-game-element">
                             <GameTimings
                                 moves={goban.engine.config.moves as any}
                                 start_time={goban.engine.config.start_time as any}
@@ -272,7 +208,7 @@ export function ReportedGame({
                             />
                         </div>
 
-                        <div className="col">
+                        <div className="reported-game-element reported-game-chat">
                             <GameChat
                                 selected_chat_log={selectedChatLog}
                                 onSelectedChatModeChange={setSelectedChatLog}
@@ -287,7 +223,90 @@ export function ReportedGame({
     );
 }
 
-interface GameSummaryProps {
+interface ModeratorReportedGameActionsProps {
+    game_id: number;
+    goban: GobanRenderer;
+    annulled: boolean;
+}
+
+function ModeratorReportedGameActions({
+    game_id,
+    goban,
+    annulled,
+}: ModeratorReportedGameActionsProps): JSX.Element {
+    const user = useUser();
+
+    const decide = React.useCallback(
+        (winner: string) => {
+            if (!game_id) {
+                void alert.fire(_("Game ID missing"));
+                return;
+            }
+
+            let moderation_note: string | null = null;
+            do {
+                moderation_note = prompt(
+                    "Deciding for " + winner.toUpperCase() + " - Moderator note:",
+                );
+                if (moderation_note == null) {
+                    return;
+                }
+                moderation_note = moderation_note.trim();
+            } while (moderation_note === "");
+
+            post(`games/${game_id}/moderate`, {
+                decide: winner,
+                moderation_note: moderation_note,
+            }).catch(errorAlerter);
+        },
+        [game_id, goban],
+    );
+
+    const do_annul = React.useCallback(
+        (tf: boolean): void => {
+            if (!game_id) {
+                void alert.fire(_("Game ID missing"));
+                return;
+            }
+
+            const engine = goban!.engine;
+            doAnnul(engine.config, tf);
+        },
+        [game_id, goban],
+    );
+    console.log("rendering ModeratorReportedGameActions");
+    return (
+        <div className="moderator-reported-game-actions">
+            {user.is_moderator && (
+                <>
+                    {goban.engine.phase === "finished" ? (
+                        <div className="decide-buttons">
+                            {goban.engine.config.ranked && !annulled && (
+                                <button onClick={() => do_annul(true)}>{_("Annul")}</button>
+                            )}
+                            {goban.engine.config.ranked && annulled && (
+                                <button onClick={() => do_annul(false)}>
+                                    {_("Remove annulment")}
+                                </button>
+                            )}
+                        </div>
+                    ) : (
+                        <div className="decide-buttons">
+                            <button className="decide-button" onClick={() => decide("black")}>
+                                Black ({goban.engine.players?.black?.username}) Wins
+                            </button>
+                            <button className="decide-button" onClick={() => decide("white")}>
+                                White ({goban.engine.players?.white?.username}) Wins
+                            </button>
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}
+
+interface GameOutcomeSummaryProps {
     winner: string;
     finalActionTime: moment.Duration | null;
     timedOutPlayer: number | null;
@@ -296,14 +315,14 @@ interface GameSummaryProps {
     scoringAbandoned: boolean;
 }
 
-function GameSummary({
+function GameOutcomeSummary({
     winner,
     finalActionTime,
     timedOutPlayer,
     reported_by,
     annulled,
     scoringAbandoned,
-}: GameSummaryProps): JSX.Element {
+}: GameOutcomeSummaryProps): JSX.Element {
     const goban = useGoban();
     return (
         <div className="GameSummary">
diff --git a/src/views/ReportsCenter/ReportsCenter.styl b/src/views/ReportsCenter/ReportsCenter.styl
index a623aa3435..243c8bdb36 100644
--- a/src/views/ReportsCenter/ReportsCenter.styl
+++ b/src/views/ReportsCenter/ReportsCenter.styl
@@ -63,10 +63,6 @@ reports_center_content_width=56rem
         }
     }
 
-    #move-tree-container {
-        height: 2rem;
-    }
-
     .notes-container {
         display: flex;
         flex: 1;

From ff2ae43a814d56770a721c8f7b3fa6715345ffb8 Mon Sep 17 00:00:00 2001
From: GreenAsJade <greenasjade@gregories.net>
Date: Fri, 23 Aug 2024 17:29:01 +0930
Subject: [PATCH 2/2] Undebug

---
 src/views/ReportsCenter/ReportedGame.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/ReportsCenter/ReportedGame.tsx b/src/views/ReportsCenter/ReportedGame.tsx
index 66c1abcfc0..2722375629 100644
--- a/src/views/ReportsCenter/ReportedGame.tsx
+++ b/src/views/ReportsCenter/ReportedGame.tsx
@@ -274,7 +274,7 @@ function ModeratorReportedGameActions({
         },
         [game_id, goban],
     );
-    console.log("rendering ModeratorReportedGameActions");
+
     return (
         <div className="moderator-reported-game-actions">
             {user.is_moderator && (