50 lines
1018 B
JavaScript
50 lines
1018 B
JavaScript
import styles from './slot.module.css';
|
|
|
|
/**
|
|
* An inventory slot. Displays an item image and the quantity of the item if > 1.
|
|
*/
|
|
export default function Slot({
|
|
icon,
|
|
onClick,
|
|
onDragEnter,
|
|
onDragOver,
|
|
onDragStart,
|
|
onDrop,
|
|
onMouseDown,
|
|
onMouseUp,
|
|
qty = 1,
|
|
}) {
|
|
return (
|
|
<button
|
|
className={styles.slot}
|
|
draggable
|
|
onClick={onClick}
|
|
onDragEnter={onDragEnter}
|
|
onDragOver={onDragOver}
|
|
onDragStart={onDragStart}
|
|
onDrop={onDrop}
|
|
onKeyDown={(event) => {
|
|
event.preventDefault();
|
|
}}
|
|
onMouseDown={onMouseDown}
|
|
onMouseUp={onMouseUp}
|
|
>
|
|
<div
|
|
className={styles.slotInner}
|
|
style={icon ? {backgroundImage: `url(${icon})`} : {}}
|
|
>
|
|
{qty > 1 && (
|
|
<span
|
|
className={
|
|
[styles.qty, `q-${Math.round(Math.log10(qty))}`]
|
|
.filter(Boolean).join(' ')
|
|
}
|
|
>
|
|
{qty}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|