create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/game-status-store.ts

@@ -0,0 +1,19 @@
+import { Store } from "@tanstack/store";
+
+type GameStatusStore = {
+    /**
+     * If the step is loading
+     */
+    loading: boolean;
+};
+
+export namespace GameStatus {
+    export const store = new Store<GameStatusStore>({ loading: false });
+
+    /**
+     * Set the loading state of the step
+     */
+    export function setLoading(value: boolean) {
+        store.setState((state) => ({ ...state, loading: value }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/interface-settings-store.ts

@@ -0,0 +1,49 @@
+import { Store } from "@tanstack/store";
+
+type InterfaceSettingsStorage = {
+    /**
+     * Height of the dialogue card as percentage (0-100)
+     */
+    dialogueCardHeight: number;
+    /**
+     * Width of the dialogue image as percentage (0-100)
+     */
+    dialogueCardImageWidth: number;
+};
+
+export namespace InterfaceSettings {
+    export const store = new Store<InterfaceSettingsStorage>({
+        dialogueCardHeight: Number(localStorage.getItem("dialogue_card_height") ?? 30),
+        dialogueCardImageWidth: Number(localStorage.getItem("dialogue_card_image_width") ?? 16),
+    });
+
+    /**
+     * Set the interface visibility
+     */
+    export function setHidden(value: boolean) {
+        store.setState((state) => ({ ...state, hidden: value }));
+    }
+
+    /**
+     * Show the interface (set hidden to false)
+     */
+    export function show() {
+        store.setState((state) => ({ ...state, hidden: false }));
+    }
+
+    /**
+     * Set the dialogue card height and persist
+     */
+    export function setDialogueCardHeight(value: number) {
+        localStorage.setItem("dialogue_card_height", value.toString());
+        store.setState((state) => ({ ...state, dialogueCardHeight: value }));
+    }
+
+    /**
+     * Set the dialogue image width and persist
+     */
+    export function setDialogueCardImageWidth(value: number) {
+        localStorage.setItem("dialogue_card_image_width", value.toString());
+        store.setState((state) => ({ ...state, dialogueCardImageWidth: value }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/master-sound-storage.ts

@@ -0,0 +1,68 @@
+import { sound } from "@drincs/pixi-vn";
+import { Store } from "@tanstack/store";
+
+type MasterSoundStorage = {
+    /**
+     * The master volume (0-100)
+     */
+    volume: number;
+    /**
+     * Whether the master sound is muted
+     */
+    muted: boolean;
+};
+
+export namespace MasterSound {
+    export const store = new Store<MasterSoundStorage>({
+        volume: Number(localStorage.getItem(`master_volume`) ?? sound.volumeAll * 100),
+        muted: localStorage.getItem(`master_muted`) === "true",
+    });
+
+    /**
+     * Initialize the master sound storage, syncing the sound library with stored values
+     */
+    export function init() {
+        const muted = store.state.muted;
+        setVolume(store.state.volume);
+        setMuted(muted);
+    }
+
+    /**
+     * Set the master volume (0-100)
+     * @param volume The master volume to set (0-100)
+     */
+    export function setVolume(volume: number) {
+        if (store.state.muted) {
+            setMuted(false);
+        }
+        sound.volumeAll = volume / 100;
+        localStorage.setItem(`master_volume`, volume.toString());
+        store.setState((state) => ({ ...state, volume: Math.round(volume) }));
+
+        if (Math.round(volume) === 0 && !store.state.muted) {
+            setMuted(true);
+        }
+    }
+
+    /**
+     * Set the master muted state
+     * @param muted Whether the master sound should be muted
+     */
+    export function setMuted(muted: boolean) {
+        if (muted) {
+            sound.muteAll();
+        } else {
+            sound.unmuteAll();
+        }
+        localStorage.setItem(`master_muted`, muted.toString());
+        store.setState((state) => ({ ...state, muted }));
+    }
+
+    /**
+     * Toggle the master muted state
+     */
+    export function toggleMuted() {
+        const curr = sound.toggleMuteAll();
+        setMuted(curr);
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/memo-store.ts

@@ -0,0 +1,24 @@
+import { storage } from "@drincs/pixi-vn";
+import { Store } from "@tanstack/store";
+
+const SELECTED_QUEST_KEY = "selectedQuestId";
+
+export namespace Memo {
+    export const store = new Store<{ open: boolean; selectedQuestId: string | undefined }>({
+        open: false,
+        selectedQuestId: storage.get<string>(SELECTED_QUEST_KEY),
+    });
+
+    export function toggleOpen() {
+        store.setState((state) => ({ ...state, open: !state.open }));
+    }
+
+    export function setOpen(value: boolean) {
+        store.setState((state) => ({ ...state, open: value }));
+    }
+
+    export function setSelectedQuestId(id: string | undefined) {
+        storage.set(SELECTED_QUEST_KEY, id);
+        store.setState((state) => ({ ...state, selectedQuestId: id }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/quick-actions-wheel-store.ts

@@ -0,0 +1,17 @@
+import { Store } from "@tanstack/store";
+
+export namespace QuickActionsWheelState {
+    export const store = new Store<{
+        open: boolean;
+    }>({
+        open: false,
+    });
+
+    export function setOpen(value: boolean) {
+        store.setState((state) => ({ ...state, open: value }));
+    }
+
+    export function toggleOpen() {
+        store.setState((state) => ({ ...state, open: !state.open }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/save-menu-pagination-store.ts

@@ -0,0 +1,24 @@
+import { Store } from "@tanstack/store";
+
+type SaveMenuPaginationStorage = {
+    /**
+     * The current page of the save screen
+     */
+    page: number;
+};
+
+export namespace SaveMenuPagination {
+    export const store = new Store<SaveMenuPaginationStorage>({
+        page: localStorage.getItem("save_screen_page")
+            ? parseInt(localStorage.getItem("save_screen_page") as string, 10)
+            : 0,
+    });
+
+    /**
+     * Set the page of the save screen
+     */
+    export function setPage(value: number) {
+        localStorage.setItem("save_screen_page", value.toString());
+        store.setState((state) => ({ ...state, page: value }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/search-param-store.ts

@@ -0,0 +1,20 @@
+import { Store } from "@tanstack/store";
+
+export namespace SearchParams {
+    export const store = new Store<Record<string, unknown>>({});
+
+    /**
+     * Set the value of a URL search param in the store.
+     * Pass `undefined` to clear the param.
+     */
+    export function set(field: string, value: unknown) {
+        store.setState((state) => ({ ...state, [field]: value }));
+    }
+
+    /**
+     * Set multiple search params at once. This is more efficient than calling `set()` multiple times since it only triggers one state update.
+     */
+    export function setMany(values: Record<string, unknown>) {
+        store.setState((state) => ({ ...state, ...values }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/skip-settings-store.ts

@@ -0,0 +1,26 @@
+import { Store } from "@tanstack/store";
+
+type SkipSettingsStorage = {
+    /**
+     * Whether the skip is enabled
+     */
+    enabled: boolean;
+};
+
+export namespace SkipSettings {
+    export const store = new Store<SkipSettingsStorage>({ enabled: false });
+
+    /**
+     * Toggle the skip state
+     */
+    export function toggleEnabled() {
+        store.setState((state) => ({ ...state, enabled: !state.enabled }));
+    }
+
+    /**
+     * Set the skip state
+     */
+    export function setEnabled(value: boolean) {
+        store.setState((state) => ({ ...state, enabled: value }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/stores/text-display-settings-store.ts

@@ -0,0 +1,81 @@
+import { Store } from "@tanstack/store";
+
+type TextDisplayStorage = {
+    /**
+     * The delay in milliseconds between each character
+     */
+    delay: number;
+    /**
+     * Whether the typewriter effect is in progress
+     */
+    inProgress: boolean;
+    /**
+     * Whether the typewriter effect should be force-completed instantly
+     */
+    forceComplete: boolean;
+    /**
+     * The font size in percent (100 = default)
+     */
+    fontSize: number;
+};
+
+export namespace TextDisplaySettings {
+    const initialFontSize = Number(localStorage.getItem("text_display_font_size") ?? 100);
+    document.documentElement.style.fontSize = `${initialFontSize}%`;
+
+    export const store = new Store<TextDisplayStorage>({
+        delay: Number(localStorage.getItem("typewriter_delay_millisecond") ?? 10),
+        inProgress: false,
+        forceComplete: false,
+        fontSize: initialFontSize,
+    });
+
+    /**
+     * Set the delay in milliseconds between each character
+     */
+    export function setDelay(value: number) {
+        if (typeof value === "number") {
+            localStorage.setItem("typewriter_delay_millisecond", value.toString());
+            store.setState((state) => ({ ...state, delay: value }));
+        }
+    }
+
+    /**
+     * Set the font size in percent
+     */
+    export function setFontSize(value: number) {
+        if (typeof value === "number") {
+            localStorage.setItem("text_display_font_size", value.toString());
+            store.setState((state) => ({ ...state, fontSize: value }));
+            document.documentElement.style.fontSize = `${value}%`;
+        }
+    }
+
+    /**
+     * Start the typewriter effect
+     */
+    export function start() {
+        store.setState((state) => ({ ...state, inProgress: true }));
+    }
+
+    /**
+     * End the typewriter effect
+     */
+    export function end() {
+        store.setState((state) => ({ ...state, inProgress: false, forceComplete: false }));
+    }
+
+    /**
+     * Force the typewriter effect to complete instantly
+     */
+    export function complete() {
+        store.setState((state) => ({ ...state, forceComplete: true, inProgress: false }));
+    }
+
+    /**
+     * Clear the forceComplete flag before advancing to the next step
+     */
+    export function resetForNext() {
+        store.setState((state) => ({ ...state, forceComplete: false }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/utils/assets-utility.ts

@@ -0,0 +1,39 @@
+import { manifest } from "@/assets";
+import { AUDIO_BUNDLE_NAME } from "@/constants";
+import { mainMap } from "@/content/maps";
+import type { FileRouteTypes } from "@/routeTree.gen";
+import { Assets, sound } from "@drincs/pixi-vn";
+
+let assetsInitialized = false;
+
+/**
+ * Define all the assets that will be used in the game.
+ * This function will be called before the game starts.
+ * You can read more about assets management in the documentation: https://pixi-vn.com/start/assets-management.html
+ */
+export async function defineAssets() {
+    if (!assetsInitialized) {
+        await Assets.init({ manifest });
+        assetsInitialized = true;
+    }
+
+    // The game will not start until these asserts are loaded.
+    await Assets.loadBundle("/" as FileRouteTypes["fullPaths"]);
+
+    // The audio bundle will be loaded in the background, so it will be available when needed, but it won't block the game start.
+    sound.backgroundLoadBundle(AUDIO_BUNDLE_NAME);
+
+    // The game will start immediately, but these asserts will be loaded in the background.
+    Assets.backgroundLoadBundle(mainMap.id);
+}
+
+/**
+ * Get the PixiJS asset from the given asset string.
+ * If the asset is not a PixiAsset, it will return the asset as is.
+ * @param asset - The asset string to resolve.
+ * @returns The resolved PixiJS asset or the original asset string.
+ */
+export function getPixiJSAsset(asset: string) {
+    // check if the asset is a PixiAsset
+    return Assets.resolver.resolve(asset).src || asset;
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/src/lib/utils/db-utility.ts

@@ -0,0 +1,204 @@
+const INDEXED_DB_VERSION = 2; // Increment this version number when you change the database schema
+const INDEXED_DB_NAME = "game_db";
+export const INDEXED_DB_SAVE_TABLE = "saves";
+
+export function initializeIndexedDB(): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(INDEXED_DB_NAME, INDEXED_DB_VERSION);
+        // check if the object store exists
+        request.onupgradeneeded = (_event) => {
+            const db = request.result;
+            if (!db.objectStoreNames.contains(INDEXED_DB_SAVE_TABLE)) {
+                // create the object store
+                const objectStore = db.createObjectStore(INDEXED_DB_SAVE_TABLE, {
+                    keyPath: "id",
+                    autoIncrement: true,
+                });
+                objectStore.createIndex("id", "id", { unique: true });
+                objectStore.createIndex("date", "date", { unique: false });
+                objectStore.createIndex("name", "name", { unique: false });
+                objectStore.createIndex("gameVersion", "gameVersion", { unique: false });
+            }
+        };
+
+        request.onsuccess = (_event) => {
+            resolve();
+        };
+        request.onerror = (event) => {
+            console.error("Error opening indexDB", event);
+            reject();
+        };
+    });
+}
+
+export async function putRowIntoIndexDB<T extends {}>(tableName: string, data: T): Promise<T> {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(INDEXED_DB_NAME);
+
+        request.onsuccess = (_event) => {
+            const db = request.result;
+            // run onupgradeneeded before onsuccess
+            if (!db.objectStoreNames.contains(tableName)) {
+                console.error("Object store rescues does not exist");
+                reject();
+            }
+            const transaction = db.transaction([tableName], "readwrite");
+            const objectStore = transaction.objectStore(tableName);
+            const setRequest = objectStore.put(data);
+            setRequest.onsuccess = (_event) => {
+                resolve(data);
+            };
+            setRequest.onerror = (event) => {
+                console.error("Error adding save data to indexDB", event);
+                reject();
+            };
+        };
+        request.onerror = (event) => {
+            console.error("Error adding save data to indexDB", event);
+        };
+    });
+}
+
+export async function getRowFromIndexDB<T extends {}>(
+    tableName: string,
+    id: number | string,
+): Promise<T | null> {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(INDEXED_DB_NAME);
+        request.onsuccess = (_event) => {
+            const db = request.result;
+            // check if the object store exists
+            if (!db.objectStoreNames.contains(tableName)) {
+                resolve(null);
+                return;
+            }
+            const transaction = db.transaction([tableName], "readwrite");
+            const objectStore = transaction.objectStore(tableName);
+            const getRequest = objectStore.get(id);
+            getRequest.onsuccess = (_event) => {
+                resolve(getRequest.result);
+            };
+            getRequest.onerror = (event) => {
+                console.error("Error getting save data from indexDB", event);
+                reject();
+            };
+        };
+        request.onerror = (event) => {
+            console.error("Error opening indexDB", event);
+            reject();
+        };
+    });
+}
+
+export async function getLastRowFromIndexDB<T extends {}>(tableName: string): Promise<T | null> {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(INDEXED_DB_NAME);
+        request.onsuccess = (_event) => {
+            const db = request.result;
+            // check if the object store exists
+            if (!db.objectStoreNames.contains(tableName)) {
+                resolve(null);
+                return;
+            }
+            const transaction = db.transaction([tableName], "readwrite");
+            const objectStore = transaction.objectStore(tableName);
+            const getRequest = objectStore.openCursor(null, "prev");
+            getRequest.onsuccess = (_event) => {
+                const cursor = getRequest.result;
+                if (cursor) {
+                    resolve(cursor.value);
+                } else {
+                    resolve(null);
+                }
+            };
+            getRequest.onerror = (event) => {
+                console.error("Error getting save data from indexDB", event);
+                reject();
+            };
+        };
+        request.onerror = (event) => {
+            console.error("Error opening indexDB", event);
+            reject();
+        };
+    });
+}
+
+export async function deleteRowFromIndexDB(tableName: string, id: number | string): Promise<void> {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(INDEXED_DB_NAME);
+        request.onsuccess = (_event) => {
+            const db = request.result;
+            const transaction = db.transaction([tableName], "readwrite");
+            const objectStore = transaction.objectStore(tableName);
+            const deleteRequest = objectStore.delete(id);
+            deleteRequest.onsuccess = (_event) => {
+                resolve();
+            };
+            deleteRequest.onerror = (event) => {
+                console.error("Error deleting save data from indexDB", event);
+                reject();
+            };
+        };
+        request.onerror = (event) => {
+            console.error("Error deleting save data from indexDB", event);
+        };
+    });
+}
+
+export async function getListFromIndexDB<T extends {}>(
+    tableName: string,
+    options: {
+        order?: { field: keyof T; direction: IDBCursorDirection };
+        pagination?: { offset: number; limit: number };
+    } = {},
+): Promise<T[]> {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(INDEXED_DB_NAME);
+        request.onsuccess = (_event) => {
+            const db = request.result;
+            // check if the object store exists
+            if (!db.objectStoreNames.contains(tableName)) {
+                resolve([]);
+                return;
+            }
+            const transaction = db.transaction([tableName], "readwrite");
+            const objectStore = transaction.objectStore(tableName);
+            const getRequest = options.order
+                ? objectStore
+                      .index(options.order.field as string)
+                      .openCursor(null, options.order.direction)
+                : objectStore.openCursor();
+            const results: T[] = [];
+            let counter = 0;
+            const limit = options.pagination?.limit ?? Infinity;
+            const offset = options.pagination?.offset ?? 0;
+            let advanced = false;
+            getRequest.onsuccess = (_event) => {
+                const cursor = getRequest.result;
+                if (cursor) {
+                    if (counter >= offset) {
+                        results.push(cursor.value);
+                        if (results.length >= limit) {
+                            resolve(results);
+                            advanced = true;
+                        }
+                    }
+                    counter++;
+                    cursor.continue();
+                } else {
+                    if (!advanced) {
+                        resolve(results);
+                    }
+                }
+            };
+            getRequest.onerror = (event) => {
+                console.error("Error getting save data from indexDB", event);
+                reject();
+            };
+        };
+        request.onerror = (event) => {
+            console.error("Error opening indexDB", event);
+            reject();
+        };
+    });
+}