feat: quick and dirty inventory

app/react-components/ui.jsx

@@ -19,6 +19,7 @@ export default function Ui({disconnected}) {
   const client = useContext(ClientContext);
   const [mainEntity, setMainEntity] = useMainEntity();
   const [showDisconnected, setShowDisconnected] = useState(false);
+  const [hotbarSlots, setHotbarSlots] = useState(Array(10).fill(0).map(() => {}));
   const [activeSlot, setActiveSlot] = useState(0);
   useEffect(() => {
     let handle;
@@ -141,12 +142,23 @@ export default function Ui({disconnected}) {
         setMainEntity(localMainEntity = id);
       }
       if (localMainEntity === id) {
+        if (payload.ecs[id].Inventory) {
+          const newHotbarSlots = [...hotbarSlots];
+          payload.ecs[id].Inventory.slots
+            .forEach(({qty, slotIndex, source}) => {
+              newHotbarSlots[slotIndex] = {
+                image: source + '/icon.png',
+                qty,
+              };
+            });
+          setHotbarSlots(newHotbarSlots);
+        }
         if (payload.ecs[id].Wielder && 'activeSlot' in payload.ecs[id].Wielder) {
           setActiveSlot(payload.ecs[id].Wielder.activeSlot);
         }
       }
     }
-  }, [mainEntity, setMainEntity]);
+  }, [hotbarSlots, mainEntity, setMainEntity]);
   return (
     <div className={styles.ui}>
       <style>
@@ -166,7 +178,7 @@ export default function Ui({disconnected}) {
                 payload: {type: 'changeSlot', value: i + 1},
               });
             }}
-            slots={Array(10).fill(0).map(() => {})}
+            slots={hotbarSlots}
           />
           {showDisconnected && (
             <Disconnected />

public/assets/potion/start.js

@@ -1,3 +1,7 @@
 wielder.Health.health += 10
-wielder.Inventory.slots[0].qty -= 1
+wielder.Inventory.slots = [
-console.log('hi', wielder.Health.health, wielder.Inventory.slots[0]);
+  {
+    ...wielder.Inventory.slots[0],
+    qty: wielder.Inventory.slots[0].qty - 1,
+  }
+]