Spare cards is always last

Also add warning if no cards were added

static/css/order-hardware.css

@@ -11,6 +11,18 @@
 .feedback-add-success {
   display: none;
 }
+.feedback-add-failure {
+  background-color: #c75e5e;
+  display: block;
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 1em;
+  z-index: 100000;
+  color: white;
+  border-radius: 10px;
+  box-shadow: 0 0 5px 3px;
+}
 
 #accordion_categories,
 #accordion_categories .accordion-header,
@@ -251,7 +263,7 @@
   ##Screen = B/w 481px to 767px
 */
 @media (min-width: 481px) and (max-width: 767px) {
-  .feedback-add-success {
+  .feedback-add-success, .feedback-add-failure {
     background-color: green;
     display: block;
     position: fixed;
@@ -263,6 +275,9 @@
     border-radius: 10px;
     box-shadow: 0 0 5px 3px;
   }
+  .feedback-add-failure {
+    background-color: #c75e5e;
+  }
 
   .dropdown-item {
     font-size: .75em;
@@ -459,7 +474,7 @@
   ##Screen = B/w 320px to 479px
 */
 @media (min-width: 320px) and (max-width: 480px) {
-  .feedback-add-success {
+  .feedback-add-success, .feedback-add-failure {
     background-color: green;
     display: block;
     position: fixed;
@@ -471,6 +486,9 @@
     border-radius: 10px;
     box-shadow: 0 0 5px 3px;
   }
+  .feedback-add-failure {
+    background-color: #c75e5e;
+  }
 
   .dropdown-item {
     font-size: .75em;

static/js/shop.jsx

@@ -4,6 +4,5 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 
 import { Shop } from "./shop/Shop.jsx"
-import { data } from "./shop/utils"
 
-createRoot(document.querySelector('#root-shop')).render(<Shop data={data} />);
+createRoot(document.querySelector('#root-shop')).render(<Shop />);

static/js/shop/CrateList.jsx

@@ -16,19 +16,21 @@ export function CrateList() {
     const onAddCrate = useShopStore((state) => state.newCrate);
     const setActiveCrate = useShopStore((state) => state.setActiveCrate);
 
-    // #!render_count
+    const onSelectHandler = (e) => {
-    console.log("CrateList renders: ", renderCount)
-    return (
-        <Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={(e) => {
         // if e === null, that means that an accordion item was collapsed rather than expanded. e will be non-null when an item is expanded
         if (e !== null)
             setActiveCrate(e);
         else
             setActiveCrate("")
-            }}>
+    };
+
+    // #!render_count
+    console.log("CrateList renders: ", renderCount)
+    return (
+        <Accordion id="accordion_crates" flush activeKey={active_crate} onSelect={onSelectHandler}>
             {crates.map((crate, index) =>
                 <Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} className="accordion_crates_item">
-                    <Accordion.Header>Crate #{`${index}`}</Accordion.Header>
+                    <Accordion.Header>{crate.name ? crate.name : <>Crate #{`${index}`}</>} </Accordion.Header>
                     <Accordion.Body>
                         <Crate crate_index={index}/>
                     </Accordion.Body>

static/js/shop/CrateMode.jsx

@@ -19,16 +19,20 @@ export function CrateMode({crate_index}) {
 
     // #!render_count
     console.log("CrateMode renders: ", renderCount)
+    if (modes_order.includes(crate.crate_mode)) {
         return (
             <div className="crate-mode">
                 {modes_order.map((mode_name, _) => (
                     <a
                         key={mode_name}
-                    className={(crate.crate_mode === mode_name ? 'active' : '') }
+                        className={(crate.crate_mode === mode_name ? 'active' : '')}
                         onClick={() => setMode(crate.id, mode_name)}
                         href="#"
                         role="button">{crate_modes[mode_name].name}</a>
                 ))}
             </div>
         );
+    } else {
+        return <div className="crate-mode"></div>
+    }
 }

static/js/shop/Layout.jsx

@@ -16,6 +16,7 @@ export function Layout({aside, main}) {
     const mobileSideMenuShouldOpen = useShopStore(state => state.sideMenuIsOpen);
     const onClickToggleMobileSideMenu = useShopStore(state => state.switchSideMenu);
     const showCardAddedFeedback = useShopStore(state => state.showCardAddedFeedback);
+    const showNoDestination = useShopStore(state => state.showNoDestination);
 
     // #!render_count
     console.log("Layout renders: ", renderCount)
@@ -32,9 +33,13 @@ export function Layout({aside, main}) {
             )}
 
             {showCardAddedFeedback ? (
-                    <div className="feedback-add-success">
+                !showNoDestination ?
+                    (<div className="feedback-add-success">
                         ✓ added
-                    </div>
+                    </div>)
+                    : (<div className="feedback-add-failure">
+                        No cards added: all crates are closed
+                    </div>)
             ) : null}
         </div>
     );

static/js/shop/shop_store.js

@@ -39,6 +39,7 @@ const useLayout = ((set, get) => ({
     isMobile: window.deviceIsMobile(),
     sideMenuIsOpen: false,
     showCardAddedFeedback: false,
+    showNoDestination: false,
     timerAdded: null,
 
     switchSideMenu: () => set(state => ({
@@ -46,10 +47,18 @@ const useLayout = ((set, get) => ({
     })),
     cardAdded: () => set(state => ({
         showCardAddedFeedback: true,
+        showNoDestination: false,
         timerAdded: (!!state.timerAdded ? clearTimeout(state.timerAdded) : null) || (state.isMobile && setTimeout(() => {
             get()._endCardAdded()
         }, 2000))
     })),
+    noDestinationWarning: () => set(state => ({
+        showCardAddedFeedback: true,
+        showNoDestination: true,
+        timerAdded: (!!state.timerAdded ? clearTimeout(state.timerAdded) : null) || (setTimeout(() => {
+            get()._endCardAdded()
+        }, 2000))
+    })),
     _endCardAdded: () => set(state => ({
         showCardAddedFeedback: false,
         timerAdded: !!state.timerAdded ? clearTimeout(state.timerAdded) : null
@@ -221,7 +230,7 @@ const useCart = ((set, get) => ({
     active_crate: "crate0",
 
     _newCrate: (crate_id) => set((state) => ({
-        crates: state.crates.concat({
+        crates: state.crates.toSpliced(-1, 0, {
             id: crate_id || "crate" + state.crates.length,
             crate_mode: "rack",
             items: [],
@@ -403,7 +412,11 @@ const useCart = ((set, get) => ({
 
     addCardFromBacklog: (crate_to, index_from, index_to, just_mounted) => {
         const dest = crate_to || get().active_crate;
-        if (!dest) return {};
+        if (!dest) {
+            console.warn("No destination");
+            get().noDestinationWarning();
+            return {};
+        }
         get()._addCardFromBacklog(dest, index_from, index_to)
         get().fillExtData(dest);
         get().fillWarnings(dest);

static/js/shop_data.js

@@ -25,7 +25,7 @@ const shop_data = {
     }
   },
   crateModeOrder: [
-      "rack", "desktop", "no_crate"
+      "rack", "desktop"
   ],
 
   items: {
@@ -1156,7 +1156,16 @@ const shop_data = {
         items: [],
         warnings: [],
         occupiedHP: 0,
-    }]
+    },
+      {
+        id: "spare",
+        name: "Spare cards",
+        crate_mode: "no_crate",
+        items: [],
+        warnings: [],
+        occupiedHP: 0,
+      }
+    ]
 
   },
 };

webpack.config.js

@@ -37,8 +37,8 @@ module.exports = {
     resolve: {
         extensions: ['.tsx', '.ts', '.js', '.jsx'],
     },
-    devtool: "inline-source-map",
+    //devtool: "inline-source-map",
-    mode: "development"
+    //mode: "development"
-    //devtool: false,
+    devtool: false,
-    //mode: "production"
+    mode: "production"
 };