Wait a couple of seconds while waiting for an autoscore response before

allowing stone removal acceptance Also show an indicator that the scoring is in progress
GreenAsJade · Sep 4, 2024 · 94261fc · 94261fc
1 parent 005ca6d
commit 94261fc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
         "express-http-proxy": "^2.0.0",
         "fork-ts-checker-webpack-plugin": "^9.0.0",
         "globals": "^15.8.0",
-        "goban": "=8.3.46",
+        "goban": "=8.3.48",
         "gulp": "^5.0.0",
         "gulp-clean-css": "^4.3.0",
         "gulp-eslint-new": "^2.2.0",

diff --git a/src/views/Game/PlayControls.styl b/src/views/Game/PlayControls.styl
@@ -177,6 +177,11 @@
         }
     }
 
+    .autoscoring-in-progress {
+        margin-top: 0.5rem;
+        font-size: 1.2rem;
+    }
+
     .score-square {
         display: inline-block;
         width: 0.7rem;

diff --git a/src/views/Game/PlayControls.tsx b/src/views/Game/PlayControls.tsx
@@ -143,6 +143,8 @@ export function PlayControls({
         engine?.needs_sealing,
     );
     const need_to_seal = needs_sealing && needs_sealing.length > 0;
+    const [autoscoring_in_progress, setAutoScoringInProgress] = React.useState(false);
+    const [autoscoring_taking_too_long, setAutoscoringTakingTooLong] = React.useState(false);
 
     const user_is_active_player = [engine.players.black.id, engine.players.white.id].includes(
         user.id,
@@ -180,17 +182,43 @@ export function PlayControls({
         const engineUpdated = (engine: GobanEngine) => {
             syncNeedsSealing(engine.needs_sealing);
         };
+
+        let autoscoring_timeout: any;
+        const onAutoScoringStarted = () => {
+            console.log("Auto-scoring started");
+            setAutoScoringInProgress(true);
+            if (autoscoring_timeout) {
+                clearTimeout(autoscoring_timeout);
+            }
+            autoscoring_timeout = setTimeout(() => {
+                setAutoscoringTakingTooLong(true);
+                autoscoring_timeout = null;
+            }, 2000);
+        };
+        const onAutoScoringComplete = () => {
+            console.log("Auto-scoring complete");
+            setAutoScoringInProgress(false);
+            if (autoscoring_timeout) {
+                clearTimeout(autoscoring_timeout);
+                autoscoring_timeout = null;
+            }
+        };
+
         if (goban?.engine) {
             engineUpdated(goban.engine);
         } else {
             console.error("No engine in PlayControls");
         }
         goban.on("stone-removal.needs-sealing", syncNeedsSealing);
         goban.on("engine.updated", engineUpdated);
+        goban.on("stone-removal.auto-scoring-started", onAutoScoringStarted);
+        goban.on("stone-removal.auto-scoring-complete", onAutoScoringComplete);
 
         return () => {
             goban.off("engine.updated", engineUpdated);
             goban.off("stone-removal.needs-sealing", syncNeedsSealing);
+            goban.off("stone-removal.auto-scoring-started", onAutoScoringStarted);
+            goban.off("stone-removal.auto-scoring-complete", onAutoScoringComplete);
         };
     }, [goban]);
     React.useEffect(() => {
@@ -499,20 +527,29 @@ export function PlayControls({
                         {(user_is_active_player || user.is_moderator || null) && ( // moderators see the button, with its timer, but can't press it
                             <button
                                 className={
-                                    (user.is_moderator && !user_is_active_player) || need_to_seal
+                                    (user.is_moderator && !user_is_active_player) ||
+                                    need_to_seal ||
+                                    autoscoring_in_progress
                                         ? ""
                                         : "primary"
                                 }
                                 disabled={
                                     (user.is_moderator && !user_is_active_player) ||
-                                    stone_removal_accept_disabled
+                                    stone_removal_accept_disabled ||
+                                    (autoscoring_in_progress && !autoscoring_taking_too_long)
                                 }
                                 onClick={onStoneRemovalAccept}
                             >
                                 {_("Accept removed stones")}
                                 <Clock goban={goban} color="stone-removal" />
                             </button>
                         )}
+
+                        {autoscoring_in_progress && (
+                            <div className="autoscoring-in-progress">
+                                <i className="fa fa-circle-o-notch rotating" /> {_("Scoring game")}
+                            </div>
+                        )}
                     </div>
                     <br />
                     <div style={{ textAlign: "center" }}>

diff --git a/yarn.lock b/yarn.lock
@@ -5966,10 +5966,10 @@ glogg@^2.2.0:
   dependencies:
     sparkles "^2.1.0"
 
-goban@=8.3.46:
-  version "8.3.46"
-  resolved "https://registry.yarnpkg.com/goban/-/goban-8.3.46.tgz#27b1355e1645eca50d322447cea71a87c59938f5"
-  integrity sha512-sXt3kh8iFxIariM40G/6rxJIAwfzLch4P12MlPb+w7AsoZMvEHISHr+N2wVjcjaHJcuaRan0omy47r9VojO9Rg==
+goban@=8.3.48:
+  version "8.3.48"
+  resolved "https://registry.yarnpkg.com/goban/-/goban-8.3.48.tgz#3830b38a29e3fecbef1a7dd903e6ceecb6511867"
+  integrity sha512-dz7rhJDebrgPAqbuEVrzf4i2e+WFmnYzlOkc4Yopm6hRD5N0s/U8ZhUjOrjAIMqLNleWE7aULw2XtjsII61O1Q==
   dependencies:
     eventemitter3 "^5.0.0"