create-pixi-vn 1.3.1 → 1.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",
@@ -40,16 +40,16 @@
   "homepage": "https://pixi-vn.web.app/",
   "funding": "https://github.com/DRincs-Productions/pixi-vn?sponsor=1",
   "devDependencies": {
-    "@types/cross-spawn": "^6.0.6",
+    "@clack/prompts": "^0.10.1",
     "@types/minimist": "^1.2.5",
     "@types/which": "^3.0.4",
-    "cross-spawn": "^7.0.6",
     "inquirer": "^12.6.0",
     "kolorist": "^1.8.0",
     "minimist": "^1.2.8",
     "unbuild": "^3.5.0"
   },
   "dependencies": {
+    "execa": "^9.5.3",
     "which": "^5.0.0"
   }
 }

package/template-game-engine/.vscode/settings.json

@@ -25,11 +25,15 @@
     // move file
     "javascript.updateImportsOnFileMove.enabled": "always",
     "typescript.updateImportsOnFileMove.enabled": "always",
-	// debug
-	"terminal.integrated.defaultProfile.linux": "JavaScript Debug Terminal",
-	"terminal.integrated.defaultProfile.windows": "JavaScript Debug Terminal",
-	"terminal.integrated.defaultProfile.osx": "JavaScript Debug Terminal",
+    // debug
+    "terminal.integrated.defaultProfile.linux": "JavaScript Debug Terminal",
+    "terminal.integrated.defaultProfile.windows": "JavaScript Debug Terminal",
+    "terminal.integrated.defaultProfile.osx": "JavaScript Debug Terminal",
     // olther
     "extensions.ignoreRecommendations": false,
-    "git.fetchOnPull": true
+    "git.fetchOnPull": true,
+    "workbench.editor.enablePreview": true,
+    "workbench.editorAssociations": {
+        "*.md": "vscode.markdown.preview.editor"
+    },
 }

package/template-react-vite-muijoy/.vscode/settings.json

@@ -1,28 +1,28 @@
 {
     // Formatter
     "[javascript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     },
     "[javascriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     },
     "[typescript]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     },
     "[typescriptreact]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     },
     "[css]": {
         "editor.defaultFormatter": "vscode.css-language-features",
         "editor.formatOnSave": true
     },
     "[html]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"editor.formatOnSave": true,
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true,
         "prettier.tabWidth": 2,
     },
     "prettier.jsxSingleQuote": true,
@@ -53,5 +53,8 @@
     ],
     // olther
     "extensions.ignoreRecommendations": false,
-    "prettier.useEditorConfig": false,
+    "workbench.editor.enablePreview": true,
+    "workbench.editorAssociations": {
+        "*.md": "vscode.markdown.preview.editor"
+    },
 }

package/template-react-vite-muijoy/src/components/AnimatedDots.tsx

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+
+export default function AnimatedDots() {
+    const dots = [".", ".", "."]; // I caratteri da animare
+
+    return (
+        <motion.span
+            style={{ display: "flex", pointerEvents: "none", userSelect: "none" }}
+            transition={{
+                staggerChildren: 0.2,
+            }}
+            initial='closed'
+            animate='open'
+        >
+            {dots.map((dot, index) => (
+                <motion.span
+                    key={index}
+                    initial={{ y: 0 }}
+                    variants={{
+                        open: {
+                            y: 5,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                        closed: {
+                            y: 0,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                    }}
+                >
+                    {dot}
+                </motion.span>
+            ))}
+        </motion.span>
+    );
+}

package/template-react-vite-muijoy/src/hooks/useDebouncedEffect.ts

@@ -25,9 +25,9 @@ export default function useDebouncedEffect(
     const { delay = 1000, enabled = true } = options;
 
     useEffect(() => {
-        if (enabled) {
+        if (enabled && delay > 0) {
             const timeout = setTimeout(callback, delay);
             return () => clearTimeout(timeout);
         }
-    }, dependencies);
+    }, [delay, enabled, ...dependencies]);
 }

package/template-react-vite-muijoy/src/hooks/useInterval.ts

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
  * A custom hook that sets up an interval to call a callback function.
  * @param callback The callback function to call on each interval.
  * @param options An object containing the delay and enabled state for the interval.
+ * @param dependencies The dependencies array that determines when to re-run the effect.
  */
 export default function useInterval(
     callback: () => any,
@@ -18,7 +19,8 @@ export default function useInterval(
          * @default true
          */
         enabled?: boolean;
-    }
+    },
+    dependencies: any[] = []
 ) {
     const savedCallback = useRef<() => any | null>(null);
     const { delay = 1000, enabled = true } = options;
@@ -38,5 +40,5 @@ export default function useInterval(
             const id = setInterval(tick, delay);
             return () => clearInterval(id);
         }
-    }, [delay, enabled]);
+    }, [delay, enabled, ...dependencies]);
 }

package/template-react-vite-muijoy/src/hooks/useSkipAutoDetector.ts

@@ -1,9 +1,9 @@
-import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { SKIP_DELAY } from "../constans";
 import useAutoInfoStore from "../stores/useAutoInfoStore";
 import useSkipStore from "../stores/useSkipStore";
 import useTypewriterStore from "../stores/useTypewriterStore";
+import useDebouncedEffect from "./useDebouncedEffect";
 import useInterval from "./useInterval";
 import useEventListener from "./useKeyDetector";
 import useNarrationFunctions from "./useNarrationFunctions";
@@ -21,26 +21,14 @@ export default function useSkipAutoDetector() {
         enabled: skipEnabled,
     });
 
-    useEffect(() => {
-        if (skipEnabled) {
-            return;
-        }
-        if (autoEnabled && !typewriterInProgress) {
-            if (autoTime) {
-                let millisecond = autoTime * 1000;
-                // Debouncing
-                let timeout = setTimeout(() => {
-                    if (autoEnabled && !skipEnabled) {
-                        goNext();
-                    }
-                }, millisecond);
-
-                return () => {
-                    clearTimeout(timeout);
-                };
-            }
-        }
-    }, [autoTime, autoEnabled, typewriterInProgress, skipEnabled, goNext]);
+    useDebouncedEffect(
+        () => autoEnabled && !skipEnabled && goNext(),
+        {
+            delay: autoTime * 1000,
+            enabled: autoEnabled && !skipEnabled && !typewriterInProgress,
+        },
+        [autoEnabled, skipEnabled, goNext]
+    );
 
     useEventListener({
         type: "keypress",

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

@@ -11,6 +11,7 @@ import { MarkdownTypewriterHooks } from "react-markdown-typewriter";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { useShallow } from "zustand/react/shallow";
+import AnimatedDots from "../components/AnimatedDots";
 import SliderResizer from "../components/SliderResizer";
 import useDialogueCardStore from "../stores/useDialogueCardStore";
 import useInterfaceStore from "../stores/useInterfaceStore";
@@ -248,10 +249,14 @@ function NarrationScreenText(props: { paragraphRef: RefObject<HTMLDivElement | n
                     delay={typewriterDelay}
                     motionProps={{
                         onAnimationStart: startTypewriter,
-                        onAnimationComplete: endTypewriter,
+                        onAnimationComplete: (definition: "visible" | "hidden") => {
+                            if (definition == "visible") {
+                                endTypewriter();
+                            }
+                        },
                         onCharacterAnimationComplete: handleCharacterAnimationComplete,
                     }}
-                    fallback={<>...</>}
+                    fallback={<AnimatedDots />}
                 >
                     {text}
                 </MarkdownTypewriterHooks>

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

@@ -28,6 +28,7 @@ export default function QuickTools() {
     const setHideInterface = useInterfaceStore((state) => state.editHidden);
     const skipEnabled = useSkipStore((state) => state.enabled);
     const editSkipEnabled = useSkipStore((state) => state.editEnabled);
+    const setSkipEnabled = useSkipStore((state) => state.setEnabled);
     const autoEnabled = useAutoInfoStore((state) => state.enabled);
     const editAutoEnabled = useAutoInfoStore((state) => state.editEnabled);
     const { enqueueSnackbar } = useSnackbar();
@@ -69,7 +70,12 @@ export default function QuickTools() {
                 transition={{ type: "tween" }}
             >
                 <TextMenuButton
-                    onClick={goBack}
+                    onClick={() => {
+                        if (skipEnabled) {
+                            setSkipEnabled(false);
+                        }
+                        goBack();
+                    }}
                     disabled={!canGoBack || nextStepLoading}
                     sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
                 >

package/template-react-vite-muijoy-ink/.vscode/settings.json

@@ -53,5 +53,8 @@
     ],
     // olther
     "extensions.ignoreRecommendations": false,
-    "prettier.useEditorConfig": false,
+    "workbench.editor.enablePreview": true,
+    "workbench.editorAssociations": {
+        "*.md": "vscode.markdown.preview.editor"
+    },
 }

package/template-react-vite-muijoy-ink/src/components/AnimatedDots.tsx

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+
+export default function AnimatedDots() {
+    const dots = [".", ".", "."]; // I caratteri da animare
+
+    return (
+        <motion.span
+            style={{ display: "flex", pointerEvents: "none", userSelect: "none" }}
+            transition={{
+                staggerChildren: 0.2,
+            }}
+            initial='closed'
+            animate='open'
+        >
+            {dots.map((dot, index) => (
+                <motion.span
+                    key={index}
+                    initial={{ y: 0 }}
+                    variants={{
+                        open: {
+                            y: 5,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                        closed: {
+                            y: 0,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                    }}
+                >
+                    {dot}
+                </motion.span>
+            ))}
+        </motion.span>
+    );
+}

package/template-react-vite-muijoy-ink/src/hooks/useDebouncedEffect.ts

@@ -25,9 +25,9 @@ export default function useDebouncedEffect(
     const { delay = 1000, enabled = true } = options;
 
     useEffect(() => {
-        if (enabled) {
+        if (enabled && delay > 0) {
             const timeout = setTimeout(callback, delay);
             return () => clearTimeout(timeout);
         }
-    }, dependencies);
+    }, [delay, enabled, ...dependencies]);
 }

package/template-react-vite-muijoy-ink/src/hooks/useInterval.ts

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
  * A custom hook that sets up an interval to call a callback function.
  * @param callback The callback function to call on each interval.
  * @param options An object containing the delay and enabled state for the interval.
+ * @param dependencies The dependencies array that determines when to re-run the effect.
  */
 export default function useInterval(
     callback: () => any,
@@ -18,7 +19,8 @@ export default function useInterval(
          * @default true
          */
         enabled?: boolean;
-    }
+    },
+    dependencies: any[] = []
 ) {
     const savedCallback = useRef<() => any | null>(null);
     const { delay = 1000, enabled = true } = options;
@@ -38,5 +40,5 @@ export default function useInterval(
             const id = setInterval(tick, delay);
             return () => clearInterval(id);
         }
-    }, [delay, enabled]);
+    }, [delay, enabled, ...dependencies]);
 }

package/template-react-vite-muijoy-ink/src/hooks/useSkipAutoDetector.ts

@@ -1,9 +1,9 @@
-import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { SKIP_DELAY } from "../constans";
 import useAutoInfoStore from "../stores/useAutoInfoStore";
 import useSkipStore from "../stores/useSkipStore";
 import useTypewriterStore from "../stores/useTypewriterStore";
+import useDebouncedEffect from "./useDebouncedEffect";
 import useInterval from "./useInterval";
 import useEventListener from "./useKeyDetector";
 import useNarrationFunctions from "./useNarrationFunctions";
@@ -21,26 +21,14 @@ export default function useSkipAutoDetector() {
         enabled: skipEnabled,
     });
 
-    useEffect(() => {
-        if (skipEnabled) {
-            return;
-        }
-        if (autoEnabled && !typewriterInProgress) {
-            if (autoTime) {
-                let millisecond = autoTime * 1000;
-                // Debouncing
-                let timeout = setTimeout(() => {
-                    if (autoEnabled && !skipEnabled) {
-                        goNext();
-                    }
-                }, millisecond);
-
-                return () => {
-                    clearTimeout(timeout);
-                };
-            }
-        }
-    }, [autoTime, autoEnabled, typewriterInProgress, skipEnabled, goNext]);
+    useDebouncedEffect(
+        () => autoEnabled && !skipEnabled && goNext(),
+        {
+            delay: autoTime * 1000,
+            enabled: autoEnabled && !skipEnabled && !typewriterInProgress,
+        },
+        [autoEnabled, skipEnabled, goNext]
+    );
 
     useEventListener({
         type: "keypress",

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

@@ -11,6 +11,7 @@ import { MarkdownTypewriterHooks } from "react-markdown-typewriter";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { useShallow } from "zustand/react/shallow";
+import AnimatedDots from "../components/AnimatedDots";
 import SliderResizer from "../components/SliderResizer";
 import useDialogueCardStore from "../stores/useDialogueCardStore";
 import useInterfaceStore from "../stores/useInterfaceStore";
@@ -248,10 +249,14 @@ function NarrationScreenText(props: { paragraphRef: RefObject<HTMLDivElement | n
                     delay={typewriterDelay}
                     motionProps={{
                         onAnimationStart: startTypewriter,
-                        onAnimationComplete: endTypewriter,
+                        onAnimationComplete: (definition: "visible" | "hidden") => {
+                            if (definition == "visible") {
+                                endTypewriter();
+                            }
+                        },
                         onCharacterAnimationComplete: handleCharacterAnimationComplete,
                     }}
-                    fallback={<>...</>}
+                    fallback={<AnimatedDots />}
                 >
                     {text}
                 </MarkdownTypewriterHooks>

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

@@ -28,6 +28,7 @@ export default function QuickTools() {
     const setHideInterface = useInterfaceStore((state) => state.editHidden);
     const skipEnabled = useSkipStore((state) => state.enabled);
     const editSkipEnabled = useSkipStore((state) => state.editEnabled);
+    const setSkipEnabled = useSkipStore((state) => state.setEnabled);
     const autoEnabled = useAutoInfoStore((state) => state.enabled);
     const editAutoEnabled = useAutoInfoStore((state) => state.editEnabled);
     const { enqueueSnackbar } = useSnackbar();
@@ -69,7 +70,12 @@ export default function QuickTools() {
                 transition={{ type: "tween" }}
             >
                 <TextMenuButton
-                    onClick={goBack}
+                    onClick={() => {
+                        if (skipEnabled) {
+                            setSkipEnabled(false);
+                        }
+                        goBack();
+                    }}
                     disabled={!canGoBack || nextStepLoading}
                     sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
                 >

package/template-react-vite-muijoy-ink-tauri/.vscode/settings.json

@@ -53,5 +53,8 @@
     ],
     // olther
     "extensions.ignoreRecommendations": false,
-    "prettier.useEditorConfig": false,
+    "workbench.editor.enablePreview": true,
+    "workbench.editorAssociations": {
+        "*.md": "vscode.markdown.preview.editor"
+    },
 }

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

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+
+export default function AnimatedDots() {
+    const dots = [".", ".", "."]; // I caratteri da animare
+
+    return (
+        <motion.span
+            style={{ display: "flex", pointerEvents: "none", userSelect: "none" }}
+            transition={{
+                staggerChildren: 0.2,
+            }}
+            initial='closed'
+            animate='open'
+        >
+            {dots.map((dot, index) => (
+                <motion.span
+                    key={index}
+                    initial={{ y: 0 }}
+                    variants={{
+                        open: {
+                            y: 5,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                        closed: {
+                            y: 0,
+                            transition: {
+                                repeat: Infinity,
+                                duration: 0.5,
+                                ease: "easeInOut",
+                                repeatType: "reverse",
+                            },
+                        },
+                    }}
+                >
+                    {dot}
+                </motion.span>
+            ))}
+        </motion.span>
+    );
+}

package/template-react-vite-muijoy-ink-tauri/src/hooks/useDebouncedEffect.ts

@@ -25,9 +25,9 @@ export default function useDebouncedEffect(
     const { delay = 1000, enabled = true } = options;
 
     useEffect(() => {
-        if (enabled) {
+        if (enabled && delay > 0) {
             const timeout = setTimeout(callback, delay);
             return () => clearTimeout(timeout);
         }
-    }, dependencies);
+    }, [delay, enabled, ...dependencies]);
 }

package/template-react-vite-muijoy-ink-tauri/src/hooks/useInterval.ts

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
  * A custom hook that sets up an interval to call a callback function.
  * @param callback The callback function to call on each interval.
  * @param options An object containing the delay and enabled state for the interval.
+ * @param dependencies The dependencies array that determines when to re-run the effect.
  */
 export default function useInterval(
     callback: () => any,
@@ -18,7 +19,8 @@ export default function useInterval(
          * @default true
          */
         enabled?: boolean;
-    }
+    },
+    dependencies: any[] = []
 ) {
     const savedCallback = useRef<() => any | null>(null);
     const { delay = 1000, enabled = true } = options;
@@ -38,5 +40,5 @@ export default function useInterval(
             const id = setInterval(tick, delay);
             return () => clearInterval(id);
         }
-    }, [delay, enabled]);
+    }, [delay, enabled, ...dependencies]);
 }

package/template-react-vite-muijoy-ink-tauri/src/hooks/useSkipAutoDetector.ts

@@ -1,9 +1,9 @@
-import { useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { SKIP_DELAY } from "../constans";
 import useAutoInfoStore from "../stores/useAutoInfoStore";
 import useSkipStore from "../stores/useSkipStore";
 import useTypewriterStore from "../stores/useTypewriterStore";
+import useDebouncedEffect from "./useDebouncedEffect";
 import useInterval from "./useInterval";
 import useEventListener from "./useKeyDetector";
 import useNarrationFunctions from "./useNarrationFunctions";
@@ -21,26 +21,14 @@ export default function useSkipAutoDetector() {
         enabled: skipEnabled,
     });
 
-    useEffect(() => {
-        if (skipEnabled) {
-            return;
-        }
-        if (autoEnabled && !typewriterInProgress) {
-            if (autoTime) {
-                let millisecond = autoTime * 1000;
-                // Debouncing
-                let timeout = setTimeout(() => {
-                    if (autoEnabled && !skipEnabled) {
-                        goNext();
-                    }
-                }, millisecond);
-
-                return () => {
-                    clearTimeout(timeout);
-                };
-            }
-        }
-    }, [autoTime, autoEnabled, typewriterInProgress, skipEnabled, goNext]);
+    useDebouncedEffect(
+        () => autoEnabled && !skipEnabled && goNext(),
+        {
+            delay: autoTime * 1000,
+            enabled: autoEnabled && !skipEnabled && !typewriterInProgress,
+        },
+        [autoEnabled, skipEnabled, goNext]
+    );
 
     useEventListener({
         type: "keypress",

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

@@ -11,6 +11,7 @@ import { MarkdownTypewriterHooks } from "react-markdown-typewriter";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import { useShallow } from "zustand/react/shallow";
+import AnimatedDots from "../components/AnimatedDots";
 import SliderResizer from "../components/SliderResizer";
 import useDialogueCardStore from "../stores/useDialogueCardStore";
 import useInterfaceStore from "../stores/useInterfaceStore";
@@ -248,10 +249,14 @@ function NarrationScreenText(props: { paragraphRef: RefObject<HTMLDivElement | n
                     delay={typewriterDelay}
                     motionProps={{
                         onAnimationStart: startTypewriter,
-                        onAnimationComplete: endTypewriter,
+                        onAnimationComplete: (definition: "visible" | "hidden") => {
+                            if (definition == "visible") {
+                                endTypewriter();
+                            }
+                        },
                         onCharacterAnimationComplete: handleCharacterAnimationComplete,
                     }}
-                    fallback={<>...</>}
+                    fallback={<AnimatedDots />}
                 >
                     {text}
                 </MarkdownTypewriterHooks>

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

@@ -28,6 +28,7 @@ export default function QuickTools() {
     const setHideInterface = useInterfaceStore((state) => state.editHidden);
     const skipEnabled = useSkipStore((state) => state.enabled);
     const editSkipEnabled = useSkipStore((state) => state.editEnabled);
+    const setSkipEnabled = useSkipStore((state) => state.setEnabled);
     const autoEnabled = useAutoInfoStore((state) => state.enabled);
     const editAutoEnabled = useAutoInfoStore((state) => state.editEnabled);
     const { enqueueSnackbar } = useSnackbar();
@@ -69,7 +70,12 @@ export default function QuickTools() {
                 transition={{ type: "tween" }}
             >
                 <TextMenuButton
-                    onClick={goBack}
+                    onClick={() => {
+                        if (skipEnabled) {
+                            setSkipEnabled(false);
+                        }
+                        goBack();
+                    }}
                     disabled={!canGoBack || nextStepLoading}
                     sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
                 >