slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
60 lines (59 loc) • 2.47 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { textOutline } from "../GameCard/GameCardSx";
import { numberWithCommas } from "../../util/numberWithComma";
import { randomArrayItem } from "../../util/randomArrayItem";
import { catMultiColor } from "./style/catDeskSx";
import { addPluralS } from "../GamePad/hooks/useAddPlural";
export const HandScore = ({ baseScore, multiplier, score, }) => {
if (score === 0)
return null;
const pink = "#ff66b3";
return (_jsxs("div", { style: {
borderBottom: "4px solid rgba(0,0,0,0.2)",
borderRadius: "2px",
textAlign: "center",
alignItems: "baseline",
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "center",
gap: "5px",
fontSize: "3em",
...textOutline.whiteHalf,
}, children: [_jsx("span", { style: {
color: catMultiColor,
...textOutline.black,
fontSize: "0.6em",
}, children: ` cats` }), _jsx("span", { style: {
color: catMultiColor,
...textOutline.black,
}, children: `${numberWithCommas(baseScore)}` }), _jsx("span", { style: {
color: pink,
fontSize: "0.6em",
...textOutline.black,
}, children: "x" }), _jsx("span", { style: {
color: pink,
...textOutline.black,
}, children: numberWithCommas(multiplier) }), _jsx("div", { style: {
color: "white",
...textOutline.blackHalf,
}, children: "=" }), _jsx("span", { style: {
color: "green",
...textOutline.blackHalf,
}, children: `${numberWithCommas(score)}` }), _jsx("span", { style: {
color: "green",
fontSize: "0.6em",
...textOutline.blackHalf,
}, children: `cat${addPluralS(score)} ${randomArrayItem([
"😺",
"😸",
"😹",
"😻",
"😼",
"😽",
"🙀",
"😿",
"😾",
"🐱",
])}` })] }));
};