55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
import styles from './bag.module.css';
|
|
import Slot from './slot.jsx';
|
|
|
|
/**
|
|
* Inventory bag. 10-40 slots of inventory.
|
|
*/
|
|
export default function Bag({
|
|
isInventoryOpen,
|
|
slots,
|
|
}) {
|
|
const Slots = slots.map((slot, i) => (
|
|
<div
|
|
className={
|
|
[styles.slotWrapper]
|
|
.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.bag}
|
|
style={isInventoryOpen ? {transition: 'none'} : {left: '-440px'}}
|
|
>
|
|
{Slots}
|
|
</div>
|
|
);
|
|
}
|