fix: item action

app/ecs-components/inventory.js

@@ -2,7 +2,6 @@ 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) {
@@ -22,7 +21,6 @@ export default function(Component) {
       }
       return super.insertMany(entities);
     }
-
     mergeDiff(original, update) {
       if (!update.slotChange) {
         return super.mergeDiff(original, update);
@@ -57,6 +55,7 @@ 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,16 +234,22 @@ export default class Engine {
           break;
         }
         case 'use': {
-          if (payload.value) {
           const item = Inventory.item(Wielder.activeSlot + 1);
-            this.server.readAsset(item.source + '/start.js')
-              .then((response) => response.text())
+          if (item) {
+            this.server.readAsset([
+              item.source,
+              payload.value ? 'start.js' : 'stop.js',
+            ].join('/'))
+              .then((response) => response.ok ? response.text() : '')
               .then((code) => {
+                if (code) {
                   Ticking.addTickingPromise(
                     Script.tickingPromise(code, {item, wielder: entity}),
                   );
+                }
               });
           }
+          break;
         }
       }
     }

app/react-components/hotbar.jsx

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

app/react-components/hotbar.module.css

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

app/react-components/slot.jsx

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

app/react-components/slot.module.css

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

stories/dom-decorator.jsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from 'react';
 
-import Dom from '@/components/dom.jsx';
+import Dom from '@/react-components/dom.jsx';
 import {RESOLUTION} from '@/constants.js';
 
 function Decorator({children, style}) {
@@ -26,6 +26,7 @@ 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,14 +1,12 @@
 import {useArgs} from '@storybook/preview-api';
 import {fn} from '@storybook/test';
 
-import Hotbar from '@/components/hotbar.jsx';
+import Hotbar from '@/react-components/hotbar.jsx';
 
 import DomDecorator from './dom-decorator.jsx';
 
-import potion from '/assets/potion.png?url';
-
 const slots = Array(10).fill({});
-slots[2] = {image: potion, qty: 24};
+slots[2] = {qty: 24, source: '/assets/potion'};
 
 export default {
   title: 'Dom/Inventory/Hotbar',
@@ -25,7 +23,12 @@ export default {
       };
       return Hotbar();
     },
-    DomDecorator(),
+    DomDecorator({
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    }),
   ],
   tags: ['autodocs'],
   args: {

stories/slot.stories.js

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