31 lines
706 B
JavaScript
31 lines
706 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({source, onClick, qty = 1}) {
|
|
const image = source + '/icon.png';
|
|
return (
|
|
<button
|
|
className={styles.slot}
|
|
onClick={onClick}
|
|
>
|
|
<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>
|
|
);
|
|
}
|