2019-04-21 16:31:43 -05:00
|
|
|
// 3rd party.
|
|
|
|
import React from 'react';
|
|
|
|
// 2nd party.
|
|
|
|
import {compose} from '@avocado/core';
|
|
|
|
import contempo from 'contempo';
|
2019-04-21 19:27:58 -05:00
|
|
|
// 1st party.
|
|
|
|
import ItemSlot from './item-slot';
|
2019-04-21 16:31:43 -05:00
|
|
|
|
|
|
|
const decorate = compose(
|
|
|
|
contempo(`
|
|
|
|
.hotbar {
|
|
|
|
position: absolute;
|
|
|
|
width: 200px;
|
|
|
|
height: 20px;
|
|
|
|
left: 50%;
|
|
|
|
top: 2px;
|
|
|
|
}
|
|
|
|
.hotbar-inner {
|
|
|
|
transform: translateX(-50%);
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.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">
|
2019-04-21 19:27:58 -05:00
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">0</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">1</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">2</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">3</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">4</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">5</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">6</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">7</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">8</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
|
|
|
<ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
<div className="hotbar-key">9</div>
|
2019-04-21 19:27:58 -05:00
|
|
|
</ItemSlot>
|
2019-04-21 16:31:43 -05:00
|
|
|
</div>
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default decorate(HotbarComponent);
|