@rpgjs/client 5.0.0-beta.1 → 5.0.0-beta.11
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/CHANGELOG.md +49 -0
- package/LICENSE +19 -0
- package/dist/Game/AnimationManager.d.ts +1 -1
- package/dist/Game/AnimationManager.js +18 -9
- package/dist/Game/AnimationManager.js.map +1 -1
- package/dist/Game/AnimationManager.spec.d.ts +1 -0
- package/dist/Game/Event.js.map +1 -1
- package/dist/Game/Map.d.ts +9 -1
- package/dist/Game/Map.js +63 -5
- package/dist/Game/Map.js.map +1 -1
- package/dist/Game/Object.d.ts +47 -15
- package/dist/Game/Object.js +82 -38
- package/dist/Game/Object.js.map +1 -1
- package/dist/Game/Player.js.map +1 -1
- package/dist/Game/ProjectileManager.d.ts +89 -0
- package/dist/Game/ProjectileManager.js +179 -0
- package/dist/Game/ProjectileManager.js.map +1 -0
- package/dist/Game/ProjectileManager.spec.d.ts +1 -0
- package/dist/Gui/Gui.d.ts +17 -4
- package/dist/Gui/Gui.js +78 -48
- package/dist/Gui/Gui.js.map +1 -1
- package/dist/Gui/Gui.spec.d.ts +1 -0
- package/dist/Gui/NotificationManager.js.map +1 -1
- package/dist/Resource.js +1 -1
- package/dist/Resource.js.map +1 -1
- package/dist/RpgClient.d.ts +110 -15
- package/dist/RpgClientEngine.d.ts +86 -10
- package/dist/RpgClientEngine.js +306 -49
- package/dist/RpgClientEngine.js.map +1 -1
- package/dist/Sound.js.map +1 -1
- package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorate.js +1 -1
- package/dist/_virtual/{_@oxc-project_runtime@0.122.0 → _@oxc-project_runtime@0.130.0}/helpers/decorateMetadata.js +1 -1
- package/dist/components/animations/animation.ce.js +4 -5
- package/dist/components/animations/animation.ce.js.map +1 -1
- package/dist/components/animations/hit.ce.js +19 -25
- package/dist/components/animations/hit.ce.js.map +1 -1
- package/dist/components/animations/index.js +4 -4
- package/dist/components/animations/index.js.map +1 -1
- package/dist/components/character.ce.js +422 -240
- package/dist/components/character.ce.js.map +1 -1
- package/dist/components/dynamics/bar.ce.js +97 -0
- package/dist/components/dynamics/bar.ce.js.map +1 -0
- package/dist/components/dynamics/image.ce.js +24 -0
- package/dist/components/dynamics/image.ce.js.map +1 -0
- package/dist/components/dynamics/parse-value.d.ts +3 -0
- package/dist/components/dynamics/parse-value.js +54 -35
- package/dist/components/dynamics/parse-value.js.map +1 -1
- package/dist/components/dynamics/parse-value.spec.d.ts +1 -0
- package/dist/components/dynamics/shape-utils.d.ts +16 -0
- package/dist/components/dynamics/shape-utils.js +73 -0
- package/dist/components/dynamics/shape-utils.js.map +1 -0
- package/dist/components/dynamics/shape-utils.spec.d.ts +1 -0
- package/dist/components/dynamics/shape.ce.js +84 -0
- package/dist/components/dynamics/shape.ce.js.map +1 -0
- package/dist/components/dynamics/text.ce.js +34 -56
- package/dist/components/dynamics/text.ce.js.map +1 -1
- package/dist/components/gui/box.ce.js +6 -8
- package/dist/components/gui/box.ce.js.map +1 -1
- package/dist/components/gui/dialogbox/index.ce.js +56 -62
- package/dist/components/gui/dialogbox/index.ce.js.map +1 -1
- package/dist/components/gui/gameover.ce.js +42 -65
- package/dist/components/gui/gameover.ce.js.map +1 -1
- package/dist/components/gui/hud/hud.ce.js +21 -30
- package/dist/components/gui/hud/hud.ce.js.map +1 -1
- package/dist/components/gui/menu/equip-menu.ce.js +112 -165
- package/dist/components/gui/menu/equip-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/exit-menu.ce.js +8 -6
- package/dist/components/gui/menu/exit-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/items-menu.ce.js +52 -69
- package/dist/components/gui/menu/items-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/main-menu.ce.js +75 -92
- package/dist/components/gui/menu/main-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/options-menu.ce.js +5 -4
- package/dist/components/gui/menu/options-menu.ce.js.map +1 -1
- package/dist/components/gui/menu/skills-menu.ce.js +12 -17
- package/dist/components/gui/menu/skills-menu.ce.js.map +1 -1
- package/dist/components/gui/mobile/index.js +2 -2
- package/dist/components/gui/mobile/index.js.map +1 -1
- package/dist/components/gui/mobile/mobile.ce.js +5 -4
- package/dist/components/gui/mobile/mobile.ce.js.map +1 -1
- package/dist/components/gui/notification/notification.ce.js +22 -24
- package/dist/components/gui/notification/notification.ce.js.map +1 -1
- package/dist/components/gui/save-load.ce.js +72 -249
- package/dist/components/gui/save-load.ce.js.map +1 -1
- package/dist/components/gui/shop/shop.ce.js +90 -127
- package/dist/components/gui/shop/shop.ce.js.map +1 -1
- package/dist/components/gui/title-screen.ce.js +45 -70
- package/dist/components/gui/title-screen.ce.js.map +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.js +1 -0
- package/dist/components/player-components-utils.d.ts +67 -0
- package/dist/components/player-components-utils.js +162 -0
- package/dist/components/player-components-utils.js.map +1 -0
- package/dist/components/player-components-utils.spec.d.ts +1 -0
- package/dist/components/player-components.ce.js +189 -0
- package/dist/components/player-components.ce.js.map +1 -0
- package/dist/components/prebuilt/hp-bar.ce.js +42 -44
- package/dist/components/prebuilt/hp-bar.ce.js.map +1 -1
- package/dist/components/prebuilt/light-halo.ce.js +36 -59
- package/dist/components/prebuilt/light-halo.ce.js.map +1 -1
- package/dist/components/scenes/canvas.ce.js +165 -21
- package/dist/components/scenes/canvas.ce.js.map +1 -1
- package/dist/components/scenes/draw-map.ce.js +25 -32
- package/dist/components/scenes/draw-map.ce.js.map +1 -1
- package/dist/components/scenes/event-layer.ce.js +9 -8
- package/dist/components/scenes/event-layer.ce.js.map +1 -1
- package/dist/core/inject.js +1 -1
- package/dist/core/inject.js.map +1 -1
- package/dist/core/setup.js +1 -1
- package/dist/core/setup.js.map +1 -1
- package/dist/decorators/spritesheet.d.ts +1 -0
- package/dist/decorators/spritesheet.js +11 -0
- package/dist/decorators/spritesheet.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +26 -21
- package/dist/module.js +15 -1
- package/dist/module.js.map +1 -1
- package/dist/node_modules/.pnpm/{@signe_di@2.9.0 → @signe_di@3.0.1}/node_modules/@signe/di/dist/index.js +7 -117
- package/dist/node_modules/.pnpm/@signe_di@3.0.1/node_modules/@signe/di/dist/index.js.map +1 -0
- package/dist/node_modules/.pnpm/@signe_reactive@3.0.1/node_modules/@signe/reactive/dist/index.js +239 -0
- package/dist/node_modules/.pnpm/@signe_reactive@3.0.1/node_modules/@signe/reactive/dist/index.js.map +1 -0
- package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/chunk-EUXUH3YW.js +13 -0
- package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/chunk-EUXUH3YW.js.map +1 -0
- package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/index.js +696 -0
- package/dist/node_modules/.pnpm/@signe_room@3.0.1/node_modules/@signe/room/dist/index.js.map +1 -0
- package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/client/index.js +44 -0
- package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/client/index.js.map +1 -0
- package/dist/node_modules/.pnpm/{@signe_sync@2.9.0 → @signe_sync@3.0.1}/node_modules/@signe/sync/dist/index.js +57 -141
- package/dist/node_modules/.pnpm/@signe_sync@3.0.1/node_modules/@signe/sync/dist/index.js.map +1 -0
- package/dist/node_modules/.pnpm/partysocket@1.1.3/node_modules/partysocket/dist/chunk-HAC622V3.js.map +1 -1
- package/dist/node_modules/.pnpm/partysocket@1.1.3/node_modules/partysocket/dist/chunk-S74YV6PU.js.map +1 -1
- package/dist/node_modules/.pnpm/zod@3.24.2/node_modules/zod/lib/index.js +27 -27
- package/dist/node_modules/.pnpm/zod@3.24.2/node_modules/zod/lib/index.js.map +1 -1
- package/dist/presets/animation.js.map +1 -1
- package/dist/presets/faceset.js.map +1 -1
- package/dist/presets/icon.js.map +1 -1
- package/dist/presets/index.js.map +1 -1
- package/dist/presets/lpc.js.map +1 -1
- package/dist/presets/rmspritesheet.js.map +1 -1
- package/dist/services/AbstractSocket.js.map +1 -1
- package/dist/services/actionInput.d.ts +12 -0
- package/dist/services/actionInput.js +27 -0
- package/dist/services/actionInput.js.map +1 -0
- package/dist/services/actionInput.spec.d.ts +1 -0
- package/dist/services/keyboardControls.js.map +1 -1
- package/dist/services/loadMap.d.ts +6 -0
- package/dist/services/loadMap.js +1 -1
- package/dist/services/loadMap.js.map +1 -1
- package/dist/services/mmorpg-connection.d.ts +5 -0
- package/dist/services/mmorpg-connection.js +50 -0
- package/dist/services/mmorpg-connection.js.map +1 -0
- package/dist/services/mmorpg-connection.spec.d.ts +1 -0
- package/dist/services/mmorpg.d.ts +10 -4
- package/dist/services/mmorpg.js +56 -33
- package/dist/services/mmorpg.js.map +1 -1
- package/dist/services/pointerContext.d.ts +11 -0
- package/dist/services/pointerContext.js +48 -0
- package/dist/services/pointerContext.js.map +1 -0
- package/dist/services/pointerContext.spec.d.ts +1 -0
- package/dist/services/save.js.map +1 -1
- package/dist/services/save.spec.d.ts +1 -0
- package/dist/services/standalone-message.d.ts +1 -0
- package/dist/services/standalone-message.js +9 -0
- package/dist/services/standalone-message.js.map +1 -0
- package/dist/services/standalone.js +4 -3
- package/dist/services/standalone.js.map +1 -1
- package/dist/services/standalone.spec.d.ts +1 -0
- package/dist/utils/getEntityProp.js +4 -3
- package/dist/utils/getEntityProp.js.map +1 -1
- package/dist/utils/getEntityProp.spec.d.ts +1 -0
- package/dist/utils/readPropValue.d.ts +2 -0
- package/dist/utils/readPropValue.js +13 -0
- package/dist/utils/readPropValue.js.map +1 -0
- package/package.json +13 -14
- package/src/Game/AnimationManager.spec.ts +30 -0
- package/src/Game/AnimationManager.ts +22 -10
- package/src/Game/Map.ts +91 -2
- package/src/Game/Object.ts +148 -69
- package/src/Game/ProjectileManager.spec.ts +338 -0
- package/src/Game/ProjectileManager.ts +324 -0
- package/src/Gui/Gui.spec.ts +273 -0
- package/src/Gui/Gui.ts +105 -50
- package/src/Resource.ts +1 -2
- package/src/RpgClient.ts +125 -17
- package/src/RpgClientEngine.ts +457 -87
- package/src/components/character.ce +441 -32
- package/src/components/dynamics/bar.ce +88 -0
- package/src/components/dynamics/image.ce +21 -0
- package/src/components/dynamics/parse-value.spec.ts +83 -0
- package/src/components/dynamics/parse-value.ts +111 -37
- package/src/components/dynamics/shape-utils.spec.ts +46 -0
- package/src/components/dynamics/shape-utils.ts +61 -0
- package/src/components/dynamics/shape.ce +90 -0
- package/src/components/dynamics/text.ce +35 -149
- package/src/components/gui/dialogbox/index.ce +18 -8
- package/src/components/gui/gameover.ce +2 -1
- package/src/components/gui/menu/equip-menu.ce +2 -1
- package/src/components/gui/menu/exit-menu.ce +2 -1
- package/src/components/gui/menu/items-menu.ce +3 -2
- package/src/components/gui/menu/main-menu.ce +2 -1
- package/src/components/gui/save-load.ce +2 -1
- package/src/components/gui/shop/shop.ce +3 -2
- package/src/components/gui/title-screen.ce +2 -1
- package/src/components/index.ts +2 -1
- package/src/components/player-components-utils.spec.ts +109 -0
- package/src/components/player-components-utils.ts +205 -0
- package/src/components/player-components.ce +222 -0
- package/src/components/prebuilt/hp-bar.ce +4 -3
- package/src/components/prebuilt/light-halo.ce +2 -2
- package/src/components/scenes/canvas.ce +175 -8
- package/src/components/scenes/draw-map.ce +18 -17
- package/src/components/scenes/event-layer.ce +1 -2
- package/src/core/setup.ts +2 -2
- package/src/decorators/spritesheet.ts +8 -0
- package/src/index.ts +4 -0
- package/src/module.ts +18 -1
- package/src/services/actionInput.spec.ts +101 -0
- package/src/services/actionInput.ts +53 -0
- package/src/services/loadMap.ts +2 -0
- package/src/services/mmorpg-connection.spec.ts +99 -0
- package/src/services/mmorpg-connection.ts +69 -0
- package/src/services/mmorpg.ts +68 -36
- package/src/services/pointerContext.spec.ts +36 -0
- package/src/services/pointerContext.ts +84 -0
- package/src/services/save.spec.ts +127 -0
- package/src/services/standalone-message.ts +7 -0
- package/src/services/standalone.spec.ts +34 -0
- package/src/services/standalone.ts +3 -2
- package/src/utils/getEntityProp.spec.ts +96 -0
- package/src/utils/getEntityProp.ts +4 -3
- package/src/utils/readPropValue.ts +16 -0
- package/dist/node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js.map +0 -1
- package/dist/node_modules/.pnpm/@signe_reactive@2.8.3/node_modules/@signe/reactive/dist/index.js +0 -457
- package/dist/node_modules/.pnpm/@signe_reactive@2.8.3/node_modules/@signe/reactive/dist/index.js.map +0 -1
- package/dist/node_modules/.pnpm/@signe_reactive@2.9.0/node_modules/@signe/reactive/dist/index.js +0 -463
- package/dist/node_modules/.pnpm/@signe_reactive@2.9.0/node_modules/@signe/reactive/dist/index.js.map +0 -1
- package/dist/node_modules/.pnpm/@signe_room@2.9.0/node_modules/@signe/room/dist/index.js +0 -2191
- package/dist/node_modules/.pnpm/@signe_room@2.9.0/node_modules/@signe/room/dist/index.js.map +0 -1
- package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/chunk-7QVYU63E.js +0 -10
- package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/chunk-7QVYU63E.js.map +0 -1
- package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/client/index.js +0 -91
- package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/client/index.js.map +0 -1
- package/dist/node_modules/.pnpm/@signe_sync@2.9.0/node_modules/@signe/sync/dist/index.js.map +0 -1
- package/dist/node_modules/.pnpm/dset@3.1.4/node_modules/dset/dist/index.js +0 -14
- package/dist/node_modules/.pnpm/dset@3.1.4/node_modules/dset/dist/index.js.map +0 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { inject } from "../../../core/inject.js";
|
|
2
|
+
import { getKeyboardControlBind } from "../../../services/actionInput.js";
|
|
2
3
|
import { RpgClientEngine } from "../../../RpgClientEngine.js";
|
|
3
4
|
import { DOMContainer, DOMElement, DOMSprite, Navigation, computed, cond, createTabindexNavigator, h, loop, signal, useDefineProps, useProps } from "canvasengine";
|
|
4
5
|
import { delay } from "@rpgjs/common";
|
|
@@ -6,18 +7,16 @@ import { delay } from "@rpgjs/common";
|
|
|
6
7
|
function component($$props) {
|
|
7
8
|
useProps($$props);
|
|
8
9
|
const defineProps = useDefineProps($$props);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
});
|
|
20
|
-
var tabs = [
|
|
10
|
+
const engine = inject(RpgClientEngine);
|
|
11
|
+
const keyboardControls = engine.globalConfig.keyboardControls;
|
|
12
|
+
const selectedItem = signal(0);
|
|
13
|
+
const selectedTab = signal(0);
|
|
14
|
+
const selectedConfirm = signal(0);
|
|
15
|
+
const confirmOpen = signal(false);
|
|
16
|
+
const confirmItem = signal(null);
|
|
17
|
+
const { data, onInteraction, onBack } = defineProps();
|
|
18
|
+
const items = computed(() => data().items);
|
|
19
|
+
const tabs = [
|
|
21
20
|
{
|
|
22
21
|
id: "item",
|
|
23
22
|
label: "Items"
|
|
@@ -31,43 +30,30 @@ function component($$props) {
|
|
|
31
30
|
label: "Armor"
|
|
32
31
|
}
|
|
33
32
|
];
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
var safeItems = computed(function() {
|
|
38
|
-
var value = resolveProp(items);
|
|
33
|
+
const resolveProp = (value) => typeof value === "function" ? value() : value;
|
|
34
|
+
const safeItems = computed(() => {
|
|
35
|
+
const value = resolveProp(items);
|
|
39
36
|
return Array.isArray(value) ? value : [];
|
|
40
37
|
});
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
const filteredItems = computed(() => {
|
|
39
|
+
const items = safeItems();
|
|
40
|
+
const tab = tabs[selectedTab()];
|
|
44
41
|
if (!tab) return [];
|
|
45
|
-
return items.filter(
|
|
46
|
-
var _a;
|
|
47
|
-
return item.type === tab.id && ((_a = item.quantity) !== null && _a !== void 0 ? _a : 1) > 0;
|
|
48
|
-
});
|
|
42
|
+
return items.filter((item) => item.type === tab.id && (item.quantity ?? 1) > 0);
|
|
49
43
|
});
|
|
50
|
-
|
|
44
|
+
const confirmOptions = [{
|
|
51
45
|
id: "use",
|
|
52
46
|
label: "Use"
|
|
53
47
|
}, {
|
|
54
48
|
id: "cancel",
|
|
55
49
|
label: "Cancel"
|
|
56
50
|
}];
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
var currentItem = computed(function() {
|
|
64
|
-
return filteredItems()[selectedItem()];
|
|
65
|
-
});
|
|
66
|
-
var iconSheet = function(iconId) {
|
|
67
|
-
return { definition: engine.getSpriteSheet(iconId) };
|
|
68
|
-
};
|
|
69
|
-
var clampSelection = function() {
|
|
70
|
-
var count = filteredItems().length;
|
|
51
|
+
const nav = createTabindexNavigator(selectedItem, { count: () => filteredItems().length }, "wrap");
|
|
52
|
+
const navConfirm = createTabindexNavigator(selectedConfirm, { count: () => confirmOptions.length }, "wrap");
|
|
53
|
+
const currentItem = computed(() => filteredItems()[selectedItem()]);
|
|
54
|
+
const iconSheet = (iconId) => ({ definition: engine.getSpriteSheet(iconId) });
|
|
55
|
+
const clampSelection = () => {
|
|
56
|
+
const count = filteredItems().length;
|
|
71
57
|
if (count === 0) {
|
|
72
58
|
selectedItem.set(0);
|
|
73
59
|
return;
|
|
@@ -86,13 +72,13 @@ function component($$props) {
|
|
|
86
72
|
selectedTab.set(index);
|
|
87
73
|
};
|
|
88
74
|
}
|
|
89
|
-
|
|
90
|
-
|
|
75
|
+
const useItem = (index) => {
|
|
76
|
+
const item = filteredItems()[index];
|
|
91
77
|
if (!item || !item.usable) return;
|
|
92
78
|
if (onInteraction) onInteraction("useItem", { id: item.id });
|
|
93
79
|
};
|
|
94
|
-
|
|
95
|
-
|
|
80
|
+
const requestUseItem = (index) => {
|
|
81
|
+
const item = filteredItems()[index];
|
|
96
82
|
if (!item || !item.usable) return;
|
|
97
83
|
if (item.consumable) {
|
|
98
84
|
confirmItem.set(item);
|
|
@@ -102,17 +88,17 @@ function component($$props) {
|
|
|
102
88
|
}
|
|
103
89
|
useItem(index);
|
|
104
90
|
};
|
|
105
|
-
|
|
106
|
-
|
|
91
|
+
const confirmUse = () => {
|
|
92
|
+
const item = confirmItem();
|
|
107
93
|
if (!item) return;
|
|
108
|
-
delay(
|
|
94
|
+
delay(() => {
|
|
109
95
|
if (onInteraction) onInteraction("useItem", { id: item.id });
|
|
110
96
|
confirmOpen.set(false);
|
|
111
97
|
confirmItem.set(null);
|
|
112
98
|
});
|
|
113
99
|
};
|
|
114
|
-
|
|
115
|
-
delay(
|
|
100
|
+
const cancelConfirm = () => {
|
|
101
|
+
delay(() => {
|
|
116
102
|
confirmOpen.set(false);
|
|
117
103
|
confirmItem.set(null);
|
|
118
104
|
});
|
|
@@ -127,12 +113,12 @@ function component($$props) {
|
|
|
127
113
|
cancelConfirm();
|
|
128
114
|
};
|
|
129
115
|
}
|
|
130
|
-
|
|
116
|
+
const confirmControls = signal({
|
|
131
117
|
left: {
|
|
132
118
|
repeat: true,
|
|
133
119
|
bind: keyboardControls.left,
|
|
134
120
|
throttle: 150,
|
|
135
|
-
keyDown
|
|
121
|
+
keyDown() {
|
|
136
122
|
if (!confirmOpen()) return;
|
|
137
123
|
navConfirm.next(-1);
|
|
138
124
|
}
|
|
@@ -141,32 +127,32 @@ function component($$props) {
|
|
|
141
127
|
repeat: true,
|
|
142
128
|
bind: keyboardControls.right,
|
|
143
129
|
throttle: 150,
|
|
144
|
-
keyDown
|
|
130
|
+
keyDown() {
|
|
145
131
|
if (!confirmOpen()) return;
|
|
146
132
|
navConfirm.next(1);
|
|
147
133
|
}
|
|
148
134
|
},
|
|
149
135
|
action: {
|
|
150
|
-
bind: keyboardControls.action,
|
|
151
|
-
keyDown
|
|
136
|
+
bind: getKeyboardControlBind(keyboardControls.action),
|
|
137
|
+
keyDown() {
|
|
152
138
|
if (!confirmOpen()) return;
|
|
153
139
|
confirmSelect(selectedConfirm())();
|
|
154
140
|
}
|
|
155
141
|
},
|
|
156
142
|
escape: {
|
|
157
143
|
bind: keyboardControls.escape,
|
|
158
|
-
keyDown
|
|
144
|
+
keyDown() {
|
|
159
145
|
if (!confirmOpen()) return;
|
|
160
146
|
cancelConfirm();
|
|
161
147
|
}
|
|
162
148
|
}
|
|
163
149
|
});
|
|
164
|
-
|
|
150
|
+
const controls = signal({
|
|
165
151
|
up: {
|
|
166
152
|
repeat: true,
|
|
167
153
|
bind: keyboardControls.up,
|
|
168
154
|
throttle: 150,
|
|
169
|
-
keyDown
|
|
155
|
+
keyDown() {
|
|
170
156
|
if (confirmOpen()) return;
|
|
171
157
|
nav.next(-1);
|
|
172
158
|
}
|
|
@@ -175,11 +161,9 @@ function component($$props) {
|
|
|
175
161
|
repeat: true,
|
|
176
162
|
bind: keyboardControls.left,
|
|
177
163
|
throttle: 150,
|
|
178
|
-
keyDown
|
|
164
|
+
keyDown() {
|
|
179
165
|
if (confirmOpen()) return;
|
|
180
|
-
selectedTab.update(
|
|
181
|
-
return (value - 1 + tabs.length) % tabs.length;
|
|
182
|
-
});
|
|
166
|
+
selectedTab.update((value) => (value - 1 + tabs.length) % tabs.length);
|
|
183
167
|
selectedItem.set(0);
|
|
184
168
|
}
|
|
185
169
|
},
|
|
@@ -187,11 +171,9 @@ function component($$props) {
|
|
|
187
171
|
repeat: true,
|
|
188
172
|
bind: keyboardControls.right,
|
|
189
173
|
throttle: 150,
|
|
190
|
-
keyDown
|
|
174
|
+
keyDown() {
|
|
191
175
|
if (confirmOpen()) return;
|
|
192
|
-
selectedTab.update(
|
|
193
|
-
return (value + 1) % tabs.length;
|
|
194
|
-
});
|
|
176
|
+
selectedTab.update((value) => (value + 1) % tabs.length);
|
|
195
177
|
selectedItem.set(0);
|
|
196
178
|
}
|
|
197
179
|
},
|
|
@@ -199,14 +181,14 @@ function component($$props) {
|
|
|
199
181
|
repeat: true,
|
|
200
182
|
bind: keyboardControls.down,
|
|
201
183
|
throttle: 150,
|
|
202
|
-
keyDown
|
|
184
|
+
keyDown() {
|
|
203
185
|
if (confirmOpen()) return;
|
|
204
186
|
nav.next(1);
|
|
205
187
|
}
|
|
206
188
|
},
|
|
207
189
|
action: {
|
|
208
|
-
bind: keyboardControls.action,
|
|
209
|
-
keyDown
|
|
190
|
+
bind: getKeyboardControlBind(keyboardControls.action),
|
|
191
|
+
keyDown() {
|
|
210
192
|
if (confirmOpen()) {
|
|
211
193
|
confirmSelect(selectedConfirm())();
|
|
212
194
|
return;
|
|
@@ -216,7 +198,7 @@ function component($$props) {
|
|
|
216
198
|
},
|
|
217
199
|
escape: {
|
|
218
200
|
bind: keyboardControls.escape,
|
|
219
|
-
keyDown
|
|
201
|
+
keyDown() {
|
|
220
202
|
if (confirmOpen()) {
|
|
221
203
|
cancelConfirm();
|
|
222
204
|
return;
|
|
@@ -338,7 +320,8 @@ function component($$props) {
|
|
|
338
320
|
}))))])))
|
|
339
321
|
]));
|
|
340
322
|
}
|
|
323
|
+
var __ce_component = component;
|
|
341
324
|
//#endregion
|
|
342
|
-
export {
|
|
325
|
+
export { __ce_component as default };
|
|
343
326
|
|
|
344
327
|
//# sourceMappingURL=items-menu.ce.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"items-menu.ce.js","names":[],"sources":["../../../../src/components/gui/menu/items-menu.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n <div class=\"rpg-ui-menu-panel rpg-ui-panel\">\n <div class=\"rpg-ui-menu-panel-header\">Items</div>\n <div class=\"rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked\">\n <div>\n @if (currentItem) {\n <div class=\"rpg-ui-menu-panel-details rpg-ui-panel\">\n <div class=\"rpg-ui-menu-panel-hero\">\n <div class=\"rpg-ui-menu-panel-hero-icon\">\n <DOMSprite \n sheet={iconSheet(currentItem()?.icon)} \n playing=\"default\" \n width=\"48px\"\n height=\"48px\"\n objectFit=\"contain\"\n />\n </div>\n <div>\n <div class=\"rpg-ui-menu-panel-details-title\">{currentItem()?.name}</div>\n <div class=\"rpg-ui-menu-panel-details-desc\">{currentItem()?.description || \"\"}</div>\n </div>\n </div>\n </div>\n }\n </div>\n \n <div class=\"rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full\">\n <div class=\"rpg-ui-menu-tabs\">\n @for ((tab,tabIndex) of tabs) {\n <div\n class=\"rpg-ui-menu-tab\"\n class={{active: selectedTab() === tabIndex}}\n tabindex={tabIndex}\n click={selectTab(tabIndex)}\n >{tab.label}</div>\n }\n </div>\n <Navigation tabindex={selectedItem} controls={controls}>\n @for ((item,index) of filteredItems) {\n <div\n class=\"rpg-ui-menu-item rpg-ui-menu-row\"\n class={{disabled: !item.usable}}\n data-selected={selectedItem() === index ? \"true\" : \"false\"}\n tabindex={index}\n click={selectItem(index)}\n >\n <div class=\"rpg-ui-menu-row-main\">\n <div class=\"rpg-ui-menu-row-icon\">\n <DOMSprite \n sheet={iconSheet(item.icon)} \n playing=\"default\" \n width=\"28px\"\n height=\"28px\"\n objectFit=\"contain\"\n />\n </div>\n <span>{item.name}</span>\n </div>\n <span class=\"rpg-ui-menu-row-end\">x{item.quantity ?? 1}</span>\n </div>\n }\n </Navigation>\n </div>\n </div>\n @if (confirmOpen) {\n <div class=\"rpg-ui-menu-confirm\">\n <div class=\"rpg-ui-menu-confirm-card\">\n <div class=\"rpg-ui-menu-confirm-title\">Use {confirmItem()?.name}?</div>\n <Navigation tabindex={selectedConfirm} controls={confirmControls}>\n <div class=\"rpg-ui-menu-confirm-actions\">\n @for ((option,index) of confirmOptions) {\n <button\n class=\"rpg-ui-menu-confirm-btn\"\n class={{\"rpg-ui-menu-confirm-btn-secondary\": option.id === \"cancel\"}}\n data-selected={selectedConfirm() === index ? \"true\" : \"false\"}\n tabindex={index}\n click={confirmSelect(index)}\n >{option.label}</button>\n }\n </div>\n </Navigation>\n </div>\n </div>\n }\n </div>\n</DOMContainer>\n\n<script>\n import { signal, computed, createTabindexNavigator, effect } from \"canvasengine\";\n import { inject } from \"../../../core/inject\";\n import { RpgClientEngine } from \"../../../RpgClientEngine\";\n import { delay } from \"@rpgjs/common\";\n\n const engine = inject(RpgClientEngine);\n const keyboardControls = engine.globalConfig.keyboardControls;\n\n const selectedItem = signal(0);\n const selectedTab = signal(0);\n const selectedConfirm = signal(0);\n const confirmOpen = signal(false);\n const confirmItem = signal(null);\n\n const { data, onInteraction, onBack } = defineProps();\n\n const items = computed(() => data().items);\n\n const tabs = [\n { id: \"item\", label: \"Items\" },\n { id: \"weapon\", label: \"Weapons\" },\n { id: \"armor\", label: \"Armor\" }\n ];\n\n const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n const safeItems = computed(() => {\n const value = resolveProp(items);\n return Array.isArray(value) ? value : [];\n });\n\n const filteredItems = computed(() => {\n const items = safeItems();\n const tab = tabs[selectedTab()];\n if (!tab) return [];\n return items.filter((item) => item.type === tab.id && (item.quantity ?? 1) > 0);\n });\n\n const confirmOptions = [\n { id: \"use\", label: \"Use\" },\n { id: \"cancel\", label: \"Cancel\" }\n ];\n\n const nav = createTabindexNavigator(selectedItem, { count: () => filteredItems().length }, \"wrap\");\n const navConfirm = createTabindexNavigator(selectedConfirm, { count: () => confirmOptions.length }, \"wrap\");\n const currentItem = computed(() => filteredItems()[selectedItem()]);\n const iconSheet = (iconId) => ({\n definition: engine.getSpriteSheet(iconId)\n });\n\n const clampSelection = () => {\n const count = filteredItems().length;\n if (count === 0) {\n selectedItem.set(0);\n return;\n }\n if (selectedItem() >= count) {\n selectedItem.set(count - 1);\n }\n };\n\n function selectItem(index) {\n return function() {\n selectedItem.set(index);\n requestUseItem(index);\n }\n }\n\n function selectTab(index) {\n return function() {\n selectedItem.set(0);\n selectedTab.set(index);\n }\n }\n\n const useItem = (index) => {\n const item = filteredItems()[index];\n if (!item || !item.usable) return;\n if (onInteraction) onInteraction(\"useItem\", { id: item.id });\n };\n\n const requestUseItem = (index) => {\n const item = filteredItems()[index];\n if (!item || !item.usable) return;\n if (item.consumable) {\n confirmItem.set(item);\n confirmOpen.set(true);\n selectedConfirm.set(0);\n return;\n }\n useItem(index);\n };\n\n const confirmUse = () => {\n const item = confirmItem();\n if (!item) return;\n delay(() => {\n if (onInteraction) onInteraction(\"useItem\", { id: item.id });\n confirmOpen.set(false);\n confirmItem.set(null);\n });\n };\n\n const cancelConfirm = () => {\n delay(() => {\n confirmOpen.set(false);\n confirmItem.set(null);\n });\n };\n\n function confirmSelect(index) {\n return function() {\n selectedConfirm.set(index);\n if (index === 0) {\n confirmUse();\n return;\n }\n cancelConfirm();\n }\n }\n\n const confirmControls = signal({\n left: {\n repeat: true,\n bind: keyboardControls.left,\n throttle: 150,\n keyDown() {\n if (!confirmOpen()) return;\n navConfirm.next(-1);\n }\n },\n right: {\n repeat: true,\n bind: keyboardControls.right,\n throttle: 150,\n keyDown() {\n if (!confirmOpen()) return;\n navConfirm.next(1);\n }\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (!confirmOpen()) return;\n confirmSelect(selectedConfirm())();\n }\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (!confirmOpen()) return;\n cancelConfirm();\n }\n }\n });\n\n const controls = signal({\n up: {\n repeat: true,\n bind: keyboardControls.up,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n nav.next(-1);\n }\n },\n left: {\n repeat: true,\n bind: keyboardControls.left,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n selectedTab.update((value) => (value - 1 + tabs.length) % tabs.length);\n selectedItem.set(0);\n }\n },\n right: {\n repeat: true,\n bind: keyboardControls.right,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n selectedTab.update((value) => (value + 1) % tabs.length);\n selectedItem.set(0);\n }\n },\n down: {\n repeat: true,\n bind: keyboardControls.down,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n nav.next(1);\n }\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (confirmOpen()) {\n confirmSelect(selectedConfirm())();\n return;\n }\n requestUseItem(selectedItem());\n }\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (confirmOpen()) {\n cancelConfirm();\n return;\n }\n if (onBack) onBack();\n }\n },\n gamepad: {\n enabled: true\n }\n });\n\n clampSelection();\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"items-menu.ce.js","names":[],"sources":["../../../../src/components/gui/menu/items-menu.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n <div class=\"rpg-ui-menu-panel rpg-ui-panel\">\n <div class=\"rpg-ui-menu-panel-header\">Items</div>\n <div class=\"rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked\">\n <div>\n @if (currentItem) {\n <div class=\"rpg-ui-menu-panel-details rpg-ui-panel\">\n <div class=\"rpg-ui-menu-panel-hero\">\n <div class=\"rpg-ui-menu-panel-hero-icon\">\n <DOMSprite \n sheet={iconSheet(currentItem()?.icon)} \n playing=\"default\" \n width=\"48px\"\n height=\"48px\"\n objectFit=\"contain\"\n />\n </div>\n <div>\n <div class=\"rpg-ui-menu-panel-details-title\">{currentItem()?.name}</div>\n <div class=\"rpg-ui-menu-panel-details-desc\">{currentItem()?.description || \"\"}</div>\n </div>\n </div>\n </div>\n }\n </div>\n \n <div class=\"rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full\">\n <div class=\"rpg-ui-menu-tabs\">\n @for ((tab,tabIndex) of tabs) {\n <div\n class=\"rpg-ui-menu-tab\"\n class={{active: selectedTab() === tabIndex}}\n tabindex={tabIndex}\n click={selectTab(tabIndex)}\n >{tab.label}</div>\n }\n </div>\n <Navigation tabindex={selectedItem} controls={controls}>\n @for ((item,index) of filteredItems) {\n <div\n class=\"rpg-ui-menu-item rpg-ui-menu-row\"\n class={{disabled: !item.usable}}\n data-selected={selectedItem() === index ? \"true\" : \"false\"}\n tabindex={index}\n click={selectItem(index)}\n >\n <div class=\"rpg-ui-menu-row-main\">\n <div class=\"rpg-ui-menu-row-icon\">\n <DOMSprite \n sheet={iconSheet(item.icon)} \n playing=\"default\" \n width=\"28px\"\n height=\"28px\"\n objectFit=\"contain\"\n />\n </div>\n <span>{item.name}</span>\n </div>\n <span class=\"rpg-ui-menu-row-end\">x{item.quantity ?? 1}</span>\n </div>\n }\n </Navigation>\n </div>\n </div>\n @if (confirmOpen) {\n <div class=\"rpg-ui-menu-confirm\">\n <div class=\"rpg-ui-menu-confirm-card\">\n <div class=\"rpg-ui-menu-confirm-title\">Use {confirmItem()?.name}?</div>\n <Navigation tabindex={selectedConfirm} controls={confirmControls}>\n <div class=\"rpg-ui-menu-confirm-actions\">\n @for ((option,index) of confirmOptions) {\n <button\n class=\"rpg-ui-menu-confirm-btn\"\n class={{\"rpg-ui-menu-confirm-btn-secondary\": option.id === \"cancel\"}}\n data-selected={selectedConfirm() === index ? \"true\" : \"false\"}\n tabindex={index}\n click={confirmSelect(index)}\n >{option.label}</button>\n }\n </div>\n </Navigation>\n </div>\n </div>\n }\n </div>\n</DOMContainer>\n\n<script>\n import { signal, computed, createTabindexNavigator, effect } from \"canvasengine\";\n import { inject } from \"../../../core/inject\";\n import { RpgClientEngine } from \"../../../RpgClientEngine\";\n import { delay } from \"@rpgjs/common\";\n import { getKeyboardControlBind } from \"../../../services/actionInput\";\n\n const engine = inject(RpgClientEngine);\n const keyboardControls = engine.globalConfig.keyboardControls;\n\n const selectedItem = signal(0);\n const selectedTab = signal(0);\n const selectedConfirm = signal(0);\n const confirmOpen = signal(false);\n const confirmItem = signal(null);\n\n const { data, onInteraction, onBack } = defineProps();\n\n const items = computed(() => data().items);\n\n const tabs = [\n { id: \"item\", label: \"Items\" },\n { id: \"weapon\", label: \"Weapons\" },\n { id: \"armor\", label: \"Armor\" }\n ];\n\n const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n const safeItems = computed(() => {\n const value = resolveProp(items);\n return Array.isArray(value) ? value : [];\n });\n\n const filteredItems = computed(() => {\n const items = safeItems();\n const tab = tabs[selectedTab()];\n if (!tab) return [];\n return items.filter((item) => item.type === tab.id && (item.quantity ?? 1) > 0);\n });\n\n const confirmOptions = [\n { id: \"use\", label: \"Use\" },\n { id: \"cancel\", label: \"Cancel\" }\n ];\n\n const nav = createTabindexNavigator(selectedItem, { count: () => filteredItems().length }, \"wrap\");\n const navConfirm = createTabindexNavigator(selectedConfirm, { count: () => confirmOptions.length }, \"wrap\");\n const currentItem = computed(() => filteredItems()[selectedItem()]);\n const iconSheet = (iconId) => ({\n definition: engine.getSpriteSheet(iconId)\n });\n\n const clampSelection = () => {\n const count = filteredItems().length;\n if (count === 0) {\n selectedItem.set(0);\n return;\n }\n if (selectedItem() >= count) {\n selectedItem.set(count - 1);\n }\n };\n\n function selectItem(index) {\n return function() {\n selectedItem.set(index);\n requestUseItem(index);\n }\n }\n\n function selectTab(index) {\n return function() {\n selectedItem.set(0);\n selectedTab.set(index);\n }\n }\n\n const useItem = (index) => {\n const item = filteredItems()[index];\n if (!item || !item.usable) return;\n if (onInteraction) onInteraction(\"useItem\", { id: item.id });\n };\n\n const requestUseItem = (index) => {\n const item = filteredItems()[index];\n if (!item || !item.usable) return;\n if (item.consumable) {\n confirmItem.set(item);\n confirmOpen.set(true);\n selectedConfirm.set(0);\n return;\n }\n useItem(index);\n };\n\n const confirmUse = () => {\n const item = confirmItem();\n if (!item) return;\n delay(() => {\n if (onInteraction) onInteraction(\"useItem\", { id: item.id });\n confirmOpen.set(false);\n confirmItem.set(null);\n });\n };\n\n const cancelConfirm = () => {\n delay(() => {\n confirmOpen.set(false);\n confirmItem.set(null);\n });\n };\n\n function confirmSelect(index) {\n return function() {\n selectedConfirm.set(index);\n if (index === 0) {\n confirmUse();\n return;\n }\n cancelConfirm();\n }\n }\n\n const confirmControls = signal({\n left: {\n repeat: true,\n bind: keyboardControls.left,\n throttle: 150,\n keyDown() {\n if (!confirmOpen()) return;\n navConfirm.next(-1);\n }\n },\n right: {\n repeat: true,\n bind: keyboardControls.right,\n throttle: 150,\n keyDown() {\n if (!confirmOpen()) return;\n navConfirm.next(1);\n }\n },\n action: {\n bind: getKeyboardControlBind(keyboardControls.action),\n keyDown() {\n if (!confirmOpen()) return;\n confirmSelect(selectedConfirm())();\n }\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (!confirmOpen()) return;\n cancelConfirm();\n }\n }\n });\n\n const controls = signal({\n up: {\n repeat: true,\n bind: keyboardControls.up,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n nav.next(-1);\n }\n },\n left: {\n repeat: true,\n bind: keyboardControls.left,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n selectedTab.update((value) => (value - 1 + tabs.length) % tabs.length);\n selectedItem.set(0);\n }\n },\n right: {\n repeat: true,\n bind: keyboardControls.right,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n selectedTab.update((value) => (value + 1) % tabs.length);\n selectedItem.set(0);\n }\n },\n down: {\n repeat: true,\n bind: keyboardControls.down,\n throttle: 150,\n keyDown() {\n if (confirmOpen()) {\n return;\n }\n nav.next(1);\n }\n },\n action: {\n bind: getKeyboardControlBind(keyboardControls.action),\n keyDown() {\n if (confirmOpen()) {\n confirmSelect(selectedConfirm())();\n return;\n }\n requestUseItem(selectedItem());\n }\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (confirmOpen()) {\n cancelConfirm();\n return;\n }\n if (onBack) onBack();\n }\n },\n gamepad: {\n enabled: true\n }\n });\n\n clampSelection();\n</script>\n"],"mappings":"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"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { inject } from "../../../core/inject.js";
|
|
2
|
+
import { getKeyboardControlBind } from "../../../services/actionInput.js";
|
|
2
3
|
import { getEntityProp } from "../../../utils/getEntityProp.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
4
|
+
import __ce_component$1 from "../save-load.ce.js";
|
|
5
|
+
import __ce_component$2 from "./items-menu.ce.js";
|
|
6
|
+
import __ce_component$3 from "./skills-menu.ce.js";
|
|
7
|
+
import __ce_component$4 from "./equip-menu.ce.js";
|
|
8
|
+
import __ce_component$5 from "./options-menu.ce.js";
|
|
9
|
+
import __ce_component$6 from "./exit-menu.ce.js";
|
|
9
10
|
import { RpgClientEngine } from "../../../RpgClientEngine.js";
|
|
10
11
|
import { DOMContainer, DOMElement, computed, cond, effect, h, loop, mount, signal, useDefineProps, useProps } from "canvasengine";
|
|
11
12
|
import { delay } from "@rpgjs/common";
|
|
@@ -13,15 +14,12 @@ import { delay } from "@rpgjs/common";
|
|
|
13
14
|
function component($$props) {
|
|
14
15
|
useProps($$props);
|
|
15
16
|
const defineProps = useDefineProps($$props);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
_b.equips;
|
|
23
|
-
var saveLoad = _b.saveLoad;
|
|
24
|
-
var defaultMenus = [
|
|
17
|
+
const engine = inject(RpgClientEngine);
|
|
18
|
+
const currentPlayer = engine.scene.currentPlayer;
|
|
19
|
+
const keyboardControls = engine.globalConfig.keyboardControls;
|
|
20
|
+
const { data, onFinish, onInteraction } = defineProps();
|
|
21
|
+
const { menus, items, skills, equips, saveLoad } = data();
|
|
22
|
+
const defaultMenus = [
|
|
25
23
|
{
|
|
26
24
|
id: "items",
|
|
27
25
|
label: "Items"
|
|
@@ -47,53 +45,39 @@ function component($$props) {
|
|
|
47
45
|
label: "Exit"
|
|
48
46
|
}
|
|
49
47
|
];
|
|
50
|
-
|
|
48
|
+
const menuEntries = computed(() => {
|
|
51
49
|
if (menus && Array.isArray(menus) && menus.length) return menus;
|
|
52
50
|
return defaultMenus;
|
|
53
51
|
});
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
computed(function() {
|
|
61
|
-
return saveLoadData().mode || "load";
|
|
62
|
-
});
|
|
63
|
-
computed(function() {
|
|
64
|
-
return saveLoadData().slots || [];
|
|
65
|
-
});
|
|
66
|
-
var saveLoadCanSave = computed(function() {
|
|
67
|
-
return saveLoadData().canSave !== false;
|
|
68
|
-
});
|
|
69
|
-
var isMenuDisabled = function(entry) {
|
|
52
|
+
const resolveProp = (value) => typeof value === "function" ? value() : value;
|
|
53
|
+
const saveLoadData = computed(() => resolveProp(saveLoad) || {});
|
|
54
|
+
computed(() => saveLoadData().mode || "load");
|
|
55
|
+
computed(() => saveLoadData().slots || []);
|
|
56
|
+
const saveLoadCanSave = computed(() => saveLoadData().canSave !== false);
|
|
57
|
+
const isMenuDisabled = (entry) => {
|
|
70
58
|
if (!entry) return true;
|
|
71
59
|
if (entry.disabled) return true;
|
|
72
60
|
if (entry.enabled === false) return true;
|
|
73
61
|
if (entry.id === "save" && !saveLoadCanSave()) return true;
|
|
74
62
|
return false;
|
|
75
63
|
};
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
return menuEntries().map(
|
|
81
|
-
return isMenuDisabled(entry) ? null : index;
|
|
82
|
-
}).filter(function(value) {
|
|
83
|
-
return value !== null;
|
|
84
|
-
});
|
|
64
|
+
const selectedMenu = signal(0);
|
|
65
|
+
const view = signal("menu");
|
|
66
|
+
const saveOverlay = signal(false);
|
|
67
|
+
const selectableIndexes = computed(() => {
|
|
68
|
+
return menuEntries().map((entry, index) => isMenuDisabled(entry) ? null : index).filter((value) => value !== null);
|
|
85
69
|
});
|
|
86
|
-
effect(
|
|
87
|
-
|
|
70
|
+
effect(() => {
|
|
71
|
+
const available = selectableIndexes();
|
|
88
72
|
if (!available.length) return;
|
|
89
|
-
|
|
73
|
+
const current = selectedMenu();
|
|
90
74
|
if (!available.includes(current)) selectedMenu.set(available[0]);
|
|
91
75
|
});
|
|
92
|
-
|
|
93
|
-
|
|
76
|
+
const moveMenu = (delta) => {
|
|
77
|
+
const available = selectableIndexes();
|
|
94
78
|
if (!available.length) return;
|
|
95
|
-
|
|
96
|
-
|
|
79
|
+
const current = selectedMenu();
|
|
80
|
+
const nextIndex = (Math.max(0, available.indexOf(current)) + delta + available.length) % available.length;
|
|
97
81
|
selectedMenu.set(available[nextIndex]);
|
|
98
82
|
};
|
|
99
83
|
function selectMenu(index) {
|
|
@@ -102,8 +86,8 @@ function component($$props) {
|
|
|
102
86
|
openMenu();
|
|
103
87
|
};
|
|
104
88
|
}
|
|
105
|
-
|
|
106
|
-
|
|
89
|
+
const openMenu = () => {
|
|
90
|
+
const entry = menuEntries()[selectedMenu()];
|
|
107
91
|
if (!entry || isMenuDisabled(entry)) return;
|
|
108
92
|
if (entry.id === "save") {
|
|
109
93
|
saveOverlay.set(true);
|
|
@@ -115,43 +99,41 @@ function component($$props) {
|
|
|
115
99
|
}
|
|
116
100
|
view.set(entry.id);
|
|
117
101
|
};
|
|
118
|
-
|
|
119
|
-
delay(
|
|
102
|
+
const goBack = () => {
|
|
103
|
+
delay(() => {
|
|
120
104
|
view.set("menu");
|
|
121
105
|
});
|
|
122
106
|
};
|
|
123
|
-
|
|
124
|
-
delay(
|
|
107
|
+
const closeSaveOverlay = () => {
|
|
108
|
+
delay(() => {
|
|
125
109
|
saveOverlay.set(false);
|
|
126
110
|
view.set("menu");
|
|
127
111
|
});
|
|
128
112
|
};
|
|
129
|
-
|
|
113
|
+
const confirmExit = () => {
|
|
130
114
|
if (onInteraction) onInteraction("exit");
|
|
131
115
|
};
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
116
|
+
const hp = getEntityProp(currentPlayer, "hp");
|
|
117
|
+
const hpMax = getEntityProp(currentPlayer, "params.maxHp");
|
|
118
|
+
const sp = getEntityProp(currentPlayer, "sp");
|
|
119
|
+
const spMax = getEntityProp(currentPlayer, "params.maxSp");
|
|
120
|
+
const level = getEntityProp(currentPlayer, "level");
|
|
121
|
+
const exp = getEntityProp(currentPlayer, "exp");
|
|
122
|
+
const gold = getEntityProp(currentPlayer, "gold");
|
|
123
|
+
const expForNextlevel = computed(() => data().expForNextlevel || 0);
|
|
124
|
+
const hpPercent = computed(() => {
|
|
125
|
+
const max = hpMax() || 1;
|
|
126
|
+
return `${Math.max(0, Math.min(100, hp() / max * 100))}%`;
|
|
141
127
|
});
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
return
|
|
128
|
+
const spPercent = computed(() => {
|
|
129
|
+
const max = spMax() || 1;
|
|
130
|
+
return `${Math.max(0, Math.min(100, sp() / max * 100))}%`;
|
|
145
131
|
});
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
return
|
|
132
|
+
const expPercent = computed(() => {
|
|
133
|
+
const max = expForNextlevel() || 1;
|
|
134
|
+
return `${Math.max(0, Math.min(100, exp() / max * 100))}%`;
|
|
149
135
|
});
|
|
150
|
-
|
|
151
|
-
var max = expForNextlevel() || 1;
|
|
152
|
-
return "".concat(Math.max(0, Math.min(100, exp() / max * 100)), "%");
|
|
153
|
-
});
|
|
154
|
-
var paramsList = computed(function() {
|
|
136
|
+
const paramsList = computed(() => {
|
|
155
137
|
return [
|
|
156
138
|
{
|
|
157
139
|
label: "ATK",
|
|
@@ -183,12 +165,12 @@ function component($$props) {
|
|
|
183
165
|
}
|
|
184
166
|
];
|
|
185
167
|
});
|
|
186
|
-
|
|
168
|
+
const menuControls = signal({
|
|
187
169
|
up: {
|
|
188
170
|
repeat: true,
|
|
189
171
|
bind: keyboardControls.up,
|
|
190
172
|
throttle: 150,
|
|
191
|
-
keyDown
|
|
173
|
+
keyDown() {
|
|
192
174
|
if (saveOverlay()) return;
|
|
193
175
|
if (view() !== "menu") return;
|
|
194
176
|
moveMenu(-1);
|
|
@@ -198,15 +180,15 @@ function component($$props) {
|
|
|
198
180
|
repeat: true,
|
|
199
181
|
bind: keyboardControls.down,
|
|
200
182
|
throttle: 150,
|
|
201
|
-
keyDown
|
|
183
|
+
keyDown() {
|
|
202
184
|
if (saveOverlay()) return;
|
|
203
185
|
if (view() !== "menu") return;
|
|
204
186
|
moveMenu(1);
|
|
205
187
|
}
|
|
206
188
|
},
|
|
207
189
|
action: {
|
|
208
|
-
bind: keyboardControls.action,
|
|
209
|
-
keyDown
|
|
190
|
+
bind: getKeyboardControlBind(keyboardControls.action),
|
|
191
|
+
keyDown() {
|
|
210
192
|
if (saveOverlay()) return;
|
|
211
193
|
if (view() !== "menu") return;
|
|
212
194
|
openMenu();
|
|
@@ -214,7 +196,7 @@ function component($$props) {
|
|
|
214
196
|
},
|
|
215
197
|
escape: {
|
|
216
198
|
bind: keyboardControls.escape,
|
|
217
|
-
keyDown
|
|
199
|
+
keyDown() {
|
|
218
200
|
if (saveOverlay()) return;
|
|
219
201
|
if (view() !== "menu") {
|
|
220
202
|
goBack();
|
|
@@ -225,10 +207,10 @@ function component($$props) {
|
|
|
225
207
|
},
|
|
226
208
|
gamepad: { enabled: true }
|
|
227
209
|
});
|
|
228
|
-
mount(
|
|
210
|
+
mount((element) => {
|
|
229
211
|
engine.gamePause.set(true);
|
|
230
|
-
return
|
|
231
|
-
delay(
|
|
212
|
+
return () => {
|
|
213
|
+
delay(() => {
|
|
232
214
|
engine.stopProcessingInput = false;
|
|
233
215
|
engine.gamePause.set(false);
|
|
234
216
|
});
|
|
@@ -254,7 +236,7 @@ function component($$props) {
|
|
|
254
236
|
}), h(DOMElement, {
|
|
255
237
|
element: "div",
|
|
256
238
|
attrs: { class: "rpg-ui-main-menu-list" }
|
|
257
|
-
}, loop(menuEntries(), (entry, index) => h(DOMElement, {
|
|
239
|
+
}, loop(computed(() => menuEntries()), (entry, index) => h(DOMElement, {
|
|
258
240
|
element: "div",
|
|
259
241
|
attrs: {
|
|
260
242
|
class: ["rpg-ui-menu-item", computed(() => ({ disabled: isMenuDisabled(entry) }))],
|
|
@@ -378,22 +360,22 @@ function component($$props) {
|
|
|
378
360
|
textContent: param.value
|
|
379
361
|
})])))
|
|
380
362
|
])),
|
|
381
|
-
cond(computed(() => view() === "items"), () => h(
|
|
363
|
+
cond(computed(() => view() === "items"), () => h(__ce_component$2, {
|
|
382
364
|
data,
|
|
383
365
|
onInteraction,
|
|
384
366
|
onBack: goBack
|
|
385
367
|
})),
|
|
386
|
-
cond(computed(() => view() === "skills"), () => h(
|
|
368
|
+
cond(computed(() => view() === "skills"), () => h(__ce_component$3, {
|
|
387
369
|
data,
|
|
388
370
|
onBack: goBack
|
|
389
371
|
})),
|
|
390
|
-
cond(computed(() => view() === "equip"), () => h(
|
|
372
|
+
cond(computed(() => view() === "equip"), () => h(__ce_component$4, {
|
|
391
373
|
data,
|
|
392
374
|
onInteraction,
|
|
393
375
|
onBack: goBack
|
|
394
376
|
})),
|
|
395
|
-
cond(computed(() => view() === "options"), () => h(
|
|
396
|
-
cond(computed(() => view() === "exit"), () => h(
|
|
377
|
+
cond(computed(() => view() === "options"), () => h(__ce_component$5, { onBack: goBack })),
|
|
378
|
+
cond(computed(() => view() === "exit"), () => h(__ce_component$6, {
|
|
397
379
|
onConfirm: confirmExit,
|
|
398
380
|
onBack: goBack
|
|
399
381
|
}))
|
|
@@ -406,12 +388,13 @@ function component($$props) {
|
|
|
406
388
|
}), h(DOMElement, {
|
|
407
389
|
element: "div",
|
|
408
390
|
attrs: { class: "rpg-ui-main-menu-overlay-content" }
|
|
409
|
-
}, h(
|
|
391
|
+
}, h(__ce_component$1, {
|
|
410
392
|
data: saveLoadData,
|
|
411
393
|
onFinish: closeSaveOverlay
|
|
412
394
|
}))]))]));
|
|
413
395
|
}
|
|
396
|
+
var __ce_component = component;
|
|
414
397
|
//#endregion
|
|
415
|
-
export {
|
|
398
|
+
export { __ce_component as default };
|
|
416
399
|
|
|
417
400
|
//# sourceMappingURL=main-menu.ce.js.map
|