refactor: inventory slots as map

app/ecs-components/inventory.js

@@ -2,62 +2,64 @@ import Schema from '@/ecs/schema.js';
 
 export default function(Component) {
   return class Inventory extends Component {
+
     insertMany(entities) {
-      for (const [id, {slotChanged}] of entities) {
-        if (slotChanged) {
-          for (const slotIndex in slotChanged) {
-            this.get(id).slots[slotIndex] = {
-              ...this.get(id).slots[slotIndex],
-              ...slotChanged[slotIndex],
+      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],
               };
             }
           }
         }
+      }
       return super.insertMany(entities);
     }
-    markChange(entityId, key, value) {
-      if ('slotChange' === key) {
-        const {index, change} = value;
-        return super.markChange(entityId, key, {[index]: change});
-      }
-      return super.markChange(entityId, key, value);
-    }
+
     mergeDiff(original, update) {
-      if (update.slotChange) {
-        if (!original.slotChange) {
-          original.slotChange = {};
+      if (!update.slotChange) {
+        return super.mergeDiff(original, update);
       }
-        const merged = {};
+      const slotChange = {
+        ...original.slotChange,
+      };
       for (const index in update.slotChange) {
-          merged[index] = {
-            ...original.slotChange[index],
+        if (false === update.slotChange[index]) {
+          slotChange[index] = false;
+        }
+        else {
+          slotChange[index] = {
+            ...slotChange[index],
             ...update.slotChange[index],
           };
         }
-        return {slotChanged: merged};
       }
-      return super.mergeDiff(original, update);
+      return {slotChange};
     }
     instanceFromSchema() {
       const Instance = super.instanceFromSchema();
       const Component = this;
       Instance.prototype.item = function (slot) {
         const {slots} = this;
+        if (!(slot in slots)) {
+          return undefined;
+        }
         const instance = this;
-        for (const index in slots) {
-          const item = slots[index];
-          if (slot === item.slotIndex) {
-            const proxy = new Proxy(item, {
+        const proxy = new Proxy(slots[slot], {
           set(target, property, value) {
             target[property] = value;
-                const change = {[property]: value};
-                Component.markChange(instance.entity, 'slotChange', {index, change});
+            Component.markChange(instance.entity, 'slotChange', {[slot]: {[property]: value}});
             return true;
           },
         });
         return proxy;
-          }
-        }
       };
       return Instance;
     }
@@ -65,12 +67,11 @@ export default function(Component) {
       type: 'object',
       properties: {
         slots: {
-          type: 'array',
-          subtype: {
+          type: 'map',
+          value: {
             type: 'object',
             properties: {
               quantity: {type: 'uint16'},
-              slotIndex: {type: 'uint16'},
               source: {type: 'string'},
             },
           },

app/engine.js

@@ -112,13 +112,12 @@ export default class Engine {
       Ecs: {path: join('homesteads', `${id}`)},
       Momentum: {},
       Inventory: {
-        slots: [
-          {
+        slots: {
+          1: {
             qty: 500,
-            slotIndex: 0,
             source: '/assets/potion',
-          }
-        ]
+          },
+        },
       },
       Health: {health: 100},
       Position: {x: 368, y: 368},

app/react-components/ui.jsx

@@ -148,23 +148,23 @@ export default function Ui({disconnected}) {
       if (localMainEntity === id) {
         if (update.Inventory) {
           const newHotbarSlots = [...hotbarSlots];
-          const {slots, slotChanged} = update.Inventory;
-          if (slotChanged) {
-            for (const slotIndex in slotChanged) {
+          const {slots, slotChange} = update.Inventory;
+          if (slotChange) {
+            for (const slotIndex in slotChange) {
               newHotbarSlots[slotIndex] = {
                 ...newHotbarSlots[slotIndex],
-                ...slotChanged[slotIndex],
+                ...slotChange[slotIndex],
               };
             }
           }
           if (slots) {
-            slots
-              .forEach(({qty, slotIndex, source}) => {
+            for (const slotIndex in slots) {
+              const {qty, source} = slots[slotIndex];
               newHotbarSlots[slotIndex] = {
                 image: source + '/icon.png',
                 qty,
               };
-              });
+            }
           }
           setHotbarSlots(newHotbarSlots);
         }