slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
60 lines (59 loc) • 3.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from "react";
import { colors } from "../../theme/palettes/colors";
import { getLangCode, getLocalizedTextRaw, } from "../LocalizationSelect/useLocalization";
import { importExportSaveLocalization } from "./constants/ImportExportLocalization";
import { cardCss } from "./style/css";
const outlineBlack = "black";
export const LoadGameInstruction = ({ outlineColor = "#c0c0c0ff", outlineThickness = 0.5, cardBgColor, textColor = "#000000ff", cardCssOverride = {}, instructionCssOverride = {}, }) => {
const isEnglish = useMemo(() => {
return getLangCode() === "";
}, []);
const t = typeof outlineThickness === "number" ? outlineThickness : 1;
const textOutline = {
textShadow: `-${t}px -${t}px 0 ${outlineColor}, ${t}px -${t}px 0 ${outlineColor}, -${t}px ${t}px 0 ${outlineColor}, ${t}px ${t}px 0 ${outlineColor}`,
};
const textOutlineBlack = {
textShadow: `-${t}px -${t}px 0 ${outlineBlack}, ${t}px -${t}px 0 ${outlineBlack}, -${t}px ${t}px 0 ${outlineBlack}, ${t}px ${t}px 0 ${outlineBlack}`,
};
const cardStyle = {
...cardCss,
background: cardBgColor,
...(cardCssOverride || {}),
};
return (_jsxs("div", { style: cardStyle, children: [_jsx("div", { style: {
fontSize: "1.1em",
fontWeight: 600,
marginBottom: "10px",
textAlign: "left",
color: textColor,
fontFamily: "Inter, Segoe UI, Arial, Helvetica, sans-serif",
...textOutline,
...(instructionCssOverride || {}),
}, children: getLocalizedTextRaw(importExportSaveLocalization.loadAGame) }), _jsx("div", { style: {
fontSize: "0.95em",
marginBottom: "8px",
textAlign: "left",
color: textColor,
fontFamily: "Inter, Segoe UI, Arial, Helvetica, sans-serif",
...textOutline,
...(instructionCssOverride || {}),
}, children: isEnglish ? (_jsxs(_Fragment, { children: ["1. paste your", _jsxs("span", { style: {
color: colors.redBoxerPinkRed,
fontFamily: "Inter, Segoe UI, Arial, Helvetica, sans-serif",
...textOutlineBlack,
...(instructionCssOverride || {}),
}, children: [" ", "SAVE STRING", " "] }), "in the text box"] })) : (getLocalizedTextRaw(importExportSaveLocalization.loadstep1)) }), _jsx("div", { style: {
fontSize: "0.95em",
textAlign: "left",
color: textColor,
fontFamily: "Inter, Segoe UI, Arial, Helvetica, sans-serif",
...textOutline,
...(instructionCssOverride || {}),
}, children: isEnglish ? (_jsxs(_Fragment, { children: ["2. click", " ", _jsx("span", { style: {
color: "#008f15ff",
fontFamily: "Inter, Segoe UI, Arial, Helvetica, sans-serif",
...textOutlineBlack,
...(instructionCssOverride || {}),
}, children: "Load Save String" })] })) : (getLocalizedTextRaw(importExportSaveLocalization.loadstep2)) })] }));
};