70 lines
1.4 KiB
JavaScript
70 lines
1.4 KiB
JavaScript
import styles from './grid.module.css';
|
|
import Slot from './slot.jsx';
|
|
|
|
/**
|
|
* Inventory grid.
|
|
*/
|
|
export default function Grid({
|
|
active = -1,
|
|
color,
|
|
columns,
|
|
label,
|
|
onActivate,
|
|
slots,
|
|
}) {
|
|
const Slots = slots.map((slot, i) => (
|
|
<div
|
|
className={
|
|
[styles.slot, 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.gridWrapper}>
|
|
<p className={styles.label}>{label}</p>
|
|
<div
|
|
className={styles.grid}
|
|
style={{
|
|
'--color': color,
|
|
'--columns': columns,
|
|
}}
|
|
>
|
|
<div
|
|
className={styles.innerGrid}
|
|
>
|
|
{Slots}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|