create-pixi-vn 1.0.3 → 1.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",

package/template-react-vite-muijoy/src/App.tsx

@@ -9,7 +9,7 @@ export default function App() {
             initializeIndexedDB(),
         ])
         await promileAll
-        return import('./Home')
+        return await import('./Home')
     })
 
     return (

package/template-react-vite-muijoy/src/interceptors/RefreshEventInterceptor.tsx

@@ -10,14 +10,10 @@ export default function RefreshSaveEventInterceptor() {
 
     useEffect(() => {
         loadRefreshSave(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
-        window.addEventListener("beforeunload", async () => {
-            await addRefreshSave()
-        });
+        window.addEventListener("beforeunload", addRefreshSave);
 
         return () => {
-            window.removeEventListener("beforeunload", async () => {
-                await addRefreshSave()
-            });
+            window.removeEventListener("beforeunload", addRefreshSave);
         };
     }, []);
 

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

@@ -1,13 +1,21 @@
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import { Box, Button, FormHelperText, FormLabel } from "@mui/joy";
+import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import useQueryIsFullModeScreen, { IS_FULL_SCREEN_MODE_USE_QUEY_KEY } from '../../use_query/useQueryIsFullModeScreen';
 
 export default function FullScreenSettings() {
-    const [fullScreenEnabled, setFullScreenEnabled] = useState(false)
+    const { data: isFullScreenMode } = useQueryIsFullModeScreen()
+    const [loading, setLoading] = useState(false)
+    const queryClient = useQueryClient()
     const { t } = useTranslation(["ui"]);
 
+    if (document.fullscreenEnabled === false) {
+        return null
+    }
+
     return (
         <>
             <Box>
@@ -19,18 +27,23 @@ export default function FullScreenSettings() {
                 </FormHelperText>
             </Box>
             <Button
+                loading={loading}
                 onClick={() => {
-                    if (fullScreenEnabled) {
-                        document.exitFullscreen()
-                        setFullScreenEnabled(false)
+                    setLoading(true)
+                    let promise: Promise<void>
+                    if (isFullScreenMode) {
+                        promise = document.exitFullscreen()
                     } else {
-                        document.documentElement.requestFullscreen()
-                        setFullScreenEnabled(true)
+                        promise = document.documentElement.requestFullscreen()
                     }
+                    promise.finally(() => {
+                        setLoading(false)
+                        queryClient.invalidateQueries({ queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY] })
+                    })
                 }}
-                startDecorator={fullScreenEnabled ? <FullscreenExitIcon /> : <FullscreenIcon />}
+                startDecorator={isFullScreenMode ? <FullscreenExitIcon /> : <FullscreenIcon />}
             >
-                {fullScreenEnabled ? t('exit_fullscreen') : t('enter_fullscreen')}
+                {isFullScreenMode ? t('exit_fullscreen') : t('enter_fullscreen')}
             </Button>
         </>
     );

package/template-react-vite-muijoy/src/use_query/useQueryIsFullModeScreen.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+
+export const IS_FULL_SCREEN_MODE_USE_QUEY_KEY = "is_full_screen_mode_use_quey_key";
+
+export default function useQueryIsFullModeScreen() {
+	return useQuery({
+		queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+		queryFn: () => {
+			return document.fullscreenElement !== null;
+		},
+	});
+}

package/template-react-vite-muijoy/src/utilities/save-utility.ts

@@ -111,6 +111,8 @@ export async function loadRefreshSave(navigate: (path: string) => void) {
     if (jsonString) {
         navigate("/loading")
         let data: GameSaveData = JSON.parse(jsonString)
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
         return loadSave(data, navigate)
             .then(() => {
                 localStorage.removeItem("refreshSave")

package/template-react-vite-muijoy-ink/src/App.tsx

@@ -11,7 +11,7 @@ export default function App() {
             importAllInkLabels(),
         ])
         await promileAll
-        return import('./Home')
+        return await import('./Home')
     })
 
     return (

package/template-react-vite-muijoy-ink/src/interceptors/RefreshEventInterceptor.tsx

@@ -10,14 +10,10 @@ export default function RefreshSaveEventInterceptor() {
 
     useEffect(() => {
         loadRefreshSave(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
-        window.addEventListener("beforeunload", async () => {
-            await addRefreshSave()
-        });
+        window.addEventListener("beforeunload", addRefreshSave);
 
         return () => {
-            window.removeEventListener("beforeunload", async () => {
-                await addRefreshSave()
-            });
+            window.removeEventListener("beforeunload", addRefreshSave);
         };
     }, []);
 

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

@@ -1,13 +1,21 @@
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import { Box, Button, FormHelperText, FormLabel } from "@mui/joy";
+import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import useQueryIsFullModeScreen, { IS_FULL_SCREEN_MODE_USE_QUEY_KEY } from '../../use_query/useQueryIsFullModeScreen';
 
 export default function FullScreenSettings() {
-    const [fullScreenEnabled, setFullScreenEnabled] = useState(false)
+    const { data: isFullScreenMode } = useQueryIsFullModeScreen()
+    const [loading, setLoading] = useState(false)
+    const queryClient = useQueryClient()
     const { t } = useTranslation(["ui"]);
 
+    if (document.fullscreenEnabled === false) {
+        return null
+    }
+
     return (
         <>
             <Box>
@@ -19,18 +27,23 @@ export default function FullScreenSettings() {
                 </FormHelperText>
             </Box>
             <Button
+                loading={loading}
                 onClick={() => {
-                    if (fullScreenEnabled) {
-                        document.exitFullscreen()
-                        setFullScreenEnabled(false)
+                    setLoading(true)
+                    let promise: Promise<void>
+                    if (isFullScreenMode) {
+                        promise = document.exitFullscreen()
                     } else {
-                        document.documentElement.requestFullscreen()
-                        setFullScreenEnabled(true)
+                        promise = document.documentElement.requestFullscreen()
                     }
+                    promise.finally(() => {
+                        setLoading(false)
+                        queryClient.invalidateQueries({ queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY] })
+                    })
                 }}
-                startDecorator={fullScreenEnabled ? <FullscreenExitIcon /> : <FullscreenIcon />}
+                startDecorator={isFullScreenMode ? <FullscreenExitIcon /> : <FullscreenIcon />}
             >
-                {fullScreenEnabled ? t('exit_fullscreen') : t('enter_fullscreen')}
+                {isFullScreenMode ? t('exit_fullscreen') : t('enter_fullscreen')}
             </Button>
         </>
     );

package/template-react-vite-muijoy-ink/src/use_query/useQueryIsFullModeScreen.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+
+export const IS_FULL_SCREEN_MODE_USE_QUEY_KEY = "is_full_screen_mode_use_quey_key";
+
+export default function useQueryIsFullModeScreen() {
+	return useQuery({
+		queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+		queryFn: () => {
+			return document.fullscreenElement !== null;
+		},
+	});
+}

package/template-react-vite-muijoy-ink/src/utilities/save-utility.ts

@@ -111,6 +111,8 @@ export async function loadRefreshSave(navigate: (path: string) => void) {
     if (jsonString) {
         navigate("/loading")
         let data: GameSaveData = JSON.parse(jsonString)
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
         return loadSave(data, navigate)
             .then(() => {
                 localStorage.removeItem("refreshSave")

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

@@ -11,7 +11,7 @@ export default function App() {
             importAllInkLabels(),
         ])
         await promileAll
-        return import('./Home')
+        return await import('./Home')
     })
 
     return (

package/template-react-vite-muijoy-ink-tauri/src/interceptors/RefreshEventInterceptor.tsx

@@ -10,14 +10,10 @@ export default function RefreshSaveEventInterceptor() {
 
     useEffect(() => {
         loadRefreshSave(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
-        window.addEventListener("beforeunload", async () => {
-            await addRefreshSave()
-        });
+        window.addEventListener("beforeunload", addRefreshSave);
 
         return () => {
-            window.removeEventListener("beforeunload", async () => {
-                await addRefreshSave()
-            });
+            window.removeEventListener("beforeunload", addRefreshSave);
         };
     }, []);
 

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

@@ -1,13 +1,21 @@
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import { Box, Button, FormHelperText, FormLabel } from "@mui/joy";
+import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import useQueryIsFullModeScreen, { IS_FULL_SCREEN_MODE_USE_QUEY_KEY } from '../../use_query/useQueryIsFullModeScreen';
 
 export default function FullScreenSettings() {
-    const [fullScreenEnabled, setFullScreenEnabled] = useState(false)
+    const { data: isFullScreenMode } = useQueryIsFullModeScreen()
+    const [loading, setLoading] = useState(false)
+    const queryClient = useQueryClient()
     const { t } = useTranslation(["ui"]);
 
+    if (document.fullscreenEnabled === false) {
+        return null
+    }
+
     return (
         <>
             <Box>
@@ -19,18 +27,23 @@ export default function FullScreenSettings() {
                 </FormHelperText>
             </Box>
             <Button
+                loading={loading}
                 onClick={() => {
-                    if (fullScreenEnabled) {
-                        document.exitFullscreen()
-                        setFullScreenEnabled(false)
+                    setLoading(true)
+                    let promise: Promise<void>
+                    if (isFullScreenMode) {
+                        promise = document.exitFullscreen()
                     } else {
-                        document.documentElement.requestFullscreen()
-                        setFullScreenEnabled(true)
+                        promise = document.documentElement.requestFullscreen()
                     }
+                    promise.finally(() => {
+                        setLoading(false)
+                        queryClient.invalidateQueries({ queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY] })
+                    })
                 }}
-                startDecorator={fullScreenEnabled ? <FullscreenExitIcon /> : <FullscreenIcon />}
+                startDecorator={isFullScreenMode ? <FullscreenExitIcon /> : <FullscreenIcon />}
             >
-                {fullScreenEnabled ? t('exit_fullscreen') : t('enter_fullscreen')}
+                {isFullScreenMode ? t('exit_fullscreen') : t('enter_fullscreen')}
             </Button>
         </>
     );

package/template-react-vite-muijoy-ink-tauri/src/use_query/useQueryIsFullModeScreen.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+
+export const IS_FULL_SCREEN_MODE_USE_QUEY_KEY = "is_full_screen_mode_use_quey_key";
+
+export default function useQueryIsFullModeScreen() {
+	return useQuery({
+		queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+		queryFn: () => {
+			return document.fullscreenElement !== null;
+		},
+	});
+}

package/template-react-vite-muijoy-ink-tauri/src/utilities/save-utility.ts

@@ -111,6 +111,8 @@ export async function loadRefreshSave(navigate: (path: string) => void) {
     if (jsonString) {
         navigate("/loading")
         let data: GameSaveData = JSON.parse(jsonString)
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
         return loadSave(data, navigate)
             .then(() => {
                 localStorage.removeItem("refreshSave")

package/template-react-vite-muijoy-tauri/src/App.tsx

@@ -9,7 +9,7 @@ export default function App() {
             initializeIndexedDB(),
         ])
         await promileAll
-        return import('./Home')
+        return await import('./Home')
     })
 
     return (

package/template-react-vite-muijoy-tauri/src/interceptors/RefreshEventInterceptor.tsx

@@ -10,14 +10,10 @@ export default function RefreshSaveEventInterceptor() {
 
     useEffect(() => {
         loadRefreshSave(navigate).then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
-        window.addEventListener("beforeunload", async () => {
-            await addRefreshSave()
-        });
+        window.addEventListener("beforeunload", addRefreshSave);
 
         return () => {
-            window.removeEventListener("beforeunload", async () => {
-                await addRefreshSave()
-            });
+            window.removeEventListener("beforeunload", addRefreshSave);
         };
     }, []);
 

package/template-react-vite-muijoy-tauri/src/screens/settings/FullScreenSettings.tsx

@@ -1,13 +1,21 @@
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import { Box, Button, FormHelperText, FormLabel } from "@mui/joy";
+import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import useQueryIsFullModeScreen, { IS_FULL_SCREEN_MODE_USE_QUEY_KEY } from '../../use_query/useQueryIsFullModeScreen';
 
 export default function FullScreenSettings() {
-    const [fullScreenEnabled, setFullScreenEnabled] = useState(false)
+    const { data: isFullScreenMode } = useQueryIsFullModeScreen()
+    const [loading, setLoading] = useState(false)
+    const queryClient = useQueryClient()
     const { t } = useTranslation(["ui"]);
 
+    if (document.fullscreenEnabled === false) {
+        return null
+    }
+
     return (
         <>
             <Box>
@@ -19,18 +27,23 @@ export default function FullScreenSettings() {
                 </FormHelperText>
             </Box>
             <Button
+                loading={loading}
                 onClick={() => {
-                    if (fullScreenEnabled) {
-                        document.exitFullscreen()
-                        setFullScreenEnabled(false)
+                    setLoading(true)
+                    let promise: Promise<void>
+                    if (isFullScreenMode) {
+                        promise = document.exitFullscreen()
                     } else {
-                        document.documentElement.requestFullscreen()
-                        setFullScreenEnabled(true)
+                        promise = document.documentElement.requestFullscreen()
                     }
+                    promise.finally(() => {
+                        setLoading(false)
+                        queryClient.invalidateQueries({ queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY] })
+                    })
                 }}
-                startDecorator={fullScreenEnabled ? <FullscreenExitIcon /> : <FullscreenIcon />}
+                startDecorator={isFullScreenMode ? <FullscreenExitIcon /> : <FullscreenIcon />}
             >
-                {fullScreenEnabled ? t('exit_fullscreen') : t('enter_fullscreen')}
+                {isFullScreenMode ? t('exit_fullscreen') : t('enter_fullscreen')}
             </Button>
         </>
     );

package/template-react-vite-muijoy-tauri/src/use_query/useQueryIsFullModeScreen.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/react-query";
+
+export const IS_FULL_SCREEN_MODE_USE_QUEY_KEY = "is_full_screen_mode_use_quey_key";
+
+export default function useQueryIsFullModeScreen() {
+	return useQuery({
+		queryKey: [IS_FULL_SCREEN_MODE_USE_QUEY_KEY],
+		queryFn: () => {
+			return document.fullscreenElement !== null;
+		},
+	});
+}

package/template-react-vite-muijoy-tauri/src/utilities/save-utility.ts

@@ -111,6 +111,8 @@ export async function loadRefreshSave(navigate: (path: string) => void) {
     if (jsonString) {
         navigate("/loading")
         let data: GameSaveData = JSON.parse(jsonString)
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+
         return loadSave(data, navigate)
             .then(() => {
                 localStorage.removeItem("refreshSave")