feat: hotbar

client/ui/damage.js

@@ -1,6 +1,5 @@
 // 3rd party.
-import * as I from 'immutable';
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 // 2nd party.
 import {compose} from '@avocado/core';
 import contempo from 'contempo';

client/ui/hotbar.js

@@ -0,0 +1,80 @@
+// 3rd party.
+import React from 'react';
+// 2nd party.
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
+
+const decorate = compose(
+  contempo(`
+.hotbar {
+  position: absolute;
+  width: 200px;
+  height: 20px;
+  left: 50%;
+  top: 2px;
+}
+.hotbar-inner {
+  transform: translateX(-50%);
+  height: 100%;
+}
+.hotbar-slot {
+  position: relative;
+  box-shadow: -.5px -.5px 0 rgba(0, 0, 0, 1), .5px .5px 0 rgba(0, 0, 0, 1);
+  box-sizing: border-box;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+  background-color: rgba(255, 255, 255, .2);
+}
+.hotbar-key {
+  color: white;
+  text-shadow: 0.25px 0.25px 0 black;
+  font-family: monospace;
+  position: absolute;
+  top: -0.5px;
+  left: 0.5px;
+  font-size: 3px;
+  line-height: 4px;
+}
+  `),
+);
+
+const HotbarComponent = ({damageProton}) => {
+  return <div className="hotbar unselectable">
+    <div className="hotbar-inner">
+      <div className="hotbar-slot">
+        <div className="hotbar-key">0</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">1</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">2</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">3</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">4</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">5</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">6</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">7</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">8</div>
+      </div>
+      <div className="hotbar-slot">
+        <div className="hotbar-key">9</div>
+      </div>
+    </div>
+  </div>;
+}
+
+export default decorate(HotbarComponent);

client/ui/index.js

@@ -4,12 +4,14 @@ import {hot} from 'react-hot-loader/root';
 // 1st party.
 import ConnectionStatus from './connection-status';
 import Damage from './damage';
+import Hotbar from './hotbar';
 import WorldTime from './world-time';
 
 const Ui = ({socket, worldTime}) => {
   return <React.Fragment>
     <Damage />
     <WorldTime worldTime={worldTime} />
+    <Hotbar />
     <ConnectionStatus socket={socket} />
   </React.Fragment>;
 };