silphius/app/react-components/slot.jsx
2024-06-28 12:12:38 -05:00

46 lines
941 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({
json,
onClick,
onDragEnter,
onDragOver,
onDragStart,
onDrop,
qty = 1,
}) {
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={json?.icon ? {backgroundImage: `url(${json.icon})`} : {}}
>
{qty > 1 && (
<span
className={
[styles.qty, `q-${Math.round(Math.log10(qty))}`]
.filter(Boolean).join(' ')
}
>
{qty}
</span>
)}
</div>
</button>
);
}