create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-tauri/src/screens/QuickTools.tsx

@@ -1,124 +0,0 @@
-import { Stack } from "@mui/joy";
-import { useQueryClient } from "@tanstack/react-query";
-import { useSnackbar } from "notistack";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import TextMenuButton from "../components/TextMenuButton";
-import useNarrationFunctions from "../hooks/useNarrationFunctions";
-import { useQueryCanGoBack } from "../hooks/useQueryInterface";
-import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "../hooks/useQueryLastSave";
-import { SAVES_USE_QUEY_KEY } from "../hooks/useQuerySaves";
-import { useWheelActions } from "../hooks/useWheelActions";
-import useAutoInfoStore from "../stores/useAutoInfoStore";
-import useGameSaveScreenStore from "../stores/useGameSaveScreenStore";
-import useHistoryScreenStore from "../stores/useHistoryScreenStore";
-import useInterfaceStore from "../stores/useInterfaceStore";
-import useSettingsScreenStore from "../stores/useSettingsScreenStore";
-import useSkipStore from "../stores/useSkipStore";
-import useStepStore from "../stores/useStepStore";
-import { saveGameToIndexDB } from "../utils/save-utility";
-
-export default function QuickTools() {
-    const editOpenSettings = useSettingsScreenStore((state) => state.editOpen);
-    const editOpenHistory = useHistoryScreenStore((state) => state.editOpen);
-    const editOpenSaveScreen = useGameSaveScreenStore((state) => state.editOpen);
-    const setOpenLoadAlert = useGameSaveScreenStore((state) => state.editLoadAlert);
-    const { t } = useTranslation(["ui"]);
-    const hidden = useInterfaceStore((state) => state.hidden);
-    const skipEnabled = useSkipStore((state) => state.enabled);
-    const editSkipEnabled = useSkipStore((state) => state.editEnabled);
-    const setSkipEnabled = useSkipStore((state) => state.setEnabled);
-    const autoEnabled = useAutoInfoStore((state) => state.enabled);
-    const editAutoEnabled = useAutoInfoStore((state) => state.editEnabled);
-    const { enqueueSnackbar } = useSnackbar();
-    const queryClient = useQueryClient();
-    const { data: lastSave = null } = useQueryLastSave();
-    const { data: canGoBack = null } = useQueryCanGoBack();
-    const nextStepLoading = useStepStore((state) => state.loading);
-    const { goBack } = useNarrationFunctions();
-    useWheelActions();
-    const textMenuVarians = useMemo(
-        () =>
-            hidden
-                ? `motion-opacity-out-0 motion-translate-y-out-[50%]`
-                : `motion-opacity-in-0 motion-translate-y-in-[50%]`,
-        [hidden]
-    );
-
-    return (
-        <Stack
-            direction='row'
-            justifyContent='center'
-            alignItems='flex-end'
-            spacing={{ xs: 0.5, sm: 1, md: 2 }}
-            sx={{
-                position: "absolute",
-                height: { xs: "0.9rem", sm: "1rem", md: "1.1rem", lg: "1.3rem", xl: "1.4rem" },
-                paddingLeft: { xs: 1, sm: 2, md: 4, lg: 6, xl: 8 },
-                left: 0,
-                right: 0,
-                bottom: 0,
-            }}
-            className={textMenuVarians}
-        >
-            <TextMenuButton
-                onClick={() => {
-                    if (skipEnabled) {
-                        setSkipEnabled(false);
-                    }
-                    goBack();
-                }}
-                disabled={!canGoBack || nextStepLoading}
-                sx={{ pointerEvents: !hidden ? "auto" : "none" }}
-            >
-                {t("back")}
-            </TextMenuButton>
-            <TextMenuButton onClick={editOpenHistory} sx={{ pointerEvents: !hidden ? "auto" : "none" }}>
-                {t("history")}
-            </TextMenuButton>
-            <TextMenuButton
-                selected={skipEnabled}
-                onClick={editSkipEnabled}
-                sx={{ pointerEvents: !hidden ? "auto" : "none" }}
-            >
-                {t("skip")}
-            </TextMenuButton>
-            <TextMenuButton
-                selected={autoEnabled}
-                onClick={editAutoEnabled}
-                sx={{ pointerEvents: !hidden ? "auto" : "none" }}
-            >
-                {t("auto_forward_time_restricted")}
-            </TextMenuButton>
-            <TextMenuButton onClick={editOpenSaveScreen} sx={{ pointerEvents: !hidden ? "auto" : "none" }}>
-                {t(`${t("save")}/${t("load")}`)}
-            </TextMenuButton>
-            <TextMenuButton
-                onClick={() => {
-                    saveGameToIndexDB()
-                        .then((save) => {
-                            queryClient.setQueryData([SAVES_USE_QUEY_KEY, save.id], save);
-                            queryClient.setQueryData([LAST_SAVE_USE_QUEY_KEY], save);
-                            enqueueSnackbar(t("success_save"), { variant: "success" });
-                        })
-                        .catch(() => {
-                            enqueueSnackbar(t("fail_save"), { variant: "error" });
-                        });
-                }}
-                sx={{ pointerEvents: !hidden ? "auto" : "none" }}
-            >
-                {t("quick_save_restricted")}
-            </TextMenuButton>
-            <TextMenuButton
-                onClick={() => lastSave && setOpenLoadAlert(lastSave)}
-                disabled={!lastSave}
-                sx={{ pointerEvents: !hidden ? "auto" : "none" }}
-            >
-                {t("load_last_save_restricted")}
-            </TextMenuButton>
-            <TextMenuButton onClick={editOpenSettings} sx={{ pointerEvents: !hidden ? "auto" : "none" }}>
-                {t("settings_restricted")}
-            </TextMenuButton>
-        </Stack>
-    );
-}

package/template-nqtr-react-vite-muijoy-tauri/src/screens/Settings.tsx

@@ -1,118 +0,0 @@
-import {
-    Box,
-    DialogContent,
-    DialogTitle,
-    Divider,
-    Drawer,
-    FormControl,
-    ModalClose,
-    RadioGroup,
-    Sheet,
-    Typography,
-} from "@mui/joy";
-import { Theme, useMediaQuery } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import ReturnMainMenuButton from "../components/ReturnMainMenuButton";
-import useEventListener from "../hooks/useKeyDetector";
-import useSettingsScreenStore from "../stores/useSettingsScreenStore";
-import AutoSettingToggle from "./settings/AutoSettingToggle";
-import DialoguesSettings from "./settings/DialoguesSettings";
-import DownloadFileToTranslateSettingButton from "./settings/DownloadFileToTranslateSettingButton";
-import FullScreenSettings from "./settings/FullScreenSettings";
-import HideInterfaceSettingToggle from "./settings/HideInterfaceSettingToggle";
-import OpenHistorySettingButton from "./settings/OpenHistorySettingButton";
-import SaveLoadSettingButtons from "./settings/SaveLoadSettingButtons";
-import SkipSettingToggle from "./settings/SkipSettingToggle";
-import SoundSettings from "./settings/SoundSettings";
-import ThemeSettings from "./settings/ThemeSettings";
-
-export default function Settings() {
-    const open = useSettingsScreenStore((state) => state.open);
-    const editOpen = useSettingsScreenStore((state) => state.editOpen);
-    const { t } = useTranslation(["ui"]);
-    const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("sm"));
-
-    useEventListener({
-        type: "keydown",
-        listener: (event) => {
-            if (event.code == "Escape") {
-                editOpen();
-            }
-        },
-    });
-
-    return (
-        <Drawer
-            variant='plain'
-            open={open}
-            onClose={editOpen}
-            sx={{
-                "& .MuiDrawer-content": {
-                    width: smScreen ? "100%" : 600,
-                    maxWidth: "100%",
-                },
-            }}
-            slotProps={{
-                content: {
-                    sx: {
-                        bgcolor: "transparent",
-                        p: { md: 3, sm: 0 },
-                        boxShadow: "none",
-                    },
-                },
-            }}
-        >
-            <Sheet
-                sx={{
-                    borderRadius: "md",
-                    p: 2,
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: 2,
-                    height: "100%",
-                    overflow: "auto",
-                }}
-            >
-                <DialogTitle>{t("settings")}</DialogTitle>
-                <ModalClose />
-                <Divider sx={{ mt: "auto" }} />
-                <DialogContent sx={{ gap: 2 }}>
-                    <FormControl>
-                        <RadioGroup>
-                            <Box
-                                sx={{
-                                    display: "grid",
-                                    gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
-                                    gap: 1.5,
-                                }}
-                            >
-                                <SkipSettingToggle />
-                                <AutoSettingToggle />
-                                <OpenHistorySettingButton />
-                                <SaveLoadSettingButtons />
-                                <HideInterfaceSettingToggle />
-                                <DownloadFileToTranslateSettingButton />
-                            </Box>
-                        </RadioGroup>
-                    </FormControl>
-                    <Typography level='title-md' fontWeight='bold'>
-                        {t("dialogues")}
-                    </Typography>
-                    <DialoguesSettings />
-
-                    <Typography level='title-md' fontWeight='bold'>
-                        {t("sound")}
-                    </Typography>
-                    <SoundSettings />
-                    <Typography level='title-md' fontWeight='bold'>
-                        {t("display")}
-                    </Typography>
-                    <FullScreenSettings />
-                    <ThemeSettings />
-                </DialogContent>
-                <Divider sx={{ mt: "auto" }} />
-                <ReturnMainMenuButton />
-            </Sheet>
-        </Drawer>
-    );
-}

package/template-nqtr-react-vite-muijoy-tauri/src/screens/modals/SaveLoadAlert.tsx

@@ -1,106 +0,0 @@
-import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
-import { Input, Typography } from "@mui/joy";
-import { useQueryClient } from "@tanstack/react-query";
-import { useSnackbar } from "notistack";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import ModalConfirmation from "../../components/ModalConfirmation";
-import useGameProps from "../../hooks/useGameProps";
-import useMyNavigate from "../../hooks/useMyNavigate";
-import { LAST_SAVE_USE_QUEY_KEY } from "../../hooks/useQueryLastSave";
-import { SAVES_USE_QUEY_KEY } from "../../hooks/useQuerySaves";
-import useGameSaveScreenStore from "../../stores/useGameSaveScreenStore";
-import { deleteSaveFromIndexDB, loadSave, saveGameToIndexDB } from "../../utils/save-utility";
-
-export default function SaveLoadAlert() {
-    const navigate = useMyNavigate();
-    const alertData = useGameSaveScreenStore((state) => state.alert);
-    const close = useGameSaveScreenStore((state) => state.closeAlert);
-    const { t } = useTranslation(["ui"]);
-    const { enqueueSnackbar } = useSnackbar();
-    const queryClient = useQueryClient();
-    const gameProps = useGameProps();
-    const [tempSaveName, setTempSaveName] = useState<string>("");
-    const setOpenSaveScreen = useGameSaveScreenStore((state) => state.setOpen);
-
-    useEffect(() => {
-        if (alertData.open && (alertData.type == "save" || alertData.type == "overwrite_save")) {
-            setTempSaveName(alertData.deafultName || "");
-        }
-    }, [alertData]);
-
-    return (
-        <ModalConfirmation
-            open={alertData.open}
-            setOpen={close}
-            color='primary'
-            head={
-                <Typography level='h4' startDecorator={<CloudDownloadIcon />}>
-                    {alertData.type == "load" && t("load")}
-                    {alertData.type == "delete" && t("delete")}
-                    {(alertData.type == "save" || alertData.type == "overwrite_save") && t("save")}
-                </Typography>
-            }
-            onConfirm={() => {
-                if (!alertData.open) {
-                    return false;
-                }
-                switch (alertData.type) {
-                    case "load":
-                        return loadSave(alertData.data, navigate)
-                            .then(() => {
-                                gameProps.invalidateInterfaceData();
-                                enqueueSnackbar(t("success_load"), { variant: "success" });
-                                setOpenSaveScreen(false);
-                                return true;
-                            })
-                            .catch((e) => {
-                                enqueueSnackbar(t("fail_load"), { variant: "error" });
-                                console.error(e);
-                                return false;
-                            });
-                    case "delete":
-                        return deleteSaveFromIndexDB(alertData.data)
-                            .then(() => {
-                                queryClient.setQueryData([SAVES_USE_QUEY_KEY, alertData.data], null);
-                                queryClient.invalidateQueries({ queryKey: [LAST_SAVE_USE_QUEY_KEY] });
-                                enqueueSnackbar(t("success_delete"), { variant: "success" });
-                                return true;
-                            })
-                            .catch((e) => {
-                                enqueueSnackbar(t("fail_delete"), { variant: "error" });
-                                console.error(e);
-                                return false;
-                            });
-                    case "save":
-                    case "overwrite_save":
-                        return saveGameToIndexDB({ id: alertData.data, name: tempSaveName })
-                            .then((save) => {
-                                queryClient.setQueryData([SAVES_USE_QUEY_KEY, save.id], save);
-                                queryClient.setQueryData([LAST_SAVE_USE_QUEY_KEY], save);
-                                enqueueSnackbar(t("success_save"), { variant: "success" });
-                                return true;
-                            })
-                            .catch((e) => {
-                                enqueueSnackbar(t("fail_save"), { variant: "error" });
-                                console.error(e);
-                                return false;
-                            });
-                }
-            }}
-        >
-            <Typography>
-                {alertData.type == "load" &&
-                    t("you_sure_to_load_save", {
-                        name: alertData.data.name || `${t("save_slot")} ${alertData.data.id}`,
-                    })}
-                {alertData.type == "delete" &&
-                    t("you_sure_to_delete_save", { name: `${t("save_slot")} ${alertData.data}` })}
-                {(alertData.type == "save" || alertData.type == "overwrite_save") && t("save_as")}
-            </Typography>
-            {(alertData.type == "save" || alertData.type == "overwrite_save") && (
-                <Input value={tempSaveName} onChange={(e) => setTempSaveName(e.target.value)} />
-            )}
-        </ModalConfirmation>
-    );
-}

package/template-nqtr-react-vite-muijoy-tauri/src/screens/modals/TextInput.tsx

@@ -1,74 +0,0 @@
-import { narration } from "@drincs/pixi-vn";
-import { Button, Input } from "@mui/joy";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Markdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-import { useShallow } from "zustand/react/shallow";
-import ModalDialogCustom from "../../components/ModalDialog";
-import useGameProps from "../../hooks/useGameProps";
-import { useQueryDialogue, useQueryInputValue } from "../../hooks/useQueryInterface";
-import useTypewriterStore from "../../stores/useTypewriterStore";
-
-export default function TextInput() {
-    const { data: { animatedText: text } = {} } = useQueryDialogue();
-    const { data: { isRequired, type, currentValue } = { currentValue: undefined, isRequired: false } } =
-        useQueryInputValue<string | number>();
-    const open = useTypewriterStore(useShallow((state) => !state.inProgress && isRequired));
-    const [tempValue, setTempValue] = useState<string | number>();
-    const gameProps = useGameProps();
-    const { t } = useTranslation(["ui"]);
-    useEffect(() => {
-        setTempValue(currentValue);
-    }, [open, currentValue]);
-
-    return (
-        <ModalDialogCustom
-            open={open}
-            setOpen={() => {}}
-            canBeIgnored={false}
-            color='primary'
-            actions={
-                <>
-                    <Button
-                        key={"exit"}
-                        color='primary'
-                        variant='outlined'
-                        onClick={() => {
-                            narration.inputValue = tempValue || currentValue;
-                            setTempValue(undefined);
-                            gameProps.invalidateInterfaceData();
-                        }}
-                        disabled={tempValue === undefined || tempValue === ""}
-                    >
-                        {t("confirm")}
-                    </Button>
-                    <Input
-                        value={tempValue || ""}
-                        type={type}
-                        onChange={(e) => {
-                            let value: any = e.target.value;
-                            if (e.target.type === "number") {
-                                value = e.target.valueAsNumber;
-                            }
-                            setTempValue(value);
-                        }}
-                    />
-                </>
-            }
-        >
-            {text && (
-                <Markdown
-                    remarkPlugins={[remarkGfm]}
-                    rehypePlugins={[rehypeRaw]}
-                    components={{
-                        p: (props) => <span {...props} />,
-                    }}
-                >
-                    {text}
-                </Markdown>
-            )}
-        </ModalDialogCustom>
-    );
-}

package/template-nqtr-react-vite-muijoy-tauri/src/screens/nqtr/MapScreen.tsx

@@ -1,126 +0,0 @@
-import { canvas } from "@drincs/pixi-vn";
-import CloseIcon from "@mui/icons-material/Close";
-import KeyboardDoubleArrowDownIcon from "@mui/icons-material/KeyboardDoubleArrowDown";
-import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
-import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
-import KeyboardDoubleArrowUpIcon from "@mui/icons-material/KeyboardDoubleArrowUp";
-import { IconButton } from "@mui/joy";
-import { useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
-import RoundIconButton from "../../components/RoundIconButton";
-import { CANVAS_UI_LAYER_NAME, NAVIGATION_ROUTE } from "../../constans";
-import useMyNavigate from "../../hooks/useMyNavigate";
-import { INTERFACE_DATA_USE_QUEY_KEY } from "../../hooks/useQueryInterface";
-import { CURRENT_MAP_USE_QUEY_KEY, useQueryCurrentMapId, useQueryMap } from "../../hooks/useQueryNQTR";
-import useInterfaceStore from "../../stores/useInterfaceStore";
-
-export default function MapScreen() {
-    const { data: currentMapId } = useQueryCurrentMapId();
-    const { data } = useQueryMap(currentMapId);
-    const { background, map, locations } = data || {};
-    const queryClient = useQueryClient();
-    const navigate = useMyNavigate();
-    const editHideInterface = useInterfaceStore((state) => state.setHidden);
-
-    useEffect(() => {
-        editHideInterface(false);
-        let layer = canvas.getLayer(CANVAS_UI_LAYER_NAME);
-        if (layer) {
-            if (background) layer.addChild(background);
-
-            locations?.forEach((location) => layer.addChild(location));
-        }
-
-        return () => {
-            canvas.getLayer(CANVAS_UI_LAYER_NAME)?.removeChildren();
-        };
-    });
-
-    return (
-        <>
-            {map?.neighboringMaps.north && (
-                <RoundIconButton
-                    variant='soft'
-                    sx={{
-                        position: "absolute",
-                        top: "0.1rem",
-                        left: "50%",
-                    }}
-                    onClick={() =>
-                        queryClient.setQueryData(
-                            [INTERFACE_DATA_USE_QUEY_KEY, CURRENT_MAP_USE_QUEY_KEY],
-                            map.neighboringMaps.north!,
-                        )
-                    }
-                >
-                    <KeyboardDoubleArrowUpIcon />
-                </RoundIconButton>
-            )}
-            {map?.neighboringMaps.west && (
-                <RoundIconButton
-                    variant='soft'
-                    sx={{
-                        position: "absolute",
-                        top: "50%",
-                        left: "0.1rem",
-                    }}
-                    onClick={() =>
-                        queryClient.setQueryData(
-                            [INTERFACE_DATA_USE_QUEY_KEY, CURRENT_MAP_USE_QUEY_KEY],
-                            map.neighboringMaps.west!,
-                        )
-                    }
-                >
-                    <KeyboardDoubleArrowLeftIcon />
-                </RoundIconButton>
-            )}
-            {map?.neighboringMaps.south && (
-                <RoundIconButton
-                    variant='soft'
-                    sx={{
-                        position: "absolute",
-                        bottom: "0.1rem",
-                        left: "50%",
-                    }}
-                    onClick={() =>
-                        queryClient.setQueryData(
-                            [INTERFACE_DATA_USE_QUEY_KEY, CURRENT_MAP_USE_QUEY_KEY],
-                            map.neighboringMaps.south!,
-                        )
-                    }
-                >
-                    <KeyboardDoubleArrowDownIcon />
-                </RoundIconButton>
-            )}
-            {map?.neighboringMaps.east && (
-                <RoundIconButton
-                    variant='soft'
-                    sx={{
-                        position: "absolute",
-                        top: "50%",
-                        right: "0.1rem",
-                    }}
-                    onClick={() =>
-                        queryClient.setQueryData(
-                            [INTERFACE_DATA_USE_QUEY_KEY, CURRENT_MAP_USE_QUEY_KEY],
-                            map.neighboringMaps.east!,
-                        )
-                    }
-                >
-                    <KeyboardDoubleArrowRightIcon />
-                </RoundIconButton>
-            )}
-            <IconButton
-                color='danger'
-                sx={{
-                    position: "absolute",
-                    top: "0.1rem",
-                    right: "0.1rem",
-                }}
-                onClick={() => navigate(NAVIGATION_ROUTE)}
-            >
-                <CloseIcon />
-            </IconButton>
-        </>
-    );
-}