create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-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-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-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-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();
+        };
+    });
+}

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

@@ -0,0 +1,13 @@
+import type { PixiUIProp } from "@/models/nqtr/ui-elements";
+import TimeSlotsImage from "@/models/TimeSlotsImage";
+import type { OnRunProps } from "@drincs/nqtr";
+
+export async function normalizePixiElement(element: PixiUIProp, props: OnRunProps) {
+    if (typeof element === "function") {
+        element = await element(props);
+    }
+    if (element instanceof TimeSlotsImage) {
+        element = element.src;
+    }
+    return element;
+}

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

@@ -0,0 +1,152 @@
+import {
+    deleteRowFromIndexDB,
+    getLastRowFromIndexDB,
+    getListFromIndexDB,
+    getRowFromIndexDB,
+    INDEXED_DB_SAVE_TABLE,
+    putRowIntoIndexDB,
+} from "@/lib/utils/db-utility";
+import type GameSaveData from "@/models/GameSaveData";
+import { canvas, Game } from "@drincs/pixi-vn";
+
+const SAVE_FILE_EXTENSION = "json";
+const REFRESH_SAVE_LOCAL_STORAGE_KEY = "refresh_save";
+
+export function createGameSave(options?: { image?: string; name?: string }): GameSaveData {
+    const { image, name = "" } = options || {};
+    return {
+        saveData: Game.exportGameState(),
+        gameVersion: __APP_VERSION__,
+        date: new Date(),
+        name: name,
+        image: image,
+    };
+}
+
+export async function loadSave(saveData: GameSaveData) {
+    await Game.restoreGameState(saveData.saveData);
+}
+
+export async function saveGameToIndexDB(
+    info: Partial<GameSaveData> & { id?: number } = {},
+    data = createGameSave(),
+): Promise<GameSaveData & { id: number }> {
+    const { image = await canvas.extractImage(), ...rest } = info;
+    const item = {
+        ...data,
+        image: image,
+        ...rest,
+    };
+    if (item.id === undefined) {
+        const lastSave = await getLastRowFromIndexDB<GameSaveData & { id: number }>(
+            INDEXED_DB_SAVE_TABLE,
+        );
+        if (lastSave) {
+            item.id = lastSave.id + 1;
+        } else {
+            item.id = 0;
+        }
+    }
+    await putRowIntoIndexDB(INDEXED_DB_SAVE_TABLE, item);
+    if (item.id) {
+        return item as GameSaveData & { id: number };
+    }
+    return (await getLastSaveFromIndexDB()) as GameSaveData & { id: number };
+}
+
+export async function getSaveFromIndexDB(
+    id: number,
+): Promise<(GameSaveData & { id: number }) | null> {
+    return await getRowFromIndexDB(INDEXED_DB_SAVE_TABLE, id);
+}
+
+export async function getLastSaveFromIndexDB(): Promise<(GameSaveData & { id: number }) | null> {
+    const list = await getListFromIndexDB<GameSaveData & { id: number }>(INDEXED_DB_SAVE_TABLE, {
+        pagination: { limit: 1, offset: 0 },
+        order: { field: "date", direction: "prev" },
+    });
+    const indexedDbSave = list.length > 0 ? list[0] : null;
+
+    const refreshJsonString = localStorage.getItem(REFRESH_SAVE_LOCAL_STORAGE_KEY);
+    if (refreshJsonString) {
+        const refreshSave: GameSaveData & { id: number } = {
+            ...(JSON.parse(refreshJsonString) as GameSaveData),
+            id: -1,
+        };
+        if (!indexedDbSave || new Date(refreshSave.date) > new Date(indexedDbSave.date)) {
+            return refreshSave;
+        }
+    }
+
+    return indexedDbSave;
+}
+
+export async function deleteSaveFromIndexDB(id: number): Promise<void> {
+    return await deleteRowFromIndexDB(INDEXED_DB_SAVE_TABLE, id);
+}
+
+export function downloadGameSave(data: GameSaveData = createGameSave()) {
+    const jsonString = JSON.stringify(data);
+    // download the save data as a JSON file
+    const blob = new Blob([jsonString], { type: "application/json" });
+    // download the file
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${__APP_NAME__}-${__APP_VERSION__}-${data.name} ${data.date.toISOString()}.${SAVE_FILE_EXTENSION}`;
+    a.click();
+}
+
+export function loadGameSaveFromFile(afterLoad?: (error?: Error) => void) {
+    // load the save data from a JSON file
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = `application/${SAVE_FILE_EXTENSION}`;
+    input.onchange = (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const jsonString = e.target?.result as string;
+                const data: GameSaveData = JSON.parse(jsonString);
+                // load the save data from the JSON string
+                loadSave(data)
+                    .then(() => {
+                        afterLoad?.();
+                    })
+                    .catch((err) => {
+                        afterLoad?.(err);
+                    });
+            };
+            reader.readAsText(file);
+        }
+    };
+    input.click();
+}
+
+export async function addRefreshSave() {
+    const data = createGameSave();
+    const jsonString = JSON.stringify(data);
+    if (jsonString) {
+        localStorage.setItem(REFRESH_SAVE_LOCAL_STORAGE_KEY, jsonString);
+    }
+}
+
+export async function loadRefreshSave(): Promise<boolean> {
+    const jsonString = localStorage.getItem(REFRESH_SAVE_LOCAL_STORAGE_KEY);
+    if (jsonString) {
+        const data: GameSaveData = JSON.parse(jsonString);
+
+        return loadSave(data)
+            .then(() => {
+                localStorage.removeItem(REFRESH_SAVE_LOCAL_STORAGE_KEY);
+                return true;
+            })
+            .catch(() => {
+                Game.clear();
+                return false;
+            });
+    } else {
+        return false;
+    }
+}

package/template-nqtr-react-vite-muijoy-tauri/src/lib/utils/scroll-utils.ts

@@ -0,0 +1,24 @@
+export function isScrollableElement(element: HTMLElement | null): boolean {
+    if (!element) return false;
+
+    const style = window.getComputedStyle(element);
+    const overflowY = style.overflowY;
+
+    return (
+        (overflowY === "auto" || overflowY === "scroll") &&
+        element.scrollHeight > element.clientHeight
+    );
+}
+
+export function hasScrollableParent(target: EventTarget | null): boolean {
+    let el = target as HTMLElement | null;
+
+    while (el) {
+        if (isScrollableElement(el)) {
+            return true;
+        }
+        el = el.parentElement;
+    }
+
+    return false;
+}

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

@@ -0,0 +1,13 @@
+import type { PixiUIProp } from "@/models/nqtr/ui-elements";
+import TimeSlotsImage from "@/models/TimeSlotsImage";
+import type { OnRunProps } from "@drincs/nqtr";
+
+export async function normalizePixiElement(element: PixiUIProp, props: OnRunProps) {
+    if (typeof element === "function") {
+        element = await element(props);
+    }
+    if (element instanceof TimeSlotsImage) {
+        element = element.src;
+    }
+    return element;
+}

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

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}