fix: item ops

app/ecs-components/inventory.js

@@ -2,19 +2,23 @@ import Component from '@/ecs/component.js';
 
 export default class Inventory extends Component {
   insertMany(entities) {
-    for (const [id, {slotChange}] of entities) {
-      if (slotChange) {
-        const {slots} = this.get(id);
-        for (const slotIndex in slotChange) {
-          if (false === slotChange[slotIndex]) {
-            delete slots[slotIndex];
-          }
-          else {
-            slots[slotIndex] = {
-              ...slots[slotIndex],
-              ...slotChange[slotIndex],
-            };
-          }
+    for (const [id, {cleared, qtyUpdated, swapped}] of entities) {
+      const {$$items, slots} = this.get(id);
+      if (cleared) {
+        for (const slot in cleared) {
+          delete slots[slot];
+        }
+      }
+      if (qtyUpdated) {
+        for (const slot in qtyUpdated) {
+          slots[slot].qty = qtyUpdated[slot];
+        }
+      }
+      if (swapped) {
+        for (const [l, r] of swapped) {
+          const tmp = [$$items[l], slots[l]];
+          [$$items[l], slots[l]] = [$$items[r], slots[r]];
+          [$$items[r], slots[r]] = tmp;
         }
       }
     }
@@ -29,24 +33,11 @@ export default class Inventory extends Component {
         return this.$$items[slot];
       }
       swapSlots(l, r) {
-        const {slots} = this;
-        const tmp = slots[l];
-        const change = {};
-        if (slots[r]) {
-          change[l] = slots[l] = slots[r];
-        }
-        else {
-          change[l] = false;
-          delete slots[l];
-        }
-        if (tmp) {
-          change[r] = slots[r] = tmp;
-        }
-        else {
-          change[r] = false;
-          delete slots[r];
-        }
-        Component.markChange(this.entity, 'slotChange', change);
+        const {$$items, slots} = this;
+        const tmp = [$$items[l], slots[l]];
+        [$$items[l], slots[l]] = [$$items[r], slots[r]];
+        [$$items[r], slots[r]] = tmp;
+        Component.markChange(this.entity, 'swapped', [[l, r]]);
       }
     }
   }
@@ -62,7 +53,7 @@ export default class Inventory extends Component {
       project(position, direction) {
         const {TileLayers} = Component.ecs.get(1);
         const layer = TileLayers.layer(0);
-        const {projection} = this.json;
+        const {projection} = this;
         if (!projection) {
           return undefined;
         }
@@ -125,17 +116,30 @@ export default class Inventory extends Component {
           return projected;
         }
       }
+      get icon() {
+        return this.json.icon;
+      }
+      get projection() {
+        return this.json.projection;
+      }
       get qty() {
-        return slots[this.slot].qty;
+        return this.slot.qty;
       }
       set qty(qty) {
+        let slot;
+        for (slot in slots) {
+          if (slots[slot] === this.slot) {
+            break;
+          }
+        }
         if (qty <= 0) {
-          Component.markChange(instance.entity, 'slotChange', {[this.slot]: false});
-          delete slots[this.slot];
+          Component.markChange(instance.entity, 'cleared', {[slot]: true});
+          delete slots[slot];
+          delete instance.$$items[slot];
         }
         else {
-          slots[this.slot].qty = qty;
-          Component.markChange(instance.entity, 'slotChange', {[this.slot]: {qty}});
+          slots[slot].qty = qty;
+          Component.markChange(instance.entity, 'qtyUpdated', {[slot]: qty});
         }
       }
     }
@@ -151,28 +155,26 @@ export default class Inventory extends Component {
       if (json.stop) {
         scripts.stopInstance = await this.ecs.readScript(json.stop);
       }
-      instance.$$items[slot] = new ItemProxy(slots, json, scripts);
+      instance.$$items[slot] = new ItemProxy(slots[slot], json, scripts);
     }
   }
   mergeDiff(original, update) {
-    if (!update.slotChange) {
-      return super.mergeDiff(original, update);
-    }
-    const slotChange = {
-      ...original.slotChange,
+    const merged = {
+      ...original,
+      qtyUpdated: {
+        ...original.qtyUpdated,
+        ...update.qtyUpdated,
+      },
+      cleared: {
+        ...original.slotCleared,
+        ...update.slotCleared,
+      },
+      swapped: {
+        ...(original.swapped || []),
+        ...(update.swapped || []),
+      },
     };
-    for (const index in update.slotChange) {
-      if (false === update.slotChange[index]) {
-        slotChange[index] = false;
-      }
-      else {
-        slotChange[index] = {
-          ...slotChange[index],
-          ...update.slotChange[index],
-        };
-      }
-    }
-    return {slotChange};
+    return merged;
   }
   static properties = {
     slots: {

app/react-components/hotbar.jsx

@@ -14,6 +14,7 @@ export default function Hotbar({active, onActivate, slots}) {
       key={i}
     >
       <Slot
+        icon={slot?.icon}
         onClick={() => onActivate(i)}
         onDragOver={(event) => {
           event.preventDefault();
@@ -29,7 +30,7 @@ export default function Hotbar({active, onActivate, slots}) {
           event.preventDefault();
           onActivate(i);
         }}
-        {...slot}
+        qty={slot?.qty}
       />
     </div>
   ));

app/react-components/slot.jsx

@@ -4,7 +4,7 @@ import styles from './slot.module.css';
  * An inventory slot. Displays an item image and the quantity of the item if > 1.
  */
 export default function Slot({
-  json,
+  icon,
   onClick,
   onDragEnter,
   onDragOver,
@@ -27,7 +27,7 @@ export default function Slot({
     >
       <div
         className={styles.slotInner}
-        style={json?.icon ? {backgroundImage: `url(${json.icon})`} : {}}
+        style={icon ? {backgroundImage: `url(${icon})`} : {}}
       >
         {qty > 1 && (
           <span

app/react-components/ui.jsx

@@ -173,7 +173,7 @@ export default function Ui({disconnected}) {
       }
       if (localMainEntity === id) {
         if (update.Inventory) {
-          setBufferSlot(entity.Inventory.slots[0]);
+          setBufferSlot(entity.Inventory.item(0));
           const newHotbarSlots = emptySlots();
           for (let i = 1; i < 11; ++i) {
             newHotbarSlots[i - 1] = entity.Inventory.item(i);
@@ -197,7 +197,7 @@ export default function Ui({disconnected}) {
           .${styles.ui} {
             cursor: ${
               bufferSlot
-                ? `url('${bufferSlot.source}/icon.png'), auto !important`
+                ? `url('${bufferSlot.icon}'), auto !important`
                 : 'auto'
               };
           }

public/assets/potion/potion.json

@@ -1,3 +1,4 @@
 {
-  "icon": "/assets/potion/icon.png"
+  "icon": "/assets/potion/icon.png",
+  "start": "/assets/potion/start.js"
 }