Fix Number limits bypass

Signed-off-by: Egor Savkin <es@m-labs.hk>

# Conflicts:
#	static/js/shop.bundle.js

package.json

@@ -16,26 +16,27 @@
     "url": "https://git.m-labs.hk/M-Labs/web2019.git"
   },
   "dependencies": {
-    "@hello-pangea/dnd": "^16.6.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "bootstrap": "^5.3.3",
     "json-logic-js": "^2.0.5",
-    "react": "^18.3.1",
-    "react-bootstrap": "^2.10.4",
-    "uuid": "^9.0.1",
-    "zustand": "^4.5.4"
+    "react": "^19.0.0",
+    "react-bootstrap": "^2.10.9",
+    "uuid": "^11.1.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
     "@uidotdev/usehooks": "^2.4.1",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^10.0.0",
     "babel-preset-minify": "^0.5.2",
-    "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-preprocessor-loader": "^1.3.0",
-    "purgecss": "^7.0.2"
+    "purgecss": "^7.0.2",
+    "webpack": "^5.98.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-preprocessor-loader": "^1.3.0"
   },
   "babel": {
     "presets": [

static/js/shop/options/components/Number.jsx

@@ -1,5 +1,7 @@
 import React, {Component} from 'react'
 import {Tip} from "./Tip";
+import {valueOrFallback} from "../utils";
+
 
 export class Number extends Component {
     constructor(props) {
@@ -7,6 +9,9 @@ export class Number extends Component {
         // Initialize the state object with the initial values from the props
         this.state = {
             number: props.outvar in props.data ? props.data[props.outvar] : (props.fallback == null ? 0 : props.fallback),
+            min: valueOrFallback(props.min, -Infinity),
+            max: valueOrFallback(props.max, Infinity),
+            step: valueOrFallback(props.step, 1),
         };
         // Bind the event handler to this
         this.handleChange = this.handleChange.bind(this);
@@ -16,25 +21,25 @@ export class Number extends Component {
     }
 
     handleChange(element) {
-        let number = element.target.value;
+        const number = Math.min(Math.max(this.state.min, element.target.value), this.state.max);
         this.setState({
-            number: Math.min(Math.max(this.props.min || -Infinity, number), this.props.max || Infinity),
+            number: number,
         });
         this.props.target.update(this.props.outvar, number);
     }
 
     handleIncrement() {
-        let number = this.state.number + (this.props.step || 1);
+        let number = this.state.number + this.state.step;
         this.setState({
-            number: Math.min(number, this.props.max || Infinity),
+            number: Math.min(number, this.state.max),
         });
         this.props.target.update(this.props.outvar, number);
     }
 
     handleDecrement() {
-        let number = this.state.number - (this.props.step || 1);
+        let number = this.state.number - this.state.step;
         this.setState({
-            number: Math.max(number, this.props.min || -Infinity),
+            number: Math.max(number, this.state.min),
         });
         this.props.target.update(this.props.outvar, number);
     }
@@ -50,8 +55,8 @@ export class Number extends Component {
 
     render() {
         let key = this.props.id + this.props.outvar;
-        let downDisabled = this.state.number <= this.props.min;
-        let upDisabled = this.state.number >= this.props.max;
+        let downDisabled = this.state.number <= this.state.min;
+        let upDisabled = this.state.number >= this.state.max;
 
         return (
             <div className={"shop-number " + (this.props.classes || "") } key={this.props.id}>
@@ -73,6 +78,9 @@ export class Number extends Component {
                         type="number"
                         value={this.state.number}
                         onChange={this.handleChange}
+                        step={this.state.step}
+                        min={this.state.min}
+                        max={this.state.max}
                         className="form-control"
                     />
 

static/js/shop/options/utils.js

@@ -11,6 +11,10 @@ export const execOrReturn = (valuable, ...args) => {
     return valuable;
 }
 
+export const valueOrFallback = (value, fallback) => {
+    return (value === undefined || value === null) ? fallback : value
+}
+
 export function FillExtCardData(data, index) {
     return {
         // we cannot use value id, because they are substituted with uuid