36 lines
777 B
JavaScript
36 lines
777 B
JavaScript
import styles from './hotbar.module.css';
|
|
import gridStyles from './grid.module.css';
|
|
|
|
import Grid from './grid.jsx';
|
|
|
|
/**
|
|
* The hotbar. 10 slots of inventory with an active selection.
|
|
*/
|
|
export default function Hotbar({
|
|
active,
|
|
hotbarIsHidden,
|
|
onActivate,
|
|
slots,
|
|
}) {
|
|
return (
|
|
<div
|
|
className={styles.hotbar}
|
|
style={hotbarIsHidden ? {opacity: 0, top: '-50px'} : {transition: 'opacity 50ms'}}
|
|
>
|
|
<style>{`
|
|
.${styles.hotbar} .${gridStyles.label} {
|
|
text-align: center;
|
|
}
|
|
`}</style>
|
|
<Grid
|
|
active={active}
|
|
color="rgba(02, 02, 57, 0.6)"
|
|
columns={10}
|
|
label={slots[active] && slots[active].label}
|
|
onActivate={onActivate}
|
|
slots={slots}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|