create-pixi-vn 2.0.14 → 2.1.0

package/template-nqtr-react-vite-muijoy-ink/src/lib/query/quest-query.ts

@@ -0,0 +1,73 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { Memo } from "@/lib/stores/memo-store";
+import { getPixiJSAsset } from "@/lib/utils/assets-utility";
+import { type QuestInterface, questsNotebook } from "@drincs/nqtr";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useSelector } from "@tanstack/react-store";
+
+function getQuestInfo(quest: QuestInterface) {
+    let currentStageDescription = "";
+    if (quest.currentStage) {
+        if (quest.completed) {
+            if (quest.inDevelopment) {
+                currentStageDescription = "quest_is_in_development";
+            } else {
+                currentStageDescription = "completed";
+            }
+        } else if (!quest.currentStage.started && quest.currentStage.requestDescriptionToStart) {
+            currentStageDescription = quest.currentStage.requestDescriptionToStart;
+        } else if (quest.currentStage.description) {
+            currentStageDescription = quest.currentStage.description;
+        }
+    }
+
+    return {
+        id: quest.id,
+        name: quest.name,
+        description: quest.description,
+        currentStage: {
+            description: currentStageDescription,
+        },
+        questImage: quest.image,
+        completed: quest.completed,
+        isInDevelopment: quest.inDevelopment,
+    };
+}
+
+const QUESTS_USE_QUERY_KEY = "quests_use_query_key";
+export function useQueryQuests() {
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, QUESTS_USE_QUERY_KEY],
+        queryFn: async () => {
+            const inProgressQuests = questsNotebook.inProgressQuests.map(getQuestInfo);
+            const completedQuests = questsNotebook.completedQuests.map(getQuestInfo);
+            const failedQuests = questsNotebook.failedQuests.map(getQuestInfo);
+            return {
+                inProgressQuests,
+                completedQuests,
+                failedQuests,
+            };
+        },
+        placeholderData: keepPreviousData,
+    });
+}
+
+export const SELECTED_QUEST_USE_QUERY_KEY = "selected_quest_use_query_key";
+export function useQuerySelectedQuest() {
+    const selectedQuestId = useSelector(Memo.store, (state) => state.selectedQuestId);
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, SELECTED_QUEST_USE_QUERY_KEY, selectedQuestId],
+        queryFn: async () => {
+            const selectedQuest = selectedQuestId
+                ? questsNotebook.find(selectedQuestId)
+                : undefined;
+            if (!selectedQuest) return null;
+            const info = getQuestInfo(selectedQuest);
+            return {
+                ...info,
+                questImageUrl: info.questImage ? getPixiJSAsset(info.questImage) : undefined,
+            };
+        },
+        placeholderData: keepPreviousData,
+    });
+}

package/template-nqtr-react-vite-muijoy-ink/src/lib/query/room-query.ts

@@ -0,0 +1,104 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { useGameProps } from "@/lib/hooks/props-hooks";
+import { useQueryTime } from "@/lib/query/time-query";
+import { normalizePixiElement } from "@/lib/utils/ui-utility";
+import type { PixiUIProp } from "@/models/nqtr/ui-elements";
+import { navigator, RegisteredRooms } from "@drincs/nqtr";
+import { Assets, ImageSprite } from "@drincs/pixi-vn";
+import type { ContainerChild } from "@drincs/pixi-vn/pixi.js";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+const ROOM_USE_QUERY_KEY = "room_use_query_key";
+export function useQueryRoom(id?: string) {
+    const gameProps = useGameProps();
+    const { data: { day, hour } = {} } = useQueryTime();
+
+    const loadIcons = useCallback(
+        (items: Array<{ sprite?: PixiUIProp }>) =>
+            items.reduce(async (accPromise, { sprite }) => {
+                const acc = await accPromise;
+                if (!sprite) return acc;
+                const icon = await normalizePixiElement(sprite, gameProps);
+                if (typeof icon === "string") {
+                    const s = new ImageSprite({}, icon);
+                    await s.load();
+                    acc.push(s);
+                    return acc;
+                }
+                acc.push(icon);
+                return acc;
+            }, Promise.resolve<(ImageSprite | ContainerChild)[]>([])),
+        [gameProps],
+    );
+
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, ROOM_USE_QUERY_KEY, id, day, hour],
+        queryFn: async () => {
+            if (!id) return {};
+            const room = RegisteredRooms.get(id);
+            if (!room) return {};
+
+            const routine = room.routine;
+            const routineBackground = room.routine.find((c) => c.background)?.background;
+
+            let background = await normalizePixiElement(
+                routineBackground || room.background,
+                gameProps,
+            );
+            if (typeof background === "string") {
+                const sprite = new ImageSprite({}, background);
+                await sprite.load();
+                background = sprite;
+            }
+
+            const icon = await normalizePixiElement(room.background, gameProps);
+
+            const activitiesIcons = await loadIcons(room.activities);
+            const routineIcons = await loadIcons(routine);
+
+            return {
+                room,
+                background,
+                icon: typeof icon === "string" ? icon : undefined,
+                activities: activitiesIcons,
+                routine: routineIcons,
+            };
+        },
+        placeholderData: keepPreviousData,
+    });
+}
+
+export const CURRENT_ROOM_ID_USE_QUERY_KEY = "current_room_id_use_query_key";
+export function useQueryCurrentRoomId() {
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_ROOM_ID_USE_QUERY_KEY],
+        queryFn: async () => navigator.currentRoomId,
+        placeholderData: keepPreviousData,
+    });
+}
+
+export function useQueryCurrentRoom() {
+    const { data: currentRoomId } = useQueryCurrentRoomId();
+    return useQueryRoom(currentRoomId);
+}
+
+const QUICK_ROOMS_USE_QUERY_KEY = "quick_rooms_use_query_key";
+export function useQueryQuickRooms() {
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, QUICK_ROOMS_USE_QUERY_KEY],
+        queryFn: async () => {
+            const rooms = navigator.currentLocation?.rooms || [];
+            const loadRoomsImage = async () => {
+                rooms?.forEach((room) => {
+                    Assets.backgroundLoadBundle(room.id);
+                    Assets.backgroundLoadBundle(room.activitiesIds);
+                    Assets.backgroundLoadBundle(room.routine.map((commitment) => commitment.id));
+                });
+            };
+            loadRoomsImage();
+            return rooms;
+        },
+        placeholderData: keepPreviousData,
+    });
+}

package/template-nqtr-react-vite-muijoy-ink/src/lib/query/save-query.ts

@@ -0,0 +1,18 @@
+import { getLastSaveFromIndexDB, getSaveFromIndexDB } from "@/lib/utils/save-utility";
+import { useQuery } from "@tanstack/react-query";
+
+export const SAVES_USE_QUERY_KEY = "saves_use_query_key";
+export function useQuerySaves({ id }: { id: number }) {
+    return useQuery({
+        queryKey: [SAVES_USE_QUERY_KEY, id],
+        queryFn: async () => (await getSaveFromIndexDB(id)) || null,
+    });
+}
+
+export const LAST_SAVE_USE_QUERY_KEY = "last_save_use_query_key";
+export function useQueryLastSave() {
+    return useQuery({
+        queryKey: [LAST_SAVE_USE_QUERY_KEY],
+        queryFn: async () => (await getLastSaveFromIndexDB()) || null,
+    });
+}

package/template-nqtr-react-vite-muijoy-ink/src/lib/query/settings-query.ts

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

package/template-nqtr-react-vite-muijoy-ink/src/lib/query/time-query.ts

@@ -0,0 +1,23 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { timeTracker } from "@drincs/nqtr";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+const CURRENT_HOUR_USE_QUERY_KEY = "current_hour_use_query_key";
+export function useQueryTime() {
+    const { t } = useTranslation(["ui"]);
+
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CURRENT_HOUR_USE_QUERY_KEY],
+        queryFn: async () => {
+            const hour = timeTracker.currentTime;
+            return {
+                hour,
+                day: timeTracker.currentDate,
+                hourFormatted: hour > 9 ? `${hour}:00` : `0${hour}:00`,
+                dayName: t(timeTracker.currentDayName ?? ""),
+            };
+        },
+        placeholderData: keepPreviousData,
+    });
+}

package/template-nqtr-react-vite-muijoy-ink/src/lib/stores/alert-dialog-store.ts

@@ -0,0 +1,13 @@
+import { Store } from "@tanstack/store";
+
+export namespace AlertDialogState {
+    export const store = new Store<{ count: number }>({ count: 0 });
+
+    export function increment() {
+        store.setState((state) => ({ count: state.count + 1 }));
+    }
+
+    export function decrement() {
+        store.setState((state) => ({ count: Math.max(0, state.count - 1) }));
+    }
+}

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

@@ -0,0 +1,44 @@
+import { Store } from "@tanstack/store";
+
+type AutoSettingsStore = {
+    /**
+     * Whether auto forward is enabled
+     */
+    enabled: boolean;
+    /**
+     * Time in seconds to wait before auto forwarding
+     */
+    time: number;
+};
+
+export namespace AutoSettings {
+    export const store = new Store<AutoSettingsStore>({
+        enabled: Boolean(localStorage.getItem("auto_forward_enabled") ?? false),
+        time: Number(localStorage.getItem("auto_forward_second") ?? 1),
+    });
+
+    /**
+     * Toggle the auto forward state
+     */
+    export function toggleEnabled() {
+        store.setState((state) => {
+            localStorage.setItem("auto_forward_enabled", (!state.enabled).toString());
+            return { ...state, enabled: !state.enabled };
+        });
+    }
+
+    /**
+     * Set the auto forward state
+     */
+    export function setEnabled(value: boolean) {
+        store.setState((state) => ({ ...state, enabled: value }));
+    }
+
+    /**
+     * Set the time to wait before auto forwarding
+     */
+    export function setTime(value: number) {
+        localStorage.setItem("auto_forward_second", value.toString());
+        store.setState((state) => ({ ...state, time: value }));
+    }
+}

package/template-nqtr-react-vite-muijoy-ink/src/lib/stores/channel-sound-stores.ts

@@ -0,0 +1,64 @@
+import { sound } from "@drincs/pixi-vn";
+import { Store } from "@tanstack/store";
+
+export type ChannelSoundState = {
+    volume: number;
+    muted: boolean;
+};
+
+export namespace ChannelSound {
+    const storeCache = new Map<string, Store<ChannelSoundState>>();
+
+    /**
+     * Initialize the channel sound storage, syncing the sound library with stored values
+     */
+    export function init() {
+        sound.channels.forEach((c) => {
+            const store = getStore(c.alias);
+            const muted = store.state.muted;
+            setVolume(c.alias, store.state.volume);
+            setMuted(c.alias, muted);
+        });
+    }
+
+    export function getStore(alias: string): Store<ChannelSoundState> {
+        let store = storeCache.get(alias);
+        if (store) {
+            return store;
+        }
+        const storedMuted = localStorage.getItem(`${alias}_muted`);
+        store = new Store<ChannelSoundState>({
+            volume: Number(
+                localStorage.getItem(`${alias}_volume`) ?? sound.findChannel(alias).volume * 100,
+            ),
+            muted: storedMuted !== null ? storedMuted === "true" : sound.findChannel(alias).muted,
+        });
+        storeCache.set(alias, store);
+        return store;
+    }
+
+    export function setVolume(alias: string, volume: number) {
+        const store = getStore(alias);
+        if (store.state.muted) {
+            setMuted(alias, false);
+        }
+        sound.findChannel(alias).volume = volume / 100;
+        localStorage.setItem(`${alias}_volume`, volume.toString());
+        store.setState((state) => ({ ...state, volume: Math.round(volume) }));
+
+        if (Math.round(volume) === 0 && !store.state.muted) {
+            setMuted(alias, true);
+        }
+    }
+
+    export function setMuted(alias: string, muted: boolean) {
+        sound.findChannel(alias).muted = muted;
+        localStorage.setItem(`${alias}_muted`, muted.toString());
+        getStore(alias).setState((state) => ({ ...state, muted }));
+    }
+
+    export function toggleMuted(alias: string) {
+        const curr = sound.findChannel(alias).toggleMuteAll();
+        setMuted(alias, curr);
+    }
+}

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