create-pixi-vn 2.0.15 → 2.1.0

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

@@ -0,0 +1,182 @@
+import { INTERFACE_DATA_USE_QUERY_KEY } from "@/constants";
+import { TextDisplaySettings } from "@/lib/stores/text-display-settings-store";
+import { type CharacterInterface, narration, stepHistory } from "@drincs/pixi-vn";
+import { keepPreviousData, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useSelector } from "@tanstack/react-store";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+const CAN_GO_BACK_USE_QUERY_KEY = "can_go_back_use_query_key";
+export function useQueryCanGoBack() {
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CAN_GO_BACK_USE_QUERY_KEY],
+        queryFn: async () => stepHistory.canGoBack,
+    });
+}
+
+const CHOICE_MENU_OPTIONS_USE_QUERY_KEY = "choice_menu_options_use_query_key";
+export function useQueryChoiceMenuOptions() {
+    const { t } = useTranslation(["narration"]);
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CHOICE_MENU_OPTIONS_USE_QUERY_KEY],
+        queryFn: async () =>
+            narration.choices?.map((option) => ({
+                ...option,
+                text:
+                    typeof option.text === "string"
+                        ? t(option.text)
+                        : option.text.map((text) => t(text)).join(" "),
+            })) || [],
+    });
+}
+
+const INPUT_VALUE_USE_QUERY_KEY = "input_value_use_query_key";
+export function useQueryInputValue<T>() {
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, INPUT_VALUE_USE_QUERY_KEY],
+        queryFn: async () => ({
+            isRequired: narration.isRequiredInput,
+            type: narration.inputType,
+            currentValue: narration.inputValue as T | undefined,
+        }),
+        placeholderData: keepPreviousData,
+    });
+}
+
+type DialogueModel = {
+    animatedText?: string;
+    text?: string;
+    character?: CharacterInterface;
+    lastText?: string;
+};
+const DIALOGUE_USE_QUERY_KEY = "dialogue_use_query_key";
+export function useQueryDialogue() {
+    const { t } = useTranslation(["narration"]);
+    const queryClient = useQueryClient();
+    const forceComplete = useSelector(TextDisplaySettings.store, (state) => state.forceComplete);
+
+    const finalizeDialogue = useCallback(() => {
+        queryClient.setQueryData<DialogueModel>(
+            [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUERY_KEY],
+            (prev) => {
+                if (!prev) return prev;
+                const fullText = (prev.text || "") + (prev.animatedText || "");
+                return {
+                    ...prev,
+                    text: fullText || undefined,
+                    animatedText: undefined,
+                };
+            },
+        );
+    }, [queryClient]);
+
+    const query = useQuery<DialogueModel>({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, DIALOGUE_USE_QUERY_KEY],
+        queryFn: async ({ queryKey }) => {
+            const dialogue = narration.dialogue;
+            let text = dialogue?.text;
+            if (Array.isArray(text)) {
+                text = text.map((text) => t(text)).join(" ");
+            } else if (typeof text === "string") {
+                text = t(text);
+            }
+            let character = dialogue?.character;
+            if (typeof character === "string") {
+                character = {
+                    id: character,
+                    name: t(character),
+                } as CharacterInterface;
+            }
+
+            const prevData = queryClient.getQueryData<DialogueModel>(queryKey) || {};
+            const oldText = (prevData.text || "") + (prevData.animatedText || "");
+            if (text && character?.id === prevData?.character?.id && text.startsWith(oldText)) {
+                const newText = text.slice(oldText.length);
+                if (!newText && oldText && character === prevData?.character) {
+                    return prevData;
+                }
+                return {
+                    animatedText: newText,
+                    lastText: newText,
+                    text: oldText,
+                    character: character,
+                };
+            }
+
+            return {
+                animatedText: text,
+                lastText: text,
+                character: character,
+            };
+        },
+        placeholderData: keepPreviousData,
+        select: forceComplete
+            ? (data) => ({
+                  ...data,
+                  text: (data.text || "") + (data.animatedText || "") || undefined,
+                  animatedText: undefined,
+              })
+            : undefined,
+    });
+
+    return { ...query, finalizeDialogue };
+}
+
+const CAN_GO_NEXT_USE_QUERY_KEY = "can_go_next_use_query_key";
+export function useQueryCanGoNext() {
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, CAN_GO_NEXT_USE_QUERY_KEY],
+        queryFn: async () => narration.canContinue && !narration.isRequiredInput,
+    });
+}
+
+const NARRATIVE_HISTORY_USE_QUERY_KEY = "narrative_history_use_query_key";
+export function useQueryNarrativeHistory({ searchString }: { searchString?: string }) {
+    const { t } = useTranslation(["narration"]);
+    const normalizedSearch = searchString?.toLowerCase().trim();
+
+    return useQuery({
+        queryKey: [INTERFACE_DATA_USE_QUERY_KEY, NARRATIVE_HISTORY_USE_QUERY_KEY],
+        queryFn: async () => {
+            const promises = stepHistory.narrativeHistory.map(async (step) => {
+                const character = step.dialogue?.character;
+                let icon: string | undefined;
+                let characterName: string | undefined;
+                if (typeof character === "string") {
+                    characterName = t(character);
+                } else {
+                    characterName = character?.name
+                        ? character.name + (character.surname ? ` ${character.surname}` : "")
+                        : undefined;
+                    icon = character?.icon;
+                }
+                let text = step.dialogue?.text;
+                if (Array.isArray(text)) {
+                    text = text.map((text) => t(text)).join(" ");
+                } else if (typeof text === "string") {
+                    text = t(text);
+                }
+                return {
+                    character: characterName,
+                    text: text || "",
+                    icon: icon,
+                    choices: step.choices,
+                    inputValue: step.inputValue,
+                };
+            });
+            return Promise.all(promises);
+        },
+        select: (data) => {
+            if (!normalizedSearch) {
+                return data;
+            }
+            return data.filter((item) => {
+                return (
+                    item.character?.toLowerCase().includes(normalizedSearch) ||
+                    item.text?.toLowerCase().includes(normalizedSearch)
+                );
+            });
+        },
+        placeholderData: keepPreviousData,
+    });
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/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-tauri/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-tauri/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-tauri/src/lib/query/settings-query.ts

@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+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 () => {
+            if (window.__TAURI__) {
+                return getCurrentWindow().isFullscreen();
+            }
+            return document.fullscreenElement !== null;
+        },
+    });
+}

package/template-nqtr-react-vite-muijoy-ink-tauri/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-tauri/src/lib/steam.ts

@@ -0,0 +1,143 @@
+/**
+ * Steam utility — thin wrappers around Tauri commands exposed by the
+ * `steam` Cargo feature. All functions are safe to call even when:
+ *   - the app is running outside Tauri (web mode)
+ *   - Steam is not running
+ *   - the `steam` feature was not compiled in
+ * In all those cases the functions return sensible defaults (null / false / 0)
+ * without throwing.
+ *
+ * Enable Steam in Rust:
+ *   src-tauri/Cargo.toml → default = ["steam"]   (or pass --features steam)
+ *
+ * Typical usage:
+ *   import { steam } from "@/lib/steam";
+ *
+ *   const name = await steam.getPlayerName();          // "Alice" | null
+ *   await steam.unlockAchievement("ACH_COMPLETE_CH1"); // fire & forget
+ *   await steam.openOverlay("achievements");
+ */
+
+import { invoke } from "@tauri-apps/api/core";
+
+const isTauri = typeof window !== "undefined" && "__TAURI__" in window;
+
+/** Dialogs supported by the Steam overlay. */
+export type SteamOverlayDialog =
+    | "achievements"
+    | "community"
+    | "friends"
+    | "players"
+    | "settings"
+    | "officialgamegroup"
+    | "stats";
+
+async function call<T>(cmd: string, args?: Record<string, unknown>): Promise<T | null> {
+    if (!isTauri) return null;
+    try {
+        return await invoke<T>(cmd, args);
+    } catch {
+        return null;
+    }
+}
+
+// ── API ───────────────────────────────────────────────────────────────────────
+
+export namespace steam {
+    /** `true` when Steam was initialised successfully (Steam client running). */
+    export async function isAvailable(): Promise<boolean> {
+        return (await call<boolean>("steam_is_available")) ?? false;
+    }
+
+    /** Steam display name of the logged-in user. */
+    export async function getPlayerName(): Promise<string | null> {
+        return call<string>("steam_get_player_name");
+    }
+
+    /** Numeric App ID of the running application. */
+    export async function getAppId(): Promise<number | null> {
+        return call<number>("steam_get_app_id");
+    }
+
+    // ── Achievements ──────────────────────────────────────────────────────────
+
+    /**
+     * Unlock an achievement and immediately persist it.
+     * `id` must match the API Name in Steamworks Partner.
+     */
+    export async function unlockAchievement(id: string): Promise<void> {
+        await call("steam_unlock_achievement", { achievementId: id });
+    }
+
+    /**
+     * Returns `true` if the user has already unlocked the achievement.
+     * Reliable only after the first few seconds of launch (stats are fetched
+     * automatically at startup).
+     */
+    export async function isAchievementUnlocked(id: string): Promise<boolean> {
+        return (await call<boolean>("steam_is_achievement_unlocked", { achievementId: id })) ?? false;
+    }
+
+    /** Reset an achievement — intended for development / testing only. */
+    export async function clearAchievement(id: string): Promise<void> {
+        await call("steam_clear_achievement", { achievementId: id });
+    }
+
+    // ── Stats ─────────────────────────────────────────────────────────────────
+
+    /** Set an integer stat. Remember to call `storeStats()` afterwards. */
+    export async function setStatInt(name: string, value: number): Promise<void> {
+        await call("steam_set_stat_int", { name, value: Math.trunc(value) });
+    }
+
+    /** Read an integer stat (returns `0` on error). */
+    export async function getStatInt(name: string): Promise<number> {
+        return (await call<number>("steam_get_stat_int", { name })) ?? 0;
+    }
+
+    /** Set a float stat. Remember to call `storeStats()` afterwards. */
+    export async function setStatFloat(name: string, value: number): Promise<void> {
+        await call("steam_set_stat_float", { name, value });
+    }
+
+    /** Read a float stat (returns `0` on error). */
+    export async function getStatFloat(name: string): Promise<number> {
+        return (await call<number>("steam_get_stat_float", { name })) ?? 0;
+    }
+
+    /**
+     * Commit pending stat changes to Steam servers.
+     * `unlockAchievement` / `clearAchievement` already call this automatically;
+     * you only need this when using `setStatInt` / `setStatFloat` directly.
+     */
+    export async function storeStats(): Promise<void> {
+        await call("steam_store_stats");
+    }
+
+    // ── DLC ───────────────────────────────────────────────────────────────────
+
+    /** `true` if the user owns and has installed the DLC with the given App ID. */
+    export async function isDlcInstalled(appId: number): Promise<boolean> {
+        return (await call<boolean>("steam_is_dlc_installed", { appId })) ?? false;
+    }
+
+    // ── Overlay ───────────────────────────────────────────────────────────────
+
+    /**
+     * Open the Steam overlay to a specific dialog.
+     *
+     * Common values: "achievements", "friends", "community", "stats",
+     *                "settings", "officialgamegroup", "players"
+     */
+    export async function openOverlay(dialog: SteamOverlayDialog): Promise<void> {
+        await call("steam_open_overlay", { dialog });
+    }
+
+    /**
+     * Open the Steam store page for this game.
+     * Pass a different `appId` to open another game's page.
+     */
+    export async function openStore(appId?: number): Promise<void> {
+        await call("steam_open_store", { appId: appId ?? null });
+    }
+}

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