Claude updated react to the latest version (>19). Seems to work well and is significantly snappier

Signed-off-by: Tyler Marques <me@tylermarques.com>

diplomacy/web/package.json

@@ -4,27 +4,26 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "@primer/octicons-react": "^9.1.1",
+    "@primer/octicons-react": "^19.11.0",
-    "bootstrap": "^4.3.1",
+    "bootstrap": "^5.3.3",
-    "jquery": "^3.4.1",
+    "jquery": "^3.7.1",
-    "popper.js": "^1.15.0",
+    "popper.js": "^1.16.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
-    "react": "^16.8.6",
+    "react": "^19.1.0",
-    "react-confirm-alert": "^2.4.1",
+    "react-confirm-alert": "^3.0.6",
-    "react-dom": "^16.8.6",
+    "react-dom": "^19.1.0",
-    "react-helmet": "^5.2.1",
+    "react-helmet": "^6.1.0",
-    "react-scripts": "3.0.1",
+    "react-scripts": "5.0.1",
-    "react-scrollchor": "^6.0.0",
+    "react-scrollchor": "^6.0.0"
-    "react-shortcut": "^1.0.6"
   },
   "scripts": {
-    "start": "react-scripts --openssl-legacy-provider start",
+    "start": "react-scripts start",
-    "build": "react-scripts --openssl-legacy-provider build",
+    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "devDependencies": {
-    "eslint-plugin-react": "^7.14.2"
+    "eslint-plugin-react": "^7.35.0"
   },
   "browserslist": {
     "production": [

diplomacy/web/src/gui/components/navigation.jsx

@@ -15,7 +15,7 @@
 //  with this program.  If not, see <https://www.gnu.org/licenses/>.
 // ==============================================================================
 import React from "react";
-import Octicon, {Person} from "@primer/octicons-react";
+import {PersonIcon} from "@primer/octicons-react";
 import PropTypes from "prop-types";
 
 export class Navigation extends React.Component {
@@ -33,7 +33,7 @@ export class Navigation extends React.Component {
                             <div className={'float-right'}>
                                 <strong>
                                     <u className={'mr-2'}>{this.props.username}</u>
-                                    <Octicon icon={Person}/>
+                                    <PersonIcon/>
                                 </strong>
                             </div>
                         )) || (
@@ -44,7 +44,7 @@ export class Navigation extends React.Component {
                                     {(this.props.username && (
                                         <span>
                                                 <u className={'mr-2'}>{this.props.username}</u>
-                                                <Octicon icon={Person}/>
+                                                <PersonIcon/>
                                             </span>
                                     )) || 'Menu'}
                                 </button>

diplomacy/web/src/gui/forms/power_order_creation_form.jsx

@@ -21,9 +21,33 @@ import {STRINGS} from "../../diplomacy/utils/strings";
 import PropTypes from "prop-types";
 import {Power} from "../../diplomacy/engine/power";
 
-const HotKey = require('react-shortcut');
 
 export class PowerOrderCreationForm extends React.Component {
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+
+    handleKeyDown = (event) => {
+        const key = event.key.toLowerCase();
+        if (key === 'escape') {
+            event.preventDefault();
+            this.setState(this.initState(), () => {
+                if (this.props.onChange)
+                    this.props.onChange(this.state);
+            });
+        } else if (this.props.orderTypes.includes(key.toUpperCase())) {
+            event.preventDefault();
+            this.setState({order_type: key.toUpperCase()}, () => {
+                if (this.props.onChange)
+                    this.props.onChange(this.state);
+            });
+        }
+    };
+
     constructor(props) {
         super(props);
         this.state = this.initState();
@@ -36,12 +60,6 @@ export class PowerOrderCreationForm extends React.Component {
     render() {
         const onChange = Forms.createOnChangeCallback(this, this.props.onChange);
         const onReset = Forms.createOnResetCallback(this, this.props.onChange, this.initState());
-        const onSetOrderType = (letter) => {
-            this.setState({order_type: letter}, () => {
-                if (this.props.onChange)
-                    this.props.onChange(this.state);
-            });
-        };
         let title = '';
         let titleClass = 'mr-4';
         const header = [];
@@ -97,11 +115,6 @@ export class PowerOrderCreationForm extends React.Component {
                         (this.props.power.wait ? 'success' : 'danger')
                     )}
                     {votes}
-                    <HotKey keys={['escape']} onKeysCoincide={onReset}/>
-                    {this.props.orderTypes.map((letter, index) => (
-                        <HotKey key={index} keys={[letter.toLowerCase()]}
-                                onKeysCoincide={() => onSetOrderType(letter)}/>
-                    ))}
                 </form>
             </div>
         );

diplomacy/web/src/gui/forms/select_via_form.jsx

@@ -19,9 +19,27 @@ import PropTypes from "prop-types";
 import {Button} from "../components/button";
 import {FancyBox} from "../components/fancyBox";
 
-const HotKey = require('react-shortcut');
 
 export class SelectViaForm extends React.Component {
+    componentDidMount() {
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+
+    handleKeyDown = (event) => {
+        const key = event.key.toLowerCase();
+        if (key === 'm') {
+            event.preventDefault();
+            this.props.onSelect('M');
+        } else if (key === 'v') {
+            event.preventDefault();
+            this.props.onSelect('V');
+        }
+    };
+
     render() {
         return (
             <FancyBox title={`Select move type for move order: ${this.props.path.join(' ')}`}
@@ -29,8 +47,6 @@ export class SelectViaForm extends React.Component {
                 <div>
                     <Button title={'regular move (M)'} large={true} onClick={() => this.props.onSelect('M')}/>
                     <Button title={'move via (V)'} large={true} onClick={() => this.props.onSelect('V')}/>
-                    <HotKey keys={['m']} onKeysCoincide={() => this.props.onSelect('M')}/>
-                    <HotKey keys={['v']} onKeysCoincide={() => this.props.onSelect('V')}/>
                 </div>
             </FancyBox>
         );

diplomacy/web/src/gui/pages/content_game.jsx

@@ -51,7 +51,6 @@ import {MapData} from "../utils/map_data";
 import {Queue} from "../../diplomacy/utils/queue";
 import {PhaseSummaryBottomSheet} from "../components/PhaseSummaryBottomSheet";
 
-const HotKey = require('react-shortcut');
 
 /* Order management in game page.
  * When editing orders locally, we have to compare it to server orders
@@ -1151,10 +1150,6 @@ export class ContentGame extends React.Component {
                     </div>
                     <div className={'col-xl'}>{orderView}</div>
                 </Row>
-                {toDisplay && <HotKey keys={['arrowleft']} onKeysCoincide={this.onDecrementPastPhase}/>}
-                {toDisplay && <HotKey keys={['arrowright']} onKeysCoincide={this.onIncrementPastPhase}/>}
-                {toDisplay && <HotKey keys={['home']} onKeysCoincide={this.displayFirstPastPhase}/>}
-                {toDisplay && <HotKey keys={['end']} onKeysCoincide={this.displayLastPastPhase}/>}
             </Tab>
         );
     }
@@ -1193,10 +1188,6 @@ export class ContentGame extends React.Component {
                         )}
                     </div>
                 </Row>
-                {toDisplay && <HotKey keys={['arrowleft']} onKeysCoincide={this.onDecrementPastPhase}/>}
-                {toDisplay && <HotKey keys={['arrowright']} onKeysCoincide={this.onIncrementPastPhase}/>}
-                {toDisplay && <HotKey keys={['home']} onKeysCoincide={this.displayFirstPastPhase}/>}
-                {toDisplay && <HotKey keys={['end']} onKeysCoincide={this.displayLastPastPhase}/>}
             </Tab>
         );
     }
@@ -1452,9 +1443,10 @@ export class ContentGame extends React.Component {
             });
         }
         this.props.data.displayed = true;
-        // Try to prevent scrolling when pressing keys Home and End.
+        // Handle keyboard shortcuts for navigation and prevent scrolling when pressing keys Home and End.
         document.onkeydown = (event) => {
-            if (['home', 'end'].includes(event.key.toLowerCase())) {
+            const key = event.key.toLowerCase();
+            if (['home', 'end', 'arrowleft', 'arrowright'].includes(key)) {
                 // Try to prevent scrolling.
                 if (event.hasOwnProperty('cancelBubble'))
                     event.cancelBubble = true;
@@ -1462,6 +1454,25 @@ export class ContentGame extends React.Component {
                     event.stopPropagation();
                 if (event.preventDefault)
                     event.preventDefault();
+                
+                // Handle navigation shortcuts only when toDisplay is true
+                const toDisplay = this.props.data.game && this.props.data.game.phase_abbr !== 'COMPLETED';
+                if (toDisplay) {
+                    switch(key) {
+                        case 'arrowleft':
+                            this.onDecrementPastPhase();
+                            break;
+                        case 'arrowright':
+                            this.onIncrementPastPhase();
+                            break;
+                        case 'home':
+                            this.displayFirstPastPhase();
+                            break;
+                        case 'end':
+                            this.displayLastPastPhase();
+                            break;
+                    }
+                }
             }
         };
     }

diplomacy/web/src/gui/wizards/gameCreation/panelChoosePlayers.js

@@ -17,7 +17,7 @@
 import React from "react";
 import {FancyBox} from "../../components/fancyBox";
 import PropTypes from "prop-types";
-import Octicon, {ArrowLeft} from "@primer/octicons-react";
+import {ArrowLeftIcon} from "@primer/octicons-react";
 
 export class PanelChoosePlayers extends React.Component {
     render() {
@@ -65,7 +65,7 @@ export class PanelChoosePlayers extends React.Component {
                     <div className="col">
                         <button type="button" className="btn btn-secondary btn-sm px-3"
                                 onClick={() => this.props.backward()}>
-                            <Octicon icon={ArrowLeft}/>
+                            <ArrowLeftIcon/>
                         </button>
                     </div>
                 </div>

diplomacy/web/src/gui/wizards/gameCreation/panelChoosePower.js

@@ -17,7 +17,7 @@
 import React from "react";
 import {FancyBox} from "../../components/fancyBox";
 import PropTypes from "prop-types";
-import Octicon, {ArrowLeft} from "@primer/octicons-react";
+import {ArrowLeftIcon} from "@primer/octicons-react";
 
 export class PanelChoosePower extends React.Component {
     render() {
@@ -67,7 +67,7 @@ export class PanelChoosePower extends React.Component {
                     <div className="col">
                         <button type="button" className="btn btn-secondary btn-sm px-3"
                                 onClick={() => this.props.backward()}>
-                            <Octicon icon={ArrowLeft}/>
+                            <ArrowLeftIcon/>
                         </button>
                     </div>
                 </div>

diplomacy/web/src/gui/wizards/gameCreation/panelChooseSettings.js

@@ -18,7 +18,7 @@ import React from "react";
 import {FancyBox} from "../../components/fancyBox";
 import PropTypes from "prop-types";
 import {UTILS} from "../../../diplomacy/utils/utils";
-import Octicon, {ArrowLeft} from "@primer/octicons-react";
+import {ArrowLeftIcon} from "@primer/octicons-react";
 
 const DEADLINES = [
     [0, '(no deadline)'],
@@ -104,7 +104,7 @@ export class PanelChooseSettings extends React.Component {
                     <div className="col-sm">
                         <button type="button" className="btn btn-secondary btn-sm btn-block"
                                 onClick={() => this.props.backward()}>
-                            <Octicon icon={ArrowLeft}/>
+                            <ArrowLeftIcon/>
                         </button>
                     </div>
                     <div className="col-sm">