create-pixi-vn 2.0.14 → 2.1.0

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

@@ -1,194 +0,0 @@
-import { storage } from "@drincs/pixi-vn";
-import { AspectRatio, Box, Divider, Link, Sheet, Stack, Typography } from "@mui/joy";
-import { useQueryClient } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-import ModalDialogCustom from "../../components/ModalDialog";
-import { SELECTED_QUEST_STORAGE_KEY } from "../../constans";
-import useEventListener from "../../hooks/useKeyDetector";
-import { INTERFACE_DATA_USE_QUEY_KEY } from "../../hooks/useQueryInterface";
-import { SELECTED_QUEST_USE_QUEY_KEY, useQueryQuests, useQuerySelectedQuest } from "../../hooks/useQueryNQTR";
-import useMemoScreenStore from "../../stores/useMemoScreenStore";
-import { getPixiJSAsset } from "../../utils/assets-utility";
-
-export default function MemoScreen() {
-    const { t } = useTranslation(["ui"]);
-    const {
-        data: { inProgressQuests, completedQuests, failedQuests } = {
-            inProgressQuests: [],
-            completedQuests: [],
-            failedQuests: [],
-        },
-    } = useQueryQuests();
-    const { data: selectedQuest } = useQuerySelectedQuest();
-    const image = selectedQuest?.questImage ? getPixiJSAsset(selectedQuest.questImage) : undefined;
-    const open = useMemoScreenStore((state) => state.open);
-    const editOpen = useMemoScreenStore((state) => state.editOpen);
-    const queryClient = useQueryClient();
-
-    useEventListener({
-        type: "keydown",
-        listener: (event) => {
-            if (event.code == "KeyJ" && event.altKey) {
-                editOpen();
-            }
-        },
-    });
-
-    return (
-        <ModalDialogCustom
-            open={open}
-            setOpen={editOpen}
-            layout={"fullscreen"}
-            head={
-                <Stack
-                    sx={{
-                        width: "100%",
-                    }}
-                >
-                    <Stack sx={{ mb: 2 }}>
-                        <Typography level='h2'>{t("quests")}</Typography>
-                    </Stack>
-                </Stack>
-            }
-            minWidth='80%'
-            sx={{
-                maxHeight: "100%",
-            }}
-        >
-            <Box
-                sx={{
-                    display: "flex",
-                    minHeight: "100%",
-                }}
-            >
-                <Sheet
-                    className='Sidebar'
-                    sx={{
-                        position: "sticky",
-                        transition: "transform 0.4s, width 0.4s",
-                        width: 200,
-                        top: 0,
-                        p: 2,
-                        flexShrink: 0,
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 2,
-                    }}
-                >
-                    <Box>
-                        {inProgressQuests.map((quest) => (
-                            <Box
-                                key={quest.id}
-                                sx={{
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    gap: 1,
-                                }}
-                            >
-                                <Link
-                                    disabled={selectedQuest?.id === quest.id}
-                                    onClick={() => {
-                                        storage.set(SELECTED_QUEST_STORAGE_KEY, quest.id);
-                                        queryClient.invalidateQueries({
-                                            queryKey: [INTERFACE_DATA_USE_QUEY_KEY, SELECTED_QUEST_USE_QUEY_KEY],
-                                        });
-                                    }}
-                                >
-                                    {quest.name}
-                                </Link>
-                            </Box>
-                        ))}
-                        {completedQuests.length > 0 && <Typography level='h4'>{t("completed")}</Typography>}
-                        {completedQuests.map((quest) => (
-                            <Box
-                                key={quest.id}
-                                sx={{
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    gap: 1,
-                                }}
-                            >
-                                <Link
-                                    disabled={selectedQuest?.id === quest.id}
-                                    onClick={() => {
-                                        storage.set(SELECTED_QUEST_STORAGE_KEY, quest.id);
-                                        queryClient.invalidateQueries({
-                                            queryKey: [INTERFACE_DATA_USE_QUEY_KEY, SELECTED_QUEST_USE_QUEY_KEY],
-                                        });
-                                    }}
-                                >
-                                    {quest.name}
-                                </Link>
-                            </Box>
-                        ))}
-                        {failedQuests.length > 0 && <Typography level='h4'>{t("failed")}</Typography>}
-                        {failedQuests.map((quest) => (
-                            <Box
-                                key={quest.id}
-                                sx={{
-                                    display: "flex",
-                                    flexDirection: "column",
-                                    gap: 1,
-                                }}
-                            >
-                                <Link
-                                    disabled={selectedQuest?.id === quest.id}
-                                    onClick={() => {
-                                        storage.set(SELECTED_QUEST_STORAGE_KEY, quest.id);
-                                        queryClient.invalidateQueries({
-                                            queryKey: [INTERFACE_DATA_USE_QUEY_KEY, SELECTED_QUEST_USE_QUEY_KEY],
-                                        });
-                                    }}
-                                >
-                                    {quest.name}
-                                </Link>
-                            </Box>
-                        ))}
-                    </Box>
-                </Sheet>
-                <Sheet
-                    component='main'
-                    className='MainContent'
-                    sx={{
-                        flex: 1,
-                        display: "flex",
-                        flexDirection: "column",
-                        minWidth: 0,
-                        gap: 1,
-                        overflow: "auto",
-                        p: 5,
-                    }}
-                >
-                    <Stack spacing={1}>
-                        {image && (
-                            <AspectRatio maxHeight={"10dvh"} objectFit='cover'>
-                                <img src={image} />
-                            </AspectRatio>
-                        )}
-                        <Typography level='h2' textAlign={"center"}>
-                            {selectedQuest?.name}
-                        </Typography>
-                        <Typography
-                            maxHeight={"20dvh"}
-                            textColor={"primary.500"}
-                            sx={{
-                                overflowY: "auto",
-                            }}
-                        >
-                            {selectedQuest?.description}
-                        </Typography>
-                        <Divider />
-                        <Typography
-                            maxHeight={"20dvh"}
-                            sx={{
-                                overflowY: "auto",
-                            }}
-                        >
-                            {selectedQuest?.currentStage?.description}
-                        </Typography>
-                    </Stack>
-                </Sheet>
-            </Box>
-        </ModalDialogCustom>
-    );
-}

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

@@ -1,99 +0,0 @@
-import MapIcon from "@mui/icons-material/Map";
-import NoteAltIcon from "@mui/icons-material/NoteAlt";
-import SettingsIcon from "@mui/icons-material/Settings";
-import { useQueryClient } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-import RoundIconButton, { RoundIconButtonProps } from "../../components/RoundIconButton.tsx";
-import StackOverflow from "../../components/StackOverflow.tsx.tsx";
-import { MAP_ROUTE } from "../../constans.ts";
-import useMyNavigate from "../../hooks/useMyNavigate.ts";
-import { INTERFACE_DATA_USE_QUEY_KEY } from "../../hooks/useQueryInterface.ts";
-import { CURRENT_MAP_USE_QUEY_KEY } from "../../hooks/useQueryNQTR.ts";
-import useMemoScreenStore from "../../stores/useMemoScreenStore.ts";
-import useSettingsScreenStore from "../../stores/useSettingsScreenStore.ts";
-
-export default function NqtrQuickTools() {
-    const editOpenMemo = useMemoScreenStore((state) => state.editOpen);
-    const editOpenSettings = useSettingsScreenStore((state) => state.editOpen);
-    const navigate = useMyNavigate();
-    const queryClient = useQueryClient();
-    const { t } = useTranslation(["ui"]);
-
-    return (
-        <>
-            <StackOverflow
-                direction='row'
-                justifyContent='center'
-                alignItems='flex-end'
-                spacing={0.5}
-                maxLeght={"80%"}
-                sx={{
-                    display: "flex",
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                }}
-            >
-                <QuickToolButton ariaLabel={t("settings")} onClick={editOpenSettings}>
-                    <SettingsIcon
-                        sx={{
-                            fontSize: { xs: "1.5rem", sm: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" },
-                        }}
-                    />
-                </QuickToolButton>
-                <QuickToolButton ariaLabel={t("memo")} onClick={editOpenMemo}>
-                    <NoteAltIcon
-                        sx={{
-                            fontSize: { xs: "1.5rem", sm: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" },
-                        }}
-                    />
-                </QuickToolButton>
-            </StackOverflow>
-            <StackOverflow
-                direction='row'
-                justifyContent='center'
-                alignItems='flex-end'
-                spacing={0.5}
-                maxLeght={"80%"}
-                sx={{
-                    display: "flex",
-                    position: "absolute",
-                    right: 0,
-                    top: 0,
-                }}
-            >
-                <QuickToolButton
-                    ariaLabel={t("map")}
-                    onClick={() => {
-                        queryClient.invalidateQueries({
-                            queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CURRENT_MAP_USE_QUEY_KEY],
-                        });
-                        navigate(MAP_ROUTE);
-                    }}
-                >
-                    <MapIcon
-                        sx={{
-                            fontSize: { xs: "1.5rem", sm: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" },
-                        }}
-                    />
-                </QuickToolButton>
-            </StackOverflow>
-        </>
-    );
-}
-
-function QuickToolButton(props: RoundIconButtonProps) {
-    return (
-        <RoundIconButton
-            sx={{
-                border: 3,
-                "--IconButton-size": { xs: "40px", sm: "60px", md: "80px" },
-                fontSize: { xs: "1rem", sm: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" },
-            }}
-            elevation='lg'
-            variant='solid'
-            color='primary'
-            {...props}
-        />
-    );
-}

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

@@ -1,48 +0,0 @@
-import { NqtrRoundIconButtonConvertor } from "../../components/NqtrRoundIconButton.tsx";
-import StackOverflow from "../../components/StackOverflow.tsx";
-import useGameProps from "../../hooks/useGameProps.ts";
-import { useQueryCurrentRoomId, useQueryRoom } from "../../hooks/useQueryNQTR";
-
-export default function QuickActivities() {
-    const { data: currentRoomId } = useQueryCurrentRoomId();
-    const { data } = useQueryRoom(currentRoomId);
-    const { activities = [], routine = [] } = data?.room || {};
-    const gameProps = useGameProps();
-    const { uiTransition: t } = gameProps;
-
-    return (
-        <StackOverflow
-            direction='column'
-            justifyContent='center'
-            alignItems='flex-end'
-            spacing={0.5}
-            maxLeght={"80%"}
-            sx={{
-                display: "flex",
-                position: "absolute",
-                bottom: 0,
-                right: 0,
-                pointerEvents: "auto",
-            }}
-        >
-            {activities.map((item, index) => (
-                <NqtrRoundIconButtonConvertor
-                    key={`activity-${index}-${item.id}`}
-                    disabled={item.disabled}
-                    onClick={() => item.run(gameProps)}
-                    ariaLabel={t(item.name)}
-                    image={item.icon}
-                />
-            ))}
-            {routine.map((item, index) => (
-                <NqtrRoundIconButtonConvertor
-                    key={`commitment-${index}-${item.id}`}
-                    disabled={item.disabled}
-                    onClick={() => item.run(gameProps)}
-                    ariaLabel={t(item.name)}
-                    image={item.icon}
-                />
-            ))}
-        </StackOverflow>
-    );
-}

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

@@ -1,97 +0,0 @@
-import { navigator } from "@drincs/nqtr";
-import { Avatar, AvatarGroup } from "@mui/joy";
-import { useQueryClient } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { NqtrRoundIconButtonConvertor } from "../../components/NqtrRoundIconButton.tsx";
-import StackOverflow from "../../components/StackOverflow.tsx";
-import { INTERFACE_DATA_USE_QUEY_KEY } from "../../hooks/useQueryInterface";
-import {
-    CURRENT_ROOM_USE_QUEY_KEY,
-    useQueryCurrentRoomId,
-    useQueryQuickRooms,
-    useQueryRoom,
-} from "../../hooks/useQueryNQTR.ts";
-
-export default function QuickRooms() {
-    const { data: rooms = [] } = useQueryQuickRooms();
-
-    return (
-        <StackOverflow
-            direction='row'
-            justifyContent='center'
-            alignItems='flex-end'
-            spacing={0.5}
-            maxLeght={"80%"}
-            sx={{
-                display: "flex",
-                position: "absolute",
-                bottom: 0,
-                left: 0,
-                pointerEvents: "auto",
-            }}
-        >
-            {rooms.map((room) => (
-                <QuickRoom key={"room-" + room.id} roomId={room.id} {...room} />
-            ))}
-        </StackOverflow>
-    );
-}
-
-function QuickRoom({ roomId }: { roomId: string }) {
-    const queryClient = useQueryClient();
-    const { data } = useQueryRoom(roomId);
-    const { data: currentRoomId } = useQueryCurrentRoomId();
-    const { room, icon } = data || {};
-    const { disabled, name, characters } = room || {};
-    const selected = useMemo(() => currentRoomId === roomId, [currentRoomId, roomId]);
-
-    return (
-        <NqtrRoundIconButtonConvertor
-            disabled={disabled || selected}
-            selected={selected}
-            onClick={() => {
-                if (!disabled && !selected) {
-                    navigator.currentRoom = roomId;
-                    queryClient.setQueryData([INTERFACE_DATA_USE_QUEY_KEY, CURRENT_ROOM_USE_QUEY_KEY], roomId);
-                }
-            }}
-            ariaLabel={name || ""}
-            image={icon}
-        >
-            {characters && (
-                <AvatarGroup
-                    sx={{
-                        position: "absolute",
-                        bottom: 0,
-                        right: 0,
-                        "--Avatar-size": { xs: "15px", sm: "22px", md: "28px" },
-                    }}
-                >
-                    {characters.length <= 3 && (
-                        <>
-                            {characters.map((character) => (
-                                <Avatar key={character.id} alt={character.name} src={character.icon} size='sm' />
-                            ))}
-                        </>
-                    )}
-                    {characters.length > 3 && (
-                        <>
-                            {characters.slice(0, 2).map((character) => (
-                                <Avatar key={character.id} alt={character.name} src={character.icon} size='sm' />
-                            ))}
-                            <Avatar
-                                sx={{
-                                    backgroundColor: "rgba(0, 0, 0, 0.5)",
-                                    color: "white",
-                                }}
-                                size='sm'
-                            >
-                                +{characters.length - 2}
-                            </Avatar>
-                        </>
-                    )}
-                </AvatarGroup>
-            )}
-        </NqtrRoundIconButtonConvertor>
-    );
-}

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

@@ -1,96 +0,0 @@
-import { timeTracker } from "@drincs/nqtr";
-import AccessTimeIcon from "@mui/icons-material/AccessTime";
-import { Stack, Typography, useTheme } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import { useShallow } from "zustand/react/shallow";
-import RoundIconButton from "../../components/RoundIconButton";
-import useGameProps from "../../hooks/useGameProps";
-import { useQueryTime } from "../../hooks/useQueryNQTR";
-import useTimeTracker from "../../hooks/useTimeTracker";
-import useInterfaceStore from "../../stores/useInterfaceStore";
-import useNqtrScreenStore from "../../stores/useNqtrScreenStore";
-
-export default function TimeScreen() {
-    const { t } = useTranslation(["ui"]);
-    const { wait } = useTimeTracker();
-    const { data: hour = 0 } = useQueryTime();
-    const gameProps = useGameProps();
-    const disabled = useNqtrScreenStore((state) => state.disabled);
-    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
-
-    return (
-        <Stack
-            direction='column'
-            justifyContent='center'
-            alignItems='center'
-            spacing={0}
-            sx={{
-                marginTop: "0.5rem",
-                opacity: 0.5,
-                ":hover": {
-                    opacity: 1,
-                },
-            }}
-            className={hidden ? `motion-opacity-out-0 motion-translate-y-out-[-50%]` : "motion-preset-bounce"}
-        >
-            <Stack
-                direction='row'
-                justifyContent='center'
-                alignItems='center'
-                spacing={0}
-                height={{ xs: "0.7rem", sm: "1rem", md: "1.5rem", lg: "2rem", xl: "3rem" }}
-            >
-                <Typography
-                    fontSize={{ xs: "1.5rem", sm: "2rem", md: "2.5rem", lg: "3rem", xl: "4rem" }}
-                    sx={{
-                        color: useTheme().palette.common.white,
-                        textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
-                            useTheme().palette.common.black
-                        }`,
-                        pointerEvents: hidden ? "none" : "auto",
-                        userSelect: "none",
-                    }}
-                >
-                    {hour > 9 ? `${hour}:00` : `0${hour}:00`}
-                </Typography>
-                <RoundIconButton
-                    variant='soft'
-                    ariaLabel={t("wait")}
-                    sx={{
-                        padding: 0,
-                        border: 0,
-                        marginTop: "0.5rem",
-                        backgroundColor: "#0000007c",
-                        pointerEvents: hidden ? "none" : "auto",
-                    }}
-                    onClick={() => {
-                        wait(1);
-                        gameProps.invalidateInterfaceData();
-                    }}
-                    elevation='sm'
-                    disabled={disabled}
-                >
-                    <AccessTimeIcon
-                        sx={{
-                            fontSize: { xs: "1.5rem", sm: "1.5rem", md: "1.5rem", lg: "1.7rem", xl: "2rem" },
-                            color: useTheme().palette.common.white,
-                        }}
-                    />
-                </RoundIconButton>
-            </Stack>
-            <Typography
-                fontSize={{ xs: "0.8rem", sm: "1rem", md: "1.2rem", lg: "1.5rem", xl: "2rem" }}
-                sx={{
-                    color: useTheme().palette.common.white,
-                    textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
-                        useTheme().palette.common.black
-                    }`,
-                    pointerEvents: hidden ? "none" : "auto",
-                    userSelect: "none",
-                }}
-            >
-                {timeTracker.currentDayName ? t(timeTracker.currentDayName) : ""}
-            </Typography>
-        </Stack>
-    );
-}

package/template-nqtr-react-vite-muijoy/src/screens/settings/AutoSettingToggle.tsx

@@ -1,24 +0,0 @@
-import HdrAutoIcon from "@mui/icons-material/HdrAuto";
-import { Typography } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import SettingButton from "../../components/SettingButton";
-import useAutoInfoStore from "../../stores/useAutoInfoStore";
-
-export default function AutoSettingToggle() {
-    const { t } = useTranslation(["ui"]);
-    const autoEnabled = useAutoInfoStore((state) => state.enabled);
-    const editAutoEnabled = useAutoInfoStore((state) => state.editEnabled);
-
-    const location = useLocation();
-    if (location.pathname === "/") {
-        return null;
-    }
-
-    return (
-        <SettingButton checked={autoEnabled} onClick={editAutoEnabled}>
-            <HdrAutoIcon />
-            <Typography level='title-md'>{t("auto_forward_time_restricted")}</Typography>
-        </SettingButton>
-    );
-}

package/template-nqtr-react-vite-muijoy/src/screens/settings/DialoguesSettings.tsx

@@ -1,90 +0,0 @@
-import { Box, FormHelperText, FormLabel, Slider } from "@mui/joy";
-import { useTranslation } from "react-i18next";
-import { useShallow } from "zustand/react/shallow";
-import useAutoInfoStore from "../../stores/useAutoInfoStore";
-import useTypewriterStore from "../../stores/useTypewriterStore";
-
-export default function DialoguesSettings() {
-    const typewriterDelay = useTypewriterStore(useShallow((state) => state.delay));
-    const setTypewriterDelay = useTypewriterStore(useShallow((state) => state.setDelay));
-    const { t } = useTranslation(["ui"]);
-    const autoEnabled = useAutoInfoStore((state) => state.enabled);
-    const setAutoTime = useAutoInfoStore((state) => state.setTime);
-    const autoTime = useAutoInfoStore((state) => state.time);
-
-    return (
-        <>
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{t("text_speed")}</FormLabel>
-                <FormHelperText sx={{ typography: "body-sm" }}>{t("text_speed_description")}</FormHelperText>
-            </Box>
-            <Box
-                sx={{
-                    paddingX: 3,
-                }}
-            >
-                <Slider
-                    defaultValue={typewriterDelay}
-                    getAriaValueText={(value) => `${value}ms`}
-                    step={10}
-                    marks={[
-                        {
-                            value: 0,
-                            label: t("off"),
-                        },
-                        {
-                            value: 200,
-                            label: "200ms",
-                        },
-                    ]}
-                    valueLabelDisplay='on'
-                    max={200}
-                    min={0}
-                    valueLabelFormat={(index) => {
-                        if (index === 0) return t("off");
-                        return `${index}ms`;
-                    }}
-                    onChange={(_, value) => {
-                        setTypewriterDelay((value as number) || 0);
-                    }}
-                />
-            </Box>
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{t("auto_forward_time")}</FormLabel>
-                <FormHelperText sx={{ typography: "body-sm" }}>
-                    {t("auto_forward_time_description", {
-                        autoName: t("auto_forward_time_restricted"),
-                        textSpeedName: t("text_speed"),
-                    })}
-                </FormHelperText>
-            </Box>
-            <Box
-                sx={{
-                    paddingX: 3,
-                }}
-            >
-                <Slider
-                    defaultValue={autoTime}
-                    getAriaValueText={(value) => `${value}s`}
-                    step={1}
-                    marks={[
-                        {
-                            value: 1,
-                            label: "1s",
-                        },
-                        {
-                            value: 10,
-                            label: "10s",
-                        },
-                    ]}
-                    valueLabelDisplay='on'
-                    max={10}
-                    min={1}
-                    disabled={!autoEnabled}
-                    valueLabelFormat={(index) => index + "s"}
-                    onChange={(_, value) => setAutoTime(value as number)}
-                />
-            </Box>
-        </>
-    );
-}