feat: item backgrounds and active slot index from entity

client/ui/menu/hotbar.js

@@ -5,6 +5,7 @@ import React, {useEffect, useState} from 'react';
 import {compose} from '@avocado/core';
 import contempo from 'contempo';
 // 1st party.
+import {usePropertyChange} from '../hooks/use-property-change';
 import ItemSlot from './item-slot';
 
 const decorate = compose(
@@ -39,16 +40,51 @@ const decorate = compose(
   `),
 );
 
-const HotbarComponent = ({damageProton}) => {
+const HotbarComponent = ({app}) => {
-  const [active, setActive] = useState(0);
+  const selfEntity = usePropertyChange(app, 'selfEntity');
+  const activeSlotIndex = usePropertyChange(selfEntity, 'activeSlotIndex');
+  const [slotImageUris, setSlotImageUris] = useState({});
+  useEffect(() => {
+    if (!selfEntity) {
+      return;
+    }
+    const onInventoryChanged = () => {
+      const imageUris = {};
+      const itemPromises = [];
+      for (let i = 0; i < 10; i++) {
+        const item = selfEntity.itemInSlot(i);
+        if (!item) {
+          continue;
+        }
+        itemPromises.push(item.then((item) => {
+          return item.hydrate().then(() => {
+            const image = item.imageForSlot(0);
+            if (image) {
+              imageUris[i] = image.uri;
+            }
+          });
+        }));
+      }
+      Promise.all(itemPromises).then(() => {
+        setSlotImageUris(imageUris);
+      })
+    };
+    selfEntity.on('inventoryChanged', onInventoryChanged);
+    onInventoryChanged();
+    return () => {
+      selfEntity.off('inventoryChanged', onInventoryChanged);
+    };
+  }, [selfEntity]);
+
   const hotkeyForSlot = (index) => {
     return (index + 1) % 10;
   }
   const slots = [];
   for (let i = 0; i < 10; ++i) {
     const slot = <ItemSlot
+      backgroundImage={slotImageUris[i]}
       className={classnames(
-        active === i ? 'active' : '',
+        activeSlotIndex === i ? 'active' : '',
       )}
       key={i}
       onClick={(event) => {
@@ -64,14 +100,6 @@ const HotbarComponent = ({damageProton}) => {
   }
   return <div
     className="hotbar unselectable"
-    onWheel={(event) => {
-      if (event.deltaY > 0) {
-        setActive((active + 1) % 10);
-      }
-      else if (event.deltaY < 0) {
-        setActive((active + 9) % 10);
-      }
-    }}
   >
     <div className="hotbar-inner">
       {slots}