slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
58 lines (57 loc) • 2.69 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo } from "react";
import { rollDice } from "../../lib";
import { GameCard } from "../GameCard/GameCard";
export const CardHand = ({ cards = [], overlap = 60, chaos = 0, selectedHandIndexes, isUnSelectable = false, setSelectedHandIndexes = () => null, setSelectedHand = () => null, selectedLift, children, scale = 1, }) => {
const selectCard = useCallback(({ index, card }) => {
if (isUnSelectable)
return;
setSelectedHandIndexes((prevIndexes) => {
if (prevIndexes.includes(index)) {
return prevIndexes.filter((i) => i !== index);
}
else {
return [...prevIndexes, index];
}
});
setSelectedHand((prevSelectedHand) => {
const isCodeExisting = prevSelectedHand.some((c) => {
return c.code === card.code;
});
if (!isCodeExisting) {
return [...prevSelectedHand, card];
}
else {
// If the card's 'code' exists, remove it from selectedHand
return prevSelectedHand.filter((c) => c.code !== card.code);
}
});
}, [isUnSelectable, setSelectedHand, setSelectedHandIndexes]);
const _overlap = useMemo(() => {
if (cards.length >= 6) {
return overlap + 25;
}
if (cards.length === 5) {
return overlap + 20;
}
return overlap;
}, [cards.length, overlap]);
return (_jsx("div", { children: _jsxs("div", { id: "hand", style: {
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "center",
alignContent: "baseline",
alignItems: "center",
padding: `${0}px ${0}px`,
margin: `${0}px ${0}px`,
backgroundColor: "rgb(0,0,0,0.2)",
border: "1px solid rgb(0,0,0,0.2)",
borderRadius: "2px",
}, children: [cards.map((card, i) => {
const isSelected = selectedHandIndexes?.includes(i);
return (_jsx(GameCard, { scale: scale, card: card, overlap: _overlap, rotate: chaos ? rollDice(chaos) - chaos / 2 : 0, onClick: () => {
selectCard({ index: i, card });
}, isSelected: isSelected, selectedLift: isSelected ? selectedLift : 0 }, (card?.code ? card.code : card.headName) + i));
}), _jsxs("div", { style: { width: "100%" }, children: [" ", children] })] }) }));
};