feat: Q+D inventory management

app/react-components/hotbar.jsx

@@ -15,6 +15,20 @@ export default function Hotbar({active, onActivate, slots}) {
     >
       <Slot
         onClick={() => onActivate(i)}
+        onDragOver={(event) => {
+          event.preventDefault();
+        }}
+        onDragStart={(event) => {
+          if (!slot) {
+            event.preventDefault();
+          }
+          event.dataTransfer.setData('silphius/item', i);
+          onActivate(i);
+        }}
+        onDrop={(event) => {
+          event.preventDefault();
+          onActivate(i);
+        }}
         {...slot}
       />
     </div>

app/react-components/hotbar.module.css

@@ -31,6 +31,5 @@
 
   &:hover {
     background-color: rgba(0, 0, 0, 0.2);
-    cursor: pointer;
   }
 }

app/react-components/slot.jsx

@@ -3,12 +3,25 @@ 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}) {
+export default function Slot({
+  onClick,
+  onDragEnter,
+  onDragOver,
+  onDragStart,
+  onDrop,
+  qty = 1,
+  source,
+}) {
   const image = source + '/icon.png';
   return (
     <button
       className={styles.slot}
+      draggable
       onClick={onClick}
+      onDragEnter={onDragEnter}
+      onDragOver={onDragOver}
+      onDragStart={onDragStart}
+      onDrop={onDrop}
       onKeyDown={(event) => {
         event.preventDefault();
       }}

app/react-components/slot.module.css

@@ -6,6 +6,7 @@
   background-repeat: no-repeat;
   background-size: contain;
   border: none;
+  cursor: inherit;
   display: inline-block;
   height: var(--size);
   image-rendering: pixelated;

app/react-components/ui.jsx

@@ -25,6 +25,7 @@ export default function Ui({disconnected}) {
   const [mainEntity, setMainEntity] = useMainEntity();
   const [ecs] = useEcs();
   const [showDisconnected, setShowDisconnected] = useState(false);
+  const [bufferSlot, setBufferSlot] = useState();
   const [hotbarSlots, setHotbarSlots] = useState(emptySlots());
   const [activeSlot, setActiveSlot] = useState(0);
   useEffect(() => {
@@ -152,6 +153,7 @@ export default function Ui({disconnected}) {
       }
       if (localMainEntity === id) {
         if (update.Inventory) {
+          setBufferSlot(entity.Inventory.slots[0]);
           const newHotbarSlots = emptySlots();
           for (let i = 1; i < 11; ++i) {
             newHotbarSlots[i - 1] = entity.Inventory.slots[i];
@@ -165,11 +167,20 @@ export default function Ui({disconnected}) {
     }
   }, [hotbarSlots, mainEntity, setMainEntity]);
   return (
-    <div className={styles.ui}>
+    <div
+      className={styles.ui}
+    >
       <style>
         {`
           @media (max-aspect-ratio: ${ratio}) { .${styles.ui} { width: 100%; } }
           @media (min-aspect-ratio: ${ratio}) { .${styles.ui} { height: 100%; } }
+          .${styles.ui} {
+            cursor: ${
+              bufferSlot
+                ? `url('${bufferSlot.source}/icon.png'), auto !important`
+                : 'auto'
+              };
+          }
         `}
       </style>
       <Pixi />