create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/MenuButton.tsx

@@ -1,37 +0,0 @@
-import { Button, ButtonProps, ButtonTypeMap } from "@mui/joy";
-import { motion, Variants } from "motion/react";
-
-interface MenuButtonProps
-    extends ButtonProps<
-        ButtonTypeMap["defaultComponent"],
-        {
-            component?: React.ElementType;
-        }
-    > {
-    transitionDelay?: number;
-}
-
-export default function MenuButton(props: MenuButtonProps) {
-    const { sx, transitionDelay, ...rest } = props;
-    const itemVariants: Variants = {
-        open: {
-            opacity: 1,
-            x: 0,
-            transition: { type: "spring", stiffness: 300, damping: 24, delay: transitionDelay },
-        },
-        closed: { opacity: 0, x: -50, transition: { duration: 0.2 } },
-    };
-
-    return (
-        <Button
-            size='sm'
-            sx={{
-                fontSize: { xs: "0.75rem", sm: "0.75rem", md: "1rem", lg: "1.25rem", xl: "1.5rem" },
-                ...sx,
-            }}
-            component={motion.div}
-            variants={itemVariants}
-            {...rest}
-        />
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/ModalConfirmation.tsx

@@ -1,61 +0,0 @@
-import { Button } from "@mui/joy";
-import { ReactNode, useState } from "react";
-import { useTranslation } from "react-i18next";
-import ModalDialogCustom, { ModalDialogCustomProps } from "./ModalDialog";
-
-interface ModalConfirmationProps extends Omit<ModalDialogCustomProps, "actions"> {
-    onConfirm?: () => boolean | Promise<boolean>;
-    onCancel?: () => void;
-    disabledConfirm?: boolean;
-    startDecorator?: ReactNode;
-}
-
-export default function ModalConfirmation(props: ModalConfirmationProps) {
-    const { setOpen, onConfirm, onCancel, children, color, disabledConfirm, startDecorator, ...rest } = props;
-    const { t } = useTranslation(["ui"]);
-    const [loadingConfirm, setLoadingConfirm] = useState<boolean>(false);
-
-    return (
-        <ModalDialogCustom
-            setOpen={setOpen}
-            color={color}
-            actions={[
-                <Button
-                    key='confirm-button'
-                    color={color}
-                    onClick={async () => {
-                        if (onConfirm) {
-                            setLoadingConfirm(true);
-                            try {
-                                let result = await onConfirm();
-                                setLoadingConfirm(false);
-                                setOpen(!result);
-                            } catch (_error) {
-                                setLoadingConfirm(false);
-                            }
-                        }
-                    }}
-                    disabled={disabledConfirm}
-                    fullWidth={false}
-                    loading={loadingConfirm}
-                    startDecorator={startDecorator}
-                >
-                    {t("confirm")}
-                </Button>,
-                <Button
-                    key='cancel-button'
-                    variant='plain'
-                    color='neutral'
-                    onClick={() => setOpen(false)}
-                    fullWidth={false}
-                    disabled={loadingConfirm}
-                >
-                    {t("cancel")}
-                </Button>,
-            ]}
-            {...rest}
-        >
-            {children}
-        </ModalDialogCustom>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/ModalDialog.tsx

@@ -1,68 +0,0 @@
-import { DialogActions, DialogContent, Divider, ModalClose } from "@mui/joy";
-import Modal from "@mui/joy/Modal";
-import { default as ModalDialogJoy, ModalDialogProps } from "@mui/joy/ModalDialog";
-import { useEffect, useMemo, useState } from "react";
-
-export interface ModalDialogCustomProps extends ModalDialogProps {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-    children?: React.ReactNode;
-    head?: string | React.ReactNode;
-    actions?: React.ReactNode;
-    canBeIgnored?: boolean;
-}
-
-export default function ModalDialogCustom(props: ModalDialogCustomProps) {
-    const { open, setOpen, children, actions, head, sx, canBeIgnored = true, ...rest } = props;
-    const [internalOpen, setInternalOpen] = useState(open);
-    useEffect(() => {
-        if (open) {
-            setInternalOpen(open);
-            return;
-        }
-        const timeout = setTimeout(() => {
-            setInternalOpen(open);
-        }, 400);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [open]);
-    const modalVarians = useMemo(
-        () => `transition-all duration-400
-        ${open ? "opacity-100 backdrop-blur-sm" : "opacity-0 backdrop-blur-0"}`,
-        [open]
-    );
-    const modalDialogVarians = useMemo(
-        () =>
-            `transition-all duration-400
-        ${open ? "opacity-100" : "opacity-0"}`,
-        [open]
-    );
-
-    return (
-        <Modal
-            keepMounted
-            open={internalOpen}
-            onClose={() => canBeIgnored && setOpen(false)}
-            sx={{
-                pointerEvents: open ? "auto" : "none",
-            }}
-            className={modalVarians}
-        >
-            <ModalDialogJoy
-                sx={{
-                    pointerEvents: open ? "auto" : "none",
-                    ...sx,
-                }}
-                className={modalDialogVarians}
-                {...rest}
-            >
-                {canBeIgnored && <ModalClose />}
-                {head}
-                {head && <Divider />}
-                <DialogContent>{internalOpen && children}</DialogContent>
-                {actions && <DialogActions>{actions}</DialogActions>}
-            </ModalDialogJoy>
-        </Modal>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/NextButton.tsx

@@ -1,53 +0,0 @@
-import { Button } from "@mui/joy";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import useNarrationFunctions from "../hooks/useNarrationFunctions";
-import { useQueryCanGoNext } from "../hooks/useQueryInterface";
-import useInterfaceStore from "../stores/useInterfaceStore";
-import useSkipStore from "../stores/useSkipStore";
-import useStepStore from "../stores/useStepStore";
-
-export default function NextButton() {
-    const skipEnabled = useSkipStore((state) => state.enabled);
-    const setSkipEnabled = useSkipStore((state) => state.setEnabled);
-    const nextStepLoading = useStepStore((state) => state.loading);
-    const goBackLoading = useStepStore((state) => state.backLoading);
-    const { data: canContinue = false } = useQueryCanGoNext();
-    const hideNextButton = useInterfaceStore((state) => state.hidden || !canContinue);
-    const { goNext } = useNarrationFunctions();
-    const { t } = useTranslation(["ui"]);
-    const varians = useMemo(
-        () =>
-            hideNextButton
-                ? `motion-opacity-out-0 motion-translate-y-out-[50%]`
-                : `motion-opacity-in-0 motion-translate-y-in-[50%]`,
-        [hideNextButton]
-    );
-
-    return (
-        <Button
-            variant='solid'
-            color='primary'
-            size='sm'
-            disabled={goBackLoading}
-            loading={nextStepLoading}
-            sx={{
-                position: "absolute",
-                bottom: 0,
-                right: 0,
-                width: { xs: 70, sm: 100, md: 150 },
-                border: 3,
-                zIndex: 100,
-            }}
-            onClick={() => {
-                if (skipEnabled) {
-                    setSkipEnabled(false);
-                }
-                goNext();
-            }}
-            className={varians}
-        >
-            {t("next")}
-        </Button>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/NqtrRoundIconButton.tsx

@@ -1,73 +0,0 @@
-import { OnRunProps } from "@drincs/nqtr";
-import { useTheme } from "@mui/joy";
-import { isValidElement, ReactElement } from "react";
-import { LazyLoadComponent } from "react-lazy-load-image-component";
-import useGameProps from "../hooks/useGameProps";
-import TimeSlotsImage from "../models/TimeSlotsImage";
-import useNqtrScreenStore from "../stores/useNqtrScreenStore";
-import { getPixiJSAsset } from "../utils/assets-utility";
-import RoundIconButton, { RoundIconButtonProps } from "./RoundIconButton";
-
-interface NqtrRoundIconButtonProps extends RoundIconButtonProps {
-    selected?: boolean;
-}
-
-export default function NqtrRoundIconButton(props: NqtrRoundIconButtonProps) {
-    const disabledScreen = useNqtrScreenStore((state) => state.disabled);
-    const { selected, sx, disabled = disabledScreen, ...rest } = props;
-
-    return (
-        <RoundIconButton
-            sx={{
-                "--IconButton-size": { xs: "40px", sm: "60px", md: "80px" },
-                border: 3,
-                borderColor: selected ? useTheme().palette.primary[800] : useTheme().palette.background.body,
-                ...sx,
-            }}
-            elevation='lg'
-            {...rest}
-        />
-    );
-}
-
-export function NqtrRoundIconButtonConvertor(
-    props: NqtrRoundIconButtonProps & {
-        image?: string | TimeSlotsImage | ReactElement | ((props: OnRunProps) => ReactElement);
-    }
-) {
-    let { image, ...rest } = props;
-    const gameProps = useGameProps();
-    if (!image) {
-        return;
-    }
-    if (typeof image === "function") {
-        image = image(gameProps);
-    }
-    if (isValidElement(image)) {
-        return image;
-    }
-
-    if (image instanceof TimeSlotsImage) {
-        image = image.src;
-    }
-
-    if (typeof image == "string") {
-        try {
-            image = getPixiJSAsset(image);
-        } catch {}
-        return (
-            <LazyLoadComponent>
-                <NqtrRoundIconButton
-                    {...rest}
-                    sx={{
-                        backgroundImage: `url(${image})`,
-                        backgroundSize: "cover",
-                        backgroundPosition: "center",
-                        fontSize: { xs: "1rem", sm: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" },
-                        ...rest.sx,
-                    }}
-                />
-            </LazyLoadComponent>
-        );
-    }
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/ReturnMainMenuButton.tsx

@@ -1,69 +0,0 @@
-import { Game } from "@drincs/pixi-vn";
-import ExitToAppIcon from "@mui/icons-material/ExitToApp";
-import { Button, Stack, Typography } from "@mui/joy";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import ModalDialogCustom from "../components/ModalDialog";
-import useMyNavigate from "../hooks/useMyNavigate";
-import useSettingsScreenStore from "../stores/useSettingsScreenStore";
-
-export default function ReturnMainMenuButton() {
-    const setOpenSettings = useSettingsScreenStore((state) => state.setOpen);
-    const navigate = useMyNavigate();
-    const [openDialog, setOpenDialog] = useState(false);
-    const { t } = useTranslation(["ui"]);
-
-    const location = useLocation();
-    if (location.pathname === "/") {
-        return null;
-    }
-
-    return (
-        <>
-            <Stack direction='row' justifyContent='space-between' useFlexGap spacing={1}>
-                <Button
-                    variant='outlined'
-                    color='danger'
-                    startDecorator={<ExitToAppIcon />}
-                    onClick={() => setOpenDialog(true)}
-                >
-                    {t("return_main_menu")}
-                </Button>
-            </Stack>
-            <ModalDialogCustom
-                open={openDialog}
-                setOpen={setOpenDialog}
-                color='danger'
-                head={
-                    <Typography level='h4' startDecorator={<ExitToAppIcon />}>
-                        {t("attention")}
-                    </Typography>
-                }
-                actions={
-                    <>
-                        <Button
-                            key={"exit"}
-                            color='danger'
-                            variant='outlined'
-                            onClick={() => {
-                                Game.clear();
-                                navigate("/");
-                                setOpenSettings(false);
-                                setOpenDialog(false);
-                            }}
-                            startDecorator={<ExitToAppIcon />}
-                        >
-                            {t("exit")}
-                        </Button>
-                        <Button key={"cancel"} color='neutral' variant='plain' onClick={() => setOpenDialog(false)}>
-                            {t("cancel")}
-                        </Button>
-                    </>
-                }
-            >
-                <Typography>{t("you_sure_to_return_main_menu")}</Typography>
-            </ModalDialogCustom>
-        </>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/RoundIconButton.tsx

@@ -1,35 +0,0 @@
-import { IconButton, IconButtonProps, Shadow, Tooltip } from "@mui/joy";
-import { useShallow } from "zustand/react/shallow";
-import useInterfaceStore from "../stores/useInterfaceStore";
-
-export interface RoundIconButtonProps extends IconButtonProps {
-    circumference?: string | {} | number;
-    ariaLabel?: string;
-    elevation?: keyof Shadow;
-}
-
-export default function RoundIconButton(props: RoundIconButtonProps) {
-    const { sx, circumference, ariaLabel, elevation, ...rest } = props;
-    const hidden = useInterfaceStore(useShallow((state) => state.hidden));
-
-    return (
-        <Tooltip key={props.key ? "tooltip-" + props.key : undefined} title={ariaLabel}>
-            <div>
-                {/* This div is necessary to avoid the tooltip to be cutted */}
-                <IconButton
-                    title={ariaLabel}
-                    className={hidden ? "motion-scale-out-[0]" : "motion-scale-in-[0]"}
-                    sx={{
-                        borderRadius: "50%",
-                        height: circumference,
-                        width: circumference,
-                        boxShadow: elevation ?? undefined,
-                        pointerEvents: hidden ? "none" : "auto",
-                        ...sx,
-                    }}
-                    {...rest}
-                />
-            </div>
-        </Tooltip>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/SettingButton.tsx

@@ -1,52 +0,0 @@
-import { Card, CardContent, CardProps, Checkbox, useTheme } from "@mui/joy";
-
-export default function SettingButton({
-    children,
-    checked,
-    disabled,
-    sx,
-    onChange,
-    onClick,
-    ...rest
-}: {
-    checked?: boolean;
-    disabled?: boolean;
-} & CardProps) {
-    return (
-        <Card
-            sx={{
-                boxShadow: "none",
-                "&:hover": disabled ? undefined : { bgcolor: "background.level1" },
-                backgroundColor: disabled ? useTheme().palette.neutral[100] : undefined,
-                ...sx,
-            }}
-            onClick={disabled ? undefined : onClick}
-            {...rest}
-        >
-            <CardContent>{children}</CardContent>
-            <Checkbox
-                disableIcon
-                overlay
-                checked={true}
-                variant='outlined'
-                color='neutral'
-                onChange={onChange}
-                sx={{ mt: -2 }}
-                disabled={disabled}
-                slotProps={{
-                    action: {
-                        sx: {
-                            borderWidth: checked ? 2 : undefined,
-                            borderColor: checked ? useTheme().palette.primary.outlinedBorder : undefined,
-                            "&:hover": disabled
-                                ? undefined
-                                : {
-                                      bgcolor: "transparent",
-                                  },
-                        },
-                    },
-                }}
-            />
-        </Card>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/SliderResizer.tsx

@@ -1,51 +0,0 @@
-import { Slider, SliderProps, Stack, StackProps, useTheme } from "@mui/joy";
-
-export default function SliderResizer(
-    props: SliderProps & {
-        stackProps?: StackProps;
-    }
-) {
-    const { orientation, sx, key, stackProps, ...rest } = props;
-    const { sx: stackSX, ...stackRest } = stackProps || {};
-    const { pointerEvents } = (sx || {}) as any;
-
-    return (
-        <Stack
-            key={"stack-" + key}
-            direction={orientation === "vertical" ? "row" : "column"}
-            justifyContent='center'
-            alignItems='center'
-            spacing={0}
-            sx={{
-                pointerEvents: "none",
-                width: "100%",
-                height: "100%",
-                position: "absolute",
-                left: 0,
-                right: 0,
-                ...stackSX,
-            }}
-            {...stackRest}
-        >
-            <Slider
-                key={key}
-                orientation={orientation}
-                valueLabelDisplay='auto'
-                valueLabelFormat={(index) => index + "%"}
-                sx={{
-                    zIndex: useTheme().zIndex.table + 1,
-                    "--Slider-trackSize": "0px",
-                    "--Slider-thumbWidth": orientation === "vertical" ? "42px" : "16px",
-                    "--Slider-thumbSize": orientation === "vertical" ? "16px" : "42px",
-                    "& .MuiSlider-thumb": {
-                        cursor: orientation === "vertical" ? "row-resize" : "col-resize",
-                        pointerEvents: pointerEvents ?? "auto",
-                    },
-                    ...sx,
-                    pointerEvents: "none",
-                }}
-                {...rest}
-            />
-        </Stack>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/SoundChannelControl.tsx

@@ -1,45 +0,0 @@
-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 createChannelSoundStore from "../stores/createChannelSoundStore";
-
-type Props = {
-    label: string;
-    alias: string;
-    disabled?: boolean;
-    helper?: string;
-};
-
-export default function SoundChannelControl({ label, alias, disabled, helper }: Props) {
-    const storeHook = createChannelSoundStore(alias);
-    const volume = storeHook((s) => s.volume);
-    const muted = storeHook((s) => s.muted);
-    const setVolume = storeHook((s) => s.setVolume);
-    const toggleMuted = storeHook((s) => s.toggleMuted);
-
-    return (
-        <>
-            <Box>
-                <FormLabel sx={{ typography: "title-sm" }}>{label}</FormLabel>
-                {helper ? <FormHelperText sx={{ typography: "body-sm" }}>{helper}</FormHelperText> : null}
-            </Box>
-            <Stack direction='row' alignItems='center' spacing={1}>
-                <IconButton disabled={disabled} onClick={() => toggleMuted()}>
-                    {muted ? <VolumeOffIcon /> : <VolumeUpIcon />}
-                </IconButton>
-                <Slider
-                    min={0}
-                    max={100}
-                    value={volume}
-                    onChange={(_, v) => setVolume(Array.isArray(v) ? v[0] : (v as number))}
-                    disabled={disabled}
-                    sx={{ flex: 1 }}
-                    step={1}
-                />
-                <Box component='span' sx={{ minWidth: 36, textAlign: "right" }}>
-                    {volume}%
-                </Box>
-            </Stack>
-        </>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/StackOverflow.tsx.tsx

@@ -1,45 +0,0 @@
-import { Box, Stack, StackProps } from "@mui/joy";
-import { SxProps } from "@mui/joy/styles/types";
-import { ResponsiveStyleValue } from "@mui/system/styleFunctionSx";
-interface StackOverflowProps extends StackProps {
-    maxLeght?: string | number;
-}
-
-function getStyleStackOverflowProps(
-    direction: ResponsiveStyleValue<"row" | "row-reverse" | "column" | "column-reverse">,
-    maxLeght?: string | number
-) {
-    let result: SxProps = {};
-    if (direction === "row" || direction === "row-reverse") {
-        result = {
-            overflowX: "auto",
-            flexDirection: "row",
-            maxWidth: maxLeght,
-        };
-    } else {
-        result = {
-            overflowY: "auto",
-            flexDirection: "column",
-            maxHeight: maxLeght,
-        };
-    }
-    return result;
-}
-
-export default function StackOverflow(props: StackOverflowProps) {
-    const { direction = "column", children, maxLeght, sx, ...rest } = props;
-    const sxStackOverflow = getStyleStackOverflowProps(direction, maxLeght);
-
-    return (
-        <Box
-            sx={{
-                ...sxStackOverflow,
-                ...sx,
-            }}
-        >
-            <Stack direction={direction} {...rest}>
-                {children}
-            </Stack>
-        </Box>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/TextMenuButton.tsx

@@ -1,48 +0,0 @@
-import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
-
-interface TextMenuButtonProps
-    extends LinkProps<
-        LinkTypeMap["defaultComponent"],
-        {
-            component?: React.ElementType;
-            focusVisible?: boolean;
-        }
-    > {
-    to?: string;
-    selected?: boolean;
-}
-
-export default function TextMenuButton(props: TextMenuButtonProps) {
-    const { sx, children, disabled, selected, ...rest } = props;
-
-    return (
-        <Link
-            sx={{
-                fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
-                userSelect: "none",
-                ...sx,
-            }}
-            disabled={disabled}
-            {...rest}
-        >
-            <Typography
-                textColor={
-                    selected
-                        ? useTheme().palette.primary[500]
-                        : disabled
-                        ? useTheme().palette.neutral[500]
-                        : useTheme().palette.neutral[300]
-                }
-                sx={{
-                    fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
-                    userSelect: "none",
-                    textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
-                        useTheme().palette.common.black
-                    }`,
-                }}
-            >
-                {children}
-            </Typography>
-        </Link>
-    );
-}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/components/TypographyShadow.tsx

@@ -1,19 +0,0 @@
-import { Typography, TypographyProps, useTheme } from "@mui/joy";
-
-export default function TypographyShadow({
-    sx,
-    shadowColor = useTheme().palette.neutral[900],
-    ...rest
-}: TypographyProps & { shadowColor?: string }) {
-    return (
-        <Typography
-            sx={{
-                textShadow: `0 0 3px ${shadowColor}, 0 0 5px ${shadowColor}`,
-                pointerEvents: "auto",
-                color: useTheme().palette.neutral[300],
-                ...sx,
-            }}
-            {...rest}
-        />
-    );
-}