create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/DownloadFileToTranslateSettingButton.tsx

@@ -1,32 +0,0 @@
-import TranslateIcon from "@mui/icons-material/Translate";
-import { Typography } from "@mui/joy";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import SettingButton from "../../components/SettingButton";
-import { downloadResourceToTranslate } from "../../i18n";
-
-export default function DownloadFileToTranslateSettingButton() {
-    const { t } = useTranslation(["ui"]);
-    const [loading, setLoading] = useState(false);
-
-    // Only show this button in development mode
-    if (import.meta.env.PROD) {
-        return null;
-    }
-
-    return (
-        <SettingButton
-            key={"download_locale"}
-            onClick={() => {
-                setLoading(true);
-                downloadResourceToTranslate()
-                    .then(() => setLoading(false))
-                    .catch(() => setLoading(false));
-            }}
-            disabled={loading}
-        >
-            <TranslateIcon />
-            <Typography level='title-md'>{t("download_locale")}</Typography>
-        </SettingButton>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/FullScreenSettings.tsx

@@ -1,55 +0,0 @@
-import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
-import { Box, Button, FormHelperText, FormLabel } from "@mui/joy";
-import { useQueryClient } from "@tanstack/react-query";
-import * as app from "@tauri-apps/api";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import useQueryIsFullModeScreen, { IS_FULL_SCREEN_MODE_USE_QUEY_KEY } from "../../hooks/useQueryIsFullModeScreen";
-declare global {
-    interface Window {
-        __TAURI__: typeof app;
-    }
-}
-
-export default function FullScreenSettings() {
-    const { data: isFullScreenMode } = useQueryIsFullModeScreen();
-    const [loading, setLoading] = useState(false);
-    const queryClient = useQueryClient();
-    const { t } = useTranslation(["ui"]);
-
-    if (document.fullscreenEnabled === false) {
-        return null;
-    }
-
-    return (
-        <>
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{t("fullscreen")}</FormLabel>
-                <FormHelperText sx={{ typography: "body-sm" }}>{t("fullscreen_description")}</FormHelperText>
-            </Box>
-            <Button
-                loading={loading}
-                onClick={() => {
-                    setLoading(true);
-                    let promise: Promise<void>;
-                    if (window.__TAURI__) {
-                        promise = getCurrentWindow().setFullscreen(!isFullScreenMode);
-                    } else if (isFullScreenMode) {
-                        promise = document.exitFullscreen();
-                    } else {
-                        promise = document.documentElement.requestFullscreen();
-                    }
-                    promise.finally(() => {
-                        setLoading(false);
-                        queryClient.invalidateQueries({ queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY] });
-                    });
-                }}
-                startDecorator={isFullScreenMode ? <FullscreenExitIcon /> : <FullscreenIcon />}
-            >
-                {isFullScreenMode ? t("exit_fullscreen") : t("enter_fullscreen")}
-            </Button>
-        </>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/HideInterfaceSettingToggle.tsx

@@ -1,34 +0,0 @@
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import { Typography } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import SettingButton from "../../components/SettingButton";
-import useInterfaceStore from "../../stores/useInterfaceStore";
-
-export default function HideInterfaceSettingToggle() {
-    const { t } = useTranslation(["ui"]);
-    const hidden = useInterfaceStore((state) => state.hidden);
-    const editHidden = useInterfaceStore((state) => state.editHidden);
-
-    const location = useLocation();
-    if (location.pathname === "/") {
-        return null;
-    }
-
-    return (
-        <SettingButton checked={hidden} onClick={editHidden}>
-            <VisibilityOffIcon />
-            <Typography level='title-md'>{t("hide_ui")}</Typography>
-            <Typography
-                sx={{
-                    position: "absolute",
-                    top: 10,
-                    right: 10,
-                }}
-                level='body-md'
-            >
-                Alt+V
-            </Typography>
-        </SettingButton>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/OpenHistorySettingButton.tsx

@@ -1,40 +0,0 @@
-import HistoryIcon from "@mui/icons-material/History";
-import { Typography } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import SettingButton from "../../components/SettingButton";
-import useHistoryScreenStore from "../../stores/useHistoryScreenStore";
-import useSettingsScreenStore from "../../stores/useSettingsScreenStore";
-
-export default function OpenHistorySettingButton() {
-    const { t } = useTranslation(["ui"]);
-    const openSettings = useSettingsScreenStore((state) => state.setOpen);
-    const editOpenHistory = useHistoryScreenStore((state) => state.editOpen);
-
-    const location = useLocation();
-    if (location.pathname === "/") {
-        return null;
-    }
-
-    return (
-        <SettingButton
-            onClick={() => {
-                editOpenHistory();
-                openSettings(false);
-            }}
-        >
-            <HistoryIcon />
-            <Typography level='title-md'>{t("history")}</Typography>
-            <Typography
-                sx={{
-                    position: "absolute",
-                    top: 10,
-                    right: 10,
-                }}
-                level='body-md'
-            >
-                Alt+H
-            </Typography>
-        </SettingButton>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/SaveLoadSettingButtons.tsx

@@ -1,114 +0,0 @@
-import DownloadIcon from "@mui/icons-material/Download";
-import FileUploadIcon from "@mui/icons-material/FileUpload";
-import FolderOpenIcon from "@mui/icons-material/FolderOpen";
-import SaveIcon from "@mui/icons-material/Save";
-import SaveAsIcon from "@mui/icons-material/SaveAs";
-import { Typography } from "@mui/joy";
-import { useQueryClient } from "@tanstack/react-query";
-import { useSnackbar } from "notistack";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import SettingButton from "../../components/SettingButton";
-import useGameProps from "../../hooks/useGameProps";
-import useMyNavigate from "../../hooks/useMyNavigate";
-import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "../../hooks/useQueryLastSave";
-import { SAVES_USE_QUEY_KEY } from "../../hooks/useQuerySaves";
-import useGameSaveScreenStore from "../../stores/useGameSaveScreenStore";
-import useSettingsScreenStore from "../../stores/useSettingsScreenStore";
-import { downloadGameSave, loadGameSaveFromFile, saveGameToIndexDB } from "../../utils/save-utility";
-
-export default function SaveLoadSettingButtons() {
-    const navigate = useMyNavigate();
-    const { t } = useTranslation(["ui"]);
-    const openLoadAlert = useGameSaveScreenStore((state) => state.editLoadAlert);
-    const editOpenSaveScreen = useGameSaveScreenStore((state) => state.editOpen);
-    const setOpenSettings = useSettingsScreenStore((state) => state.setOpen);
-    const queryClient = useQueryClient();
-    const gameProps = useGameProps();
-    const { enqueueSnackbar } = useSnackbar();
-    const { data: lastSave = null } = useQueryLastSave();
-    const location = useLocation();
-
-    return [
-        location.pathname === "/" ? null : (
-            <SettingButton
-                key={"quick_save_button"}
-                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" });
-                        });
-                }}
-                disabled={location.pathname === "/"}
-            >
-                <SaveAsIcon />
-                <Typography level='title-md'>{t("quick_save")}</Typography>
-                <Typography
-                    sx={{
-                        position: "absolute",
-                        top: 10,
-                        right: 10,
-                    }}
-                    level='body-md'
-                >
-                    Alt+S
-                </Typography>
-            </SettingButton>
-        ),
-        <SettingButton
-            key={"load_last_save_button"}
-            onClick={() => {
-                lastSave && openLoadAlert(lastSave);
-                setOpenSettings(false);
-            }}
-            disabled={!lastSave}
-        >
-            <FileUploadIcon />
-            <Typography level='title-md'>{t("load_last_save")}</Typography>
-            <Typography
-                sx={{
-                    position: "absolute",
-                    top: 10,
-                    right: 10,
-                }}
-                level='body-md'
-            >
-                Alt+L
-            </Typography>
-        </SettingButton>,
-        <SettingButton
-            key={"save_load_button"}
-            onClick={() => {
-                editOpenSaveScreen();
-                setOpenSettings(false);
-            }}
-        >
-            <SaveIcon />
-            <Typography level='title-md'>{t(`${t("save")}/${t("load")}`)}</Typography>
-        </SettingButton>,
-        location.pathname === "/" ? null : (
-            <SettingButton key={"save_to_file"} onClick={() => downloadGameSave()} disabled={location.pathname === "/"}>
-                <DownloadIcon />
-                <Typography level='title-md'>{t("save_to_file")}</Typography>
-            </SettingButton>
-        ),
-        <SettingButton
-            key={"load_button"}
-            onClick={() =>
-                loadGameSaveFromFile(navigate, () => {
-                    gameProps.invalidateInterfaceData();
-                    enqueueSnackbar(t("success_load"), { variant: "success" });
-                    setOpenSettings(false);
-                })
-            }
-        >
-            <FolderOpenIcon />
-            <Typography level='title-md'>{t("load_from_file")}</Typography>
-        </SettingButton>,
-    ];
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/SkipSettingToggle.tsx

@@ -1,34 +0,0 @@
-import FastForwardIcon from "@mui/icons-material/FastForward";
-import { Typography } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import SettingButton from "../../components/SettingButton";
-import useSkipStore from "../../stores/useSkipStore";
-
-export default function SkipSettingToggle() {
-    const { t } = useTranslation(["ui"]);
-    const enabled = useSkipStore((state) => state.enabled);
-    const edit = useSkipStore((state) => state.editEnabled);
-
-    const location = useLocation();
-    if (location.pathname === "/") {
-        return null;
-    }
-
-    return (
-        <SettingButton checked={enabled} onClick={edit}>
-            <FastForwardIcon />
-            <Typography level='title-md'>{t("skip")}</Typography>
-            <Typography
-                sx={{
-                    position: "absolute",
-                    top: 10,
-                    right: 10,
-                }}
-                level='body-md'
-            >
-                Press Space
-            </Typography>
-        </SettingButton>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/SoundSettings.tsx

@@ -1,51 +0,0 @@
-import { sound } from "@drincs/pixi-vn";
-import VolumeOffIcon from "@mui/icons-material/VolumeOff";
-import VolumeUpIcon from "@mui/icons-material/VolumeUp";
-import { Box, FormHelperText, FormLabel, IconButton, Slider, Stack } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import SoundChannelControl from "../../components/SoundChannelControl";
-import useMasterSoundStore from "../../stores/useMasterSoundStore";
-
-export default function SoundSettings() {
-    const { t } = useTranslation(["ui"]);
-
-    const masterVolume = useMasterSoundStore((s) => s.volume);
-    const setMasterVolume = useMasterSoundStore((s) => s.setVolume);
-    const masterMuted = useMasterSoundStore((s) => s.muted);
-    const toggleMasterMuted = useMasterSoundStore((s) => s.toggleMuted);
-
-    return (
-        <Stack spacing={1} sx={{ p: 1 }}>
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{t("master_volume") || "Master"}</FormLabel>
-                <FormHelperText sx={{ typography: "body-sm" }}>{t("master_volume_description")}</FormHelperText>
-            </Box>
-            <Stack direction='row' alignItems='center' spacing={1}>
-                <IconButton onClick={() => toggleMasterMuted()}>
-                    {masterMuted ? <VolumeOffIcon /> : <VolumeUpIcon />}
-                </IconButton>
-                <Slider
-                    min={0}
-                    max={100}
-                    value={masterVolume}
-                    onChange={(_, v) => setMasterVolume(Array.isArray(v) ? v[0] : (v as number))}
-                    sx={{ flex: 1 }}
-                    step={1}
-                />
-                <Box component='span' sx={{ minWidth: 36, textAlign: "right" }}>
-                    {masterVolume}%
-                </Box>
-            </Stack>
-
-            {sound.channels.map((c) => (
-                <SoundChannelControl
-                    key={c.alias}
-                    label={t(`${c.alias}_volume`)}
-                    helper={t(`${c.alias}_volume_description`)}
-                    alias={c.alias}
-                    disabled={masterMuted}
-                />
-            ))}
-        </Stack>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/settings/ThemeSettings.tsx

@@ -1,112 +0,0 @@
-import AutoModeIcon from "@mui/icons-material/AutoMode";
-import DarkModeIcon from "@mui/icons-material/DarkMode";
-import LightModeIcon from "@mui/icons-material/LightMode";
-import ModeNightIcon from "@mui/icons-material/ModeNight";
-import WbIncandescentIcon from "@mui/icons-material/WbIncandescent";
-import {
-    Box,
-    Button,
-    FormHelperText,
-    FormLabel,
-    IconButton,
-    ToggleButtonGroup,
-    Tooltip,
-    useColorScheme,
-} from "@mui/joy";
-import { useColorScheme as useColorSchemeMaterial } from "@mui/material";
-import { Hue, useColor } from "react-color-palette";
-import "react-color-palette/css";
-import { useTranslation } from "react-i18next";
-import useDebouncedEffect from "../../hooks/useDebouncedEffect";
-import { useEditColorProvider } from "../../providers/ThemeProvider";
-
-export default function ThemeSettings() {
-    const { mode, setMode } = useColorScheme();
-    const { setMode: setModeMaterial } = useColorSchemeMaterial();
-    const { primaryColor, setPrimaryColor, setSolidColor, solidColor } = useEditColorProvider();
-    const [tempColor, setTempColor] = useColor(primaryColor);
-    const { t } = useTranslation(["ui"]);
-
-    useDebouncedEffect(() => setPrimaryColor(tempColor.hex), { delay: 50 }, [tempColor]);
-
-    return (
-        <>
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{t("theme_mode")}</FormLabel>
-                <FormHelperText sx={{ typography: "body-sm" }}>{t("theme_mode_description")}</FormHelperText>
-            </Box>
-            <ToggleButtonGroup
-                value={mode}
-                onChange={(_, newValue) => {
-                    if (newValue) {
-                        setMode(newValue);
-                        setModeMaterial(newValue);
-                    }
-                }}
-            >
-                <Tooltip title='Light Mode'>
-                    <span>
-                        <IconButton value='light'>
-                            <LightModeIcon />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-                <Tooltip title='System Mode'>
-                    <span>
-                        <IconButton value='system'>
-                            <AutoModeIcon />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-                <Tooltip title='Dark Mode'>
-                    <span>
-                        <IconButton value='dark'>
-                            <DarkModeIcon />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-            </ToggleButtonGroup>
-
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{t("primary_color")}</FormLabel>
-                <FormHelperText sx={{ typography: "body-sm" }}>{t("primary_color_description")}</FormHelperText>
-            </Box>
-            <Box
-                sx={{
-                    paddingX: 3,
-                }}
-            >
-                <Hue color={tempColor} onChange={(color) => setTempColor(color)} />
-            </Box>
-
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{t("solid_color")}</FormLabel>
-                <FormHelperText sx={{ typography: "body-sm" }}>{t("solid_color_description")}</FormHelperText>
-            </Box>
-            <ToggleButtonGroup
-                value={solidColor}
-                onChange={(_, newValue) => {
-                    if (newValue) setSolidColor(newValue);
-                }}
-            >
-                <Tooltip title='White'>
-                    <span>
-                        <IconButton value='white'>
-                            <WbIncandescentIcon />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-                <Tooltip title='Black'>
-                    <span>
-                        <IconButton value='black'>
-                            <ModeNightIcon />
-                        </IconButton>
-                    </span>
-                </Tooltip>
-            </ToggleButtonGroup>
-            <ToggleButtonGroup color='primary' variant='solid'>
-                <Button>{t("example")}</Button>
-            </ToggleButtonGroup>
-        </>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/stores/createChannelSoundStore.ts

@@ -1,47 +0,0 @@
-import { sound } from "@drincs/pixi-vn";
-import { create } from "zustand";
-
-export type ChannelSoundStore = {
-    volume: number;
-    muted: boolean;
-    setVolume: (v: number) => void;
-    setMuted: (m: boolean) => void;
-    toggleMuted: () => void;
-};
-
-export default function createChannelSoundStore(alias: string) {
-    const useChannelStore = create<ChannelSoundStore>((set, get) => ({
-        volume: localStorage.getItem(`${alias}_volume`)
-            ? parseInt(localStorage.getItem(`${alias}_volume`)!)
-            : sound.findChannel(alias).volume * 100,
-        muted: localStorage.getItem(`${alias}_muted`)
-            ? localStorage.getItem(`${alias}_muted`) === "true"
-            : sound.findChannel(alias).muted,
-
-        setVolume: (volume: number) => {
-            if (get().muted) {
-                get().setMuted(false);
-            }
-            sound.findChannel(alias).volume = volume / 100;
-            localStorage.setItem(`${alias}_volume`, volume.toString());
-            set({ volume: Math.round(volume) });
-
-            if (Math.round(volume) === 0 && !get().muted) {
-                get().setMuted(true);
-            }
-        },
-
-        setMuted: (muted: boolean) => {
-            sound.findChannel(alias).muted = muted;
-            localStorage.setItem(`${alias}_muted`, muted.toString());
-            set({ muted: muted });
-        },
-
-        toggleMuted: () => {
-            const curr = sound.findChannel(alias).toggleMuteAll();
-            get().setMuted(curr);
-        },
-    }));
-
-    return useChannelStore;
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/stores/useAutoInfoStore.ts

@@ -1,33 +0,0 @@
-import { create } from "zustand";
-
-type AutoInfoStoreType = {
-    /**
-     * Whether auto forward is enabled
-     */
-    enabled: boolean;
-    /**
-     * Time in seconds to wait before auto forwarding
-     */
-    time: number;
-    /**
-     * Enable or disable auto forward
-     */
-    editEnabled: () => void;
-    /**
-     * Set the time to wait before auto forwarding
-     */
-    setTime: (value: number) => void;
-};
-
-const useAutoInfoStore = create<AutoInfoStoreType>((set) => ({
-    enabled: false,
-    time: localStorage.getItem("auto_forward_second") ? parseInt(localStorage.getItem("auto_forward_second")!) : 1,
-    editEnabled: () => set((state) => ({ enabled: !state.enabled })),
-    setTime: (value: number) => {
-        if (value) {
-            localStorage.setItem("auto_forward_second", value.toString());
-            set({ time: value });
-        }
-    },
-}));
-export default useAutoInfoStore;

package/template-nqtr-react-vite-muijoy-ink-tauri/src/stores/useDialogueCardStore.ts

@@ -1,36 +0,0 @@
-import { create } from "zustand";
-
-type DialogueCardStoreType = {
-    /**
-     * Height of the dialogue card
-     */
-    height: number;
-    /**
-     * Set the height of the dialogue card
-     */
-    setHeight: (value: number) => void;
-    /**
-     * Width of the image in the dialogue card
-     */
-    imageWidth: number;
-    /**
-     * Set the width of the image in the dialogue card
-     */
-    setImageWidth: (value: number) => void;
-};
-
-const useDialogueCardStore = create<DialogueCardStoreType>((set) => ({
-    height: localStorage.getItem("dialogue_card_height") ? parseInt(localStorage.getItem("dialogue_card_height")!) : 30,
-    setHeight: (value: number) => {
-        localStorage.setItem("dialogue_card_height", value.toString());
-        set({ height: value });
-    },
-    imageWidth: localStorage.getItem("dialogue_card_image_width")
-        ? parseInt(localStorage.getItem("dialogue_card_image_width")!)
-        : 16,
-    setImageWidth: (value: number) => {
-        localStorage.setItem("dialogue_card_image_width", value.toString());
-        set({ imageWidth: value });
-    },
-}));
-export default useDialogueCardStore;