slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
90 lines (89 loc) • 4.37 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useMemo, useState } from "react";
import { InfoPanel } from "./InfoPanel";
import { cardPaper, selectedGlow, sxInfo, textOutline } from "./GameCardSx";
import { ImgEmoji } from "./ImgEmoji";
import { useSpeech } from "../../../components/CatDeckDealer/hooks/useSpeech";
import "./gameCard.css";
import { catMultiColor } from "../../../components/CatDeckDealer/style/catDeskSx";
export const GameCard = ({ rotate = 0, overlap = 0, scale = 0.75, selectedLift = 20, isSelected = false, card, onClick = () => null, }) => {
const headColor = "#FFEFCA";
const cardColor = "#8D987E";
const { speak, cancelSpeaking } = useSpeech({ isMuteSpeech: false });
const marginLeft = useMemo(() => {
return overlap * -1;
}, [overlap]);
const transform = useMemo(() => {
return `rotate(${rotate}deg) translateX(${overlap / 2}px)${isSelected ? `translateY(${-selectedLift}px)` : ""}`;
}, [overlap, rotate, isSelected, selectedLift]);
const [hovered, setHovered] = useState(false);
const handleClickCard = useCallback(() => {
if (!card)
return;
onClick();
if (isSelected)
return;
cancelSpeaking();
speak(card.headName);
if (card.infoSection) {
speak(card.infoSection);
}
}, [card, onClick, isSelected, cancelSpeaking, speak]);
const hoveredScale = isSelected ? `90%` : `110%`;
if (!card)
return _jsx("div", { children: "No card" });
return (_jsxs("div", { id: "card", onClick: handleClickCard, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
...cardPaper,
width: 180 * scale,
backgroundColor: card.color ? card.color : cardColor,
marginLeft: marginLeft,
transform: transform,
cursor: "pointer",
transition: "scale 0.5s ease",
boxShadow: isSelected ? selectedGlow : "initial",
zIndex: isSelected ? 2 : "initial",
scale: hovered ? hoveredScale : "100%",
}, children: [_jsx(InfoPanel, { sx: {
...sxInfo,
backgroundColor: "#FFEFCA",
borderRadius: "9px 9px 2px 2px",
fontWeight: "bold",
fontSize: "1.2em",
...textOutline.whiteHalf,
}, children: card.headName }), _jsx(ImgEmoji, { emoji: card.emoji, infoLength: card.infoSection?.length || 0 }), _jsx(TypeRow, { target: card.target, children: card.type }), _jsxs(InfoPanel, { sx: {
...sxInfo,
backgroundColor: headColor,
borderRadius: "2px 2px 9px 9px",
minHeight: 50,
}, children: [card.multiplier ? (_jsx("div", { style: {
fontSize: "2em",
color: card.target ? catMultiColor : "lime",
...textOutline.black,
}, children: `${card.multiplier}x` })) : undefined, card.infoSection, card.slider ? _jsx(Slider, { slider: card.slider }) : null] })] }));
};
export const TypeRow = ({ children, target }) => {
return (_jsxs("div", { style: {
fontSize: ".8em",
fontWeight: "bold",
color: "white",
display: "flex",
gap: 10,
...textOutline.black,
}, children: [_jsx("span", { children: children }), target ? (_jsx("span", { style: { color: "#7B1D1D", ...textOutline.white }, children: target })) : null] }));
};
export const Slider = ({ slider }) => {
const statSx = {
backgroundColor: "rgb(255,255,255,0.2)",
borderRadius: "4px",
padding: "0px 2px",
};
return (_jsxs("div", { style: {
width: "100%",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: "2px",
...textOutline.blackHalf,
}, children: [_jsx("span", { style: statSx, children: slider.leftStat }), _jsx("input", { style: { width: "50px" }, type: "range", min: "1", max: "100", value: slider.value }), _jsx("span", { style: statSx, children: slider.rightStat })] }));
};