slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
47 lines (46 loc) • 2.47 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { CardHand } from "../CardHand/CardHand";
import { HandResults } from "./HandResults";
import { textOutline } from "../GameCard/GameCardSx";
export const OutComes = ({ outcomes, lastOutcomes, isHandInPlay, lastHandScore, lastHand, overlap, levelScore, levelTarget, isLevelBeaten, }) => {
const outcomesChips = useMemo(() => {
const _outcomesChips = outcomes.map((o, i) => (
// MultiChip
_jsx("div", { style: {
justifyContent: "center",
background: "rgba(0,0,0,0.2)",
padding: "0px 10px",
border: "1px solid green",
borderRadius: "10px",
color: "white",
...textOutline.black,
}, children: `${o.headName} x ${o.multiplier}` }, i + o.headName)));
return (_jsx("div", { style: {
display: "flex",
flexWrap: "wrap",
justifyContent: "center",
padding: "4px 0px",
margin: "15px 0px 5px 0px",
background: "rgba(0,0,0,0.2)",
gap: 10,
}, children: _outcomesChips }));
}, [outcomes]);
if (isHandInPlay)
return outcomesChips;
return (_jsxs("div", { id: "outcomes", children: [outcomesChips, _jsx(CardHand, { cards: [...lastHand, ...lastOutcomes], overlap: overlap, chaos: 2, children: levelScore === 0 ? (_jsx("div", { style: {
textAlign: "center",
}, children: _jsxs("div", { style: {
...textOutline.blackHalf,
color: "white",
background: `rgb(0,0,0,0.3)`,
borderRadius: "10px",
textAlign: "center",
}, children: ["Reach the target", _jsx("span", { style: {
...textOutline.blackHalf,
color: "red",
}, children: ` 100 cats ` }), "in", _jsx("span", { style: {
...textOutline.blackHalf,
color: "aqua",
}, children: ` 3 turns ` })] }) })) : (_jsx(HandResults, { lastHandScore: lastHandScore, levelTarget: levelTarget, isLevelBeaten: isLevelBeaten })) })] }));
};