fix: markup semantics

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

@@ -180,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}