silphius/app/react-components/slot.jsx
2024-06-24 08:14:32 -05:00

47 lines
972 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({
onClick,
onDragEnter,
onDragOver,
onDragStart,
onDrop,
qty = 1,
source,
}) {
const image = source + '/icon.png';
return (
<button
className={styles.slot}
draggable
onClick={onClick}
onDragEnter={onDragEnter}
onDragOver={onDragOver}
onDragStart={onDragStart}
onDrop={onDrop}
onKeyDown={(event) => {
event.preventDefault();
}}
>
<div
className={styles.slotInner}
style={image ? {backgroundImage: `url(${image})`} : {}}
>
{qty > 1 && (
<span
className={
[styles.qty, `q-${Math.round(Math.log10(qty))}`]
.filter(Boolean).join(' ')
}
>
{qty}
</span>
)}
</div>
</button>
);
}