slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
34 lines (33 loc) • 1.73 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import { GameCard } from "../GameCard/GameCard";
import { rollDice } from "../../../lib";
export const CardHand = ({ cards = [], overlap = 60, chaos = 0, selectedHandIndexes, isUnSelectable = false, setSelectedHandIndexes = () => null, selectedLift, children, }) => {
const selectCard = useCallback((index) => {
if (isUnSelectable)
return;
setSelectedHandIndexes((prevIndexes) => {
if (prevIndexes.includes(index)) {
return prevIndexes.filter((i) => i !== index);
}
else {
return [...prevIndexes, index];
}
});
}, [isUnSelectable, setSelectedHandIndexes]);
return (_jsx("div", { children: _jsxs("div", { id: "hand", style: {
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "center",
padding: `25px ${40}px`,
minHeight: "30px",
backgroundColor: "rgb(0,0,0,0.2)",
border: "1px solid rgb(0,0,0,0.2)",
borderRadius: "2px",
gap: 2,
}, children: [cards.map((card, i) => {
const isSelected = selectedHandIndexes?.includes(i);
return (_jsx(GameCard, { card: card, overlap: overlap, rotate: chaos ? rollDice(chaos) - chaos / 2 : 0, onClick: () => selectCard(i), isSelected: isSelected, selectedLift: isSelected ? selectedLift : 0 }, (card?.code ? card.code : card.headName) + i));
}), _jsx("div", { style: { width: "100%" }, children: children })] }) }));
};