Merge commit '9e79564feede8059f8ec28da7abbcd288f162186' into score_ch…

…eat_community_moderator_power
online-go · Oct 17, 2023 · 8823e1a · 8823e1a
2 parents f84dfdd + 9e79564
commit 8823e1a
Show file tree

Hide file tree

Showing 14 changed files with 949 additions and 724 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -22,11 +22,11 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
 
       - name: Cache node modules
         id: cache-node-modules

diff --git a/package.json b/package.json
@@ -31,57 +31,57 @@
         "@testing-library/react": "^13.2.0",
         "@types/jest": "^29.5.0",
         "@types/testing-library__jest-dom": "^5.14.5",
-        "@typescript-eslint/eslint-plugin": "^5.57.1",
-        "@typescript-eslint/eslint-plugin-tslint": "^5.57.1",
-        "@typescript-eslint/parser": "^5.57.1",
-        "autoprefixer": "^10.4.13",
+        "@typescript-eslint/eslint-plugin": "^6.8.0",
+        "@typescript-eslint/eslint-plugin-tslint": "^6.8.0",
+        "@typescript-eslint/parser": "^6.8.0",
+        "autoprefixer": "^10.4.16",
         "body-parser": "^1.16.1",
         "circular-dependency-plugin": "^5.2.2",
         "css-what": "^6.1.0",
-        "cssnano": "^5.1.13",
-        "deepl-node": "^1.7.0",
-        "eslint": "^8.31.0",
-        "eslint-config-prettier": "^8.5.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsdoc": "^43.1.1",
+        "cssnano": "^6.0.1",
+        "deepl-node": "^1.10.1",
+        "eslint": "^8.51.0",
+        "eslint-config-prettier": "^9.0.0",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsdoc": "^46.8.2",
         "eslint-plugin-prefer-arrow": "^1.2.3",
-        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-unicorn": "^43.0.2",
-        "express": "^4.17.1",
-        "express-http-proxy": "^1.6.0",
-        "fork-ts-checker-webpack-plugin": "^8.0.0",
+        "eslint-plugin-unicorn": "^48.0.1",
+        "express": "^4.18.2",
+        "express-http-proxy": "^2.0.0",
+        "fork-ts-checker-webpack-plugin": "^9.0.0",
         "goban": "=0.7.20",
         "gulp": "^4.0.2",
         "gulp-clean-css": "^4.3.0",
-        "gulp-eslint-new": "^1.7.1",
+        "gulp-eslint-new": "^1.8.4",
         "gulp-livereload": "^4.0.2",
         "gulp-postcss": "^9.0.0",
         "gulp-rename": "^2.0.0",
         "gulp-sourcemaps": "^2.6.5",
         "gulp-stylus": "^2.7.0",
         "html-minifier": "4.0.0",
         "husky": "^8.0.1",
-        "jest": "^29.5.0",
+        "jest": "^29.7.0",
         "jest-chain": "^1.1.6",
-        "jest-environment-jsdom": "^29.5.0",
-        "lint-staged": "^12.1.7",
+        "jest-environment-jsdom": "^29.7.0",
+        "lint-staged": "^15.0.1",
         "pofile": "^1.1.0",
         "postcss": "^8.4.16",
         "postcss-inline-svg": "^5.0.0",
-        "prettier": "2.6.2",
-        "prettier-eslint": "^15.0.0",
+        "prettier": "3.0.3",
+        "prettier-eslint": "^16.1.1",
         "pump": "^3.0.0",
         "source-map-loader": "^4.0.0",
-        "stylus": "0.59.0",
+        "stylus": "0.60.0",
         "supervisor": "^0.12.0",
-        "ts-jest": "^29.1.0",
-        "ts-loader": "^9.4.2",
+        "ts-jest": "^29.1.1",
+        "ts-loader": "^9.5.0",
         "tslint": "^6.1.3",
-        "typescript": "<5.2.0",
-        "webpack": "^5.78.0",
+        "typescript": "<5.3",
+        "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^4.5.0",
-        "webpack-cli": "^4.9.2",
+        "webpack-cli": "^5.1.4",
         "xgettext-js": "^3.0.0",
         "yarn": "^1.22.19"
     },

diff --git a/src/components/Announcements/Announcements.tsx b/src/components/Announcements/Announcements.tsx
@@ -122,10 +122,13 @@ export class Announcements extends React.PureComponent<{}, AnnouncementsState> {
             this.state.announcements.push(announcement);
             this.forceUpdate();
 
-            setTimeout(() => {
-                this.clearAnnouncement(announcement.id, true);
-                delete active_announcements[announcement.id];
-            }, moment(announcement.expiration).toDate().getTime() - Date.now());
+            setTimeout(
+                () => {
+                    this.clearAnnouncement(announcement.id, true);
+                    delete active_announcements[announcement.id];
+                },
+                moment(announcement.expiration).toDate().getTime() - Date.now(),
+            );
         } else {
             const t = moment(announcement.expiration).toDate().getTime() - Date.now();
             // Tournaments are announced 30 minutes prior, but allow

diff --git a/src/components/Clock/Clock.tsx b/src/components/Clock/Clock.tsx
@@ -146,20 +146,23 @@ export function Clock({
                     </div>
                 )}
 
-                {time_control.system === "canadian" && (!compact || player_clock.main_time <= 0) && (
-                    <React.Fragment>
-                        <span className="canadian-clock-container">
-                            {player_clock.main_time > 0 && (
-                                <span className="periods-delimiter"> + </span>
-                            )}
-                            <span className="period-time boxed">
-                                {prettyTime(player_clock.block_time_left)}
+                {time_control.system === "canadian" &&
+                    (!compact || player_clock.main_time <= 0) && (
+                        <React.Fragment>
+                            <span className="canadian-clock-container">
+                                {player_clock.main_time > 0 && (
+                                    <span className="periods-delimiter"> + </span>
+                                )}
+                                <span className="period-time boxed">
+                                    {prettyTime(player_clock.block_time_left)}
+                                </span>
+                                <span className="periods-delimiter">/</span>
+                                <span className="period-moves boxed">
+                                    {player_clock.moves_left}
+                                </span>
                             </span>
-                            <span className="periods-delimiter">/</span>
-                            <span className="period-moves boxed">{player_clock.moves_left}</span>
-                        </span>
-                    </React.Fragment>
-                )}
+                        </React.Fragment>
+                    )}
 
                 <div className="pause-and-transmit">
                     {(submitting_move && player_id !== data.get("user").id) || transmitting > 0 ? (

diff --git a/src/components/NetworkStatus/NetworkStatus.tsx b/src/components/NetworkStatus/NetworkStatus.tsx
@@ -16,7 +16,7 @@
  */
 
 import * as React from "react";
-import { useLocation } from "react-router-dom";
+import * as preferences from "preferences";
 import { _ } from "translate";
 import { socket } from "sockets";
 
@@ -29,11 +29,22 @@ type NetworkStatusState = "connected" | "went-away" | "disconnected" | "timeout"
 
 export function NetworkStatus(): JSX.Element {
     const [state, setState] = React.useState<NetworkStatusState>("connected");
+    const [show_slow_internet_warning] = preferences.usePreference("show-slow-internet-warning");
 
     const stateRef = React.useRef(state);
 
-    const location = useLocation();
-    const on_game_page = location.pathname.includes("/game/");
+    // If they're in a live game then we make sure that they see this with a banner
+    // Otherwise it's a discreet little icon
+    // (note: we don't check if it's their turn because it might become their turn at any time, they
+    //  could do with knowing their internet is bad anyhow.)
+    const in_live_game =
+        typeof window !== "undefined" &&
+        window["global_goban"] &&
+        window["global_goban"].engine &&
+        window["global_goban"].engine.phase === "play" &&
+        window["global_goban"].engine.time_control !== "correspondence" &&
+        window["user"] &&
+        window["user"].id in window["global_goban"].engine.player_pool;
 
     React.useEffect(() => {
         stateRef.current = state; // needed so we can refer to the current value in the async timer below
@@ -79,16 +90,20 @@ export function NetworkStatus(): JSX.Element {
         return null;
     }
 
+    if (state === "timeout" && !show_slow_internet_warning) {
+        return null;
+    }
+
     return (
         // We don't show this if they're 'connected' (see above, return null)
-        <div className={"NetworkStatus" + (on_game_page ? "" : " non-game")}>
+        <div className={"NetworkStatus" + (in_live_game ? "" : " non-game")}>
             {/* This funky little thing builds an icon that is intended to say "no wifi!",
                 by superimposing a large "ban" icon over a normal sized "wifi" icon. */}
             <span className="icon">
                 <i className="fa fa-2x fa-ban" />
                 <i className="fa fa-wifi" />
             </span>
-            {on_game_page && (
+            {in_live_game && (
                 <span>
                     {(state === "timeout" || null) && _("Slow internet")}
                     {(state === "disconnected" || null) && _("Disconnected")}

diff --git a/src/components/Notifications/NotificationManager.tsx b/src/components/Notifications/NotificationManager.tsx
@@ -154,14 +154,17 @@ export function emitNotification(title, body, cb?) {
                         notification.onclick = cb;
                     }
 
-                    setTimeout(() => {
-                        try {
-                            /* this isn't supported on MS Edge yet */
-                            notification.close();
-                        } catch (e) {
-                            console.warn(e);
-                        }
-                    }, preferences.get("notification-timeout") * 1000);
+                    setTimeout(
+                        () => {
+                            try {
+                                /* this isn't supported on MS Edge yet */
+                                notification.close();
+                            } catch (e) {
+                                console.warn(e);
+                            }
+                        },
+                        preferences.get("notification-timeout") * 1000,
+                    );
                 } catch (e) {
                     console.info(e);
                 }

diff --git a/src/components/ObserveGamesComponent/ObserveGamesComponent.tsx b/src/components/ObserveGamesComponent/ObserveGamesComponent.tsx
@@ -191,10 +191,13 @@ export class ObserveGamesComponent extends React.PureComponent<
         const now = Date.now();
         if (this.last_refresh != null && now - this.last_refresh < 1000.0) {
             if (!this.next_refresh) {
-                this.next_refresh = setTimeout(() => {
-                    this.next_refresh = null;
-                    this.refresh();
-                }, 1000 - (now - this.last_refresh));
+                this.next_refresh = setTimeout(
+                    () => {
+                        this.next_refresh = null;
+                        this.refresh();
+                    },
+                    1000 - (now - this.last_refresh),
+                );
             }
             return;
         }

diff --git a/src/lib/preferences.ts b/src/lib/preferences.ts
@@ -87,6 +87,7 @@ export const defaults = {
     "show-tournament-indicator": true, // implicitly on desktop
     "show-tournament-indicator-on-mobile": false,
     "show-variation-move-numbers": false,
+    "show-slow-internet-warning": true,
 
     "sound-voice-countdown-main": false,
     "sound-voice-countdown": true,

diff --git a/src/lib/sockets.ts b/src/lib/sockets.ts
@@ -99,6 +99,7 @@ socket.on("latency", (latency, drift) => {
     if (
         typeof window !== "undefined" &&
         window["global_goban"] &&
+        window["global_goban"].engine &&
         window["global_goban"].engine.phase === "play" &&
         window["user"]
     ) {

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -112,6 +112,9 @@ function Main(props): JSX.Element {
                     <ErrorBoundary>
                         <Announcements />
                     </ErrorBoundary>
+                    <ErrorBoundary>
+                        <NetworkStatus />
+                    </ErrorBoundary>
                     <ErrorBoundary>{props.children}</ErrorBoundary>
                     <ErrorBoundary>
                         <AccountWarning />

diff --git a/src/views/Game/GameDock.tsx b/src/views/Game/GameDock.tsx
@@ -558,13 +558,11 @@ export function GameDock({
                 </Tooltip>
             )}
             {
-                user_can_annul &&
-                    !annulable &&
-                    !unannulable && (
-                        <div>
-                            <i className="fa fa-gavel greyed"></i> {_("Annul")}
-                        </div>
-                    ) /* This is a "do nothing" icon for when the game is unranked */
+                user_can_annul && !annulable && !unannulable && (
+                    <div>
+                        <i className="fa fa-gavel greyed"></i> {_("Annul")}
+                    </div>
+                ) /* This is a "do nothing" icon for when the game is unranked */
             }
 
             {(user_can_intervene || user_can_annul) && <hr />}

diff --git a/src/views/Settings/GeneralPreferences.tsx b/src/views/Settings/GeneralPreferences.tsx
@@ -70,6 +70,9 @@ export function GeneralPreferences(props: SettingGroupPageProps): JSX.Element {
     const [enable_v6, setEnableV6]: [boolean, (x: boolean) => void] = React.useState(
         data.get("experiments.v6") === "enabled",
     );
+    const [show_slow_internet_warning, setShowSlowInternetWarning] = usePreference(
+        "show-slow-internet-warning",
+    );
 
     const user = data.get("user");
     const desktop_notifications_enableable: boolean = typeof Notification !== "undefined";
@@ -324,6 +327,13 @@ export function GeneralPreferences(props: SettingGroupPageProps): JSX.Element {
                 />
                 <span>{_("games")}</span>
             </PreferenceLine>
+
+            <PreferenceLine title={_("Warn when internet slowdowns are detected")}>
+                <Toggle
+                    checked={show_slow_internet_warning}
+                    onChange={setShowSlowInternetWarning}
+                />
+            </PreferenceLine>
         </div>
     );
 }
diff --git a/src/views/User/GameHistoryTable.tsx b/src/views/User/GameHistoryTable.tsx
@@ -40,8 +40,11 @@ interface GameHistoryProps {
     user_id: number;
 }
 
-type ResultClass =
-    | `library-${"won" | "lost" | "tie"}-result${"-vs-stronger" | "-vs-weaker" | "-unranked" | ""}`;
+type ResultClass = `library-${"won" | "lost" | "tie"}-result${
+    | "-vs-stronger"
+    | "-vs-weaker"
+    | "-unranked"
+    | ""}`;
 
 interface GroomedGame {
     id: number;