create-pixi-vn 1.9.7 → 2.0.0

package/template-react-vite-muijoy-ink/src/i18n.ts

@@ -1,83 +0,0 @@
-import { RegisteredCharacters } from "@drincs/pixi-vn";
-import { generateJsonInkTranslation } from "@drincs/pixi-vn-ink";
-import i18n from "i18next";
-import Backend from "i18next-chained-backend";
-import resourcesToBackend from "i18next-resources-to-backend";
-import { initReactI18next } from "react-i18next";
-import { convertInkToJson } from "./utils/ink-utility";
-
-function getUserLang(): string {
-    let userLang: string = navigator.language || "en";
-    return userLang?.toLocaleLowerCase()?.split("-")[0];
-}
-
-function getLocalesResource(lng: string): Promise<any> {
-    return import(`./locales/strings_${lng}.json`);
-}
-
-async function generateResourceToTranslate(lng: string): Promise<any> {
-    let res = await getLocalesResource(lng);
-    res = { ...res };
-    if (!res) {
-        res = {};
-    }
-    if (!res.narration) {
-        res.narration = {};
-    }
-    if (res.default) {
-        delete res.default;
-    }
-    for (const element of await convertInkToJson()) {
-        element && (await generateJsonInkTranslation(element, res.narration));
-    }
-    return res;
-}
-
-export async function downloadResourceToTranslate() {
-    const lng = i18n.options.fallbackLng?.toString() || "en";
-    const data = await generateResourceToTranslate(lng);
-    const jsonString = JSON.stringify(data);
-    // download the save data as a JSON file
-    const blob = new Blob([jsonString], { type: "application/json" });
-    // download the file
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `strings_${lng}.json`;
-    a.click();
-}
-
-export const useI18n = () => {
-    if (!i18n.isInitialized) {
-        i18n.use(Backend)
-            .use(initReactI18next)
-            .init({
-                debug: false,
-                fallbackLng: "en",
-                lng: getUserLang(),
-                interpolation: {
-                    escapeValue: false,
-                },
-                load: "currentOnly",
-                backend: {
-                    backends: [
-                        resourcesToBackend(async (lng: string, ns: string) => {
-                            let object = await getLocalesResource(lng);
-                            return object[ns];
-                        }),
-                    ],
-                },
-                missingInterpolationHandler(_text, value, _options) {
-                    let key = value[1];
-                    if (key === "steph_fullname") {
-                        return "Stephanie";
-                    }
-                    let character = RegisteredCharacters.get(key);
-                    if (character) {
-                        return character.name;
-                    }
-                    return `[${key}]`;
-                },
-            });
-    }
-};

package/template-react-vite-muijoy-ink/src/index.css

@@ -1,19 +0,0 @@
-@import "tailwindcss";
-@plugin "@tailwindcss/typography";
-@plugin "tailwindcss-motion";
-
-:root {
-  background-color: #242424;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  display: flex;
-  overflow: hidden;
-}

package/template-react-vite-muijoy-ink/src/ink.d.ts

@@ -1,4 +0,0 @@
-declare module '*.ink' {
-    const value: string
-    export default value
-}

package/template-react-vite-muijoy-ink/src/labels/animations-labels.ts

@@ -1,22 +0,0 @@
-import { canvas, ImageContainer, moveIn, newLabel } from "@drincs/pixi-vn";
-
-export const animation01 = newLabel("animation_01", [
-    async () => {
-        let tickerId = canvas.animate<ImageContainer>(
-            "steph",
-            {
-                scaleX: 1,
-            },
-            { autoplay: false, completeOnContinue: true },
-        );
-
-        await moveIn(
-            "steph",
-            {
-                value: ["fm02-body", "fm02-eyes-joy", "fm02-mouth-smile01"],
-                options: { xAlign: 0.8, yAlign: 1, scale: { y: 1, x: -1 }, anchor: 0.5 },
-            },
-            { direction: "right", ease: "easeInOut", tickerIdToResume: tickerId },
-        );
-    },
-]);

package/template-react-vite-muijoy-ink/src/labels/index.ts

@@ -1 +0,0 @@
-import "./animations-labels";

package/template-react-vite-muijoy-ink/src/locales/strings_en.json

@@ -1,68 +0,0 @@
-{
-	"narration": {},
-	"ui": {
-		"allert_error_occurred": "An error occurred, please report it to the developer",
-		"attention": "Attention",
-		"auto_forward_time": "Auto Forward Time",
-		"auto_forward_time_description": "Choose the time in seconds before the dialogue auto-forwards. If \"{{textSpeedName}}\" is enabled, the auto-forward will be executed after the typewriter effect is completed. (You can edit this value if \"{{autoName}}\" is enabled)",
-		"auto_forward_time_restricted": "Auto",
-		"back": "Back",
-		"cancel": "Cancel",
-		"confirm": "Confirm",
-		"continue": "Continue",
-		"delete": "Delete",
-		"dialogues": "Dialogues",
-		"display": "Display",
-		"enter_fullscreen": "Enter Fullscreen",
-		"example": "Example",
-		"exit": "Exit",
-		"exit_fullscreen": "Exit Fullscreen",
-		"fail_delete": "Delete failed",
-		"fail_load": "Load failed",
-		"fail_save": "Save failed",
-		"fullscreen": "Fullscreen",
-		"fullscreen_description": "Toggle fullscreen mode.",
-		"hide_ui": "Hide UI",
-		"history": "History",
-		"load": "Load",
-		"load_from_file": "Load from File",
-		"load_last_save": "Load Last Save",
-		"load_last_save_restricted": "L.Load",
-		"next": "Next",
-		"off": "Off",
-		"primary_color": "Primary Color",
-		"primary_color_description": "Choose the primary color for the theme.",
-		"quick_save": "Quick Save",
-		"quick_save_restricted": "Q.Save",
-		"return_main_menu": "Return to Main Menu",
-		"save": "Save",
-		"save_as": "Save As",
-		"save_slot": "Save Slot",
-		"save_to_file": "Save to File",
-		"search": "Search",
-		"settings": "Settings",
-		"settings_restricted": "Prefs",
-		"skip": "Skip",
-		"solid_color": "Solid Color",
-		"solid_color_description": "Choose the solid color for the theme. It can be black or white and will be contrasting with the primary color. So if the primary color is dark, the solid color will be white, and a the other way around.",
-		"start": "Start",
-		"success_delete": "Delete successful",
-		"success_load": "Load successful",
-		"success_save": "Save successful",
-		"text_speed": "Text Speed",
-		"text_speed_description": "Choose the speed of the typewriter effect. If is set to 0 ( off ) the text will appear instantly.",
-		"theme_mode": "Theme Mode",
-		"theme_mode_description": "Choose between light, dark, or system theme mode.",
-		"you_sure_to_delete_save": "Are you sure you want to delete this save file?",
-		"you_sure_to_load_save": "Are you sure you want to load this save file?",
-		"you_sure_to_return_main_menu": "Are you sure you want to return to the main menu? All unsaved progress will be lost.",
-		"download_locale": "Download File to Translate",
-		"sound": "Audio",
-		"master_volume": "Master Volume",
-		"bgm_volume": "Music Volume",
-		"sfx_volume": "Sound Effects Volume",
-		"master_volume_description": "Controls the overall audio level for the game. Use this to raise or lower all sounds at once.",
-		"bgm_volume_description": "Sets the volume for background music tracks only.",
-		"sfx_volume_description": "Sets the volume for sound effects such as UI clicks and in-game actions."
-	}
-}

package/template-react-vite-muijoy-ink/src/providers/RootProvider.tsx

@@ -1,20 +0,0 @@
-import { SnackbarProvider } from "notistack";
-import { BrowserRouter } from "react-router-dom";
-import MyThemeProvider from "./ThemeProvider";
-
-export default function RootProvider({ children }: { children: React.ReactNode }) {
-    return (
-        <BrowserRouter>
-            <MyThemeProvider>
-                <SnackbarProvider
-                    anchorOrigin={{
-                        vertical: "top",
-                        horizontal: "left",
-                    }}
-                >
-                    {children}
-                </SnackbarProvider>
-            </MyThemeProvider>
-        </BrowserRouter>
-    );
-}

package/template-react-vite-muijoy-ink/src/providers/ThemeProvider.tsx

@@ -1,170 +0,0 @@
-import { CssVarsProvider, extendTheme } from "@mui/joy";
-import {
-    THEME_ID as MATERIAL_THEME_ID,
-    ThemeProvider as MaterialCssVarsProvider,
-    extendTheme as materialExtendTheme,
-} from "@mui/material/styles";
-import { createContext, useContext, useMemo, useState } from "react";
-import ShadeGenerator from "shade-generator";
-
-type Iprops = {
-    children: React.ReactNode;
-};
-type SolidColorType = "black" | "white";
-
-const ColorContext = createContext<{
-    primaryColor: string;
-    setPrimaryColor: (color: string) => void;
-    solidColor: SolidColorType;
-    setSolidColor: (color: SolidColorType) => void;
-}>({
-    primaryColor: "",
-    setPrimaryColor: () => {},
-    solidColor: "white",
-    setSolidColor: () => {},
-});
-const materialTheme = materialExtendTheme();
-
-export function useEditColorProvider() {
-    const context = useContext(ColorContext);
-    if (context === undefined) {
-        throw new Error("usePrimaryColorProvider must be used within a PrimaryColorProvider");
-    }
-    return context;
-}
-
-/**
- * Get 10 shades of a color based on the color you pass in.
- * @param color
- * @example
- * If you pass in a color of '#03a9f4', you will get the following shades:
- * {
- *     "50": "#e1f5fe",
- *     "100": "#b3e5fc",
- *     "200": "#81d4fa",
- *     "300": "#4fc3f7",
- *     "400": "#29b6f6",
- *     "500": "#03a9f4",
- *     "600": "#039be5",
- *     "700": "#0288d1",
- *     "800": "#0277bd",
- *     "900": "#01579b"
- * }
- */
-function get10ColorShades(color: string) {
-    return {
-        "50": ShadeGenerator.hue(color).shade("10").hex(),
-        "100": ShadeGenerator.hue(color).shade("20").hex(),
-        "200": ShadeGenerator.hue(color).shade("40").hex(),
-        "300": ShadeGenerator.hue(color).shade("60").hex(),
-        "400": ShadeGenerator.hue(color).shade("80").hex(),
-        "500": ShadeGenerator.hue(color).shade("100").hex(),
-        "600": ShadeGenerator.hue(color).shade("200").hex(),
-        "700": ShadeGenerator.hue(color).shade("300").hex(),
-        "800": ShadeGenerator.hue(color).shade("400").hex(),
-        "900": ShadeGenerator.hue(color).shade("500").hex(),
-    };
-}
-
-export default function MyThemeProvider({ children }: Iprops) {
-    const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#1c73ff");
-    const [solidColor, setSolidColor] = useState<SolidColorType>(
-        (localStorage.getItem("solidColor") as SolidColorType) || "white"
-    );
-
-    // Build the theme: https://mui.com/joy-ui/customization/theme-builder
-    const theme = useMemo(() => {
-        localStorage.setItem("primaryColor", primaryColor);
-        localStorage.setItem("solidColor", solidColor);
-
-        let colors = get10ColorShades(primaryColor);
-        return extendTheme({
-            colorSchemes: {
-                light: {
-                    palette: {
-                        primary: {
-                            ...colors,
-                            solidColor:
-                                solidColor === "black"
-                                    ? "var(--joy-palette-common-black)"
-                                    : "var(--joy-palette-common-white)",
-                        },
-                    },
-                },
-                dark: {
-                    palette: {
-                        primary: {
-                            ...colors,
-                            solidColor:
-                                solidColor === "black"
-                                    ? "var(--joy-palette-common-black)"
-                                    : "var(--joy-palette-common-white)",
-                        },
-                    },
-                },
-            },
-            components: {
-                JoyButton: {
-                    styleOverrides: {
-                        root: {
-                            pointerEvents: "auto",
-                            userSelect: "none",
-                        },
-                    },
-                },
-                JoyLink: {
-                    styleOverrides: {
-                        root: {
-                            pointerEvents: "auto",
-                        },
-                    },
-                },
-                JoySvgIcon: {
-                    styleOverrides: {
-                        root: {
-                            pointerEvents: "auto",
-                        },
-                    },
-                },
-                MuiSvgIcon: {
-                    styleOverrides: {
-                        root: {
-                            pointerEvents: "auto",
-                        },
-                    },
-                },
-                JoyCard: {
-                    styleOverrides: {
-                        root: {
-                            pointerEvents: "auto",
-                        },
-                    },
-                },
-                JoyIconButton: {
-                    styleOverrides: {
-                        root: {
-                            pointerEvents: "auto",
-                        },
-                    },
-                },
-            },
-        });
-    }, [primaryColor, solidColor]);
-
-    return (
-        <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: materialTheme }}>
-            <CssVarsProvider theme={theme}>
-                <ColorContext.Provider
-                    value={{
-                        primaryColor: primaryColor,
-                        setPrimaryColor: setPrimaryColor,
-                        solidColor: solidColor,
-                        setSolidColor: setSolidColor,
-                    }}
-                >
-                    {children}
-                </ColorContext.Provider>
-            </CssVarsProvider>
-        </MaterialCssVarsProvider>
-    );
-}

package/template-react-vite-muijoy-ink/src/screens/ChoiceMenu.tsx

@@ -1,76 +0,0 @@
-import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
-import { Grid } from "@mui/joy";
-import { useState } from "react";
-import { useShallow } from "zustand/react/shallow";
-import ChoiceButton from "../components/ChoiceButton";
-import useDebouncedEffect from "../hooks/useDebouncedEffect";
-import useNarrationFunctions from "../hooks/useNarrationFunctions";
-import { useQueryChoiceMenuOptions } from "../hooks/useQueryInterface";
-import useInterfaceStore from "../stores/useInterfaceStore";
-import useStepStore from "../stores/useStepStore";
-import useTypewriterStore from "../stores/useTypewriterStore";
-
-export default function ChoiceMenu() {
-    const nextStepLoading = useStepStore((state) => state.loading);
-    const { data: menu = [] } = useQueryChoiceMenuOptions();
-    const typewriterInProgress = useTypewriterStore(useShallow((state) => state.inProgress));
-    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
-    const { selectChoice } = useNarrationFunctions();
-    const [open, setOpen] = useState(false);
-
-    useDebouncedEffect(() => setOpen(!(hidden || menu.length == 0 || typewriterInProgress)), { delay: 100 }, [
-        hidden,
-        menu,
-        typewriterInProgress,
-    ]);
-
-    if (!open) return null;
-
-    return (
-        <Grid
-            container
-            direction='column'
-            justifyContent='center'
-            alignItems='center'
-            rowSpacing={2}
-            sx={{
-                overflow: "auto",
-                height: "100%",
-                gap: 1,
-                width: "100%",
-                pointerEvents: hidden ? "none" : "auto",
-                margin: 0,
-            }}
-            role='menu'
-        >
-            {menu.map((item, index) => (
-                <Grid
-                    key={"choice-" + index}
-                    justifyContent='center'
-                    alignItems='center'
-                    className={
-                        hidden
-                            ? "motion-opacity-out-0 motion-translate-y-out-[50%]"
-                            : `motion-opacity-in-0 motion-translate-y-in-[50%] motion-delay-[${index * 200}ms]`
-                    }
-                >
-                    <ChoiceButton
-                        loading={nextStepLoading}
-                        onClick={() =>
-                            selectChoice(item).then(() => {
-                                setOpen(false);
-                            })
-                        }
-                        sx={{
-                            left: 0,
-                            right: 0,
-                        }}
-                        startDecorator={item.type === "close" ? <KeyboardReturnIcon /> : undefined}
-                    >
-                        {item.text}
-                    </ChoiceButton>
-                </Grid>
-            ))}
-        </Grid>
-    );
-}

package/template-react-vite-muijoy-ink/src/screens/GameSaveScreen.tsx

@@ -1,128 +0,0 @@
-import DownloadIcon from "@mui/icons-material/Download";
-import FolderOpenIcon from "@mui/icons-material/FolderOpen";
-import { Grid, IconButton, Stack, Theme, Typography } from "@mui/joy";
-import { Pagination, Tooltip, useMediaQuery } from "@mui/material";
-import { useSnackbar } from "notistack";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { useShallow } from "zustand/react/shallow";
-import GameSaveSlot from "../components/GameSaveSlot";
-import ModalDialogCustom from "../components/ModalDialog";
-import { MAIN_MENU_ROUTE } from "../constans";
-import useGameProps from "../hooks/useGameProps";
-import useMyNavigate from "../hooks/useMyNavigate";
-import useGameSaveScreenStore from "../stores/useGameSaveScreenStore";
-import { downloadGameSave, loadGameSaveFromFile } from "../utils/save-utility";
-
-export default function GameSaveScreen() {
-    const {
-        setOpen,
-        open,
-        page,
-        setPage,
-        editDeleteAlert: openDeleteAlert,
-        editLoadAlert: openLoadAlert,
-        editOverwriteSaveAlert: openOverwriteSaveAlert,
-        editSaveAlert: openSaveAlert,
-    } = useGameSaveScreenStore(useShallow((state) => state));
-    const { t } = useTranslation(["ui"]);
-    const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("lg"));
-    const navigate = useMyNavigate();
-    const { enqueueSnackbar } = useSnackbar();
-    const gameProps = useGameProps();
-    let location = useLocation();
-
-    return (
-        <ModalDialogCustom
-            open={open}
-            setOpen={setOpen}
-            layout={smScreen ? "fullscreen" : "center"}
-            head={<Typography level='h2'>{`${t("save")}/${t("load")}`}</Typography>}
-            minWidth='80%'
-            sx={{
-                minHeight: "50%",
-                paddingBottom: 6,
-            }}
-        >
-            <Stack
-                direction={"row"}
-                sx={{
-                    position: "absolute",
-                    top: 10,
-                    right: 40,
-                }}
-            >
-                <Tooltip title={t("load_from_file")}>
-                    <span>
-                        <IconButton
-                            size='lg'
-                            onClick={() =>
-                                loadGameSaveFromFile(navigate, () => {
-                                    gameProps.invalidateInterfaceData();
-                                    enqueueSnackbar(t("success_load"), { variant: "success" });
-                                    setOpen(false);
-                                })
-                            }
-                        >
-                            <FolderOpenIcon fontSize='large' />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-                <Tooltip title={t("save_to_file")}>
-                    <span>
-                        <IconButton
-                            size='lg'
-                            onClick={() => {
-                                downloadGameSave();
-                            }}
-                            disabled={location.pathname == MAIN_MENU_ROUTE}
-                        >
-                            <DownloadIcon fontSize='large' />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-            </Stack>
-            <Grid container>
-                {/* for 6 element */}
-                {Array.from({ length: 6 }).map((_, index) => {
-                    let id = page * 6 + index;
-                    return (
-                        <Grid xs={12} sm={6} md={4} key={"ModalDialogCustom" + index}>
-                            <GameSaveSlot
-                                saveId={id}
-                                onSave={() => {
-                                    openSaveAlert(id);
-                                }}
-                                onOverwriteSave={(data) => {
-                                    openOverwriteSaveAlert(id, data.name);
-                                }}
-                                onLoad={(data) => {
-                                    openLoadAlert({ ...data, id: id });
-                                }}
-                                onDelete={() => {
-                                    openDeleteAlert(id);
-                                }}
-                            />
-                        </Grid>
-                    );
-                })}
-            </Grid>
-            <Pagination
-                count={999}
-                siblingCount={smScreen ? 2 : 7}
-                page={page + 1}
-                onChange={(_event, value) => setPage(value - 1)}
-                sx={{
-                    position: "absolute",
-                    bottom: 7,
-                    right: 0,
-                    left: 0,
-                    justifySelf: "center",
-                    "& .MuiPaginationItem-root": {
-                        color: "var(--joy-palette-text-primary)",
-                    },
-                }}
-            />
-        </ModalDialogCustom>
-    );
-}