From ea1bdf34b8939a2881d0b52412407e9230d43d36 Mon Sep 17 00:00:00 2001
From: Matt Etress <mattetress@gmail.com>
Date: Tue, 14 Nov 2023 23:53:08 -0600
Subject: [PATCH] Display bot detection results on game page

---
 src/views/Game/Game.tsx        | 40 ++++++++++++++++++++++++++++++++++
 src/views/Game/PlayerCards.tsx | 14 ++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/src/views/Game/Game.tsx b/src/views/Game/Game.tsx
index 3b759da0fd..0835412e38 100644
--- a/src/views/Game/Game.tsx
+++ b/src/views/Game/Game.tsx
@@ -71,6 +71,7 @@ import { GobanContainer } from "GobanContainer";
 import { GobanContext } from "./goban_context";
 import { is_valid_url } from "url_validation";
 import { disableTouchAction, enableTouchAction } from "./touch_actions";
+import { BotDetectionResults } from "./BotDetectionResults";
 
 export function Game(): JSX.Element {
     const params = useParams<"game_id" | "review_id" | "move_number">();
@@ -144,6 +145,8 @@ export function Game(): JSX.Element {
     const show_title = useShowTitle(goban.current);
     const [, set_undo_requested] = React.useState<number | undefined>();
     const [, forceUpdate] = React.useState<number>();
+    const [bot_detection_results, set_bot_detection_results] = React.useState(null);
+    const [show_bot_detection_results, set_show_bot_detection_results] = React.useState(false);
 
     /* Functions */
     const getLocation = (): string => {
@@ -448,6 +451,10 @@ export function Game(): JSX.Element {
         set_show_game_timing(!show_game_timing);
     };
 
+    const toggleShowBotDetectionResults = () => {
+        set_show_bot_detection_results(!show_bot_detection_results);
+    };
+
     const gameLogModalMarkCoords = (stones_string: string) => {
         for (let i = 0; i < goban.current.config.width; i++) {
             for (let j = 0; j < goban.current.config.height; j++) {
@@ -808,6 +815,18 @@ export function Game(): JSX.Element {
         return null;
     };
 
+    const frag_bot_detection_results = () => {
+        if (bot_detection_results?.ai_suspected.length > 0) {
+            return (
+                <BotDetectionResults
+                    bot_detection_results={bot_detection_results}
+                    game_id={game_id}
+                    updateBotDetectionResults={set_bot_detection_results}
+                />
+            );
+        }
+    };
+
     const frag_timings = () => {
         if (goban && goban.current.engine) {
             return (
@@ -1298,6 +1317,7 @@ export function Game(): JSX.Element {
                     set_annulment_reason(game.annulment_reason);
                     set_historical_black(game.historical_ratings.black);
                     set_historical_white(game.historical_ratings.white);
+                    set_bot_detection_results(game.bot_detection_results);
 
                     goban_div.current.setAttribute("data-game-id", game_id.toString());
 
@@ -1489,6 +1509,12 @@ export function Game(): JSX.Element {
                                 zen_mode={zen_mode}
                                 black_flags={black_flags}
                                 white_flags={white_flags}
+                                black_ai_suspected={bot_detection_results?.ai_suspected.includes(
+                                    historical_black.id,
+                                )}
+                                white_ai_suspected={bot_detection_results?.ai_suspected.includes(
+                                    historical_white.id,
+                                )}
                             />
                         )}
 
@@ -1531,6 +1557,8 @@ export function Game(): JSX.Element {
                                 onTimingClicked={toggleShowTiming}
                                 onCoordinatesMarked={gameLogModalMarkCoords}
                                 onReviewClicked={startReview}
+                                onDetectionResultsClicked={toggleShowBotDetectionResults}
+                                ai_suspected={bot_detection_results?.ai_suspected.length > 0}
                             />
                         )}
                     </div>
@@ -1546,6 +1574,12 @@ export function Game(): JSX.Element {
                                     zen_mode={zen_mode}
                                     black_flags={black_flags}
                                     white_flags={white_flags}
+                                    black_ai_suspected={bot_detection_results?.ai_suspected.includes(
+                                        historical_black?.id,
+                                    )}
+                                    white_ai_suspected={bot_detection_results?.ai_suspected.includes(
+                                        historical_white?.id,
+                                    )}
                                 />
                             )}
 
@@ -1557,6 +1591,10 @@ export function Game(): JSX.Element {
                                 show_game_timing &&
                                 frag_timings()}
 
+                            {(view_mode === "square" || view_mode === "wide" || null) &&
+                                show_bot_detection_results &&
+                                frag_bot_detection_results()}
+
                             {review ? frag_review_controls() : frag_play_controls(true)}
 
                             {(view_mode === "wide" || null) && CHAT}
@@ -1582,6 +1620,8 @@ export function Game(): JSX.Element {
                                 onTimingClicked={toggleShowTiming}
                                 onCoordinatesMarked={gameLogModalMarkCoords}
                                 onReviewClicked={startReview}
+                                onDetectionResultsClicked={toggleShowBotDetectionResults}
+                                ai_suspected={bot_detection_results?.ai_suspected.length > 0}
                             />
                             {(zen_mode || null) && <div className="align-col-end"></div>}
                         </div>
diff --git a/src/views/Game/PlayerCards.tsx b/src/views/Game/PlayerCards.tsx
index a74e43bb01..e3054cab77 100644
--- a/src/views/Game/PlayerCards.tsx
+++ b/src/views/Game/PlayerCards.tsx
@@ -46,6 +46,8 @@ interface PlayerCardsProps {
     zen_mode: boolean;
     black_flags: null | rest_api.GamePlayerFlags;
     white_flags: null | rest_api.GamePlayerFlags;
+    black_ai_suspected: boolean;
+    white_ai_suspected: boolean;
 }
 
 export function PlayerCards({
@@ -55,6 +57,8 @@ export function PlayerCards({
     zen_mode,
     black_flags,
     white_flags,
+    black_ai_suspected,
+    white_ai_suspected,
 }: PlayerCardsProps): JSX.Element {
     const goban = useGoban();
     const engine = goban.engine;
@@ -107,6 +111,7 @@ export function PlayerCards({
                     onScoreClick={toggleScorePopup}
                     zen_mode={zen_mode}
                     flags={black_flags}
+                    ai_suspected={black_ai_suspected}
                 />
                 <PlayerCard
                     historical={historical_white}
@@ -117,6 +122,7 @@ export function PlayerCards({
                     onScoreClick={toggleScorePopup}
                     zen_mode={zen_mode}
                     flags={white_flags}
+                    ai_suspected={white_ai_suspected}
                 />
             </div>
             {(engine.rengo || null) && (
@@ -201,6 +207,7 @@ interface PlayerCardProps {
     onScoreClick: () => void;
     zen_mode: boolean;
     flags: null | rest_api.GamePlayerFlags;
+    ai_suspected: boolean;
 }
 
 export function PlayerCard({
@@ -212,6 +219,7 @@ export function PlayerCard({
     onScoreClick,
     zen_mode,
     flags,
+    ai_suspected,
 }: PlayerCardProps) {
     const engine = goban.engine;
     const player = engine.players[color];
@@ -354,6 +362,12 @@ export function PlayerCard({
                 <div id={`${color}-score-details`} className="score-details">
                     <ScorePopup goban={goban} color={color} show={show_score_breakdown} />
                 </div>
+                {!hide_flags && ai_suspected && (
+                    <div className="player-flags">
+                        <i className="fa fa-flag" />
+                        {" AI Suspected"}
+                    </div>
+                )}
                 {!hide_flags && flags && (
                     <div className="player-flags">
                         {Object.keys(flags).map((flag) => (