28 lines
568 B
React
28 lines
568 B
React
|
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, onActivate, slots}) {
|
||
|
|
const Slots = slots.map((slot, i) => (
|
||
|
|
<div
|
||
|
|
className={
|
||
|
|
[styles.slotWrapper, active === i && styles.active]
|
||
|
|
.filter(Boolean).join(' ')
|
||
|
|
}
|
||
|
|
onClick={() => onActivate(i)}
|
||
|
|
key={i}
|
||
|
|
>
|
||
|
|
<Slot {...slot} />
|
||
|
|
</div>
|
||
|
|
));
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={styles.hotbar}
|
||
|
|
>
|
||
|
|
{Slots}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|