create-pixi-vn 2.0.2 → 2.0.4

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

@@ -1,220 +0,0 @@
-import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
-import Card from '@mui/joy/Card';
-import CardContent from '@mui/joy/CardContent';
-import Sheet from '@mui/joy/Sheet';
-import Typography from '@mui/joy/Typography';
-import { motion, Variants } from "motion/react";
-import { useRef } from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { dialogueCardHeightState } from '../atoms/dialogueCardHeightState';
-import { dialogueCardImageWidthState } from '../atoms/dialogueCardImageWidthState';
-import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import { typewriterDelayState } from '../atoms/typewriterDelayState';
-import { typewriterIsAnimatedState } from '../atoms/typewriterIsAnimatedState';
-import SliderResizer from '../components/SliderResizer';
-import Typewriter from '../components/Typewriter';
-import { useQueryDialogue } from '../use_query/useQueryInterface';
-import ChoiceMenu from './ChoiceMenu';
-
-export default function NarrationScreen() {
-    const [cardHeight, setCardHeight] = useRecoilState(dialogueCardHeightState)
-    const [cardImageWidth, setCardImageWidth] = useRecoilState(dialogueCardImageWidthState)
-    const typewriterDelay = useRecoilValue(typewriterDelayState)
-    const { data: { text, character } = {} } = useQueryDialogue()
-    const hidden = useRecoilValue(hideInterfaceState) || (text ? false : true)
-    const setTypewriterIsAnimated = useSetRecoilState(typewriterIsAnimatedState)
-    const cardVarians: Variants = {
-        open: {
-            opacity: 1,
-            y: 0,
-        },
-        closed: {
-            opacity: 0,
-            y: 200,
-            pointerEvents: "none",
-        }
-    }
-    const cardElementVarians: Variants = {
-        open: {
-            opacity: 1,
-            scale: 1,
-            pointerEvents: "auto",
-        },
-        closed: {
-            opacity: 0,
-            scale: 0,
-            pointerEvents: "none",
-        }
-    }
-    const cardImageVarians: Variants = {
-        open: {
-            opacity: 1,
-            x: 0,
-        },
-        closed: {
-            opacity: 0,
-            x: -100,
-        }
-    }
-    const paragraphRef = useRef<HTMLDivElement>(null);
-
-    return (
-        <Box
-            sx={{
-                height: '95%',
-                width: '100%',
-                position: "absolute",
-                left: 0,
-                right: 0,
-                top: 0,
-            }}
-        >
-            <ChoiceMenu
-                fullscreen={text ? false : true}
-            />
-            <SliderResizer
-                orientation="vertical"
-                max={100}
-                min={0}
-                value={cardHeight}
-                onChange={(_, value) => {
-                    if (typeof value === "number") {
-                        setCardHeight(value)
-                    }
-                }}
-                variants={cardVarians}
-                initial={"closed"}
-                animate={hidden ? "closed" : "open"}
-                exit={"closed"}
-                transition={{ type: "tween" }}
-            />
-            <Box
-                sx={{
-                    position: "absolute",
-                    height: `${cardHeight}%`,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                }}
-            >
-                <Box
-                    sx={{
-                        position: "absolute",
-                        left: 0,
-                        right: 0,
-                        top: 0,
-                        height: "100%",
-                    }}
-                    component={motion.div}
-                    variants={cardVarians}
-                    initial={"closed"}
-                    animate={hidden ? "closed" : "open"}
-                    exit={"closed"}
-                    transition={{ type: "tween" }}
-                >
-                    <Card
-                        key={"dialogue-card"}
-                        orientation="horizontal"
-                        sx={{
-                            overflow: 'auto',
-                            gap: 1,
-                            padding: 0,
-                            height: "100%",
-                        }}
-                    >
-                        {character && <AspectRatio
-                            flex
-                            ratio="1"
-                            maxHeight={"20%"}
-                            sx={{
-                                height: "100%",
-                                minWidth: `${cardImageWidth}%`,
-                            }}
-                            component={motion.div}
-                            variants={cardElementVarians}
-                            initial={"closed"}
-                            animate={character?.icon ? "open" : "closed"}
-                            exit={"closed"}
-                            transition={{ type: "tween" }}
-                        >
-                            <img
-                                src={character?.icon}
-                                loading="lazy"
-                                alt=""
-                            />
-                        </AspectRatio>}
-                        {character &&
-                            <SliderResizer
-                                orientation="horizontal"
-                                max={100}
-                                min={0}
-                                value={cardImageWidth}
-                                onChange={(_, value) => {
-                                    if (typeof value === "number") {
-                                        if (value > 75) {
-                                            value = 75
-                                        }
-                                        if (value < 5) {
-                                            value = 5
-                                        }
-                                        setCardImageWidth(value)
-                                    }
-                                }}
-                                variants={cardImageVarians}
-                                initial={"closed"}
-                                animate={character?.icon ? "open" : "closed"}
-                                exit={"closed"}
-                                transition={{ type: "tween" }}
-                            />
-                        }
-                        <CardContent>
-                            {character && character.name && <Typography
-                                fontSize="xl"
-                                fontWeight="lg"
-                                sx={{
-                                    color: character.color,
-                                }}
-                                component={motion.div}
-                                variants={cardElementVarians}
-                                initial={"closed"}
-                                animate={character.name ? "open" : "closed"}
-                                exit={"closed"}
-                            >
-                                {character.name + (character.surname ? " " + character.surname : "")}
-                            </Typography>}
-                            <Sheet
-                                ref={paragraphRef}
-                                sx={{
-                                    bgcolor: 'background.level1',
-                                    borderRadius: 'sm',
-                                    p: 1.5,
-                                    minHeight: 10,
-                                    display: 'flex',
-                                    flex: 1,
-                                    overflow: 'auto',
-                                    height: "100%",
-                                    marginRight: 2,
-                                    marginBottom: 2,
-                                }}
-                            >
-                                <Typewriter
-                                    text={text || ""}
-                                    delay={typewriterDelay}
-                                    onAnimationStart={() => setTypewriterIsAnimated(true)}
-                                    onAnimationComplete={() => setTypewriterIsAnimated(false)}
-                                    scroll={typewriterDelay ? (offsetTop: number) => {
-                                        if (paragraphRef.current) {
-                                            let scrollTop = (offsetTop - (paragraphRef.current.clientHeight / 2))
-                                            paragraphRef.current.scrollTo({ top: scrollTop, behavior: "auto" })
-                                        }
-                                    } : undefined}
-                                />
-                            </Sheet>
-                        </CardContent>
-                    </Card>
-                </Box>
-            </Box>
-        </Box>
-    );
-}

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

@@ -1,168 +0,0 @@
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { IconButton, Stack, useTheme } from '@mui/joy';
-import { useQueryClient } from '@tanstack/react-query';
-import { motion } from "motion/react";
-import { useSnackbar } from 'notistack';
-import { useTranslation } from 'react-i18next';
-import { useRecoilState, useSetRecoilState } from 'recoil';
-import { autoInfoState } from '../atoms/autoInfoState';
-import { hideInterfaceState } from '../atoms/hideInterfaceState';
-import { openGameSaveScreenState } from '../atoms/openGameSaveScreenState';
-import { openHistoryScreenState } from '../atoms/openHistoryScreenState';
-import { openSettingsState } from '../atoms/openSettingsState';
-import { saveLoadAlertState } from '../atoms/saveLoadAlertState';
-import { skipEnabledState } from '../atoms/skipEnabledState';
-import TextMenuButton from '../components/TextMenuButton';
-import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoBack } from '../use_query/useQueryInterface';
-import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from '../use_query/useQueryLastSave';
-import { SAVES_USE_QUEY_KEY } from '../use_query/useQuerySaves';
-import { goBack } from '../utilities/actions-utility';
-import { useMyNavigate } from '../utilities/navigate-utility';
-import { putSaveIntoIndexDB } from '../utilities/save-utility';
-
-export default function QuickTools() {
-    const setOpenSettings = useSetRecoilState(openSettingsState);
-    const setOpenHistory = useSetRecoilState(openHistoryScreenState);
-    const openSaveScreen = useSetRecoilState(openGameSaveScreenState);
-    const navigate = useMyNavigate();
-    const setOpenLoadAlert = useSetRecoilState(saveLoadAlertState);
-    const { t } = useTranslation(["ui"]);
-    const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);
-    const [skip, setSkip] = useRecoilState(skipEnabledState)
-    const [auto, setAuto] = useRecoilState(autoInfoState)
-    const { enqueueSnackbar } = useSnackbar();
-    const queryClient = useQueryClient()
-    const { data: lastSave = null } = useQueryLastSave()
-    const { data: canGoBack = null } = useQueryCanGoBack()
-
-    return (
-        <>
-            <Stack
-                direction="row"
-                justifyContent="center"
-                alignItems="flex-end"
-                spacing={{ xs: 0.5, sm: 1, md: 2 }}
-                sx={{
-                    height: "100%",
-                    width: "100%",
-                    paddingLeft: { xs: 1, sm: 2, md: 4, lg: 6, xl: 8 },
-                    position: "absolute",
-                    marginBottom: 0,
-                    bottom: 0,
-                }}
-                component={motion.div}
-                variants={{
-                    open: {
-                        opacity: 1,
-                        y: 0,
-                    },
-                    closed: {
-                        opacity: 0,
-                        y: 8,
-                    }
-                }}
-                initial={"closed"}
-                animate={hideInterface ? "closed" : "open"}
-                exit={"closed"}
-                transition={{ type: "tween" }}
-            >
-                <TextMenuButton
-                    onClick={() => goBack(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))}
-                    disabled={!canGoBack}
-                    sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
-                >
-                    {t("back")}
-                </TextMenuButton>
-                <TextMenuButton
-                    onClick={() => setOpenHistory(true)}
-                    sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
-                >
-                    {t("history")}
-                </TextMenuButton>
-                <TextMenuButton
-                    selected={skip}
-                    onClick={() => setSkip((prev) => !prev)}
-                    sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
-                >
-                    {t("skip")}
-                </TextMenuButton>
-                <TextMenuButton
-                    selected={auto.enabled}
-                    onClick={() => setAuto((prev) => ({
-                        ...prev,
-                        enabled: !prev.enabled,
-                    }))}
-                    sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
-                >
-                    {t("auto_forward_time_restricted")}
-                </TextMenuButton>
-                <TextMenuButton
-                    onClick={() => openSaveScreen(true)}
-                    sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
-                >
-                    {t(`${t("save")}/${t("load")}`)}
-                </TextMenuButton>
-                <TextMenuButton
-                    onClick={() => {
-                        putSaveIntoIndexDB()
-                            .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: !hideInterface ? "auto" : "none" }}
-                >
-                    {t("quick_save_restricted")}
-                </TextMenuButton>
-                <TextMenuButton
-                    onClick={() => lastSave && setOpenLoadAlert({ open: true, data: lastSave, type: 'load' })}
-                    disabled={!lastSave}
-                    sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
-                >
-                    {t("load_last_save_restricted")}
-                </TextMenuButton>
-                <TextMenuButton
-                    onClick={() => setOpenSettings(true)}
-                    sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
-                >
-                    {t("settings_restricted")}
-                </TextMenuButton>
-            </Stack >
-            <IconButton
-                onClick={() => setHideInterface((prev) => !prev)}
-                sx={{
-                    position: "absolute",
-                    top: 0,
-                    right: 0,
-                }}
-                component={motion.div}
-                variants={{
-                    open: {
-                        opacity: 1,
-                        x: 0,
-                        pointerEvents: "auto",
-                    },
-                    closed: {
-                        opacity: 0,
-                        x: 8,
-                        pointerEvents: "none",
-                    }
-                }}
-                initial={"closed"}
-                animate={!hideInterface ? "closed" : "open"}
-                exit={"closed"}
-                transition={{ type: "tween" }}
-            >
-                <VisibilityOffIcon
-                    sx={{
-                        color: useTheme().palette.neutral[500],
-                    }}
-                />
-            </IconButton>
-        </>
-    );
-}