create-pixi-vn 2.0.3 → 2.0.4

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

@@ -1,29 +0,0 @@
-import i18n from 'i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { initReactI18next } from 'react-i18next';
-import strings_en from '../src/values/translations/strings_en.json';
-
-const getUserLang = (): string => {
-    let userLang: string = navigator.language || "en";
-    return userLang?.toLocaleLowerCase()?.split("-")[0];
-}
-
-export const useI18n = () => {
-    if (!i18n.isInitialized) {
-        i18n
-            .use(LanguageDetector)
-            .use(initReactI18next)
-            .init({
-                debug: false,
-                fallbackLng: 'en',
-                lng: getUserLang(),
-                interpolation: {
-                    escapeValue: false,
-                },
-                resources: {
-                    en: strings_en,
-                    // Add more languages here
-                }
-            });
-    }
-}

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

@@ -1,9 +0,0 @@
-:root {
-  background-color: #242424;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  overflow: hidden;
-}

package/template-react-vite-muijoy-electron/src/interceptors/EventInterceptor.tsx

@@ -1,49 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
-import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import { initializeIndexedDB } from '../utilities/indexedDB-utility';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { addRefreshSave, loadRefreshSave } from '../utilities/save-utility';
-
-export default function EventInterceptor() {
-    const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);
-    const navigate = useMyNavigate();
-    const queryClient = useQueryClient()
-
-    useEffect(() => {
-        Promise.all([loadRefreshSave(navigate), initializeIndexedDB()])
-            .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
-        window.addEventListener("beforeunload", async () => {
-            await addRefreshSave()
-        });
-        window.addEventListener("popstate", onpopstate);
-        window.addEventListener('keydown', onkeydown);
-
-        return () => {
-            window.removeEventListener("beforeunload", async () => {
-                await addRefreshSave()
-            });
-            window.removeEventListener("popstate", onpopstate);
-            window.removeEventListener('keydown', onkeydown);
-        };
-    }, []);
-
-    function onpopstate() {
-        window.history.forward();
-    }
-
-    function onkeydown(event: KeyboardEvent) {
-        if (event.code == 'Enter' || event.code == 'Space') {
-            if (hideInterface) {
-                setHideInterface(false)
-            }
-        }
-        else if (event.code == 'KeyV' && event.shiftKey) {
-            setHideInterface((prev) => !prev)
-        }
-    }
-
-    return null
-}

package/template-react-vite-muijoy-electron/src/interceptors/SkipAutoInterceptor.tsx

@@ -1,67 +0,0 @@
-import { StepLabelProps } from '@drincs/pixi-vn/dist/override';
-import { useSnackbar } from 'notistack';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRecoilValue } from 'recoil';
-import { autoInfoState } from '../atoms/autoInfoState';
-import { skipEnabledState } from '../atoms/skipEnabledState';
-import { typewriterIsAnimatedState } from '../atoms/typewriterIsAnimatedState';
-import { useMyNavigate } from '../utilities/navigate-utility';
-
-export default function SkipAutoInterceptor({ nextOnClick }: {
-    nextOnClick: (props: StepLabelProps) => Promise<void>,
-}) {
-    const navigate = useMyNavigate();
-    const { t: tNarration } = useTranslation(["narration"]);
-    const skipEnabled = useRecoilValue(skipEnabledState)
-    const autoInfo = useRecoilValue(autoInfoState)
-    const typewriterIsAnimated = useRecoilValue(typewriterIsAnimatedState)
-    const [recheckSkip, setRecheckSkip] = useState<number>(0)
-    const { enqueueSnackbar } = useSnackbar();
-
-    useEffect(() => {
-        // Debouncing
-        let timeout = setTimeout(() => {
-            if (skipEnabled) {
-                nextOnClick({
-                    t: tNarration,
-                    navigate,
-                    notify: (message, variant) => enqueueSnackbar(message, { variant }),
-                }).then(() => {
-                    setRecheckSkip((p) => p + 1)
-                })
-            }
-        }, 400);
-
-        return () => {
-            clearTimeout(timeout)
-        }
-    }, [skipEnabled, recheckSkip])
-
-    useEffect(() => {
-        if (skipEnabled) {
-            return
-        }
-        if (autoInfo.enabled && !typewriterIsAnimated) {
-            if (autoInfo.time) {
-                let millisecond = autoInfo.time * 1000
-                // Debouncing
-                let timeout = setTimeout(() => {
-                    if (autoInfo.enabled && !skipEnabled) {
-                        nextOnClick({
-                            t: tNarration,
-                            navigate,
-                            notify: (message, variant) => enqueueSnackbar(message, { variant }),
-                        })
-                    }
-                }, millisecond);
-
-                return () => {
-                    clearTimeout(timeout)
-                }
-            }
-        }
-    }, [autoInfo, typewriterIsAnimated, skipEnabled])
-
-    return null
-}

package/template-react-vite-muijoy-electron/src/main.tsx

@@ -1,39 +0,0 @@
-import { canvas, narration } from '@drincs/pixi-vn'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-import './index.css'
-import { gameEnd } from './utilities/actions-utility'
-
-// Canvas setup with PIXI
-const body = document.body
-if (!body) {
-    throw new Error('body element not found')
-}
-
-canvas.initialize(body, 1920, 1080, {
-    backgroundColor: "#303030"
-}).then(() => {
-    // React setup with ReactDOM
-    const root = document.getElementById('root')
-    if (!root) {
-        throw new Error('root element not found')
-    }
-
-    canvas.initializeHTMLLayout(root)
-    if (!canvas.htmlLayout) {
-        throw new Error('htmlLayout not found')
-    }
-    const reactRoot = createRoot(canvas.htmlLayout)
-
-    reactRoot.render(
-        <App />
-    )
-})
-
-narration.onGameEnd = async ({ navigate }) => {
-    gameEnd(navigate)
-}
-
-narration.onStepError = async (_error, { notify, t }) => {
-    notify(t("allert_error_occurred"), "error")
-}

package/template-react-vite-muijoy-electron/src/models/Character.ts

@@ -1,86 +0,0 @@
-import { CharacterInterface, CharacterStoredClass } from "@drincs/pixi-vn";
-
-interface CharacterProps {
-    /**
-     * The name of the character.
-     */
-    name?: string;
-    /**
-     * The surname of the character.
-     */
-    surname?: string;
-    /**
-     * The age of the character.
-     */
-    age?: number;
-    /**
-     * The icon of the character.
-     */
-    icon?: string;
-    /**
-     * The color of the character.
-     */
-    color?: string;
-}
-
-export default class Character extends CharacterStoredClass implements CharacterInterface {
-    /**
-     * @param id The id of the character.
-     * @param props The properties of the character.
-     */
-    constructor(id: string | { id: string, emotion: string }, props: CharacterProps) {
-        super(typeof id === "string" ? id : id.id, typeof id === "string" ? "" : id.emotion)
-        this.defaultName = props.name
-        this.defaultSurname = props.surname
-        this.defaultAge = props.age
-        this._icon = props.icon
-        this._color = props.color
-    }
-    private defaultName?: string
-    /***
-     * The name of the character.
-     * If you set undefined, it will return the default name.
-     */
-    get name(): string {
-        return this.getStorageProperty<string>("name") || this.defaultName || this.id
-    }
-    set name(value: string | undefined) {
-        this.setStorageProperty<string>("name", value)
-    }
-    private defaultSurname?: string
-    /**
-     * The surname of the character.
-     * If you set undefined, it will return the default surname.
-     */
-    get surname(): string | undefined {
-        return this.getStorageProperty<string>("surname") || this.defaultSurname
-    }
-    set surname(value: string | undefined) {
-        this.setStorageProperty<string>("surname", value)
-    }
-    private defaultAge?: number | undefined
-    /**
-     * The age of the character.
-     * If you set undefined, it will return the default age.
-     */
-    get age(): number | undefined {
-        return this.getStorageProperty<number>("age") || this.defaultAge
-    }
-    set age(value: number | undefined) {
-        this.setStorageProperty<number>("age", value)
-    }
-    private _icon?: string
-    /**
-     * The icon of the character.
-     */
-    get icon(): string | undefined {
-        return this._icon
-    }
-    private _color?: string | undefined
-    /**
-     * The color of the character.
-     */
-    get color(): string | undefined {
-        return this._color
-    }
-}

package/template-react-vite-muijoy-electron/src/models/GameSaveData.ts

@@ -1,9 +0,0 @@
-import { SaveData as PiviVNSaveData } from "@drincs/pixi-vn"
-
-export default interface GameSaveData {
-    saveData: PiviVNSaveData
-    gameVersion: string
-    date: Date
-    name: string
-    image?: string
-}

package/template-react-vite-muijoy-electron/src/pixi-vn.d.ts

@@ -1,36 +0,0 @@
-import { VariantType } from "notistack"
-
-declare module '@drincs/pixi-vn/dist/override' {
-    interface StepLabelResult {
-        [key: string]: any
-    }
-    interface StepLabelProps {
-        /**
-         * function to navigate to a new route.
-         * @param route The route to navigate to.
-         * @returns 
-         */
-        navigate: (route: string) => void
-        /**
-         * Translate a key to a string.
-         * @param key The key to translate.
-         * @returns The translated string.
-         */
-        t: TFunction<[string], undefined>
-        /**
-         * Show a notification.
-         * @param message The message to show.
-         * @param variant The variant of the notification.
-         * @returns 
-         */
-        notify: (message: string, variant: VariantType) => void
-        [key: string]: any
-    }
-    interface CharacterInterface {
-        name: string
-        surname?: string
-        age?: number
-        icon?: string
-        color?: string
-    }
-}

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

@@ -1,165 +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(() => {
-        // Debouncing
-        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-electron/src/screens/ChoiceMenu.tsx

@@ -1,130 +0,0 @@
-import { ChoiceMenuOption, ChoiceMenuOptionClose, narration } from '@drincs/pixi-vn';
-import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';
-import { Box, Grid } from '@mui/joy';
-import { useQueryClient } from '@tanstack/react-query';
-import { motion, Variants } from "motion/react";
-import { useSnackbar } from 'notistack';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRecoilValue } from 'recoil';
-import { dialogueCardHeightState } from '../atoms/dialogueCardHeightState';
-import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import ChoiceButton from '../components/ChoiceButton';
-import { INTERFACE_DATA_USE_QUEY_KEY, useQueryChoiceMenuOptions } from '../use_query/useQueryInterface';
-import { useMyNavigate } from '../utilities/navigate-utility';
-
-export default function ChoiceMenu({ fullscreen = true }: {
-    fullscreen?: boolean,
-}) {
-    const [loading, setLoading] = useState(false)
-    const marginButton = useRecoilValue(dialogueCardHeightState)
-    const height = 100 - marginButton
-    const { t: tNarration } = useTranslation(["narration"]);
-    const navigate = useMyNavigate();
-    const { data: menu = [] } = useQueryChoiceMenuOptions()
-    const hideInterface = useRecoilValue(hideInterfaceState) || menu.length == 0;
-    const queryClient = useQueryClient()
-    const { enqueueSnackbar } = useSnackbar();
-    const gridVariants: Variants = {
-        open: {
-            clipPath: "inset(0% 0% 0% 0% round 10px)",
-            transition: {
-                type: "spring",
-                bounce: 0,
-                duration: 0.7,
-                staggerChildren: 0.05
-            },
-        },
-        closed: {
-            clipPath: "inset(10% 50% 90% 50% round 10px)",
-            transition: {
-                type: "spring",
-                bounce: 0,
-                duration: 0.3
-            },
-        }
-    };
-    const itemVariants: Variants = {
-        open: {
-            opacity: 1,
-            y: 0,
-            transition: { type: "spring", stiffness: 300, damping: 24 }
-        },
-        closed: { opacity: 0, y: 20, transition: { duration: 0.2 } }
-    };
-
-    function afterSelectChoice(item: ChoiceMenuOptionClose | ChoiceMenuOption<{}>) {
-        setLoading(true)
-        narration.selectChoice(item, {
-            navigate: navigate,
-            t: tNarration,
-            notify: (message, variant) => enqueueSnackbar(message, { variant }),
-            ...item.props
-        })
-            .then(() => {
-                queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] })
-                setLoading(false)
-            })
-            .catch((e) => {
-                setLoading(false)
-                console.error(e)
-            })
-    }
-
-    return (
-        <Box
-            sx={{
-                width: '100%',
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                height: fullscreen ? "100%" : `${height}%`,
-                pointerEvents: hideInterface ? "none" : "auto",
-            }}
-        >
-            <Grid
-                container
-                direction="column"
-                justifyContent="center"
-                alignItems="center"
-                spacing={2}
-                sx={{
-                    overflow: 'auto',
-                    height: "100%",
-                    gap: 1,
-                    width: '100%',
-                }}
-                component={motion.div}
-                variants={gridVariants}
-                animate={hideInterface ? "closed" : "open"}
-            >
-                {menu?.map((item, index) => {
-                    return (
-                        <Grid
-                            key={"choice-" + index}
-                            justifyContent="center"
-                            alignItems="center"
-                            component={motion.div}
-                            variants={itemVariants}
-                        >
-                            <ChoiceButton
-                                loading={loading}
-                                onClick={() => {
-                                    afterSelectChoice(item)
-                                }}
-                                sx={{
-                                    left: 0,
-                                    right: 0,
-                                }}
-                                startDecorator={item.type == "close" ? <KeyboardReturnIcon /> : undefined}
-                            >
-                                {item.text}
-                            </ChoiceButton>
-                        </Grid>
-                    )
-                })}
-            </Grid>
-        </Box>
-    );
-}