create-pixi-vn 1.6.3 → 1.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template-nqtr-react-vite-muijoy/src/screens/LoadingScreen.tsx +1 -1
- package/template-nqtr-react-vite-muijoy/src/screens/MainMenu.tsx +15 -1
- package/template-nqtr-react-vite-muijoy-ink/package.json +1 -1
- package/template-nqtr-react-vite-muijoy-ink/src/hooks/useNQTRDetector.tsx +1 -0
- package/template-nqtr-react-vite-muijoy-ink/src/hooks/useQueryNQTR.ts +6 -2
- package/template-nqtr-react-vite-muijoy-ink/src/models/nqtr/Activity.ts +5 -5
- package/template-nqtr-react-vite-muijoy-ink/src/screens/LoadingScreen.tsx +1 -1
- package/template-nqtr-react-vite-muijoy-ink/src/screens/MainMenu.tsx +28 -8
- package/template-nqtr-react-vite-muijoy-ink/src/utils/save-utility.ts +1 -1
- package/template-nqtr-react-vite-muijoy-ink-tauri/package.json +1 -1
- package/template-nqtr-react-vite-muijoy-ink-tauri/src/hooks/useNQTRDetector.tsx +1 -0
- package/template-nqtr-react-vite-muijoy-ink-tauri/src/hooks/useQueryNQTR.ts +6 -2
- package/template-nqtr-react-vite-muijoy-ink-tauri/src/models/nqtr/Activity.ts +5 -5
- package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/LoadingScreen.tsx +1 -1
- package/template-nqtr-react-vite-muijoy-ink-tauri/src/screens/MainMenu.tsx +28 -8
- package/template-nqtr-react-vite-muijoy-ink-tauri/src/utils/save-utility.ts +1 -1
- package/template-nqtr-react-vite-muijoy-tauri/package.json +1 -1
- package/template-nqtr-react-vite-muijoy-tauri/src/hooks/useNQTRDetector.tsx +1 -0
- package/template-nqtr-react-vite-muijoy-tauri/src/hooks/useQueryNQTR.ts +6 -2
- package/template-nqtr-react-vite-muijoy-tauri/src/models/nqtr/Activity.ts +5 -5
- package/template-nqtr-react-vite-muijoy-tauri/src/screens/LoadingScreen.tsx +1 -1
- package/template-nqtr-react-vite-muijoy-tauri/src/screens/MainMenu.tsx +28 -8
- package/template-nqtr-react-vite-muijoy-tauri/src/utils/save-utility.ts +1 -1
- package/template-react-vite-muijoy/src/screens/LoadingScreen.tsx +1 -1
- package/template-react-vite-muijoy/src/screens/MainMenu.tsx +15 -1
- package/template-react-vite-muijoy-ink/src/screens/LoadingScreen.tsx +1 -1
- package/template-react-vite-muijoy-ink/src/screens/MainMenu.tsx +15 -1
- package/template-react-vite-muijoy-ink-tauri/src/screens/LoadingScreen.tsx +1 -1
- package/template-react-vite-muijoy-ink-tauri/src/screens/MainMenu.tsx +15 -1
- package/template-react-vite-muijoy-tauri/package.json +1 -1
- package/template-react-vite-muijoy-tauri/src/screens/MainMenu.tsx +9 -15
- package/template-react-vite-muijoy-tauri/src/utils/save-utility.ts +1 -1
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
2
|
+
import { Box, CircularProgress } from "@mui/joy";
|
|
2
3
|
import Stack from "@mui/joy/Stack";
|
|
3
4
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
5
|
import { motion } from "motion/react";
|
|
@@ -70,7 +71,7 @@ export default function MainMenu() {
|
|
|
70
71
|
}}
|
|
71
72
|
transitionDelay={0.1}
|
|
72
73
|
loading={isLoading}
|
|
73
|
-
disabled={!isLoading && !lastSave
|
|
74
|
+
disabled={(!isLoading && !lastSave) || loading}
|
|
74
75
|
>
|
|
75
76
|
{t("continue")}
|
|
76
77
|
</MenuButton>
|
|
@@ -94,6 +95,19 @@ export default function MainMenu() {
|
|
|
94
95
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
95
96
|
{t("settings")}
|
|
96
97
|
</MenuButton>
|
|
98
|
+
{loading && (
|
|
99
|
+
<Box
|
|
100
|
+
sx={{
|
|
101
|
+
position: "absolute",
|
|
102
|
+
right: 0,
|
|
103
|
+
bottom: 0,
|
|
104
|
+
padding: 0.5,
|
|
105
|
+
}}
|
|
106
|
+
className='motion-preset-pop'
|
|
107
|
+
>
|
|
108
|
+
<CircularProgress />
|
|
109
|
+
</Box>
|
|
110
|
+
)}
|
|
97
111
|
</Stack>
|
|
98
112
|
);
|
|
99
113
|
}
|
|
@@ -19,6 +19,7 @@ export default function useNQTRDetector() {
|
|
|
19
19
|
|
|
20
20
|
useEffect(() => {
|
|
21
21
|
const { background } = currentRoom || {};
|
|
22
|
+
canvas.removeAll();
|
|
22
23
|
if (background) {
|
|
23
24
|
let image = convertMultiTypeSprite(background, gameProps);
|
|
24
25
|
let layer = canvas.getLayer(CANVAS_UI_LAYER_NAME);
|
|
@@ -7,12 +7,16 @@ import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
|
|
|
7
7
|
|
|
8
8
|
function getRoomInfo(room: RoomInterface) {
|
|
9
9
|
const routine = room.routine;
|
|
10
|
-
|
|
10
|
+
let background = room.background;
|
|
11
11
|
let icon: string | TimeSlotsImage | undefined;
|
|
12
12
|
if (typeof background === "string" || background instanceof TimeSlotsImage) {
|
|
13
13
|
icon = background;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
if (routine.length > 0 && routine[0].background) {
|
|
17
|
+
background = routine[0].background;
|
|
18
|
+
}
|
|
19
|
+
|
|
16
20
|
return {
|
|
17
21
|
id: room.id,
|
|
18
22
|
background: background,
|
|
@@ -52,10 +56,10 @@ export function useQueryCurrentRoomId() {
|
|
|
52
56
|
|
|
53
57
|
const QUICK_ROOMS_USE_QUEY_KEY = "quick_rooms_use_quey_key";
|
|
54
58
|
export function useQueryQuickRooms() {
|
|
55
|
-
const rooms = navigator.currentLocation?.rooms || [];
|
|
56
59
|
return useQuery({
|
|
57
60
|
queryKey: [INTERFACE_DATA_USE_QUEY_KEY, QUICK_ROOMS_USE_QUEY_KEY],
|
|
58
61
|
queryFn: async () => {
|
|
62
|
+
const rooms = navigator.currentLocation?.rooms || [];
|
|
59
63
|
const loadRoomsImage = async () => {
|
|
60
64
|
rooms?.forEach((room) => {
|
|
61
65
|
Assets.backgroundLoadBundle(room.id);
|
|
@@ -9,7 +9,7 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
|
|
|
9
9
|
props: {
|
|
10
10
|
name?: string;
|
|
11
11
|
sprite?: MultiTypeSpriteProp<Activity>;
|
|
12
|
-
icon
|
|
12
|
+
icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
|
|
13
13
|
disabled?: boolean | (() => boolean);
|
|
14
14
|
hidden?: boolean | (() => boolean);
|
|
15
15
|
} & ActivityStoredClassProps
|
|
@@ -24,15 +24,15 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
|
|
|
24
24
|
readonly name: string;
|
|
25
25
|
private readonly _sprite?: MultiTypeSpriteProp<Activity>;
|
|
26
26
|
get sprite(): MultiTypeSprite | undefined {
|
|
27
|
-
|
|
27
|
+
const sprite = this._sprite;
|
|
28
28
|
if (typeof sprite === "function") {
|
|
29
29
|
return (runProps: OnRunProps) => sprite(this, runProps);
|
|
30
30
|
}
|
|
31
31
|
return sprite;
|
|
32
32
|
}
|
|
33
|
-
private readonly _icon
|
|
34
|
-
get icon(): ReactElement | ((props: OnRunProps) => ReactElement) {
|
|
35
|
-
|
|
33
|
+
private readonly _icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
|
|
34
|
+
get icon(): ReactElement | ((props: OnRunProps) => ReactElement) | undefined {
|
|
35
|
+
const icon = this._icon;
|
|
36
36
|
if (typeof icon === "function") {
|
|
37
37
|
return (runProps: OnRunProps) => icon(this, runProps);
|
|
38
38
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
2
|
+
import { Box, CircularProgress } from "@mui/joy";
|
|
2
3
|
import Stack from "@mui/joy/Stack";
|
|
3
4
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
5
|
import { motion } from "motion/react";
|
|
5
|
-
import { useEffect } from "react";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
6
7
|
import MenuButton from "../components/MenuButton";
|
|
7
8
|
import { CANVAS_UI_LAYER_NAME } from "../constans";
|
|
8
9
|
import useGameProps from "../hooks/useGameProps";
|
|
@@ -21,6 +22,7 @@ export default function MainMenu() {
|
|
|
21
22
|
const { data: lastSave = null, isLoading } = useQueryLastSave();
|
|
22
23
|
const gameProps = useGameProps();
|
|
23
24
|
const { uiTransition: t, navigate, notify } = gameProps;
|
|
25
|
+
const [loading, setLoading] = useState(false);
|
|
24
26
|
|
|
25
27
|
useEffect(() => {
|
|
26
28
|
editHideInterface(false);
|
|
@@ -57,36 +59,54 @@ export default function MainMenu() {
|
|
|
57
59
|
if (!lastSave) {
|
|
58
60
|
return;
|
|
59
61
|
}
|
|
62
|
+
setLoading(true);
|
|
60
63
|
loadSave(lastSave, navigate)
|
|
61
64
|
.then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
|
|
62
65
|
.catch((e) => {
|
|
63
66
|
notify(t("fail_load"), { variant: "error" });
|
|
64
67
|
console.error(e);
|
|
65
|
-
})
|
|
68
|
+
})
|
|
69
|
+
.finally(() => setLoading(false));
|
|
66
70
|
}}
|
|
67
71
|
transitionDelay={0.1}
|
|
68
72
|
loading={isLoading}
|
|
69
|
-
disabled={!isLoading && !lastSave}
|
|
73
|
+
disabled={(!isLoading && !lastSave) || loading}
|
|
70
74
|
>
|
|
71
75
|
{t("continue")}
|
|
72
76
|
</MenuButton>
|
|
73
77
|
<MenuButton
|
|
74
|
-
onClick={() => {
|
|
78
|
+
onClick={async () => {
|
|
79
|
+
setLoading(true);
|
|
75
80
|
canvas.removeAll();
|
|
76
|
-
narration
|
|
77
|
-
|
|
78
|
-
|
|
81
|
+
narration
|
|
82
|
+
.callLabel("start", gameProps)
|
|
83
|
+
.then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
|
|
84
|
+
.finally(() => setLoading(false));
|
|
79
85
|
}}
|
|
80
86
|
transitionDelay={0.2}
|
|
87
|
+
disabled={loading}
|
|
81
88
|
>
|
|
82
89
|
{t("start")}
|
|
83
90
|
</MenuButton>
|
|
84
|
-
<MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
|
|
91
|
+
<MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
|
|
85
92
|
{t("load")}
|
|
86
93
|
</MenuButton>
|
|
87
94
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
88
95
|
{t("settings")}
|
|
89
96
|
</MenuButton>
|
|
97
|
+
{loading && (
|
|
98
|
+
<Box
|
|
99
|
+
sx={{
|
|
100
|
+
position: "absolute",
|
|
101
|
+
right: 0,
|
|
102
|
+
bottom: 0,
|
|
103
|
+
padding: 0.5,
|
|
104
|
+
}}
|
|
105
|
+
className='motion-preset-pop'
|
|
106
|
+
>
|
|
107
|
+
<CircularProgress />
|
|
108
|
+
</Box>
|
|
109
|
+
)}
|
|
90
110
|
</Stack>
|
|
91
111
|
);
|
|
92
112
|
}
|
|
@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
|
|
27
|
-
navigate(LOADING_ROUTE);
|
|
27
|
+
await navigate(LOADING_ROUTE);
|
|
28
28
|
// load the save data from the JSON string
|
|
29
29
|
await Game.restoreGameState(saveData.saveData, navigate);
|
|
30
30
|
}
|
|
@@ -19,6 +19,7 @@ export default function useNQTRDetector() {
|
|
|
19
19
|
|
|
20
20
|
useEffect(() => {
|
|
21
21
|
const { background } = currentRoom || {};
|
|
22
|
+
canvas.removeAll();
|
|
22
23
|
if (background) {
|
|
23
24
|
let image = convertMultiTypeSprite(background, gameProps);
|
|
24
25
|
let layer = canvas.getLayer(CANVAS_UI_LAYER_NAME);
|
|
@@ -7,12 +7,16 @@ import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
|
|
|
7
7
|
|
|
8
8
|
function getRoomInfo(room: RoomInterface) {
|
|
9
9
|
const routine = room.routine;
|
|
10
|
-
|
|
10
|
+
let background = room.background;
|
|
11
11
|
let icon: string | TimeSlotsImage | undefined;
|
|
12
12
|
if (typeof background === "string" || background instanceof TimeSlotsImage) {
|
|
13
13
|
icon = background;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
if (routine.length > 0 && routine[0].background) {
|
|
17
|
+
background = routine[0].background;
|
|
18
|
+
}
|
|
19
|
+
|
|
16
20
|
return {
|
|
17
21
|
id: room.id,
|
|
18
22
|
background: background,
|
|
@@ -52,10 +56,10 @@ export function useQueryCurrentRoomId() {
|
|
|
52
56
|
|
|
53
57
|
const QUICK_ROOMS_USE_QUEY_KEY = "quick_rooms_use_quey_key";
|
|
54
58
|
export function useQueryQuickRooms() {
|
|
55
|
-
const rooms = navigator.currentLocation?.rooms || [];
|
|
56
59
|
return useQuery({
|
|
57
60
|
queryKey: [INTERFACE_DATA_USE_QUEY_KEY, QUICK_ROOMS_USE_QUEY_KEY],
|
|
58
61
|
queryFn: async () => {
|
|
62
|
+
const rooms = navigator.currentLocation?.rooms || [];
|
|
59
63
|
const loadRoomsImage = async () => {
|
|
60
64
|
rooms?.forEach((room) => {
|
|
61
65
|
Assets.backgroundLoadBundle(room.id);
|
|
@@ -9,7 +9,7 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
|
|
|
9
9
|
props: {
|
|
10
10
|
name?: string;
|
|
11
11
|
sprite?: MultiTypeSpriteProp<Activity>;
|
|
12
|
-
icon
|
|
12
|
+
icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
|
|
13
13
|
disabled?: boolean | (() => boolean);
|
|
14
14
|
hidden?: boolean | (() => boolean);
|
|
15
15
|
} & ActivityStoredClassProps
|
|
@@ -24,15 +24,15 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
|
|
|
24
24
|
readonly name: string;
|
|
25
25
|
private readonly _sprite?: MultiTypeSpriteProp<Activity>;
|
|
26
26
|
get sprite(): MultiTypeSprite | undefined {
|
|
27
|
-
|
|
27
|
+
const sprite = this._sprite;
|
|
28
28
|
if (typeof sprite === "function") {
|
|
29
29
|
return (runProps: OnRunProps) => sprite(this, runProps);
|
|
30
30
|
}
|
|
31
31
|
return sprite;
|
|
32
32
|
}
|
|
33
|
-
private readonly _icon
|
|
34
|
-
get icon(): ReactElement | ((props: OnRunProps) => ReactElement) {
|
|
35
|
-
|
|
33
|
+
private readonly _icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
|
|
34
|
+
get icon(): ReactElement | ((props: OnRunProps) => ReactElement) | undefined {
|
|
35
|
+
const icon = this._icon;
|
|
36
36
|
if (typeof icon === "function") {
|
|
37
37
|
return (runProps: OnRunProps) => icon(this, runProps);
|
|
38
38
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
2
|
+
import { Box, CircularProgress } from "@mui/joy";
|
|
2
3
|
import Stack from "@mui/joy/Stack";
|
|
3
4
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
5
|
import { motion } from "motion/react";
|
|
5
|
-
import { useEffect } from "react";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
6
7
|
import MenuButton from "../components/MenuButton";
|
|
7
8
|
import { CANVAS_UI_LAYER_NAME } from "../constans";
|
|
8
9
|
import useGameProps from "../hooks/useGameProps";
|
|
@@ -21,6 +22,7 @@ export default function MainMenu() {
|
|
|
21
22
|
const { data: lastSave = null, isLoading } = useQueryLastSave();
|
|
22
23
|
const gameProps = useGameProps();
|
|
23
24
|
const { uiTransition: t, navigate, notify } = gameProps;
|
|
25
|
+
const [loading, setLoading] = useState(false);
|
|
24
26
|
|
|
25
27
|
useEffect(() => {
|
|
26
28
|
editHideInterface(false);
|
|
@@ -57,36 +59,54 @@ export default function MainMenu() {
|
|
|
57
59
|
if (!lastSave) {
|
|
58
60
|
return;
|
|
59
61
|
}
|
|
62
|
+
setLoading(true);
|
|
60
63
|
loadSave(lastSave, navigate)
|
|
61
64
|
.then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
|
|
62
65
|
.catch((e) => {
|
|
63
66
|
notify(t("fail_load"), { variant: "error" });
|
|
64
67
|
console.error(e);
|
|
65
|
-
})
|
|
68
|
+
})
|
|
69
|
+
.finally(() => setLoading(false));
|
|
66
70
|
}}
|
|
67
71
|
transitionDelay={0.1}
|
|
68
72
|
loading={isLoading}
|
|
69
|
-
disabled={!isLoading && !lastSave}
|
|
73
|
+
disabled={(!isLoading && !lastSave) || loading}
|
|
70
74
|
>
|
|
71
75
|
{t("continue")}
|
|
72
76
|
</MenuButton>
|
|
73
77
|
<MenuButton
|
|
74
|
-
onClick={() => {
|
|
78
|
+
onClick={async () => {
|
|
79
|
+
setLoading(true);
|
|
75
80
|
canvas.removeAll();
|
|
76
|
-
narration
|
|
77
|
-
|
|
78
|
-
|
|
81
|
+
narration
|
|
82
|
+
.callLabel("start", gameProps)
|
|
83
|
+
.then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
|
|
84
|
+
.finally(() => setLoading(false));
|
|
79
85
|
}}
|
|
80
86
|
transitionDelay={0.2}
|
|
87
|
+
disabled={loading}
|
|
81
88
|
>
|
|
82
89
|
{t("start")}
|
|
83
90
|
</MenuButton>
|
|
84
|
-
<MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
|
|
91
|
+
<MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
|
|
85
92
|
{t("load")}
|
|
86
93
|
</MenuButton>
|
|
87
94
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
88
95
|
{t("settings")}
|
|
89
96
|
</MenuButton>
|
|
97
|
+
{loading && (
|
|
98
|
+
<Box
|
|
99
|
+
sx={{
|
|
100
|
+
position: "absolute",
|
|
101
|
+
right: 0,
|
|
102
|
+
bottom: 0,
|
|
103
|
+
padding: 0.5,
|
|
104
|
+
}}
|
|
105
|
+
className='motion-preset-pop'
|
|
106
|
+
>
|
|
107
|
+
<CircularProgress />
|
|
108
|
+
</Box>
|
|
109
|
+
)}
|
|
90
110
|
</Stack>
|
|
91
111
|
);
|
|
92
112
|
}
|
|
@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
|
|
27
|
-
navigate(LOADING_ROUTE);
|
|
27
|
+
await navigate(LOADING_ROUTE);
|
|
28
28
|
// load the save data from the JSON string
|
|
29
29
|
await Game.restoreGameState(saveData.saveData, navigate);
|
|
30
30
|
}
|
|
@@ -19,6 +19,7 @@ export default function useNQTRDetector() {
|
|
|
19
19
|
|
|
20
20
|
useEffect(() => {
|
|
21
21
|
const { background } = currentRoom || {};
|
|
22
|
+
canvas.removeAll();
|
|
22
23
|
if (background) {
|
|
23
24
|
let image = convertMultiTypeSprite(background, gameProps);
|
|
24
25
|
let layer = canvas.getLayer(CANVAS_UI_LAYER_NAME);
|
|
@@ -7,12 +7,16 @@ import { INTERFACE_DATA_USE_QUEY_KEY } from "./useQueryInterface";
|
|
|
7
7
|
|
|
8
8
|
function getRoomInfo(room: RoomInterface) {
|
|
9
9
|
const routine = room.routine;
|
|
10
|
-
|
|
10
|
+
let background = room.background;
|
|
11
11
|
let icon: string | TimeSlotsImage | undefined;
|
|
12
12
|
if (typeof background === "string" || background instanceof TimeSlotsImage) {
|
|
13
13
|
icon = background;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
if (routine.length > 0 && routine[0].background) {
|
|
17
|
+
background = routine[0].background;
|
|
18
|
+
}
|
|
19
|
+
|
|
16
20
|
return {
|
|
17
21
|
id: room.id,
|
|
18
22
|
background: background,
|
|
@@ -52,10 +56,10 @@ export function useQueryCurrentRoomId() {
|
|
|
52
56
|
|
|
53
57
|
const QUICK_ROOMS_USE_QUEY_KEY = "quick_rooms_use_quey_key";
|
|
54
58
|
export function useQueryQuickRooms() {
|
|
55
|
-
const rooms = navigator.currentLocation?.rooms || [];
|
|
56
59
|
return useQuery({
|
|
57
60
|
queryKey: [INTERFACE_DATA_USE_QUEY_KEY, QUICK_ROOMS_USE_QUEY_KEY],
|
|
58
61
|
queryFn: async () => {
|
|
62
|
+
const rooms = navigator.currentLocation?.rooms || [];
|
|
59
63
|
const loadRoomsImage = async () => {
|
|
60
64
|
rooms?.forEach((room) => {
|
|
61
65
|
Assets.backgroundLoadBundle(room.id);
|
|
@@ -9,7 +9,7 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
|
|
|
9
9
|
props: {
|
|
10
10
|
name?: string;
|
|
11
11
|
sprite?: MultiTypeSpriteProp<Activity>;
|
|
12
|
-
icon
|
|
12
|
+
icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
|
|
13
13
|
disabled?: boolean | (() => boolean);
|
|
14
14
|
hidden?: boolean | (() => boolean);
|
|
15
15
|
} & ActivityStoredClassProps
|
|
@@ -24,15 +24,15 @@ export default class Activity extends ActivityStoredClass implements ActivityInt
|
|
|
24
24
|
readonly name: string;
|
|
25
25
|
private readonly _sprite?: MultiTypeSpriteProp<Activity>;
|
|
26
26
|
get sprite(): MultiTypeSprite | undefined {
|
|
27
|
-
|
|
27
|
+
const sprite = this._sprite;
|
|
28
28
|
if (typeof sprite === "function") {
|
|
29
29
|
return (runProps: OnRunProps) => sprite(this, runProps);
|
|
30
30
|
}
|
|
31
31
|
return sprite;
|
|
32
32
|
}
|
|
33
|
-
private readonly _icon
|
|
34
|
-
get icon(): ReactElement | ((props: OnRunProps) => ReactElement) {
|
|
35
|
-
|
|
33
|
+
private readonly _icon?: ReactElement | ((props: Activity, runProps: OnRunProps) => ReactElement);
|
|
34
|
+
get icon(): ReactElement | ((props: OnRunProps) => ReactElement) | undefined {
|
|
35
|
+
const icon = this._icon;
|
|
36
36
|
if (typeof icon === "function") {
|
|
37
37
|
return (runProps: OnRunProps) => icon(this, runProps);
|
|
38
38
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
2
|
+
import { Box, CircularProgress } from "@mui/joy";
|
|
2
3
|
import Stack from "@mui/joy/Stack";
|
|
3
4
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
5
|
import { motion } from "motion/react";
|
|
5
|
-
import { useEffect } from "react";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
6
7
|
import MenuButton from "../components/MenuButton";
|
|
7
8
|
import { CANVAS_UI_LAYER_NAME } from "../constans";
|
|
8
9
|
import useGameProps from "../hooks/useGameProps";
|
|
@@ -22,6 +23,7 @@ export default function MainMenu() {
|
|
|
22
23
|
const { data: lastSave = null, isLoading } = useQueryLastSave();
|
|
23
24
|
const gameProps = useGameProps();
|
|
24
25
|
const { uiTransition: t, navigate, notify } = gameProps;
|
|
26
|
+
const [loading, setLoading] = useState(false);
|
|
25
27
|
|
|
26
28
|
useEffect(() => {
|
|
27
29
|
editHideInterface(false);
|
|
@@ -58,36 +60,54 @@ export default function MainMenu() {
|
|
|
58
60
|
if (!lastSave) {
|
|
59
61
|
return;
|
|
60
62
|
}
|
|
63
|
+
setLoading(true);
|
|
61
64
|
loadSave(lastSave, navigate)
|
|
62
65
|
.then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
|
|
63
66
|
.catch((e) => {
|
|
64
67
|
notify(t("fail_load"), { variant: "error" });
|
|
65
68
|
console.error(e);
|
|
66
|
-
})
|
|
69
|
+
})
|
|
70
|
+
.finally(() => setLoading(false));
|
|
67
71
|
}}
|
|
68
72
|
transitionDelay={0.1}
|
|
69
73
|
loading={isLoading}
|
|
70
|
-
disabled={!isLoading && !lastSave}
|
|
74
|
+
disabled={(!isLoading && !lastSave) || loading}
|
|
71
75
|
>
|
|
72
76
|
{t("continue")}
|
|
73
77
|
</MenuButton>
|
|
74
78
|
<MenuButton
|
|
75
|
-
onClick={() => {
|
|
79
|
+
onClick={async () => {
|
|
80
|
+
setLoading(true);
|
|
76
81
|
canvas.removeAll();
|
|
77
|
-
narration
|
|
78
|
-
|
|
79
|
-
|
|
82
|
+
narration
|
|
83
|
+
.callLabel(startLabel, gameProps)
|
|
84
|
+
.then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
|
|
85
|
+
.finally(() => setLoading(false));
|
|
80
86
|
}}
|
|
81
87
|
transitionDelay={0.2}
|
|
88
|
+
disabled={loading}
|
|
82
89
|
>
|
|
83
90
|
{t("start")}
|
|
84
91
|
</MenuButton>
|
|
85
|
-
<MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
|
|
92
|
+
<MenuButton onClick={editSaveScreen} transitionDelay={0.3} disabled={loading}>
|
|
86
93
|
{t("load")}
|
|
87
94
|
</MenuButton>
|
|
88
95
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
89
96
|
{t("settings")}
|
|
90
97
|
</MenuButton>
|
|
98
|
+
{loading && (
|
|
99
|
+
<Box
|
|
100
|
+
sx={{
|
|
101
|
+
position: "absolute",
|
|
102
|
+
right: 0,
|
|
103
|
+
bottom: 0,
|
|
104
|
+
padding: 0.5,
|
|
105
|
+
}}
|
|
106
|
+
className='motion-preset-pop'
|
|
107
|
+
>
|
|
108
|
+
<CircularProgress />
|
|
109
|
+
</Box>
|
|
110
|
+
)}
|
|
91
111
|
</Stack>
|
|
92
112
|
);
|
|
93
113
|
}
|
|
@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
|
|
27
|
-
navigate(LOADING_ROUTE);
|
|
27
|
+
await navigate(LOADING_ROUTE);
|
|
28
28
|
// load the save data from the JSON string
|
|
29
29
|
await Game.restoreGameState(saveData.saveData, navigate);
|
|
30
30
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
2
|
+
import { Box, CircularProgress } from "@mui/joy";
|
|
2
3
|
import Stack from "@mui/joy/Stack";
|
|
3
4
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
5
|
import { motion } from "motion/react";
|
|
@@ -70,7 +71,7 @@ export default function MainMenu() {
|
|
|
70
71
|
}}
|
|
71
72
|
transitionDelay={0.1}
|
|
72
73
|
loading={isLoading}
|
|
73
|
-
disabled={!isLoading && !lastSave
|
|
74
|
+
disabled={(!isLoading && !lastSave) || loading}
|
|
74
75
|
>
|
|
75
76
|
{t("continue")}
|
|
76
77
|
</MenuButton>
|
|
@@ -95,6 +96,19 @@ export default function MainMenu() {
|
|
|
95
96
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
96
97
|
{t("settings")}
|
|
97
98
|
</MenuButton>
|
|
99
|
+
{loading && (
|
|
100
|
+
<Box
|
|
101
|
+
sx={{
|
|
102
|
+
position: "absolute",
|
|
103
|
+
right: 0,
|
|
104
|
+
bottom: 0,
|
|
105
|
+
padding: 0.5,
|
|
106
|
+
}}
|
|
107
|
+
className='motion-preset-pop'
|
|
108
|
+
>
|
|
109
|
+
<CircularProgress />
|
|
110
|
+
</Box>
|
|
111
|
+
)}
|
|
98
112
|
</Stack>
|
|
99
113
|
);
|
|
100
114
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
2
|
+
import { Box, CircularProgress } from "@mui/joy";
|
|
2
3
|
import Stack from "@mui/joy/Stack";
|
|
3
4
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
5
|
import { motion } from "motion/react";
|
|
@@ -69,7 +70,7 @@ export default function MainMenu() {
|
|
|
69
70
|
}}
|
|
70
71
|
transitionDelay={0.1}
|
|
71
72
|
loading={isLoading}
|
|
72
|
-
disabled={!isLoading && !lastSave
|
|
73
|
+
disabled={(!isLoading && !lastSave) || loading}
|
|
73
74
|
>
|
|
74
75
|
{t("continue")}
|
|
75
76
|
</MenuButton>
|
|
@@ -94,6 +95,19 @@ export default function MainMenu() {
|
|
|
94
95
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
95
96
|
{t("settings")}
|
|
96
97
|
</MenuButton>
|
|
98
|
+
{loading && (
|
|
99
|
+
<Box
|
|
100
|
+
sx={{
|
|
101
|
+
position: "absolute",
|
|
102
|
+
right: 0,
|
|
103
|
+
bottom: 0,
|
|
104
|
+
padding: 0.5,
|
|
105
|
+
}}
|
|
106
|
+
className='motion-preset-pop'
|
|
107
|
+
>
|
|
108
|
+
<CircularProgress />
|
|
109
|
+
</Box>
|
|
110
|
+
)}
|
|
97
111
|
</Stack>
|
|
98
112
|
);
|
|
99
113
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
2
|
+
import { Box, CircularProgress } from "@mui/joy";
|
|
2
3
|
import Stack from "@mui/joy/Stack";
|
|
3
4
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
5
|
import { motion } from "motion/react";
|
|
@@ -69,7 +70,7 @@ export default function MainMenu() {
|
|
|
69
70
|
}}
|
|
70
71
|
transitionDelay={0.1}
|
|
71
72
|
loading={isLoading}
|
|
72
|
-
disabled={!isLoading && !lastSave
|
|
73
|
+
disabled={(!isLoading && !lastSave) || loading}
|
|
73
74
|
>
|
|
74
75
|
{t("continue")}
|
|
75
76
|
</MenuButton>
|
|
@@ -94,6 +95,19 @@ export default function MainMenu() {
|
|
|
94
95
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
95
96
|
{t("settings")}
|
|
96
97
|
</MenuButton>
|
|
98
|
+
{loading && (
|
|
99
|
+
<Box
|
|
100
|
+
sx={{
|
|
101
|
+
position: "absolute",
|
|
102
|
+
right: 0,
|
|
103
|
+
bottom: 0,
|
|
104
|
+
padding: 0.5,
|
|
105
|
+
}}
|
|
106
|
+
className='motion-preset-pop'
|
|
107
|
+
>
|
|
108
|
+
<CircularProgress />
|
|
109
|
+
</Box>
|
|
110
|
+
)}
|
|
97
111
|
</Stack>
|
|
98
112
|
);
|
|
99
113
|
}
|
|
@@ -2,7 +2,7 @@ import { canvas, ImageSprite, narration } from "@drincs/pixi-vn";
|
|
|
2
2
|
import Stack from "@mui/joy/Stack";
|
|
3
3
|
import { useQueryClient } from "@tanstack/react-query";
|
|
4
4
|
import { motion } from "motion/react";
|
|
5
|
-
import { useEffect
|
|
5
|
+
import { useEffect } from "react";
|
|
6
6
|
import MenuButton from "../components/MenuButton";
|
|
7
7
|
import { CANVAS_UI_LAYER_NAME, NARRATION_ROUTE } from "../constans";
|
|
8
8
|
import useGameProps from "../hooks/useGameProps";
|
|
@@ -22,7 +22,6 @@ export default function MainMenu() {
|
|
|
22
22
|
const { data: lastSave = null, isLoading } = useQueryLastSave();
|
|
23
23
|
const gameProps = useGameProps();
|
|
24
24
|
const { uiTransition: t, navigate, notify } = gameProps;
|
|
25
|
-
const [loading, setLoading] = useState(false);
|
|
26
25
|
|
|
27
26
|
useEffect(() => {
|
|
28
27
|
editHideInterface(false);
|
|
@@ -59,37 +58,32 @@ export default function MainMenu() {
|
|
|
59
58
|
if (!lastSave) {
|
|
60
59
|
return;
|
|
61
60
|
}
|
|
62
|
-
setLoading(true);
|
|
63
61
|
loadSave(lastSave, navigate)
|
|
64
62
|
.then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
|
|
65
63
|
.catch((e) => {
|
|
66
64
|
notify(t("fail_load"), { variant: "error" });
|
|
67
65
|
console.error(e);
|
|
68
|
-
})
|
|
69
|
-
.finally(() => setLoading(false));
|
|
66
|
+
});
|
|
70
67
|
}}
|
|
71
68
|
transitionDelay={0.1}
|
|
72
69
|
loading={isLoading}
|
|
73
|
-
disabled={!isLoading && !lastSave
|
|
70
|
+
disabled={!isLoading && !lastSave}
|
|
74
71
|
>
|
|
75
72
|
{t("continue")}
|
|
76
73
|
</MenuButton>
|
|
77
74
|
<MenuButton
|
|
78
|
-
onClick={
|
|
79
|
-
setLoading(true);
|
|
75
|
+
onClick={() => {
|
|
80
76
|
canvas.removeAll();
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
.finally(() => setLoading(false));
|
|
77
|
+
narration.callLabel(startLabel, gameProps).then(() => {
|
|
78
|
+
queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
|
|
79
|
+
navigate(NARRATION_ROUTE);
|
|
80
|
+
});
|
|
86
81
|
}}
|
|
87
82
|
transitionDelay={0.2}
|
|
88
|
-
disabled={loading}
|
|
89
83
|
>
|
|
90
84
|
{t("start")}
|
|
91
85
|
</MenuButton>
|
|
92
|
-
<MenuButton onClick={editSaveScreen} transitionDelay={0.3}
|
|
86
|
+
<MenuButton onClick={editSaveScreen} transitionDelay={0.3}>
|
|
93
87
|
{t("load")}
|
|
94
88
|
</MenuButton>
|
|
95
89
|
<MenuButton onClick={() => setOpenSettings(true)} transitionDelay={0.4}>
|
|
@@ -24,7 +24,7 @@ export function getSave(image?: string): GameSaveData {
|
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
|
|
27
|
-
|
|
27
|
+
navigate(LOADING_ROUTE);
|
|
28
28
|
// load the save data from the JSON string
|
|
29
29
|
await Game.restoreGameState(saveData.saveData, navigate);
|
|
30
30
|
}
|