58 lines
1.3 KiB
JavaScript
58 lines
1.3 KiB
JavaScript
import styles from './hotbar.module.css';
|
|
import Slot from './slot.jsx';
|
|
|
|
/**
|
|
* The hotbar. 10 slots of inventory with an active selection.
|
|
*/
|
|
export default function Hotbar({
|
|
active,
|
|
hotbarIsHidden,
|
|
onActivate,
|
|
slots,
|
|
}) {
|
|
const Slots = slots.map((slot, i) => (
|
|
<div
|
|
className={
|
|
[styles.slotWrapper, active === i && styles.active]
|
|
.filter(Boolean).join(' ')
|
|
}
|
|
key={i}
|
|
>
|
|
<Slot
|
|
icon={slot?.icon}
|
|
onMouseDown={(event) => {
|
|
onActivate(i)
|
|
event.stopPropagation();
|
|
}}
|
|
onMouseUp={(event) => {
|
|
event.stopPropagation();
|
|
}}
|
|
onDragOver={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
onDragStart={(event) => {
|
|
if (!slot) {
|
|
event.preventDefault();
|
|
}
|
|
event.dataTransfer.setData('silphius/item', i);
|
|
onActivate(i);
|
|
}}
|
|
onDrop={(event) => {
|
|
event.preventDefault();
|
|
onActivate(i);
|
|
}}
|
|
qty={slot?.qty}
|
|
/>
|
|
</div>
|
|
));
|
|
return (
|
|
<div
|
|
className={styles.hotbar}
|
|
style={hotbarIsHidden ? {top: '-50px'} : {transition: 'none'}}
|
|
>
|
|
<p className={styles.label}>{slots[active] && slots[active].label}</p>
|
|
{Slots}
|
|
</div>
|
|
);
|
|
}
|