create-pixi-vn 2.0.3 → 2.0.4

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

@@ -1,274 +0,0 @@
-import DeleteIcon from '@mui/icons-material/Delete';
-import DownloadIcon from '@mui/icons-material/Download';
-import FolderOpenIcon from '@mui/icons-material/FolderOpen';
-import SaveAsIcon from '@mui/icons-material/SaveAs';
-import UnarchiveIcon from '@mui/icons-material/Unarchive';
-import { AspectRatio, Grid, IconButton, Skeleton, Stack, Theme, Typography, useTheme } from "@mui/joy";
-import { Pagination, Tooltip, useMediaQuery } from '@mui/material';
-import { useQueryClient } from '@tanstack/react-query';
-import { useSnackbar } from 'notistack';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-import { useRecoilState, useSetRecoilState } from 'recoil';
-import { openGameSaveScreenState } from '../atoms/openGameSaveScreenState';
-import { saveLoadAlertState } from '../atoms/saveLoadAlertState';
-import { saveScreenPageState } from '../atoms/saveScreenPageState';
-import ModalDialogCustom from '../components/ModalDialog';
-import TypographyShadow from "../components/TypographyShadow";
-import GameSaveData from '../models/GameSaveData';
-import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import useQuerySaves from '../use_query/useQuerySaves';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { downloadGameSave, loadGameSaveFromFile } from '../utilities/save-utility';
-
-export default function GameSaveScreen() {
-    const [open, setOpen] = useRecoilState(openGameSaveScreenState);
-    const { t } = useTranslation(["ui"]);
-    const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("lg"));
-    const setOpenLoadAlert = useSetRecoilState(saveLoadAlertState);
-    const [page, setPage] = useRecoilState(saveScreenPageState);
-    const navigate = useMyNavigate();
-    const { enqueueSnackbar } = useSnackbar();
-    const queryClient = useQueryClient()
-    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")}>
-                    <IconButton
-                        size="lg"
-                        onClick={() => loadGameSaveFromFile(navigate, () => {
-                            queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] })
-                            enqueueSnackbar(t("success_load"), { variant: 'success' })
-                            setOpen(false)
-                        })}
-                    >
-                        <FolderOpenIcon fontSize="large" />
-                    </IconButton>
-                </Tooltip>
-                <Tooltip title={t("save_to_file")}>
-                    <IconButton
-                        size="lg"
-                        onClick={() => { downloadGameSave() }}
-                        disabled={location.pathname == "/"}
-                    >
-                        <DownloadIcon fontSize="large" />
-                    </IconButton>
-                </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={() => {
-                                setOpenLoadAlert({ open: true, data: id, type: "save", deafultName: "" });
-                            }}
-                            onOverwriteSave={(data) => {
-                                setOpenLoadAlert({ open: true, data: id, type: "overwrite_save", deafultName: data.name });
-                            }}
-                            onLoad={(data) => {
-                                setOpenLoadAlert({ open: true, data: { ...data, id: id }, type: "load" });
-                            }}
-                            onDelete={() => {
-                                setOpenLoadAlert({ open: true, data: id, type: "delete" });
-                            }}
-                        />
-                    </Grid>
-                })}
-            </Grid>
-            <Pagination
-                count={Infinity}
-                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>
-    );
-}
-
-function GameSaveSlot({ saveId, onDelete, onLoad, onOverwriteSave, onSave }: {
-    saveId: number,
-    onDelete: () => Promise<void> | void,
-    onSave: () => Promise<void> | void,
-    onOverwriteSave: (data: GameSaveData) => Promise<void> | void,
-    onLoad: (saveData: GameSaveData) => Promise<void> | void,
-}) {
-    const { t } = useTranslation(["ui"]);
-    const {
-        isLoading,
-        data: saveData,
-        isError,
-    } = useQuerySaves({ id: saveId })
-    let location = useLocation();
-
-    if (isLoading) {
-        return (
-            <AspectRatio
-                sx={{
-                    borderRadius: 10,
-                    margin: { xs: 1, sm: 2, md: 1, lg: 2 },
-                }}
-            >
-                <Skeleton />
-            </AspectRatio>
-        );
-    }
-
-    if (!saveData || isError) {
-        return (
-            <AspectRatio
-                sx={{
-                    borderRadius: 10,
-                    margin: { xs: 1, sm: 2, md: 1, lg: 2 },
-                }}
-            >
-                <IconButton
-                    variant="soft"
-                    sx={{
-                        height: "100%",
-                        width: "100%",
-                    }}
-                    onClick={onSave}
-                    disabled={location.pathname == "/"}
-                >
-                    <SaveAsIcon sx={{ fontSize: '3rem', opacity: 0.2 }} />
-                </IconButton>
-            </AspectRatio>
-        );
-    }
-
-    return (
-        <AspectRatio
-            objectFit="contain"
-            sx={{
-                borderRadius: 10,
-                margin: { xs: 1, sm: 2, md: 1, lg: 2 },
-            }}
-        >
-            <img
-                src={saveData.image}
-                style={{
-                    backgroundColor: "#303030",
-                    pointerEvents: "none",
-                    userSelect: "none",
-                }}
-            />
-            <Stack
-                position={"absolute"}
-                top={10}
-                left={10}
-                sx={{
-                    pointerEvents: "none",
-                    userSelect: "none",
-                }}
-            >
-                <TypographyShadow
-                    level="h2"
-                >
-                    {saveData.name}
-                </TypographyShadow>
-                <TypographyShadow>
-                    {saveData.date.toLocaleDateString()}
-                </TypographyShadow>
-                <TypographyShadow>
-                    {saveData.date.toLocaleTimeString()}
-                </TypographyShadow>
-                <TypographyShadow>
-                    {`${t("save_slot")} ${saveId + 1}`}
-                </TypographyShadow>
-            </Stack>
-            <Stack
-                direction={"row"}
-                position={"absolute"}
-                bottom={10}
-                right={10}
-            >
-                <IconButton
-                    onClick={() => {
-                        downloadGameSave(saveData)
-                    }}
-                >
-                    <DownloadIcon
-                        fontSize={"large"}
-                        sx={{
-                            color: useTheme().palette.neutral[300],
-                        }}
-                    />
-                </IconButton>
-                <IconButton
-                    onClick={() => onOverwriteSave(saveData)}
-                >
-                    <SaveAsIcon
-                        fontSize={"large"}
-                        sx={{
-                            color: useTheme().palette.neutral[300],
-                        }}
-                    />
-                </IconButton>
-                <IconButton
-                    onClick={() => {
-                        onLoad(saveData)
-                    }}
-                >
-                    <UnarchiveIcon
-                        fontSize={"large"}
-                        sx={{
-                            color: useTheme().palette.neutral[300],
-                        }}
-                    />
-                </IconButton>
-            </Stack>
-            <Stack
-                direction={"row"}
-                position={"absolute"}
-                top={10}
-                right={10}
-            >
-                <IconButton
-                    color="danger"
-                    size="md"
-                    onClick={onDelete}
-                >
-                    <DeleteIcon
-                        fontSize={"large"}
-                    />
-                </IconButton>
-            </Stack>
-        </AspectRatio>
-    );
-}

package/template-react-vite-muijoy-electron/src/screens/HistoryScreen.tsx

@@ -1,155 +0,0 @@
-import { CharacterBaseModel, getCharacterById, narration } from '@drincs/pixi-vn';
-import CheckIcon from '@mui/icons-material/Check';
-import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
-import { Box, Chip, Input, Stack, Theme, Typography } from "@mui/joy";
-import Avatar from '@mui/joy/Avatar';
-import { useMediaQuery } from '@mui/material';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Markdown from 'react-markdown';
-import { useRecoilState } from 'recoil';
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-import { openHistoryScreenState } from '../atoms/openHistoryScreenState';
-import ModalDialogCustom from '../components/ModalDialog';
-
-export default function HistoryScreen() {
-    const [open, setOpen] = useRecoilState(openHistoryScreenState);
-    const [searchString, setSearchString] = useState("")
-    const { t } = useTranslation(["ui"]);
-    const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("md"));
-    const { t: tNarration } = useTranslation(["narration"]);
-
-    useEffect(() => {
-        window.addEventListener('keydown', onkeydown);
-        return () => {
-            window.removeEventListener('keydown', onkeydown);
-        };
-    }, []);
-
-    function onkeydown(event: KeyboardEvent) {
-        if (event.code == 'KeyH' && event.shiftKey) {
-            setOpen((prev) => !prev)
-        }
-    }
-
-    return (
-        <ModalDialogCustom
-            open={open}
-            setOpen={setOpen}
-            layout={(smScreen ? "fullscreen" : "center")}
-            head={<Stack
-                sx={{
-                    width: "100%",
-                }}
-            >
-                <Stack sx={{ mb: 2 }}>
-                    <Typography level="h2">
-                        {t("history")}
-                    </Typography>
-                </Stack>
-                <Input
-                    placeholder={t("search")}
-                    value={searchString}
-                    onChange={(e) => setSearchString(e.target.value)}
-                    startDecorator={<SearchRoundedIcon />}
-                    aria-label={t("search")}
-                />
-            </Stack>}
-            minWidth="80%"
-            sx={{
-                minHeight: "50%",
-            }}
-        >
-            <Box
-                sx={{
-                    display: 'flex',
-                    flex: 1,
-                    minHeight: 0,
-                    px: 2,
-                    py: 3,
-                    overflowY: 'scroll',
-                    flexDirection: 'column-reverse',
-                }}
-            >
-                <Stack spacing={2} justifyContent="flex-end">
-                    {narration.narrativeHistory
-                        .map((step) => {
-                            let character = step.dialoge?.character ? getCharacterById(step.dialoge?.character) ?? new CharacterBaseModel(step.dialoge?.character, { name: tNarration(step.dialoge?.character) }) : undefined
-                            return {
-                                character: character?.name ? character.name + (character.surname ? " " + character.surname : "") : undefined,
-                                text: step.dialoge?.text || "",
-                                icon: character?.icon,
-                                choices: step.choices,
-                                inputValue: step.inputValue,
-                            }
-                        })
-                        .filter((data) => {
-                            if (!searchString) return true
-                            return data.character?.toLowerCase().includes(searchString.toLowerCase()) || data.text?.toLowerCase().includes(searchString.toLowerCase())
-                        })
-                        .map((data, index) => {
-                            return <React.Fragment key={"history" + index}>
-                                <Stack
-                                    direction="row"
-                                    spacing={1.5}
-                                >
-                                    <Avatar
-                                        size="sm"
-                                        src={data.icon}
-                                    />
-                                    <Box sx={{ flex: 1 }}>
-                                        {data.character && <Typography level="title-sm">{data.character}</Typography>}
-                                        <Markdown
-                                            remarkPlugins={[remarkGfm]}
-                                            rehypePlugins={[rehypeRaw]}
-                                            components={{
-                                                p: ({ children, key }) => {
-                                                    return <p key={key} style={{ margin: 0 }}>{children}</p>
-                                                },
-                                            }}
-                                        >
-                                            {data.text}
-                                        </Markdown>
-                                    </Box>
-                                </Stack>
-                                <Stack
-                                    direction="row"
-                                    spacing={0.5}
-                                >
-                                    <Box sx={{ flex: 1 }}>
-                                        {data.choices && data.choices.map((choice, index) => {
-                                            if (choice.hidden) {
-                                                return null
-                                            }
-                                            if (choice.isResponse) {
-                                                return <Chip
-                                                    key={"choices-success" + index}
-                                                    color="success"
-                                                    endDecorator={<CheckIcon />}
-                                                >
-                                                    {choice.text}
-                                                </Chip>
-                                            }
-                                            return <Chip
-                                                key={"choices" + index}
-                                                color="primary"
-                                            >
-                                                {choice.text}
-                                            </Chip>
-                                        })}
-                                        {data.inputValue && <Chip
-                                            key={"choices-success" + index}
-                                            color="neutral"
-                                        >
-                                            {data.inputValue.toString()}
-                                        </Chip>}
-                                    </Box>
-                                </Stack>
-                            </React.Fragment>
-                        })}
-                </Stack>
-            </Box>
-        </ModalDialogCustom>
-    );
-}

package/template-react-vite-muijoy-electron/src/screens/LoadingScreen.tsx

@@ -1,40 +0,0 @@
-import { Box, CircularProgress } from "@mui/joy";
-import { motion } from "motion/react";
-
-export default function LoadingScreen() {
-    return (
-        <Box
-            sx={{
-                height: '100vh',
-                width: '100vw',
-            }}
-        >
-            <Box
-                sx={{
-                    position: "absolute",
-                    right: 0,
-                    bottom: 0,
-                    margin: 2,
-                }}
-                component={motion.div}
-                variants={{
-                    open: {
-                        opacity: 1,
-                        scale: 1,
-                        pointerEvents: "auto",
-                    },
-                    closed: {
-                        opacity: 0,
-                        scale: 0,
-                        pointerEvents: "none",
-                    }
-                }}
-                initial={"closed"}
-                animate={"open"}
-                exit={"closed"}
-            >
-                <CircularProgress />
-            </Box>
-        </Box>
-    )
-}

package/template-react-vite-muijoy-electron/src/screens/MainMenu.tsx

@@ -1,98 +0,0 @@
-import { addImage, canvas, clearAllGameDatas, narration, pixivnTestStartLabel } from '@drincs/pixi-vn';
-import Stack from '@mui/joy/Stack';
-import { useQueryClient } from '@tanstack/react-query';
-import { motion } from "motion/react";
-import { useSnackbar } from 'notistack';
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSetRecoilState } from 'recoil';
-import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import { openGameSaveScreenState } from '../atoms/openGameSaveScreenState';
-import { openSettingsState } from '../atoms/openSettingsState';
-import MenuButton from '../components/MenuButton';
-import { INTERFACE_DATA_USE_QUEY_KEY } from '../use_query/useQueryInterface';
-import useQueryLastSave from '../use_query/useQueryLastSave';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { loadSave } from '../utilities/save-utility';
-
-export default function MainMenu() {
-    const navigate = useMyNavigate();
-    const setOpenSettings = useSetRecoilState(openSettingsState);
-    const setHideInterface = useSetRecoilState(hideInterfaceState);
-    const setGameSaveScreen = useSetRecoilState(openGameSaveScreenState);
-    const { enqueueSnackbar } = useSnackbar();
-    const { t } = useTranslation(["ui"]);
-    const { t: tNarration } = useTranslation(["narration"]);
-    const queryClient = useQueryClient()
-    const { data: lastSave = null, isLoading } = useQueryLastSave()
-
-    useEffect(() => {
-        setHideInterface(false)
-        clearAllGameDatas()
-        let bg = addImage("background_main_menu", "https://andreannaking.com/wp-content/uploads/2021/12/Download-Beautiful-Nature-Landscape-Hd-Wallpaper-Full-HD-Wallpapers.jpg")
-        bg.load()
-    })
-
-    return (
-        <Stack
-            direction="column"
-            justifyContent="center"
-            alignItems="flex-start"
-            spacing={{ xs: 1, sm: 2, lg: 3 }}
-            sx={{
-                height: "100%",
-                width: "100%",
-                paddingLeft: { xs: 1, sm: 2, md: 4, lg: 6, xl: 8 }
-            }}
-            component={motion.div}
-            initial="closed"
-            animate={"open"}
-            exit="closed"
-        >
-            <MenuButton
-                onClick={() => {
-                    if (!lastSave) {
-                        return
-                    }
-                    loadSave(lastSave, navigate)
-                        .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
-                        .catch((e) => {
-                            enqueueSnackbar(t("fail_load"), { variant: 'error' })
-                            console.error(e)
-                        })
-                }}
-                transitionDelay={0.1}
-                loading={isLoading}
-                disabled={!isLoading && !lastSave}
-            >
-                {t("continue")}
-            </MenuButton>
-            <MenuButton
-                onClick={() => {
-                    canvas.removeAll()
-                    navigate("/narration")
-                    narration.callLabel(pixivnTestStartLabel, {
-                        navigate: navigate,
-                        t: tNarration,
-                        notify: (message, variant) => enqueueSnackbar(message, { variant }),
-                    }).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
-                }}
-                transitionDelay={0.2}
-            >
-                {t("start")}
-            </MenuButton>
-            <MenuButton
-                onClick={() => setGameSaveScreen(true)}
-                transitionDelay={0.3}
-            >
-                {t("load")}
-            </MenuButton>
-            <MenuButton
-                onClick={() => setOpenSettings(true)}
-                transitionDelay={0.4}
-            >
-                {t("settings")}
-            </MenuButton>
-        </Stack>
-    );
-}