Fix same options in different crates and drop to the backlog

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

package-lock.json

@@ -12,7 +12,7 @@
         "@babel/core": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/preset-react": "^7.22.15",
-        "@hello-pangea/dnd": "^16.3.0",
+        "@hello-pangea/dnd": "^16.5.0",
         "@uidotdev/usehooks": "^2.4.1",
         "babel-loader": "^9.1.3",
         "babel-preset-minify": "^0.5.2",
@@ -1786,12 +1786,12 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.6",
+      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
-      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
       "dev": true,
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1856,16 +1856,16 @@
       }
     },
     "node_modules/@hello-pangea/dnd": {
-      "version": "16.3.0",
+      "version": "16.5.0",
-      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.5.0.tgz",
-      "integrity": "sha512-RYQ/K8shtJoyNPvFWz0gfXIK7HF3P3mL9UZFGMuHB0ljRSXVgMjVFI/FxcZmakMzw6tO7NflWLriwTNBow/4vw==",
+      "integrity": "sha512-n+am6O32jo/CFXciCysz83lPM3I3F58FJw4uS44TceieymcyxQSfzK5OhzPAKrVBZktmuOI6Zim9WABTMtXv4A==",
       "dev": true,
       "dependencies": {
-        "@babel/runtime": "^7.22.5",
+        "@babel/runtime": "^7.23.2",
         "css-box-model": "^1.2.1",
         "memoize-one": "^6.0.0",
         "raf-schd": "^4.0.3",
-        "react-redux": "^8.1.1",
+        "react-redux": "^8.1.3",
         "redux": "^4.2.1",
         "use-memo-one": "^1.1.3"
       },
@@ -4182,9 +4182,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
+      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "dev": true
     },
     "node_modules/regenerator-transform": {

package.json

@@ -24,7 +24,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
-    "@hello-pangea/dnd": "^16.3.0",
+    "@hello-pangea/dnd": "^16.5.0",
     "react-dom": "^18.2.0",
     "uuid": "^9.0.1",
     "webpack": "^5.89.0",

static/js/shop/Backlog.jsx

@@ -54,7 +54,7 @@ export function Backlog() {
     return (
         <Droppable
             droppableId={data.id}
-            isDropDisabled={true}>
+            isDropDisabled={false}>
 
             {(provided) => (
                 <div

static/js/shop/OptionsWrapper.jsx

@@ -17,18 +17,22 @@ export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
             options={options}
             data={options_data}
             options_class={options_class}
-            key={"popover" + card_index}
+            key={"popover" + crate_id +card_index}
-            id={"popover" + card_index}
+            id={"popover"+ crate_id + card_index}
             big={card_size === "big"}
             first={first}
             last={last}
             target={{
                 construct: ((outvar, value) => {
-                    // console.log("construct", outvar, value, options_data);
+                    // #!options_log
+                    console.log("construct", outvar, value, options_data);
+
                     options_data[outvar] = value;
                 }),
                 update: ((outvar, value) => {
-                    // console.log("update", outvar, value, options_data);
+                    // #!options_log
+                    console.log("update", outvar, value, options_data);
+
                     if (outvar in options_data) options_data[outvar] = value;
                     onOptionsUpdate(crate_id, card_index, {[outvar]: value});
                 })

static/js/shop/Shop.jsx

@@ -32,7 +32,7 @@ export function Shop() {
         if (drop_result.source.droppableId === "backlog")
             addCardFromBacklog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index);
         else if (drop_result.destination.droppableId === "backlog")
-            deleteCard(drop_result.destination.droppableId, drop_result.destination.index);
+            deleteCard(drop_result.source.droppableId, drop_result.source.index);
         else
             moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index)
     }

static/js/shop/options/components/components.js

@@ -6,6 +6,8 @@ import {SwitchWrapper} from "./Switch";
 import {SwitchLineWrapper} from "./SwitchLine";
 import {UnimplementedComponent} from "./UnimplementedComponent";
 
+
+// Class components are used because we cannot use hooks for updating the state
 export const componentsList = {
     "Radio": RadioWrapper,
     "Switch": SwitchWrapper,

static/js/shop/shop_store.js

@@ -195,6 +195,8 @@ const useHighlighted = ((set, get) => ({
         card: 0
     },
     highlightedTimer: null,
+
+    // #!if disable_card_highlight === false
     highlightCard: (crate_id, index) => set(state => ({
         highlighted: {
             crate: crate_id,
@@ -211,6 +213,10 @@ const useHighlighted = ((set, get) => ({
         },
         highlightedTimer: !!state.highlightedTimer ? clearTimeout(state.highlightedTimer) : null
     })),
+    // #!else
+    highlightCard: () => {return null;},
+    highlightReset: () => {return null;},
+    // #!endif
 }));
 
 

static/js/shop/warnings.js

@@ -31,8 +31,8 @@ const find_next_source_index = (data, index, source) => {
 
 const not_enough_resource_trigger = (name) => {
     return (_data, _index, counters) => {
-        const eem = find_in_counters(counters, name);
+        const resource = find_in_counters(counters, name);
-        return eem.occupied > eem.max;
+        return resource.occupied > resource.max;
     }
 }
 

static/js/shop_data.js

@@ -183,7 +183,6 @@ const shop_data = {
       ],
       warnings: [
         "eem_resource",
-        "clk_resource",
         "eem_wiring_constraint"
       ],
       consumes: {

webpack.config.js

@@ -21,9 +21,11 @@ module.exports = {
                             debug: false,
                             directives: {
                                 render_count: false,
+                                options_log: true
                             },
                             params: {
                                 ENV: process.env.NODE_ENV,
+                                disable_card_highlight: true
                             },
                             verbose: false,
                         }