create-pixi-vn 2.0.2 → 2.0.4

package/template-react-vite-muijoy-electron/src/screens/modals/TextInput.tsx

@@ -1,61 +0,0 @@
-import { narration } from '@drincs/pixi-vn';
-import { Button, Input } from '@mui/joy';
-import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRecoilValue } from 'recoil';
-import { typewriterIsAnimatedState } from '../../atoms/typewriterIsAnimatedState';
-import ModalDialogCustom from '../../components/ModalDialog';
-import Typewriter from '../../components/Typewriter';
-import { INTERFACE_DATA_USE_QUEY_KEY, useQueryDialogue, useQueryInputValue } from '../../use_query/useQueryInterface';
-
-export default function TextInput() {
-    const { data: { text } = {} } = useQueryDialogue()
-    const { data: { isRequired, type } = { currentValue: undefined, isRequired: false } } = useQueryInputValue();
-    const open = (!useRecoilValue(typewriterIsAnimatedState)) && isRequired
-    const [tempValue, setTempValue] = useState();
-    const queryClient = useQueryClient()
-    const { t } = useTranslation(["ui"]);
-
-    return (
-        <ModalDialogCustom
-            open={open}
-            setOpen={(value) => {
-                if (!value) {
-                    narration.inputValue = tempValue
-                    queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] })
-                }
-            }}
-            canBeIgnored={false}
-            color="primary"
-            actions={<>
-                <Button
-                    key={'exit'}
-                    color='primary'
-                    variant="outlined"
-                    onClick={() => {
-                        narration.inputValue = tempValue
-                        queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] })
-                    }}
-                >
-                    {t("confirm")}
-                </Button>
-                <Input
-                    value={tempValue}
-                    type={type}
-                    onChange={(e) => {
-                        let value: any = e.target.value;
-                        if (e.target.type === "number") {
-                            value = e.target.valueAsNumber
-                        }
-                        setTempValue(value)
-                    }}
-                />
-            </>}
-        >
-            {text && <Typewriter
-                text={text}
-            />}
-        </ModalDialogCustom>
-    );
-}

package/template-react-vite-muijoy-electron/src/use_query/useQueryInterface.ts

@@ -1,73 +0,0 @@
-import { CharacterBaseModel, getCharacterById, narration } from "@drincs/pixi-vn";
-import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-
-export const INTERFACE_DATA_USE_QUEY_KEY = "interface_data_use_quey_key";
-
-const CAN_GO_BACK_USE_QUEY_KEY = "can_go_back_use_quey_key";
-export function useQueryCanGoBack() {
-	return useQuery({
-		queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_BACK_USE_QUEY_KEY],
-		queryFn: () => {
-			return narration.canGoBack
-		},
-	});
-}
-
-const CHOICE_MENU_OPTIONS_USE_QUEY_KEY = "choice_menu_options_use_quey_key";
-export function useQueryChoiceMenuOptions() {
-	return useQuery({
-		queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CHOICE_MENU_OPTIONS_USE_QUEY_KEY],
-		queryFn: () => {
-			return narration.choiceMenuOptions || []
-		},
-	});
-}
-
-const INPUT_VALUE_USE_QUEY_KEY = "input_value_use_quey_key";
-export function useQueryInputValue() {
-	return useQuery({
-		queryKey: [INTERFACE_DATA_USE_QUEY_KEY, INPUT_VALUE_USE_QUEY_KEY],
-		queryFn: () => {
-			return {
-				isRequired: narration.isRequiredInput,
-				type: narration.inputType,
-				currentValue: narration.inputValue,
-			}
-		},
-	});
-}
-
-const DIALOGUE_USE_QUEY_KEY = "dialogue_use_quey_key";
-export function useQueryDialogue() {
-	const { t: tNarration } = useTranslation(["narration"]);
-
-	return useQuery({
-		queryKey: [INTERFACE_DATA_USE_QUEY_KEY, DIALOGUE_USE_QUEY_KEY],
-		queryFn: () => {
-			let dialogue = narration.dialogue
-			let newText: string | undefined = dialogue?.text
-			let newCharacter: CharacterBaseModel | undefined = undefined
-			if (dialogue) {
-				newCharacter = dialogue.character ? getCharacterById(dialogue.character) : undefined
-				if (!newCharacter && dialogue.character) {
-					newCharacter = new CharacterBaseModel(dialogue.character, { name: tNarration(dialogue.character) })
-				}
-			}
-			return {
-				text: newText,
-				character: newCharacter,
-			}
-		},
-	});
-}
-
-const CAN_GO_NEXT_USE_QUEY_KEY = "can_go_next_use_quey_key";
-export function useQueryCanGoNext() {
-	return useQuery({
-		queryKey: [INTERFACE_DATA_USE_QUEY_KEY, CAN_GO_NEXT_USE_QUEY_KEY],
-		queryFn: () => {
-			return narration.canGoNext && !narration.isRequiredInput
-		},
-	});
-}

package/template-react-vite-muijoy-electron/src/use_query/useQueryLastSave.ts

@@ -1,18 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getLastSaveFromIndexDB } from "../utilities/save-utility";
-
-export const LAST_SAVE_USE_QUEY_KEY = "last_save_use_quey_key";
-
-export default function useQueryLastSave() {
-	return useQuery({
-		queryKey: [LAST_SAVE_USE_QUEY_KEY],
-		queryFn: async () => {
-			return getLastSaveFromIndexDB()
-				.then((res) => {
-					return res || null
-				}).catch((err) => {
-					throw err
-				})
-		},
-	});
-}

package/template-react-vite-muijoy-electron/src/use_query/useQuerySaves.ts

@@ -1,18 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { getSaveFromIndexDB } from "../utilities/save-utility";
-
-export const SAVES_USE_QUEY_KEY = "saves_use_quey_key";
-
-export default function useQuerySaves({ id }: { id: number }) {
-	return useQuery({
-		queryKey: [SAVES_USE_QUEY_KEY, id],
-		queryFn: async () => {
-			return getSaveFromIndexDB(id)
-				.then((res) => {
-					return res || null
-				}).catch((err) => {
-					throw err
-				})
-		},
-	});
-}

package/template-react-vite-muijoy-electron/src/utilities/actions-utility.ts

@@ -1,10 +0,0 @@
-import { clearAllGameDatas, narration } from "@drincs/pixi-vn";
-
-export async function goBack(navigate: (path: string) => void) {
-    await narration.goBack(navigate)
-}
-
-export function gameEnd(navigate: (path: string) => void) {
-    clearAllGameDatas()
-    navigate('/')
-}

package/template-react-vite-muijoy-electron/src/utilities/component-utility.ts

@@ -1,25 +0,0 @@
-type WindowsSize = {
-    x: number,
-    y: number,
-}
-export function resizeWindowsHandler<T>(mouseDownEvent: React.MouseEvent<T, MouseEvent>, size: WindowsSize, setSize: React.Dispatch<React.SetStateAction<WindowsSize>>) {
-    const startSize = size;
-    const startPosition = { x: mouseDownEvent.pageX, y: mouseDownEvent.pageY };
-
-    function onMouseMove(mouseMoveEvent: any) {
-        setSize(() => {
-            let x = startSize.x - startPosition.x + mouseMoveEvent.pageX
-            let y = startSize.y + startPosition.y - mouseMoveEvent.pageY
-            return {
-                x: x > 1 ? x : 2,
-                y: y > 1 ? y : 2,
-            }
-        });
-    }
-    function onMouseUp() {
-        document.body.removeEventListener("mousemove", onMouseMove);
-    }
-
-    document.body.addEventListener("mousemove", onMouseMove);
-    document.body.addEventListener("mouseup", onMouseUp, { once: true });
-}

package/template-react-vite-muijoy-electron/src/utilities/indexedDB-utility.ts

@@ -1,196 +0,0 @@
-const INDEXED_DB_VERSION = 2;
-const INDEXED_DB_NAME = "game_db";
-export const INDEXED_DB_SAVE_TABLE = "saves";
-
-export function initializeIndexedDB(): Promise<void> {
-    return new Promise((resolve, reject) => {
-        let request = indexedDB.open(INDEXED_DB_NAME, INDEXED_DB_VERSION);
-        // check if the object store exists
-        request.onupgradeneeded = function (_event) {
-            let db = request.result;
-            if (!db.objectStoreNames.contains(INDEXED_DB_SAVE_TABLE)) {
-                // create the object store
-                let 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 = function (_event) {
-            resolve()
-        };
-        request.onerror = function (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) => {
-        let request = indexedDB.open(INDEXED_DB_NAME);
-
-        request.onsuccess = function (_event) {
-            let db = request.result;
-            // run onupgradeneeded before onsuccess
-            if (!db.objectStoreNames.contains(tableName)) {
-                console.error("Object store rescues does not exist")
-                reject()
-            }
-            let transaction = db.transaction([tableName], "readwrite");
-            let objectStore = transaction.objectStore(tableName);
-            let setRequest = objectStore.put(data)
-            setRequest.onsuccess = function (_event) {
-                resolve(data)
-            }
-            setRequest.onerror = function (event) {
-                console.error("Error adding save data to indexDB", event)
-                reject()
-            }
-        };
-        request.onerror = function (event) {
-            console.error("Error adding save data to indexDB", event)
-        }
-    })
-}
-
-export async function getRowFromIndexDB<T extends {}>(tableName: string, id: any): Promise<T | null> {
-    return new Promise((resolve, reject) => {
-        let request = indexedDB.open(INDEXED_DB_NAME);
-        request.onsuccess = function (_event) {
-            let db = request.result;
-            // check if the object store exists
-            if (!db.objectStoreNames.contains(tableName)) {
-                resolve(null)
-                return
-            }
-            let transaction = db.transaction([tableName], "readwrite");
-            let objectStore = transaction.objectStore(tableName);
-            let getRequest = objectStore.get(id);
-            getRequest.onsuccess = function (_event) {
-                resolve(getRequest.result)
-            }
-            getRequest.onerror = function (event) {
-                console.error("Error getting save data from indexDB", event)
-                reject()
-            }
-        };
-        request.onerror = function (event) {
-            console.error("Error opening indexDB", event)
-            reject()
-        }
-    })
-}
-
-export async function getLastRowFromIndexDB<T extends {}>(tableName: string): Promise<T | null> {
-    return new Promise((resolve, reject) => {
-        let request = indexedDB.open(INDEXED_DB_NAME);
-        request.onsuccess = function (_event) {
-            let db = request.result;
-            // check if the object store exists
-            if (!db.objectStoreNames.contains(tableName)) {
-                resolve(null)
-                return
-            }
-            let transaction = db.transaction([tableName], "readwrite");
-            let objectStore = transaction.objectStore(tableName);
-            let getRequest = objectStore.openCursor(null, "prev");
-            getRequest.onsuccess = function (_event) {
-                let cursor = getRequest.result;
-                if (cursor) {
-                    resolve(cursor.value)
-                } else {
-                    resolve(null)
-                }
-            }
-            getRequest.onerror = function (event) {
-                console.error("Error getting save data from indexDB", event)
-                reject()
-            }
-        };
-        request.onerror = function (event) {
-            console.error("Error opening indexDB", event)
-            reject()
-        }
-    })
-}
-
-export async function deleteRowFromIndexDB(tableName: string, id: any): Promise<void> {
-    return new Promise((resolve, reject) => {
-        let request = indexedDB.open(INDEXED_DB_NAME);
-        request.onsuccess = function (_event) {
-            let db = request.result;
-            let transaction = db.transaction([tableName], "readwrite");
-            let objectStore = transaction.objectStore(tableName);
-            let deleteRequest = objectStore.delete(id);
-            deleteRequest.onsuccess = function (_event) {
-                resolve()
-            }
-            deleteRequest.onerror = function (event) {
-                console.error("Error deleting save data from indexDB", event)
-                reject()
-            }
-        };
-        request.onerror = function (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) => {
-        let request = indexedDB.open(INDEXED_DB_NAME);
-        request.onsuccess = function (_event) {
-            let db = request.result;
-            // check if the object store exists
-            if (!db.objectStoreNames.contains(tableName)) {
-                resolve([])
-                return
-            }
-            let transaction = db.transaction([tableName], "readwrite");
-            let objectStore = transaction.objectStore(tableName);
-            let getRequest = options.order ?
-                objectStore.index(options.order.field as string).openCursor(null, options.order.direction) :
-                objectStore.openCursor();
-            let results: T[] = []
-            let counter = 0;
-            let limit = options.pagination?.limit ?? Infinity;
-            let offset = options.pagination?.offset ?? 0;
-            let advanced = false;
-            getRequest.onsuccess = (_event) => {
-                let 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 = function (event) {
-                console.error("Error getting save data from indexDB", event)
-                reject()
-            }
-        };
-        request.onerror = function (event) {
-            console.error("Error opening indexDB", event)
-            reject()
-        }
-    })
-}

package/template-react-vite-muijoy-electron/src/utilities/navigate-utility.ts

@@ -1,18 +0,0 @@
-import { NavigateFunction, NavigateOptions, To, useNavigate } from "react-router-dom";
-
-/**
- * https://pixi-vn.web.app/advanced/intercept-events.html#back-and-forward-buttons
- */
-export function useMyNavigate(): NavigateFunction {
-    const navigate = useNavigate();
-
-    return (to: To | number, options?: NavigateOptions) => {
-        if (typeof to === "number") {
-            navigate(to);
-        }
-        else {
-            navigate(to, options);
-        }
-        window.history.pushState(null, window.location.href, window.location.href);
-    }
-}

package/template-react-vite-muijoy-electron/src/utilities/save-utility.ts

@@ -1,125 +0,0 @@
-import { canvas, getSaveData, loadSaveData } from "@drincs/pixi-vn";
-import GameSaveData from "../models/GameSaveData";
-import { deleteRowFromIndexDB, getLastRowFromIndexDB, getListFromIndexDB, getRowFromIndexDB, INDEXED_DB_SAVE_TABLE, putRowIntoIndexDB } from "./indexedDB-utility";
-
-const SAVE_FILE_EXTENSION = "json"
-
-export function getSave(image?: string): GameSaveData {
-    return {
-        saveData: getSaveData(),
-        gameVersion: __APP_VERSION__,
-        date: new Date(),
-        name: "",
-        image: image
-    }
-}
-
-export async function loadSave(saveData: GameSaveData, navigate: (path: string) => void) {
-    navigate("/loading")
-    // load the save data from the JSON string
-    await loadSaveData(saveData.saveData, navigate)
-}
-
-export async function putSaveIntoIndexDB(info: Partial<GameSaveData> & { id?: number } = {}, data = getSave()): Promise<GameSaveData & { id: number }> {
-    let image = await canvas.extractImage()
-    let item = {
-        ...data,
-        image: image,
-        ...info,
-    }
-    if (item.id === undefined) {
-        let 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> {
-    let list = await getListFromIndexDB<GameSaveData & { id: number }>(INDEXED_DB_SAVE_TABLE, { pagination: { limit: 1, offset: 0 }, order: { field: "date", direction: "prev" } })
-    if (list.length > 0) {
-        return list[0]
-    }
-    return null
-}
-
-export async function deleteSaveFromIndexDB(id: number): Promise<void> {
-    return await deleteRowFromIndexDB(INDEXED_DB_SAVE_TABLE, id)
-}
-
-export function downloadGameSave(data: GameSaveData = getSave()) {
-    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(navigate: (path: string) => void, afterLoad?: () => 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;
-                navigate("/loading")
-                let data: GameSaveData = JSON.parse(jsonString)
-                // load the save data from the JSON string
-                loadSave(data, navigate)
-                    .then(() => {
-                        afterLoad && afterLoad();
-                    }).catch(() => {
-                        navigate("/narration")
-                    })
-            };
-            reader.readAsText(file);
-        }
-    };
-    input.click();
-}
-
-export async function addRefreshSave() {
-    const data = getSave()
-    let jsonString = JSON.stringify(data);
-    if (jsonString) {
-        localStorage.setItem("refresh_save", jsonString)
-    }
-}
-
-export async function loadRefreshSave(navigate: (path: string) => void) {
-    const jsonString = localStorage.getItem("refresh_save")
-    if (jsonString) {
-        navigate("/loading")
-        let data: GameSaveData = JSON.parse(jsonString)
-        return loadSave(data, navigate)
-            .then(() => {
-                localStorage.removeItem("refreshSave")
-            })
-            .catch(() => {
-                navigate("/")
-            })
-    }
-    else {
-        navigate("/")
-    }
-}

package/template-react-vite-muijoy-electron/src/values/characters.ts

@@ -1,11 +0,0 @@
-import { saveCharacter } from "@drincs/pixi-vn";
-import Character from "../models/Character";
-
-export const juliette = new Character('___pixivn_juliette___', {
-    name: 'Juliette',
-    age: 25,
-    icon: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4eMoz7DH8l_Q-iCzSc1xyu_C2iryWh2O9_FcDBpY04w&s",
-    color: "#ac0086"
-});
-
-saveCharacter(juliette);

package/template-react-vite-muijoy-electron/src/values/translations/strings_en.json

@@ -1,60 +0,0 @@
-{
-	"ui": {
-		"allert_error_occurred": "An error occurred, please report it to the developer",
-		"attention": "Attention",
-		"auto_forward_time": "Auto Forward Time",
-		"auto_forward_time_description": "Choose the time in seconds before the dialogue auto-forwards. If \"{{textSpeedName}}\" is enabled, the auto-forward will be executed after the typewriter effect is completed. (You can edit this value if \"{{autoName}}\" is enabled)",
-		"auto_forward_time_restricted": "Auto",
-		"back": "Back",
-		"cancel": "Cancel",
-		"confirm": "Confirm",
-		"continue": "Continue",
-		"delete": "Delete",
-		"dialogues": "Dialogues",
-		"display": "Display",
-		"enter_fullscreen": "Enter Fullscreen",
-		"example": "Example",
-		"exit": "Exit",
-		"exit_fullscreen": "Exit Fullscreen",
-		"fail_delete": "Delete failed",
-		"fail_load": "Load failed",
-		"fail_save": "Save failed",
-		"fullscreen": "Fullscreen",
-		"fullscreen_description": "Toggle fullscreen mode.",
-		"hide_ui": "Hide UI",
-		"history": "History",
-		"load": "Load",
-		"load_from_file": "Load from File",
-		"load_last_save": "Load Last Save",
-		"load_last_save_restricted": "L.Load",
-		"next": "Next",
-		"off": "Off",
-		"primary_color": "Primary Color",
-		"primary_color_description": "Choose the primary color for the theme.",
-		"quick_save": "Quick Save",
-		"quick_save_restricted": "Q.Save",
-		"return_main_menu": "Return to Main Menu",
-		"save": "Save",
-		"save_as": "Save As",
-		"save_slot": "Save Slot",
-		"save_to_file": "Save to File",
-		"search": "Search",
-		"settings": "Settings",
-		"settings_restricted": "Prefs",
-		"skip": "Skip",
-		"solid_color": "Solid Color",
-		"solid_color_description": "Choose the solid color for the theme. It can be black or white and will be contrasting with the primary color. So if the primary color is dark, the solid color will be white, and a the other way around.",
-		"start": "Start",
-		"success_delete": "Delete successful",
-		"success_load": "Load successful",
-		"success_save": "Save successful",
-		"text_speed": "Text Speed",
-		"text_speed_description": "Choose the speed of the typewriter effect. If is set to 0 ( off ) the text will appear instantly.",
-		"theme_mode": "Theme Mode",
-		"theme_mode_description": "Choose between light, dark, or system theme mode.",
-		"you_sure_to_delete_save": "Are you sure you want to delete this save file?",
-		"you_sure_to_load_save": "Are you sure you want to load this save file?",
-		"you_sure_to_return_main_menu": "Are you sure you want to return to the main menu? All unsaved progress will be lost."
-	},
-	"narration": {}
-}

package/template-react-vite-muijoy-electron/src/vite-env.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="vite/client" />
-
-declare const __APP_VERSION__: string;
-declare const __APP_NAME__: string;

package/template-react-vite-muijoy-electron/src-electron/index.css

@@ -1,7 +0,0 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif;
-  margin: auto;
-  max-width: 38rem;
-  padding: 2rem;
-}