ui: hotbar

app/react-components/dom.module.css

@@ -1,4 +1,6 @@
 .dom {
+  display: flex;
+  flex-direction: column;
   height: calc(100% / var(--scale));
   position: absolute;
   top: 0;

app/react-components/hotbar.jsx

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

app/react-components/hotbar.module.css

@@ -1,22 +1,32 @@
 .hotbar {
+  align-self: center;
   --border: calc(var(--unit) * 3px);
   background-color: rgba(0, 0, 0, 0.2);
   border: var(--border) solid #444444;
   box-sizing: border-box;
   display: inline-block;
-  left: calc(var(--unit) * 225px);
   line-height: 0;
   position: absolute;
   top: calc(var(--unit) * 25px);
 }
 
 .slotWrapper {
+  background-color: transparent;
   border: var(--border) solid #999999;
   box-sizing: border-box;
   display: inline-block;
   line-height: 0;
+  padding: 0;
+
+  &.active + .slotWrapper {
+    border-left: none;
+  }
+  &:not(:last-child) {
+    border-right: none;
+  }
 
   &.active {
+    border-right: var(--border) solid #999999;
     border-color: yellow;
   }
 

app/react-components/ui.jsx

@@ -58,7 +58,7 @@ export default function Ui({disconnected}) {
       </style>
       <Pixi />
       <Dom>
-        <HotBar active={0} slots={Array(10).fill(0).map(() => {})} />
+        <HotBar active={1} slots={Array(10).fill(0).map(() => {})} />
         {showDisconnected && (
           <Disconnected />
         )}