app/ecs-components/inventory.js

@@ -2,6 +2,7 @@ import Schema from '@/ecs/schema.js';
 
 export default function(Component) {
   return class Inventory extends Component {
+
     insertMany(entities) {
       for (const [id, {slotChange}] of entities) {
         if (slotChange) {
@@ -21,6 +22,7 @@ export default function(Component) {
       }
       return super.insertMany(entities);
     }
+
     mergeDiff(original, update) {
       if (!update.slotChange) {
         return super.mergeDiff(original, update);
@@ -55,7 +57,6 @@ export default function(Component) {
             target[property] = value;
             if ('qty' === property && value <= 0) {
               Component.markChange(instance.entity, 'slotChange', {[slot]: false});
-              delete slots[slot];
             }
             else {
               Component.markChange(instance.entity, 'slotChange', {[slot]: {[property]: value}});

app/engine.js

@@ -234,22 +234,16 @@ export default class Engine {
           break;
         }
         case 'use': {
-          const item = Inventory.item(Wielder.activeSlot + 1);
-          if (item) {
-            this.server.readAsset([
-              item.source,
-              payload.value ? 'start.js' : 'stop.js',
-            ].join('/'))
-              .then((response) => response.ok ? response.text() : '')
+          if (payload.value) {
+            const item = Inventory.item(Wielder.activeSlot + 1);
+            this.server.readAsset(item.source + '/start.js')
+              .then((response) => response.text())
               .then((code) => {
-                if (code) {
-                  Ticking.addTickingPromise(
-                    Script.tickingPromise(code, {item, wielder: entity}),
-                  );
-                }
+                Ticking.addTickingPromise(
+                  Script.tickingPromise(code, {item, wielder: entity}),
+                );
               });
           }
-          break;
         }
       }
     }

app/react-components/hotbar.jsx

@@ -6,18 +6,16 @@ import Slot from './slot.jsx';
  */
 export default function Hotbar({active, onActivate, slots}) {
   const Slots = slots.map((slot, i) => (
-    <div
+    <button
       className={
         [styles.slotWrapper, active === i && styles.active]
           .filter(Boolean).join(' ')
       }
+      onClick={() => onActivate(i)}
       key={i}
     >
-      <Slot
-        onClick={() => onActivate(i)}
-        {...slot}
-      />
-    </div>
+      <Slot {...slot} />
+    </button>
   ));
   return (
     <div

app/react-components/hotbar.module.css

@@ -11,6 +11,7 @@
 }
 
 .slotWrapper {
+  background-color: transparent;
   border: var(--border) solid #999999;
   box-sizing: border-box;
   display: inline-block;

app/react-components/slot.jsx

@@ -3,10 +3,9 @@ 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({source, onClick, qty = 1}) {
-  const image = source + '/icon.png';
+export default function Slot({image, onClick, qty = 1}) {
   return (
-    <button
+    <div
       className={styles.slot}
       onClick={onClick}
     >
@@ -25,6 +24,6 @@ export default function Slot({source, onClick, qty = 1}) {
           </span>
         )}
       </div>
-    </button>
+    </div>
   );
 }

app/react-components/slot.module.css

@@ -1,11 +1,9 @@
 .slot {
   --size: calc(var(--unit) * 50px);
   --space: calc(var(--unit) * 10px);
-  background-color: transparent;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
-  border: none;
   display: inline-block;
   height: var(--size);
   image-rendering: pixelated;

app/react-components/ui.jsx

@@ -137,7 +137,7 @@ export default function Ui({disconnected}) {
         });
       }
     });
-  }, [client]);
+  });
   usePacket('Tick', (payload) => {
     if (0 === Object.keys(payload.ecs).length) {
       return;
@@ -154,7 +154,13 @@ export default function Ui({disconnected}) {
         if (update.Inventory) {
           const newHotbarSlots = emptySlots();
           for (let i = 1; i < 11; ++i) {
-            newHotbarSlots[i - 1] = entity.Inventory.slots[i];
+            if (entity.Inventory.slots[i]) {
+              const {qty, source} = entity.Inventory.slots[i];
+              newHotbarSlots[i - 1] = {
+                image: source + '/icon.png',
+                qty,
+              };
+            }
           }
           setHotbarSlots(newHotbarSlots);
         }
@@ -180,7 +186,7 @@ export default function Ui({disconnected}) {
             onActivate={(i) => {
               client.send({
                 type: 'Action',
-                payload: {type: 'changeSlot', value: i + 1},
+                payload: {type: 'changeSlot', value: i},
               });
             }}
             slots={hotbarSlots}

stories/dom-decorator.jsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from 'react';
 
-import Dom from '@/react-components/dom.jsx';
+import Dom from '@/components/dom.jsx';
 import {RESOLUTION} from '@/constants.js';
 
 function Decorator({children, style}) {
@@ -26,7 +26,6 @@ function Decorator({children, style}) {
       ref={ref}
       style={{
         backgroundColor: '#1099bb',
-        flexDirection: 'column',
         opacity: 0 === scale ? 0 : 1,
         position: 'relative',
         height: `calc(${RESOLUTION.y}px * ${scale})`,

stories/hotbar.stories.js

@@ -1,12 +1,14 @@
 import {useArgs} from '@storybook/preview-api';
 import {fn} from '@storybook/test';
 
-import Hotbar from '@/react-components/hotbar.jsx';
+import Hotbar from '@/components/hotbar.jsx';
 
 import DomDecorator from './dom-decorator.jsx';
 
+import potion from '/assets/potion.png?url';
+
 const slots = Array(10).fill({});
-slots[2] = {qty: 24, source: '/assets/potion'};
+slots[2] = {image: potion, qty: 24};
 
 export default {
   title: 'Dom/Inventory/Hotbar',
@@ -23,12 +25,7 @@ export default {
       };
       return Hotbar();
     },
-    DomDecorator({
-      style: {
-        display: 'flex',
-        flexDirection: 'column',
-      },
-    }),
+    DomDecorator(),
   ],
   tags: ['autodocs'],
   args: {

stories/slot.stories.js

@@ -1,7 +1,9 @@
-import Slot from '@/react-components/slot.jsx';
+import Slot from '@/components/slot.jsx';
 
 import DomDecorator from './dom-decorator.jsx';
 
+import potion from '/assets/potion.png?url';
+
 export default {
   title: 'Dom/Inventory/Slot',
   component: Slot,
@@ -31,7 +33,7 @@ export default {
     },
   },
   args: {
-    source: '/assets/potion',
+    image: potion,
   },
 };