106 lines
2.4 KiB
JavaScript
106 lines
2.4 KiB
JavaScript
// 3rd party.
|
|
import classnames from 'classnames';
|
|
import React, {useEffect, useState} from 'react';
|
|
// 2nd party.
|
|
import {compose} from '@avocado/core';
|
|
import contempo from 'contempo';
|
|
// 1st party.
|
|
import ItemSlot from './item-slot';
|
|
|
|
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;
|
|
}
|
|
.hotbar .item-slot.active {
|
|
box-shadow:
|
|
-.5px -.5px 0 rgba(0, 0, 0, 1),
|
|
.5px .5px 0 rgba(0, 0, 0, 1),
|
|
-.5px .5px 0 rgba(0, 0, 0, 1),
|
|
.5px -.5px 0 rgba(0, 0, 0, 1),
|
|
inset -.5px -.5px 0 rgba(255, 255, 0, 1),
|
|
inset .5px .5px 0 rgba(255, 255, 0, 1),
|
|
inset -.5px .5px 0 rgba(255, 255, 0, 1),
|
|
inset .5px -.5px 0 rgba(255, 255, 0, 1)
|
|
;
|
|
}
|
|
.hotbar .item-slot.active:hover {
|
|
box-shadow:
|
|
-.5px -.5px 0 rgba(0, 0, 0, 1),
|
|
.5px .5px 0 rgba(0, 0, 0, 1),
|
|
-.5px .5px 0 rgba(0, 0, 0, 1),
|
|
.5px -.5px 0 rgba(0, 0, 0, 1),
|
|
-.5px -.5px 3px rgba(255, 255, 255, 1),
|
|
.5px .5px 3px rgba(255, 255, 255, 1),
|
|
-.5px .5px 3px rgba(255, 255, 255, 1),
|
|
.5px -.5px 3px rgba(255, 255, 255, 1),
|
|
inset -.5px -.5px 0 rgba(255, 255, 0, 1),
|
|
inset .5px .5px 0 rgba(255, 255, 0, 1),
|
|
inset -.5px .5px 0 rgba(255, 255, 0, 1),
|
|
inset .5px -.5px 0 rgba(255, 255, 0, 1)
|
|
;
|
|
transition: none;
|
|
}
|
|
`),
|
|
);
|
|
|
|
const HotbarComponent = ({damageProton}) => {
|
|
const [active, setActive] = useState(0);
|
|
const hotkeyForSlot = (index) => {
|
|
return index;
|
|
}
|
|
const slots = [];
|
|
for (let i = 0; i < 10; ++i) {
|
|
const slot = <ItemSlot
|
|
className={classnames(
|
|
active === i ? 'active' : '',
|
|
)}
|
|
key={i}
|
|
onClick={(event) => {
|
|
setActive(i);
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
return false;
|
|
}}
|
|
>
|
|
<div className="hotbar-key">{hotkeyForSlot(i)}</div>
|
|
</ItemSlot>;
|
|
slots.push(slot);
|
|
}
|
|
return <div
|
|
className="hotbar unselectable"
|
|
onWheel={(event) => {
|
|
if (event.deltaY > 0) {
|
|
setActive((active + 1) % 10);
|
|
}
|
|
else if (event.deltaY < 0) {
|
|
setActive((active + 9) % 10);
|
|
}
|
|
}}
|
|
>
|
|
<div className="hotbar-inner">
|
|
{slots}
|
|
</div>
|
|
</div>;
|
|
}
|
|
|
|
export default decorate(HotbarComponent);
|