create-pixi-vn 2.1.4 → 2.1.5

package/template-nqtr-react-vite-muijoy-tauri/src/components/menus/settings/quick-menus.tsx

@@ -6,7 +6,14 @@ import { useSetSearchParamState } from "@/lib/hooks/navigation-hooks";
 import { useQuit } from "@/lib/hooks/quit-hooks";
 import { Game } from "@drincs/pixi-vn";
 import { useLocation, useNavigate } from "@tanstack/react-router";
-import { Gamepad2Icon, HistoryIcon, LogOutIcon, PowerIcon, SaveIcon } from "lucide-react";
+import {
+    Gamepad2Icon,
+    HistoryIcon,
+    LogOutIcon,
+    PowerIcon,
+    SaveIcon,
+    StethoscopeIcon,
+} from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 export function QuickMenus() {
@@ -19,6 +26,7 @@ export function QuickMenus() {
                 {isInGame && <OpenHistorySettingButton />}
                 <SaveLoadMenuButton />
                 <OpenControlsListSettingButton />
+                <OpenDiagnosticsSettingButton />
             </div>
             {isInGame && <Separator />}
             {isInGame && <ReturnMainMenuButton />}
@@ -51,6 +59,29 @@ export function OpenControlsListSettingButton() {
     );
 }
 
+export function OpenDiagnosticsSettingButton() {
+    const { t } = useTranslation(["ui"]);
+    const setSettingsOpen = useSetSearchParamState<boolean>("settings");
+    const setSettingsTab = useSetSearchParamState<string>("settings_tab");
+
+    return (
+        <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+                setSettingsOpen(true);
+                setSettingsTab("menus/diagnostics");
+            }}
+        >
+            <StethoscopeIcon />
+            {t("diagnostics")}
+            <KbdGroup className="ml-auto">
+                <Kbd>F8</Kbd>
+            </KbdGroup>
+        </Button>
+    );
+}
+
 export function ReturnMainMenuButton() {
     const navigate = useNavigate();
     const { t } = useTranslation(["ui"]);

package/template-nqtr-react-vite-muijoy-tauri/src/lib/hooks/device-diagnostics-hooks.ts

@@ -0,0 +1,96 @@
+import { systemInfo } from "@/lib/system-info";
+import {
+    type DeviceDiagnosticsSnapshot,
+    type NativeDiagnostics,
+    detectBrowserEngine,
+    detectPlatform,
+    getBrowserCapabilities,
+    getCurrentFps,
+    getEngineVersion,
+    getGameVersion,
+    getJsMemoryInfo,
+    getMobileDiagnostics,
+    getMotionVersion,
+    getPixiJsVersion,
+    getPixiVnVersion,
+    getResolutionInfo,
+    getToneJsVersion,
+    getWebglDiagnostics,
+} from "@/lib/utils/device-diagnostics-utility";
+import { useEffect, useMemo, useState } from "react";
+
+const LIVE_REFRESH_INTERVAL_MS = 1000;
+
+/**
+ * WebGL support, browser capabilities, UA, platform and engine don't change during a session,
+ * so they're probed once. FPS, resolution and JS memory are polled since they change live.
+ */
+export function useDeviceDiagnostics(): DeviceDiagnosticsSnapshot {
+    const webgl = useMemo(() => getWebglDiagnostics(), []);
+    const capabilities = useMemo(() => getBrowserCapabilities(), []);
+    const platform = useMemo(() => detectPlatform(), []);
+    const browserEngine = useMemo(() => detectBrowserEngine(), []);
+    const engineVersion = useMemo(() => getEngineVersion(), []);
+    const gameVersion = useMemo(() => getGameVersion(), []);
+    const pixiJsVersion = useMemo(() => getPixiJsVersion(), []);
+    const pixiVnVersion = useMemo(() => getPixiVnVersion(), []);
+    const toneJsVersion = useMemo(() => getToneJsVersion(), []);
+    const motionVersion = useMemo(() => getMotionVersion(), []);
+
+    const [resolution, setResolution] = useState(() => getResolutionInfo());
+    const [mobile, setMobile] = useState(() => getMobileDiagnostics());
+    const [memory, setMemory] = useState(() => getJsMemoryInfo());
+    const [fps, setFps] = useState<number | null>(() => getCurrentFps());
+    // Only ever populated inside the Tauri app — stays null in the browser build.
+    const [native, setNative] = useState<NativeDiagnostics | null>(null);
+
+    useEffect(() => {
+        let cancelled = false;
+        Promise.all([systemInfo.getSystemInfo(), systemInfo.getWebviewVersion()]).then(
+            ([info, webviewVersion]) => {
+                if (cancelled || !info) return;
+                setNative({ ...info, webviewVersion });
+            },
+        );
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
+    useEffect(() => {
+        // A resize also fires on orientation changes, so refresh both together.
+        const onResize = () => {
+            setResolution(getResolutionInfo());
+            setMobile(getMobileDiagnostics());
+        };
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFps(getCurrentFps());
+            setMemory(getJsMemoryInfo());
+        }, LIVE_REFRESH_INTERVAL_MS);
+        return () => clearInterval(interval);
+    }, []);
+
+    return {
+        webgl,
+        capabilities,
+        mobile,
+        native,
+        resolution,
+        memory,
+        fps,
+        userAgent: navigator.userAgent,
+        platform,
+        browserEngine,
+        engineVersion,
+        gameVersion,
+        pixiJsVersion,
+        pixiVnVersion,
+        toneJsVersion,
+        motionVersion,
+    };
+}

package/template-nqtr-react-vite-muijoy-tauri/src/lib/hooks/hotkeys-hooks.ts

@@ -175,6 +175,11 @@ export function useSettingsHotkeys(): null {
         setSettingsTab("menus/controls");
     }, [setSettingsOpen, setSettingsTab]);
 
+    const openDiagnosticsPage = useCallback(() => {
+        setSettingsOpen(true);
+        setSettingsTab("menus/diagnostics");
+    }, [setSettingsOpen, setSettingsTab]);
+
     useHotkeys([
         {
             hotkey: "Escape",
@@ -197,6 +202,17 @@ export function useSettingsHotkeys(): null {
                 },
             },
         },
+        {
+            hotkey: "F8",
+            callback: openDiagnosticsPage,
+            options: {
+                enabled: !isAnyMenuOrDialogOpen,
+                meta: {
+                    name: t("diagnostics"),
+                    description: t("diagnostics_hotkey_description"),
+                },
+            },
+        },
     ]);
 
     return null;

package/template-nqtr-react-vite-muijoy-tauri/src/lib/system-info.ts

@@ -0,0 +1,54 @@
+/**
+ * Native system info — thin wrappers around Tauri commands exposed by
+ * `src-tauri/src/system_info.rs`. Safe to call even when running outside
+ * Tauri (web mode): functions resolve to `null` instead of throwing.
+ *
+ * These expose OS/distro and WebView engine details that browsers
+ * deliberately don't surface to JS (to limit fingerprinting).
+ */
+
+import { invoke } from "@tauri-apps/api/core";
+
+const isTauri = typeof window !== "undefined" && "__TAURI__" in window;
+
+export interface NativeSystemInfo {
+    /** Specific OS/distro name (e.g. "Ubuntu", "Windows", "Mac OS"), not just the generic platform. */
+    osType: string;
+    osVersion: string;
+    bitness: string;
+    architecture: string;
+}
+
+interface RawSystemInfo {
+    os_type: string;
+    os_version: string;
+    bitness: string;
+    architecture: string;
+}
+
+async function call<T>(cmd: string): Promise<T | null> {
+    if (!isTauri) return null;
+    try {
+        return await invoke<T>(cmd);
+    } catch {
+        return null;
+    }
+}
+
+export namespace systemInfo {
+    export async function getSystemInfo(): Promise<NativeSystemInfo | null> {
+        const raw = await call<RawSystemInfo>("get_system_info");
+        if (!raw) return null;
+        return {
+            osType: raw.os_type,
+            osVersion: raw.os_version,
+            bitness: raw.bitness,
+            architecture: raw.architecture,
+        };
+    }
+
+    /** Underlying WebView engine version (WebView2, WebKitGTK, WKWebView, Android System WebView). */
+    export async function getWebviewVersion(): Promise<string | null> {
+        return call<string>("get_webview_version");
+    }
+}