// 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 =