create-pixi-vn 1.2.2 → 1.2.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.
Files changed (24) hide show
  1. package/package.json +1 -1
  2. package/template-game-engine/package.json +1 -1
  3. package/template-game-engine/src/classes/Label.ts +2 -27
  4. package/template-game-engine/src/index.ts +3 -2
  5. package/template-react-vite-muijoy/package.json +1 -1
  6. package/template-react-vite-muijoy/src/components/NextButton.tsx +2 -0
  7. package/template-react-vite-muijoy/src/components/TextMenuButton.tsx +48 -49
  8. package/template-react-vite-muijoy/src/screens/QuickTools.tsx +15 -4
  9. package/template-react-vite-muijoy/src/stores/useStepStore.ts +12 -0
  10. package/template-react-vite-muijoy-ink/package.json +1 -1
  11. package/template-react-vite-muijoy-ink/src/components/NextButton.tsx +2 -0
  12. package/template-react-vite-muijoy-ink/src/components/TextMenuButton.tsx +48 -49
  13. package/template-react-vite-muijoy-ink/src/screens/QuickTools.tsx +15 -4
  14. package/template-react-vite-muijoy-ink/src/stores/useStepStore.ts +12 -0
  15. package/template-react-vite-muijoy-ink-tauri/package.json +1 -1
  16. package/template-react-vite-muijoy-ink-tauri/src/components/NextButton.tsx +2 -0
  17. package/template-react-vite-muijoy-ink-tauri/src/components/TextMenuButton.tsx +48 -49
  18. package/template-react-vite-muijoy-ink-tauri/src/screens/QuickTools.tsx +15 -4
  19. package/template-react-vite-muijoy-ink-tauri/src/stores/useStepStore.ts +12 -0
  20. package/template-react-vite-muijoy-tauri/package.json +1 -1
  21. package/template-react-vite-muijoy-tauri/src/components/NextButton.tsx +2 -0
  22. package/template-react-vite-muijoy-tauri/src/components/TextMenuButton.tsx +48 -49
  23. package/template-react-vite-muijoy-tauri/src/screens/QuickTools.tsx +15 -4
  24. package/template-react-vite-muijoy-tauri/src/stores/useStepStore.ts +12 -0
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "create-pixi-vn",
3
3
  "description": "Create a new Pixi’VN project",
4
- "version": "1.2.2",
4
+ "version": "1.2.4",
5
5
  "type": "module",
6
6
  "license": "GPL-3.0",
7
7
  "author": "DRincs-Productions",
package/template-game-engine/package.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "pixi.js": "^8.9.1"
20
20
  },
21
21
  "devDependencies": {
22
- "@drincs/pixi-vn": "^1.0.1",
22
+ "@drincs/pixi-vn": "^1.0.3",
23
23
  "@types/crypto-js": "^4.2.2",
24
24
  "crypto-js": "^4.2.0",
25
25
  "ts-node": "^10.9.2",
package/template-game-engine/src/classes/Label.ts CHANGED
@@ -1,31 +1,6 @@
1
1
  import { LabelAbstract, LabelProps, StepLabelType } from "@drincs/pixi-vn";
2
- import { AdditionalShaSpetsEnum } from "@drincs/pixi-vn/dist/narration/interfaces/HistoryStep";
3
2
  import sha1 from "crypto-js/sha1";
4
3
 
5
- /**
6
- * Label is a class that contains a list of steps, which will be performed as the game continues.
7
- * For Ren'py this is the equivalent of a label.
8
- * @example
9
- * ```typescript
10
- * const START_LABEL_ID = "StartLabel"
11
- *
12
- * export const startLabel = newLabel(START_LABEL_ID,
13
- * [
14
- * (props) => {
15
- * canvas.clear()
16
- * narration.dialogue = { character: liam, text: "Which test do you want to perform?" }
17
- * narration.choiceMenuOptions = [
18
- * new ChoiceMenuOption("Events Test", eventsTestLabel),
19
- * new ChoiceMenuOption("Show Image Test", showImageTest),
20
- * ]
21
- * },
22
- * (props) => narration.jumpLabel(START_LABEL_ID, props),
23
- * ]
24
- * )
25
- *
26
- * narration.callLabel(StartLabel)
27
- * ```
28
- */
29
4
  export default class Label<T extends {} = {}> extends LabelAbstract<Label<T>, T> {
30
5
  public get stepCount(): number {
31
6
  return this.steps.length;
@@ -57,7 +32,7 @@ export default class Label<T extends {} = {}> extends LabelAbstract<Label<T>, T>
57
32
  public getStepSha(index: number): string {
58
33
  if (index < 0 || index >= this.steps.length) {
59
34
  console.warn("stepSha not found, setting to ERROR");
60
- return AdditionalShaSpetsEnum.ERROR;
35
+ return "error";
61
36
  }
62
37
  try {
63
38
  let step = this.steps[index];
@@ -65,7 +40,7 @@ export default class Label<T extends {} = {}> extends LabelAbstract<Label<T>, T>
65
40
  return sha1String.toString();
66
41
  } catch (e) {
67
42
  console.warn("stepSha not found, setting to ERROR", e);
68
- return AdditionalShaSpetsEnum.ERROR;
43
+ return "error";
69
44
  }
70
45
  }
71
46
  }
package/template-game-engine/src/index.ts CHANGED
@@ -59,7 +59,7 @@ export namespace Game {
59
59
  },
60
60
  restoreGameStepState: async (state, navigate) => {
61
61
  HistoryManagerStatic._originalStepData = state;
62
- NarrationManagerStatic._openedLabels = state.openedLabels;
62
+ NarrationManagerStatic.openedLabels = state.openedLabels;
63
63
  storage.restore(state.storage);
64
64
  await canvas.restore(state.canvas);
65
65
  sound.restore(state.sound);
@@ -129,6 +129,7 @@ export namespace Game {
129
129
  * @param navigate The function to navigate to a path
130
130
  */
131
131
  export async function restoreGameState(data: GameState, navigate: (path: string) => void) {
132
+ stepHistory.restore(data.historyData);
132
133
  await narration.restore(data.stepData, HistoryManagerStatic.lastHistoryStep);
133
134
  storage.restore(data.storageData);
134
135
  await canvas.restore(data.canvasData);
@@ -147,4 +148,4 @@ export namespace Game {
147
148
  }
148
149
 
149
150
  export { Container, ImageContainer, ImageSprite, Sprite, Text, VideoSprite } from "@drincs/pixi-vn";
150
- export { canvas, GameUnifier, narration, PIXIVN, sound, storage };
151
+ export { canvas, GameUnifier, narration, PIXIVN, sound, stepHistory, storage };
package/template-react-vite-muijoy/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "preview": "vite preview"
12
12
  },
13
13
  "dependencies": {
14
- "@drincs/pixi-vn": "^1.0.1",
14
+ "@drincs/pixi-vn": "^1.0.3",
15
15
  "@emotion/react": "^11.14.0",
16
16
  "@emotion/styled": "^11.14.0",
17
17
  "@mui/icons-material": "^7.0.2",
package/template-react-vite-muijoy/src/components/NextButton.tsx CHANGED
@@ -14,6 +14,7 @@ export default function NextButton() {
14
14
  const skipEnabled = useSkipStore((state) => state.enabled);
15
15
  const setSkipEnabled = useSkipStore((state) => state.setEnabled);
16
16
  const nextStepLoading = useStepStore((state) => state.loading);
17
+ const goBackLoading = useStepStore((state) => state.backLoading);
17
18
  const { data: canGoNext = false } = useQueryCanGoNext();
18
19
  const hideNextButton = useInterfaceStore((state) => state.hidden || !canGoNext);
19
20
  const setNextStepLoading = useStepStore((state) => state.setLoading);
@@ -69,6 +70,7 @@ export default function NextButton() {
69
70
  variant='solid'
70
71
  color='primary'
71
72
  size='sm'
73
+ disabled={goBackLoading}
72
74
  loading={nextStepLoading}
73
75
  sx={{
74
76
  position: "absolute",
package/template-react-vite-muijoy/src/components/TextMenuButton.tsx CHANGED
@@ -1,49 +1,48 @@
1
- import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
-
3
- interface TextMenuButtonProps
4
- extends LinkProps<
5
- LinkTypeMap["defaultComponent"],
6
- {
7
- component?: React.ElementType;
8
- focusVisible?: boolean;
9
- }
10
- > {
11
- to?: string;
12
- selected?: boolean;
13
- }
14
-
15
- export default function TextMenuButton(props: TextMenuButtonProps) {
16
- const { sx, children, disabled, selected, ...rest } = props;
17
-
18
- return (
19
- <Link
20
- sx={{
21
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
- userSelect: "none",
23
- ...sx,
24
- }}
25
- disabled={disabled}
26
- {...rest}
27
- >
28
- <Typography
29
- textColor={
30
- selected
31
- ? useTheme().palette.primary[500]
32
- : disabled
33
- ? useTheme().palette.neutral[500]
34
- : useTheme().palette.neutral[300]
35
- }
36
- sx={{
37
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
- userSelect: "none",
39
- textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
- useTheme().palette.common.black
41
- }`,
42
- pointerEvents: "auto",
43
- }}
44
- >
45
- {children}
46
- </Typography>
47
- </Link>
48
- );
49
- }
1
+ import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
+
3
+ interface TextMenuButtonProps
4
+ extends LinkProps<
5
+ LinkTypeMap["defaultComponent"],
6
+ {
7
+ component?: React.ElementType;
8
+ focusVisible?: boolean;
9
+ }
10
+ > {
11
+ to?: string;
12
+ selected?: boolean;
13
+ }
14
+
15
+ export default function TextMenuButton(props: TextMenuButtonProps) {
16
+ const { sx, children, disabled, selected, ...rest } = props;
17
+
18
+ return (
19
+ <Link
20
+ sx={{
21
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
+ userSelect: "none",
23
+ ...sx,
24
+ }}
25
+ disabled={disabled}
26
+ {...rest}
27
+ >
28
+ <Typography
29
+ textColor={
30
+ selected
31
+ ? useTheme().palette.primary[500]
32
+ : disabled
33
+ ? useTheme().palette.neutral[500]
34
+ : useTheme().palette.neutral[300]
35
+ }
36
+ sx={{
37
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
+ userSelect: "none",
39
+ textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
+ useTheme().palette.common.black
41
+ }`,
42
+ }}
43
+ >
44
+ {children}
45
+ </Typography>
46
+ </Link>
47
+ );
48
+ }
package/template-react-vite-muijoy/src/screens/QuickTools.tsx CHANGED
@@ -12,6 +12,7 @@ import useHistoryScreenStore from "../stores/useHistoryScreenStore";
12
12
  import useInterfaceStore from "../stores/useInterfaceStore";
13
13
  import useSettingsScreenStore from "../stores/useSettingsScreenStore";
14
14
  import useSkipStore from "../stores/useSkipStore";
15
+ import useStepStore from "../stores/useStepStore";
15
16
  import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoBack } from "../use_query/useQueryInterface";
16
17
  import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "../use_query/useQueryLastSave";
17
18
  import { SAVES_USE_QUEY_KEY } from "../use_query/useQuerySaves";
@@ -35,6 +36,8 @@ export default function QuickTools() {
35
36
  const queryClient = useQueryClient();
36
37
  const { data: lastSave = null } = useQueryLastSave();
37
38
  const { data: canGoBack = null } = useQueryCanGoBack();
39
+ const nextStepLoading = useStepStore((state) => state.loading);
40
+ const setBackLoading = useStepStore((state) => state.setBackLoading);
38
41
 
39
42
  return (
40
43
  <>
@@ -68,12 +71,20 @@ export default function QuickTools() {
68
71
  transition={{ type: "tween" }}
69
72
  >
70
73
  <TextMenuButton
71
- onClick={() =>
74
+ onClick={() => {
75
+ setBackLoading(true);
72
76
  stepHistory
73
77
  .goBack(navigate)
74
- .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
75
- }
76
- disabled={!canGoBack}
78
+ .then(() => {
79
+ setBackLoading(false);
80
+ queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
81
+ })
82
+ .catch((e) => {
83
+ setBackLoading(false);
84
+ console.error(e);
85
+ });
86
+ }}
87
+ disabled={!canGoBack || nextStepLoading}
77
88
  sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
78
89
  >
79
90
  {t("back")}
package/template-react-vite-muijoy/src/stores/useStepStore.ts CHANGED
@@ -9,6 +9,14 @@ type StepStoreType = {
9
9
  * Set the loading state of the step
10
10
  */
11
11
  setLoading: (value: boolean) => void;
12
+ /**
13
+ * If the step is loading in the go back
14
+ */
15
+ backLoading: boolean;
16
+ /**
17
+ * Set the loading state of the step in the back
18
+ */
19
+ setBackLoading: (value: boolean) => void;
12
20
  };
13
21
 
14
22
  const useStepStore = create<StepStoreType>((set) => ({
@@ -16,5 +24,9 @@ const useStepStore = create<StepStoreType>((set) => ({
16
24
  setLoading: (value: boolean) => {
17
25
  set({ loading: value });
18
26
  },
27
+ backLoading: false,
28
+ setBackLoading: (value: boolean) => {
29
+ set({ backLoading: value });
30
+ },
19
31
  }));
20
32
  export default useStepStore;
package/template-react-vite-muijoy-ink/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "preview": "vite preview"
12
12
  },
13
13
  "dependencies": {
14
- "@drincs/pixi-vn": "^1.0.1",
14
+ "@drincs/pixi-vn": "^1.0.3",
15
15
  "@drincs/pixi-vn-ink": "^0.6.0",
16
16
  "@emotion/react": "^11.14.0",
17
17
  "@emotion/styled": "^11.14.0",
package/template-react-vite-muijoy-ink/src/components/NextButton.tsx CHANGED
@@ -14,6 +14,7 @@ export default function NextButton() {
14
14
  const skipEnabled = useSkipStore((state) => state.enabled);
15
15
  const setSkipEnabled = useSkipStore((state) => state.setEnabled);
16
16
  const nextStepLoading = useStepStore((state) => state.loading);
17
+ const goBackLoading = useStepStore((state) => state.backLoading);
17
18
  const { data: canGoNext = false } = useQueryCanGoNext();
18
19
  const hideNextButton = useInterfaceStore((state) => state.hidden || !canGoNext);
19
20
  const setNextStepLoading = useStepStore((state) => state.setLoading);
@@ -69,6 +70,7 @@ export default function NextButton() {
69
70
  variant='solid'
70
71
  color='primary'
71
72
  size='sm'
73
+ disabled={goBackLoading}
72
74
  loading={nextStepLoading}
73
75
  sx={{
74
76
  position: "absolute",
package/template-react-vite-muijoy-ink/src/components/TextMenuButton.tsx CHANGED
@@ -1,49 +1,48 @@
1
- import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
-
3
- interface TextMenuButtonProps
4
- extends LinkProps<
5
- LinkTypeMap["defaultComponent"],
6
- {
7
- component?: React.ElementType;
8
- focusVisible?: boolean;
9
- }
10
- > {
11
- to?: string;
12
- selected?: boolean;
13
- }
14
-
15
- export default function TextMenuButton(props: TextMenuButtonProps) {
16
- const { sx, children, disabled, selected, ...rest } = props;
17
-
18
- return (
19
- <Link
20
- sx={{
21
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
- userSelect: "none",
23
- ...sx,
24
- }}
25
- disabled={disabled}
26
- {...rest}
27
- >
28
- <Typography
29
- textColor={
30
- selected
31
- ? useTheme().palette.primary[500]
32
- : disabled
33
- ? useTheme().palette.neutral[500]
34
- : useTheme().palette.neutral[300]
35
- }
36
- sx={{
37
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
- userSelect: "none",
39
- textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
- useTheme().palette.common.black
41
- }`,
42
- pointerEvents: "auto",
43
- }}
44
- >
45
- {children}
46
- </Typography>
47
- </Link>
48
- );
49
- }
1
+ import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
+
3
+ interface TextMenuButtonProps
4
+ extends LinkProps<
5
+ LinkTypeMap["defaultComponent"],
6
+ {
7
+ component?: React.ElementType;
8
+ focusVisible?: boolean;
9
+ }
10
+ > {
11
+ to?: string;
12
+ selected?: boolean;
13
+ }
14
+
15
+ export default function TextMenuButton(props: TextMenuButtonProps) {
16
+ const { sx, children, disabled, selected, ...rest } = props;
17
+
18
+ return (
19
+ <Link
20
+ sx={{
21
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
+ userSelect: "none",
23
+ ...sx,
24
+ }}
25
+ disabled={disabled}
26
+ {...rest}
27
+ >
28
+ <Typography
29
+ textColor={
30
+ selected
31
+ ? useTheme().palette.primary[500]
32
+ : disabled
33
+ ? useTheme().palette.neutral[500]
34
+ : useTheme().palette.neutral[300]
35
+ }
36
+ sx={{
37
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
+ userSelect: "none",
39
+ textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
+ useTheme().palette.common.black
41
+ }`,
42
+ }}
43
+ >
44
+ {children}
45
+ </Typography>
46
+ </Link>
47
+ );
48
+ }
package/template-react-vite-muijoy-ink/src/screens/QuickTools.tsx CHANGED
@@ -12,6 +12,7 @@ import useHistoryScreenStore from "../stores/useHistoryScreenStore";
12
12
  import useInterfaceStore from "../stores/useInterfaceStore";
13
13
  import useSettingsScreenStore from "../stores/useSettingsScreenStore";
14
14
  import useSkipStore from "../stores/useSkipStore";
15
+ import useStepStore from "../stores/useStepStore";
15
16
  import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoBack } from "../use_query/useQueryInterface";
16
17
  import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "../use_query/useQueryLastSave";
17
18
  import { SAVES_USE_QUEY_KEY } from "../use_query/useQuerySaves";
@@ -35,6 +36,8 @@ export default function QuickTools() {
35
36
  const queryClient = useQueryClient();
36
37
  const { data: lastSave = null } = useQueryLastSave();
37
38
  const { data: canGoBack = null } = useQueryCanGoBack();
39
+ const nextStepLoading = useStepStore((state) => state.loading);
40
+ const setBackLoading = useStepStore((state) => state.setBackLoading);
38
41
 
39
42
  return (
40
43
  <>
@@ -68,12 +71,20 @@ export default function QuickTools() {
68
71
  transition={{ type: "tween" }}
69
72
  >
70
73
  <TextMenuButton
71
- onClick={() =>
74
+ onClick={() => {
75
+ setBackLoading(true);
72
76
  stepHistory
73
77
  .goBack(navigate)
74
- .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
75
- }
76
- disabled={!canGoBack}
78
+ .then(() => {
79
+ setBackLoading(false);
80
+ queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
81
+ })
82
+ .catch((e) => {
83
+ setBackLoading(false);
84
+ console.error(e);
85
+ });
86
+ }}
87
+ disabled={!canGoBack || nextStepLoading}
77
88
  sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
78
89
  >
79
90
  {t("back")}
package/template-react-vite-muijoy-ink/src/stores/useStepStore.ts CHANGED
@@ -9,6 +9,14 @@ type StepStoreType = {
9
9
  * Set the loading state of the step
10
10
  */
11
11
  setLoading: (value: boolean) => void;
12
+ /**
13
+ * If the step is loading in the go back
14
+ */
15
+ backLoading: boolean;
16
+ /**
17
+ * Set the loading state of the step in the back
18
+ */
19
+ setBackLoading: (value: boolean) => void;
12
20
  };
13
21
 
14
22
  const useStepStore = create<StepStoreType>((set) => ({
@@ -16,5 +24,9 @@ const useStepStore = create<StepStoreType>((set) => ({
16
24
  setLoading: (value: boolean) => {
17
25
  set({ loading: value });
18
26
  },
27
+ backLoading: false,
28
+ setBackLoading: (value: boolean) => {
29
+ set({ backLoading: value });
30
+ },
19
31
  }));
20
32
  export default useStepStore;
package/template-react-vite-muijoy-ink-tauri/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "tauri": "tauri"
13
13
  },
14
14
  "dependencies": {
15
- "@drincs/pixi-vn": "^1.0.1",
15
+ "@drincs/pixi-vn": "^1.0.3",
16
16
  "@drincs/pixi-vn-ink": "^0.6.0",
17
17
  "@emotion/react": "^11.14.0",
18
18
  "@emotion/styled": "^11.14.0",
package/template-react-vite-muijoy-ink-tauri/src/components/NextButton.tsx CHANGED
@@ -14,6 +14,7 @@ export default function NextButton() {
14
14
  const skipEnabled = useSkipStore((state) => state.enabled);
15
15
  const setSkipEnabled = useSkipStore((state) => state.setEnabled);
16
16
  const nextStepLoading = useStepStore((state) => state.loading);
17
+ const goBackLoading = useStepStore((state) => state.backLoading);
17
18
  const { data: canGoNext = false } = useQueryCanGoNext();
18
19
  const hideNextButton = useInterfaceStore((state) => state.hidden || !canGoNext);
19
20
  const setNextStepLoading = useStepStore((state) => state.setLoading);
@@ -69,6 +70,7 @@ export default function NextButton() {
69
70
  variant='solid'
70
71
  color='primary'
71
72
  size='sm'
73
+ disabled={goBackLoading}
72
74
  loading={nextStepLoading}
73
75
  sx={{
74
76
  position: "absolute",
package/template-react-vite-muijoy-ink-tauri/src/components/TextMenuButton.tsx CHANGED
@@ -1,49 +1,48 @@
1
- import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
-
3
- interface TextMenuButtonProps
4
- extends LinkProps<
5
- LinkTypeMap["defaultComponent"],
6
- {
7
- component?: React.ElementType;
8
- focusVisible?: boolean;
9
- }
10
- > {
11
- to?: string;
12
- selected?: boolean;
13
- }
14
-
15
- export default function TextMenuButton(props: TextMenuButtonProps) {
16
- const { sx, children, disabled, selected, ...rest } = props;
17
-
18
- return (
19
- <Link
20
- sx={{
21
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
- userSelect: "none",
23
- ...sx,
24
- }}
25
- disabled={disabled}
26
- {...rest}
27
- >
28
- <Typography
29
- textColor={
30
- selected
31
- ? useTheme().palette.primary[500]
32
- : disabled
33
- ? useTheme().palette.neutral[500]
34
- : useTheme().palette.neutral[300]
35
- }
36
- sx={{
37
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
- userSelect: "none",
39
- textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
- useTheme().palette.common.black
41
- }`,
42
- pointerEvents: "auto",
43
- }}
44
- >
45
- {children}
46
- </Typography>
47
- </Link>
48
- );
49
- }
1
+ import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
+
3
+ interface TextMenuButtonProps
4
+ extends LinkProps<
5
+ LinkTypeMap["defaultComponent"],
6
+ {
7
+ component?: React.ElementType;
8
+ focusVisible?: boolean;
9
+ }
10
+ > {
11
+ to?: string;
12
+ selected?: boolean;
13
+ }
14
+
15
+ export default function TextMenuButton(props: TextMenuButtonProps) {
16
+ const { sx, children, disabled, selected, ...rest } = props;
17
+
18
+ return (
19
+ <Link
20
+ sx={{
21
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
+ userSelect: "none",
23
+ ...sx,
24
+ }}
25
+ disabled={disabled}
26
+ {...rest}
27
+ >
28
+ <Typography
29
+ textColor={
30
+ selected
31
+ ? useTheme().palette.primary[500]
32
+ : disabled
33
+ ? useTheme().palette.neutral[500]
34
+ : useTheme().palette.neutral[300]
35
+ }
36
+ sx={{
37
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
+ userSelect: "none",
39
+ textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
+ useTheme().palette.common.black
41
+ }`,
42
+ }}
43
+ >
44
+ {children}
45
+ </Typography>
46
+ </Link>
47
+ );
48
+ }
package/template-react-vite-muijoy-ink-tauri/src/screens/QuickTools.tsx CHANGED
@@ -12,6 +12,7 @@ import useHistoryScreenStore from "../stores/useHistoryScreenStore";
12
12
  import useInterfaceStore from "../stores/useInterfaceStore";
13
13
  import useSettingsScreenStore from "../stores/useSettingsScreenStore";
14
14
  import useSkipStore from "../stores/useSkipStore";
15
+ import useStepStore from "../stores/useStepStore";
15
16
  import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoBack } from "../use_query/useQueryInterface";
16
17
  import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "../use_query/useQueryLastSave";
17
18
  import { SAVES_USE_QUEY_KEY } from "../use_query/useQuerySaves";
@@ -35,6 +36,8 @@ export default function QuickTools() {
35
36
  const queryClient = useQueryClient();
36
37
  const { data: lastSave = null } = useQueryLastSave();
37
38
  const { data: canGoBack = null } = useQueryCanGoBack();
39
+ const nextStepLoading = useStepStore((state) => state.loading);
40
+ const setBackLoading = useStepStore((state) => state.setBackLoading);
38
41
 
39
42
  return (
40
43
  <>
@@ -68,12 +71,20 @@ export default function QuickTools() {
68
71
  transition={{ type: "tween" }}
69
72
  >
70
73
  <TextMenuButton
71
- onClick={() =>
74
+ onClick={() => {
75
+ setBackLoading(true);
72
76
  stepHistory
73
77
  .goBack(navigate)
74
- .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
75
- }
76
- disabled={!canGoBack}
78
+ .then(() => {
79
+ setBackLoading(false);
80
+ queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
81
+ })
82
+ .catch((e) => {
83
+ setBackLoading(false);
84
+ console.error(e);
85
+ });
86
+ }}
87
+ disabled={!canGoBack || nextStepLoading}
77
88
  sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
78
89
  >
79
90
  {t("back")}
package/template-react-vite-muijoy-ink-tauri/src/stores/useStepStore.ts CHANGED
@@ -9,6 +9,14 @@ type StepStoreType = {
9
9
  * Set the loading state of the step
10
10
  */
11
11
  setLoading: (value: boolean) => void;
12
+ /**
13
+ * If the step is loading in the go back
14
+ */
15
+ backLoading: boolean;
16
+ /**
17
+ * Set the loading state of the step in the back
18
+ */
19
+ setBackLoading: (value: boolean) => void;
12
20
  };
13
21
 
14
22
  const useStepStore = create<StepStoreType>((set) => ({
@@ -16,5 +24,9 @@ const useStepStore = create<StepStoreType>((set) => ({
16
24
  setLoading: (value: boolean) => {
17
25
  set({ loading: value });
18
26
  },
27
+ backLoading: false,
28
+ setBackLoading: (value: boolean) => {
29
+ set({ backLoading: value });
30
+ },
19
31
  }));
20
32
  export default useStepStore;
package/template-react-vite-muijoy-tauri/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "tauri": "tauri"
13
13
  },
14
14
  "dependencies": {
15
- "@drincs/pixi-vn": "^1.0.1",
15
+ "@drincs/pixi-vn": "^1.0.3",
16
16
  "@emotion/react": "^11.14.0",
17
17
  "@emotion/styled": "^11.14.0",
18
18
  "@mui/icons-material": "^7.0.2",
package/template-react-vite-muijoy-tauri/src/components/NextButton.tsx CHANGED
@@ -14,6 +14,7 @@ export default function NextButton() {
14
14
  const skipEnabled = useSkipStore((state) => state.enabled);
15
15
  const setSkipEnabled = useSkipStore((state) => state.setEnabled);
16
16
  const nextStepLoading = useStepStore((state) => state.loading);
17
+ const goBackLoading = useStepStore((state) => state.backLoading);
17
18
  const { data: canGoNext = false } = useQueryCanGoNext();
18
19
  const hideNextButton = useInterfaceStore((state) => state.hidden || !canGoNext);
19
20
  const setNextStepLoading = useStepStore((state) => state.setLoading);
@@ -69,6 +70,7 @@ export default function NextButton() {
69
70
  variant='solid'
70
71
  color='primary'
71
72
  size='sm'
73
+ disabled={goBackLoading}
72
74
  loading={nextStepLoading}
73
75
  sx={{
74
76
  position: "absolute",
package/template-react-vite-muijoy-tauri/src/components/TextMenuButton.tsx CHANGED
@@ -1,49 +1,48 @@
1
- import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
-
3
- interface TextMenuButtonProps
4
- extends LinkProps<
5
- LinkTypeMap["defaultComponent"],
6
- {
7
- component?: React.ElementType;
8
- focusVisible?: boolean;
9
- }
10
- > {
11
- to?: string;
12
- selected?: boolean;
13
- }
14
-
15
- export default function TextMenuButton(props: TextMenuButtonProps) {
16
- const { sx, children, disabled, selected, ...rest } = props;
17
-
18
- return (
19
- <Link
20
- sx={{
21
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
- userSelect: "none",
23
- ...sx,
24
- }}
25
- disabled={disabled}
26
- {...rest}
27
- >
28
- <Typography
29
- textColor={
30
- selected
31
- ? useTheme().palette.primary[500]
32
- : disabled
33
- ? useTheme().palette.neutral[500]
34
- : useTheme().palette.neutral[300]
35
- }
36
- sx={{
37
- fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
- userSelect: "none",
39
- textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
- useTheme().palette.common.black
41
- }`,
42
- pointerEvents: "auto",
43
- }}
44
- >
45
- {children}
46
- </Typography>
47
- </Link>
48
- );
49
- }
1
+ import { Link, LinkProps, LinkTypeMap, Typography, useTheme } from "@mui/joy";
2
+
3
+ interface TextMenuButtonProps
4
+ extends LinkProps<
5
+ LinkTypeMap["defaultComponent"],
6
+ {
7
+ component?: React.ElementType;
8
+ focusVisible?: boolean;
9
+ }
10
+ > {
11
+ to?: string;
12
+ selected?: boolean;
13
+ }
14
+
15
+ export default function TextMenuButton(props: TextMenuButtonProps) {
16
+ const { sx, children, disabled, selected, ...rest } = props;
17
+
18
+ return (
19
+ <Link
20
+ sx={{
21
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
22
+ userSelect: "none",
23
+ ...sx,
24
+ }}
25
+ disabled={disabled}
26
+ {...rest}
27
+ >
28
+ <Typography
29
+ textColor={
30
+ selected
31
+ ? useTheme().palette.primary[500]
32
+ : disabled
33
+ ? useTheme().palette.neutral[500]
34
+ : useTheme().palette.neutral[300]
35
+ }
36
+ sx={{
37
+ fontSize: { xs: "0.6rem", sm: "0.7rem", md: "0.8rem", lg: "1rem", xl: "1.1rem" },
38
+ userSelect: "none",
39
+ textShadow: `0 0 3px ${useTheme().palette.common.black}, 0 0 5px ${
40
+ useTheme().palette.common.black
41
+ }`,
42
+ }}
43
+ >
44
+ {children}
45
+ </Typography>
46
+ </Link>
47
+ );
48
+ }
package/template-react-vite-muijoy-tauri/src/screens/QuickTools.tsx CHANGED
@@ -12,6 +12,7 @@ import useHistoryScreenStore from "../stores/useHistoryScreenStore";
12
12
  import useInterfaceStore from "../stores/useInterfaceStore";
13
13
  import useSettingsScreenStore from "../stores/useSettingsScreenStore";
14
14
  import useSkipStore from "../stores/useSkipStore";
15
+ import useStepStore from "../stores/useStepStore";
15
16
  import { INTERFACE_DATA_USE_QUEY_KEY, useQueryCanGoBack } from "../use_query/useQueryInterface";
16
17
  import useQueryLastSave, { LAST_SAVE_USE_QUEY_KEY } from "../use_query/useQueryLastSave";
17
18
  import { SAVES_USE_QUEY_KEY } from "../use_query/useQuerySaves";
@@ -35,6 +36,8 @@ export default function QuickTools() {
35
36
  const queryClient = useQueryClient();
36
37
  const { data: lastSave = null } = useQueryLastSave();
37
38
  const { data: canGoBack = null } = useQueryCanGoBack();
39
+ const nextStepLoading = useStepStore((state) => state.loading);
40
+ const setBackLoading = useStepStore((state) => state.setBackLoading);
38
41
 
39
42
  return (
40
43
  <>
@@ -68,12 +71,20 @@ export default function QuickTools() {
68
71
  transition={{ type: "tween" }}
69
72
  >
70
73
  <TextMenuButton
71
- onClick={() =>
74
+ onClick={() => {
75
+ setBackLoading(true);
72
76
  stepHistory
73
77
  .goBack(navigate)
74
- .then(() => queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] }))
75
- }
76
- disabled={!canGoBack}
78
+ .then(() => {
79
+ setBackLoading(false);
80
+ queryClient.invalidateQueries({ queryKey: [INTERFACE_DATA_USE_QUEY_KEY] });
81
+ })
82
+ .catch((e) => {
83
+ setBackLoading(false);
84
+ console.error(e);
85
+ });
86
+ }}
87
+ disabled={!canGoBack || nextStepLoading}
77
88
  sx={{ pointerEvents: !hideInterface ? "auto" : "none" }}
78
89
  >
79
90
  {t("back")}
package/template-react-vite-muijoy-tauri/src/stores/useStepStore.ts CHANGED
@@ -9,6 +9,14 @@ type StepStoreType = {
9
9
  * Set the loading state of the step
10
10
  */
11
11
  setLoading: (value: boolean) => void;
12
+ /**
13
+ * If the step is loading in the go back
14
+ */
15
+ backLoading: boolean;
16
+ /**
17
+ * Set the loading state of the step in the back
18
+ */
19
+ setBackLoading: (value: boolean) => void;
12
20
  };
13
21
 
14
22
  const useStepStore = create<StepStoreType>((set) => ({
@@ -16,5 +24,9 @@ const useStepStore = create<StepStoreType>((set) => ({
16
24
  setLoading: (value: boolean) => {
17
25
  set({ loading: value });
18
26
  },
27
+ backLoading: false,
28
+ setBackLoading: (value: boolean) => {
29
+ set({ backLoading: value });
30
+ },
19
31
  }));
20
32
  export default useStepStore;