@rpgjs/client 5.0.0-alpha.6 → 5.0.0-alpha.8
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/dist/RpgClient.d.ts +1 -1
- package/dist/index13.js.map +1 -1
- package/dist/index14.js.map +1 -1
- package/dist/index15.js.map +1 -1
- package/dist/index23.js.map +1 -1
- package/dist/index24.js.map +1 -1
- package/dist/index25.js.map +1 -1
- package/dist/index29.js +4 -2
- package/dist/index29.js.map +1 -1
- package/dist/index30.js +1 -1
- package/dist/index31.js +1 -1
- package/dist/index37.js +1 -1
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +17 -17
- package/dist/index38.js.map +1 -1
- package/dist/index39.js +17 -17
- package/dist/index39.js.map +1 -1
- package/dist/index4.js +16 -3
- package/dist/index4.js.map +1 -1
- package/dist/index5.js +2 -1
- package/dist/index5.js.map +1 -1
- package/dist/index7.js +9 -1
- package/dist/index7.js.map +1 -1
- package/dist/services/loadMap.d.ts +123 -2
- package/dist/services/mmorpg.d.ts +7 -3
- package/package.json +3 -3
- package/src/RpgClient.ts +1 -1
- package/src/components/index.ts +1 -1
- package/src/components/scenes/draw-map.ce +2 -1
- package/src/core/setup.ts +2 -0
- package/src/services/loadMap.ts +131 -2
- package/src/services/mmorpg.ts +20 -4
package/dist/RpgClient.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export interface RpgClientEngineHooks {
|
|
|
10
10
|
* @prop { (engine: RpgClientEngine) => boolean | any } [onStart]
|
|
11
11
|
* @memberof RpgEngineHooks
|
|
12
12
|
*/
|
|
13
|
-
onStart?: (engine: RpgClientEngine) => boolean | void
|
|
13
|
+
onStart?: (engine: RpgClientEngine) => boolean | void | Promise<boolean | void>;
|
|
14
14
|
/**
|
|
15
15
|
* Each frame
|
|
16
16
|
*
|
package/dist/index13.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index13.js","sources":["../src/components/scenes/event-layer.ce"],"sourcesContent":["\n
|
|
1
|
+
{"version":3,"file":"index13.js","sources":["../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n @for ((event,id) of events) {\n <Character id={id} object={event} isMe={false} />\n }\n\n @for ((player,id) of players) {\n <Character id={id} object={player} isMe={true} />\n }\n</Container>\n\n<script>\n import { effect, signal } from 'canvasengine'\n import { inject } from \"../../core/inject\";\n import { RpgClientEngine } from \"../../RpgClientEngine\";\n import Character from \"../character.ce\";\n \n const engine = inject(RpgClientEngine);\n const players = engine.sceneMap.players\n const events = engine.sceneMap.events\n</script>"],"names":["Character"],"mappings":";;;;;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAA4B,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AAC5C,IAAI,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,OAAO;AACrC,IAAI,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC7B,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAACA,WAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AACrO,QAAQ,OAAO;AACf;;;;"}
|
package/dist/index14.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index14.js","sources":["../src/components/character.ce"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index14.js","sources":["../src/components/character.ce"],"sourcesContent":["<Container x y zIndex={y} viewportFollow={isMe} controls>\n <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />\n @for (graphicId of graphics) {\n <Sprite sheet={@sheet(@graphicId)} direction tint />\n }\n <!-- <Ellipse \n x={shadow.@x} \n y={shadow.@y} \n width={shadow.@width} \n height={shadow.@height} \n color=\"black\" \n blur={10} \n alpha={0.5}\n /> -->\n</Container>\n\n<script>\n import { signal, effect, mount, computed } from \"canvasengine\";\n import { Particle } from \"@canvasengine/presets\";\n import { GameEngineToken } from \"@rpgjs/common\";\n import { RpgClientEngine } from \"../RpgClientEngine\";\n import { inject } from \"../core/inject\"; \n import { Direction } from \"@rpgjs/common\";\n import Hit from \"./effects/hit.ce\";\n\n const { object, id, isMe } = defineProps();\n\n const client = inject(RpgClientEngine);\n\n const spritesheets = client.spritesheets;\n\n const x = object.x;\n const y = object.y;\n const tint = object.tint;\n const direction = object.direction;\n const animationName = object.animationName;\n const emitParticleTrigger = object.emitParticleTrigger;\n const particleSettings = client.particleSettings;\n const particleName = object.particleName;\n const graphics = object.graphics;\n\n const hitbox = object.hitbox;\n const widthShadow = 10;\n const shadow = computed(() => ({\n x: hitbox().w / 2,\n y: hitbox().h - (hitbox().h / 2),\n width: hitbox().w + widthShadow,\n height: hitbox().h,\n }))\n const canControls = () => isMe() && object.canMove()\n const keyboardControls = client.globalConfig.keyboardControls;\n\n const controls = signal({\n down: {\n repeat: true,\n bind: keyboardControls.down,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Down })\n },\n },\n up: {\n repeat: true,\n bind: keyboardControls.up,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Up })\n },\n },\n left: {\n repeat: true,\n bind: keyboardControls.left,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Left })\n },\n },\n right: {\n repeat: true,\n bind: keyboardControls.right,\n keyDown() {\n if (canControls()) client.processInput({ input: Direction.Right })\n },\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (canControls()) {\n client.processAction({ action: 'action' })\n // particleName.set('hit') \n // emitParticleTrigger.start()\n // object.flash('red')\n }\n },\n },\n });\n\n const sheet = (graphicId) => {\n return {\n definition: spritesheets.get(graphicId),\n playing: animationName,\n params: {\n direction\n },\n };\n }\n</script>"],"names":[],"mappings":"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"}
|
package/dist/index15.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index15.js","sources":["../src/components/scenes/canvas.ce"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index15.js","sources":["../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={@engine.width} height={@engine.height}>\n <Viewport worldWidth worldHeight clamp>\n @if (sceneData) {\n <SceneMap />\n }\n </Viewport>\n @for (gui of gui) {\n <Container display=\"flex\">\n @if (gui.display) {\n <gui.component ...gui.data() onFinish={(data) => {\n onGuiFinish(gui, data)\n }} onInteraction={(name, data) => {\n onGuiInteraction(gui, name, data)\n }} /> \n }\n </Container>\n } \n</Canvas>\n\n<script>\n import { signal, computed, effect } from \"canvasengine\";\n import { inject } from \"../../core/inject\";\n import { RpgClientEngine } from \"../../RpgClientEngine\";\n import SceneMap from './draw-map.ce'\n import { RpgGui } from \"../../Gui/Gui\";\n\n const engine = inject(RpgClientEngine);\n const guiService = inject(RpgGui);\n const sceneData = engine.sceneMap.data\n const gui = guiService.gui\n const worldWidth = computed(() => sceneData()?.width)\n const worldHeight = computed(() => sceneData()?.height)\n\n effect(() => {\n if (sceneData() && !sceneData().component) {\n throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n }\n })\n\n const onGuiFinish = (gui, data) => {\n guiService.guiClose(gui.name, data)\n }\n\n const onGuiInteraction = (gui, name, data) => {\n guiService.guiInteraction(gui.name, name, data)\n }\n \n const clamp = {\n direction: \"all\"\n }\n</script>\n"],"names":["SceneMap"],"mappings":"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"}
|
package/dist/index23.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index23.js","sources":["../src/components/gui/dialogbox/index.ce"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index23.js","sources":["../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<Container justifyContent=\"center\" alignItems=\"center\" width=\"100%\" height=\"100%\">\n <Container\n ref=\"dialogbox\"\n scale={{ x: scaleX }}\n anchor={[0.5, 0.5]}\n width={700}\n height\n controls\n positionType=\"absolute\"\n bottom={10}\n >\n <Rect width={700} height={250} color=\"#1a1a2e\" />\n <Rect\n x={0}\n y={0}\n width={700}\n height\n color=\"#1a1a2e\"\n alpha={0.9}\n borderRadius={10}\n border\n shadow\n />\n <Container\n flexDirection=\"row\"\n width={700}\n height\n alpha={contentOpacity}\n >\n <Container flexDirection=\"column\">\n <Text\n text\n color=\"#fff\"\n fontSize={18}\n margin={40}\n typewriter\n style={textStyle}\n />\n @if (visibleSelection) {\n <Selection selectedIndex={0} items={choices} onSelect />\n }\n </Container>\n </Container>\n</Container> \n\n \n</Container>\n<script>\n import Selection from './selection.ce'\n\n import {\n animatedSignal,\n computed,\n effect,\n signal,\n trigger,\n mount\n } from \"canvasengine\";\n\n import { inject } from \"../../../core/inject\";\n import { RpgClientEngine } from \"../../../RpgClientEngine\";\n\n const {\n message,\n choices: _choices,\n onFinish,\n onInteraction\n } = defineProps();\n\n const client = inject(RpgClientEngine);\n const keyboardControls = client.globalConfig.keyboardControls;\n\n client.stopProcessingInput = true;\n let isDestroyed = false;\n\n const texts = [message()]\n const height = signal(250);\n const isTextCompleted = signal(false);\n\n const drawSpeaker = (g) => {\n g.beginFill(0xffa500); // Orange color\n g.lineStyle(2, 0x000000); // Black border\n g.moveTo(0, 0);\n g.lineTo(70, 0);\n g.lineTo(80, 15);\n g.lineTo(70, 30);\n g.lineTo(0, 30);\n g.lineTo(0, 0);\n g.endFill();\n };\n\n const border = signal({ width: 5, color: \"#595971\" });\n const shadow = signal({ color: \"#000\", blur: 10, offsetX: 10, offsetY: 10 });\n\n const contentOpacity = animatedSignal(0, {\n duration: 1000,\n });\n\n const scaleX = animatedSignal(0, {\n duration: 500,\n });\n\n scaleX.set(1);\n contentOpacity.set(1);\n\n const currentTextIndex = signal(0);\n const currentText = computed(() => texts?.[currentTextIndex()] ?? '');\n const isChoiceDisplayed = signal(false);\n\n const text = computed(() => {\n const current = currentText();\n return typeof current === \"string\" ? current : current.text;\n });\n\n const choices = computed(() => {\n //const current = currentText();\n //return typeof current === \"string\" ? null : current.choices;\n return _choices;\n });\n\n const visibleSelection = computed(() => isChoiceDisplayed() && choices().length != 0)\n\n const triggerSkip = trigger();\n\n const typewriter = {\n speed: 0.3,\n skip: triggerSkip,\n onComplete: () => {\n isTextCompleted.set(true);\n }\n }\n\n const textStyle = {\n wordWrap: true,\n wordWrapWidth: 700 - 256 - 80\n }\n\n const face = signal({ x: 0, y: 0, width: 256, height: 256 });\n\n mount((element) => {\n const [dialogbox] = element.props.children\n return () => {\n dialogbox.directives.controls.onDestroy()\n isDestroyed = true;\n // Wait destroy is finished before start processing input\n setTimeout(() => {\n client.stopProcessingInput = false;\n }, 500)\n }\n })\n\n const controls = signal({\n next: {\n bind: keyboardControls.action,\n keyDown(e) {\n if (isDestroyed) return;\n if (isChoiceDisplayed()) {\n // If choices are displayed, do nothing (wait for selection)\n return;\n }\n\n // If text is still typing, just skip (fast forward) the animation\n if (!isTextCompleted()) {\n triggerSkip.start();\n isTextCompleted.set(true);\n }\n else {\n const isFinished = currentTextIndex() === texts.length - 1;\n currentTextIndex.update((index) => {\n if (index < texts.length - 1) {\n return index + 1;\n }\n return index;\n });\n isChoiceDisplayed.set(false);\n isTextCompleted.set(false);\n if (isFinished && onFinish) {\n onFinish();\n } \n }\n },\n },\n });\n\n const onSelect = (index) => {\n onFinish(index);\n }\n \n effect(() => {\n if (choices().length != 0) {\n isChoiceDisplayed.set(true);\n }\n });\n</script>"],"names":["Selection"],"mappings":"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"}
|
package/dist/index24.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index24.js","sources":["../src/components/effects/hit.ce"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index24.js","sources":["../src/components/effects/hit.ce"],"sourcesContent":["<Text x y zIndex={10000} color scale size={30} text />\n\n<script>\n import { animatedSignal, mount, signal, tick } from \"canvasengine\";\n import { Direction } from \"@rpgjs/common\";\n const {\n text,\n direction,\n onFinish,\n duration,\n color,\n x: positionX,\n y: positionY\n } = defineProps({\n duration: {\n default: 1000\n },\n color: {\n default: 'black'\n }\n });\n\n const scale = animatedSignal(1, {\n duration: duration(),\n });\n\n // Generate random initial position\n const randomPosition = () => Math.floor(Math.random() * 60);\n const initialY = randomPosition();\n const x = signal(positionX());\n const y = signal(positionY() - initialY);\n\n // Initial velocity\n let velocityX = 0;\n let velocityY = 0;\n\n // Set initial velocity based on direction\n const speed = 200;\n switch (direction()) {\n case Direction.Left:\n velocityX = speed;\n break;\n case Direction.Right:\n velocityX = -speed;\n break;\n case Direction.Up:\n velocityY = speed;\n break;\n case Direction.Down:\n velocityY = -speed;\n break;\n }\n\n // Add some randomness to the velocity\n velocityX += (Math.random() - 0.5) * 100;\n velocityY += (Math.random() - 0.5) * 100;\n\n const gravity = 500; // Gravity effect\n const deceleration = 0.98; // Deceleration factor\n\n mount(() => {\n scale.set(0.1);\n });\n\n let elapsedTime = 0;\n\n tick(({ deltaTime }) => {\n elapsedTime += deltaTime;\n \n if (elapsedTime < duration()) {\n // Update position\n x.update((x) => x + (velocityX * deltaTime) / 1000);\n y.update((y) => y + (velocityY * deltaTime) / 1000);\n\n // Apply gravity\n velocityY += (gravity * deltaTime) / 1000;\n\n // Apply deceleration\n velocityX *= deceleration;\n velocityY *= deceleration;\n } else {\n if (onFinish) {\n onFinish();\n }\n }\n });\n</script>\n"],"names":[],"mappings":"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"}
|
package/dist/index25.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index25.js","sources":["../src/components/effects/animation.ce"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index25.js","sources":["../src/components/effects/animation.ce"],"sourcesContent":["<Sprite sheet x y anchor={0.5} />\n\n<script>\n import { signal } from \"canvasengine\";\n import { RpgClientEngine } from \"../../RpgClientEngine\";\n import { inject } from \"../../core/inject\";\n\n const { x, y, name, onFinish } = defineProps();\n\n const client = inject(RpgClientEngine);\n const spritesheets = client.spritesheets;\n\n const sheet = {\n definition: spritesheets.get(name()),\n playing: 'default',\n onFinish\n };\n\n</script>\n"],"names":[],"mappings":";;;;AAOqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ;AAC1F,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,YAAY,GAAG,MAAM,CAAC,YAAY;AACtC,IAAI,KAAK,GAAG;AACZ,IAAI,UAAU,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;AACxC,IAAI,OAAO,EAAE,SAAS;AACtB,IAAI,QAAQ,EAAE;AACd,CAAC;AACD,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE;AAC1D,QAAQ,OAAO;AACf;;;;"}
|
package/dist/index29.js
CHANGED
|
@@ -5,10 +5,12 @@ import { RpgClientEngine } from './index2.js';
|
|
|
5
5
|
function component($$props) {
|
|
6
6
|
useProps($$props);
|
|
7
7
|
useDefineProps($$props);
|
|
8
|
-
var
|
|
8
|
+
var _a;
|
|
9
|
+
var engine = inject(RpgClientEngine);
|
|
9
10
|
var effects = engine.effects;
|
|
10
11
|
var map = engine.sceneMap.data;
|
|
11
12
|
var sceneComponent = computed(function () { var _a; return (_a = map()) === null || _a === void 0 ? void 0 : _a.component; });
|
|
13
|
+
(_a = map()) === null || _a === void 0 ? void 0 : _a.params;
|
|
12
14
|
var mapParams = map().params;
|
|
13
15
|
engine.sceneMap.animations;
|
|
14
16
|
var backgroundMusic = { src: mapParams === null || mapParams === void 0 ? void 0 : mapParams.backgroundMusic, autoplay: true, loop: true };
|
|
@@ -17,7 +19,7 @@ signal(map().data);
|
|
|
17
19
|
var scale = (mapParams === null || mapParams === void 0 ? void 0 : mapParams.scale) || 1;
|
|
18
20
|
((mapParams === null || mapParams === void 0 ? void 0 : mapParams.width) || 2048) * scale;
|
|
19
21
|
((mapParams === null || mapParams === void 0 ? void 0 : mapParams.height) || 2048) * scale;
|
|
20
|
-
let $this = h(Container, { sound: backgroundMusic }, [h(Container, { sound: backgroundAmbientSound }), h(sceneComponent(), { data: computed(() => map().data) }), loop(effects, effect => h(Container, null, loop(effect.current, animation => h(effect.component, animation))))]);
|
|
22
|
+
let $this = h(Container, { sound: backgroundMusic }, [h(Container, { sound: backgroundAmbientSound }), h(sceneComponent(), { data: computed(() => map().data), params: computed(() => map().params) }), loop(effects, effect => h(Container, null, loop(effect.current, animation => h(effect.component, animation))))]);
|
|
21
23
|
return $this
|
|
22
24
|
}
|
|
23
25
|
|
package/dist/index29.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index29.js","sources":["../src/components/scenes/draw-map.ce"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index29.js","sources":["../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} >\n <Container sound={backgroundAmbientSound} />\n\n <sceneComponent() data={map.@data} params={map.@params} />\n \n @for (effect of effects) {\n <Container>\n @for (animation of effect.current) {\n <effect.component ...animation />\n }\n </Container>\n }\n</Container>\n\n<script>\n import { effect, signal, computed, mount } from 'canvasengine'\n import { inject } from \"../../core/inject\";\n import { RpgClientEngine } from \"../../RpgClientEngine\";\n\n const engine = inject(RpgClientEngine);\n const effects = engine.effects\n const map = engine.sceneMap.data\n const sceneComponent = computed(() => map()?.component)\n const sceneParams = map()?.params\n const mapParams = map().params\n const animations = engine.sceneMap.animations\n const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n \n const data = signal(map().data)\n\n const scale = mapParams?.scale || 1\n const worldWidth = (mapParams?.width || 2048) * scale\n const worldHeight = (mapParams?.height || 2048) * scale\n \n const clamp = {\n direction: \"all\"\n }\n</script>"],"names":[],"mappings":";;;;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAA4B,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE;AACd,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,OAAO,GAAG,MAAM,CAAC,OAAO;AAC5B,IAAI,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI;AAC9B,IAAI,cAAc,GAAG,QAAQ,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC;AAC3G,CAAC,EAAE,GAAG,GAAG,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC;AACvE,IAAI,SAAS,GAAG,GAAG,EAAE,CAAC,MAAM;AACX,MAAM,CAAC,QAAQ,CAAC;AACjC,IAAI,eAAe,GAAG,EAAE,GAAG,EAAE,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAC1I,IAAI,sBAAsB,GAAG,EAAE,GAAG,EAAE,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,sBAAsB,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AAC7I,MAAM,CAAC,GAAG,EAAE,CAAC,IAAI;AAC5B,IAAI,KAAK,GAAG,CAAC,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,KAAK,KAAK,CAAC;AACvE,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,KAAK,KAAK,IAAI,IAAI;AACnF,CAAC,CAAC,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,MAAM,KAAK,IAAI,IAAI;AAIvG,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,CAAC,EAAE,CAAC,CAAC,cAAc,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/T,QAAQ,OAAO;AACf;;;;"}
|
package/dist/index30.js
CHANGED
package/dist/index31.js
CHANGED
package/dist/index37.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useProps, useDefineProps, mount, signal, h, Container, loop, computed } from 'canvasengine';
|
|
2
|
-
import component$1 from './
|
|
2
|
+
import component$1 from './index39.js';
|
|
3
3
|
import { RpgClientEngine } from './index2.js';
|
|
4
4
|
import { inject } from './index6.js';
|
|
5
5
|
|
package/dist/index37.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index37.js","sources":["../src/components/gui/dialogbox/selection.ce"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index37.js","sources":["../src/components/gui/dialogbox/selection.ce"],"sourcesContent":["<Container controls flexDirection=\"column\" margin={[0, 0, 0, 50]}>\n @for ((item,index) of items) { \n <ItemMenu text={@item.@text} isSelected={@selected(@index)} /> \n }\n</Container>\n\n<script>\n import { signal, computed, mount } from \"canvasengine\";\n import ItemMenu from \"./itemMenu.ce\";\n import { RpgClientEngine } from \"../../../RpgClientEngine\";\n import { inject } from \"../../../core/inject\";\n\n const {\n items,\n wrapAround,\n onSelect,\n selectedIndex,\n } = defineProps();\n\n const client = inject(RpgClientEngine);\n const keyboardControls = client.globalConfig.keyboardControls;\n\n const selected = (index) => {\n return computed(() => {\n return index === selectedIndex();\n })\n }\n\n mount((element) => {\n return () => {\n element.directives.controls.onDestroy()\n }\n })\n\n const controls = signal({\n down: {\n bind: keyboardControls.down,\n keyDown() {\n selectedIndex.update((currentIndex) => {\n if (wrapAround) {\n return (currentIndex + 1) % items().length;\n } else {\n return Math.min(currentIndex + 1, items().length - 1);\n }\n });\n },\n },\n up: {\n bind: keyboardControls.up,\n keyDown() {\n selectedIndex.update((currentIndex) => {\n if (wrapAround) {\n return (currentIndex - 1 + items().length) % items().length;\n } else {\n return Math.max(currentIndex - 1, 0);\n }\n });\n },\n },\n enter: {\n bind: keyboardControls.action,\n keyDown() {\n onSelect?.(selectedIndex());\n },\n },\n });\n</script>\n"],"names":["ItemMenu"],"mappings":";;;;;AASqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,aAAa,GAAG,EAAE,CAAC,aAAa;AACtI,IAAI,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC;AACpC,IAAI,gBAAgB,GAAG,MAAM,CAAC,YAAY,CAAC,gBAAgB;AAC3D,IAAI,QAAQ,GAAG,UAAU,KAAK,EAAE;AAChC,IAAI,OAAO,QAAQ,CAAC,YAAY;AAChC,QAAQ,OAAO,KAAK,KAAK,aAAa,EAAE;AACxC,KAAK,CAAC;AACN,CAAC;AACD,KAAK,CAAC,UAAU,OAAO,EAAE;AACzB,IAAI,OAAO,YAAY;AACvB,QAAQ,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,EAAE;AAC/C,KAAK;AACL,CAAC,CAAC;AACF,IAAI,QAAQ,GAAG,MAAM,CAAC;AACtB,IAAI,IAAI,EAAE;AACV,QAAQ,IAAI,EAAE,gBAAgB,CAAC,IAAI;AACnC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,aAAa,CAAC,MAAM,CAAC,UAAU,YAAY,EAAE;AACzD,gBAAgB,IAAI,UAAU,EAAE;AAChC,oBAAoB,OAAO,CAAC,YAAY,GAAG,CAAC,IAAI,KAAK,EAAE,CAAC,MAAM;AAC9D;AACA,qBAAqB;AACrB,oBAAoB,OAAO,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;AACzE;AACA,aAAa,CAAC;AACd,SAAS;AACT,KAAK;AACL,IAAI,EAAE,EAAE;AACR,QAAQ,IAAI,EAAE,gBAAgB,CAAC,EAAE;AACjC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,aAAa,CAAC,MAAM,CAAC,UAAU,YAAY,EAAE;AACzD,gBAAgB,IAAI,UAAU,EAAE;AAChC,oBAAoB,OAAO,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,IAAI,KAAK,EAAE,CAAC,MAAM;AAC/E;AACA,qBAAqB;AACrB,oBAAoB,OAAO,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC,CAAC;AACxD;AACA,aAAa,CAAC;AACd,SAAS;AACT,KAAK;AACL,IAAI,KAAK,EAAE;AACX,QAAQ,IAAI,EAAE,gBAAgB,CAAC,MAAM;AACrC,QAAQ,OAAO,EAAE,YAAY;AAC7B,YAAY,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;AACzF,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,CAACA,WAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAC1L,QAAQ,OAAO;AACf;;;;"}
|
package/dist/index38.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RpgCommonPlayer } from '@rpgjs/common';
|
|
2
|
+
import { trigger, signal } from 'canvasengine';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
4
|
+
class RpgClientObject extends RpgCommonPlayer {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(...arguments);
|
|
7
|
+
this.emitParticleTrigger = trigger();
|
|
8
|
+
this.particleName = signal("");
|
|
9
|
+
}
|
|
10
|
+
flash(color, duration = 100) {
|
|
11
|
+
const lastTint = this.tint();
|
|
12
|
+
this.tint.set(color);
|
|
13
|
+
setTimeout(() => {
|
|
14
|
+
this.tint.set(lastTint);
|
|
15
|
+
}, duration);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
18
|
|
|
19
|
-
export {
|
|
19
|
+
export { RpgClientObject };
|
|
20
20
|
//# sourceMappingURL=index38.js.map
|
package/dist/index38.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index38.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index38.js","sources":["../src/Game/Object.ts"],"sourcesContent":["import { RpgCommonPlayer } from \"@rpgjs/common\";\nimport { trigger, signal } from \"canvasengine\";\n\nexport abstract class RpgClientObject extends RpgCommonPlayer {\n abstract type: string;\n emitParticleTrigger = trigger()\n particleName = signal('')\n\n flash(color: string, duration: number = 100) {\n const lastTint = this.tint()\n this.tint.set(color);\n setTimeout(() => {\n this.tint.set(lastTint)\n }, duration)\n }\n} "],"names":[],"mappings":";;;AAGO,MAAe,wBAAwB,eAAgB,CAAA;AAAA,EAAvD,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAEL,IAAA,IAAA,CAAA,mBAAA,GAAsB,OAAQ,EAAA;AAC9B,IAAA,IAAA,CAAA,YAAA,GAAe,OAAO,EAAE,CAAA;AAAA;AAAA,EAExB,KAAA,CAAM,KAAe,EAAA,QAAA,GAAmB,GAAK,EAAA;AAC3C,IAAM,MAAA,QAAA,GAAW,KAAK,IAAK,EAAA;AAC3B,IAAK,IAAA,CAAA,IAAA,CAAK,IAAI,KAAK,CAAA;AACnB,IAAA,UAAA,CAAW,MAAM;AACf,MAAK,IAAA,CAAA,IAAA,CAAK,IAAI,QAAQ,CAAA;AAAA,OACrB,QAAQ,CAAA;AAAA;AAEf;;;;"}
|
package/dist/index39.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { trigger, signal } from 'canvasengine';
|
|
1
|
+
import { useProps, useDefineProps, animatedSignal, h, Container, Rect, Text } from 'canvasengine';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
3
|
+
function component($$props) {
|
|
4
|
+
useProps($$props);
|
|
5
|
+
const defineProps = useDefineProps($$props);
|
|
6
|
+
var _a = defineProps(), text = _a.text, isSelected = _a.isSelected;
|
|
7
|
+
var alpha = animatedSignal(1, {
|
|
8
|
+
repeatType: "reverse",
|
|
9
|
+
duration: 500,
|
|
10
|
+
repeat: Infinity,
|
|
11
|
+
});
|
|
12
|
+
alpha.set(0.5);
|
|
13
|
+
var height = 40;
|
|
14
|
+
var width = 256;
|
|
15
|
+
let $this = h(Container, null, [h(Rect, { width, height, color: '#595971', alpha, visible: isSelected }), h(Container, { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }, h(Text, { text, color: '#fff', fontSize: 18, margin: 10 }))]);
|
|
16
|
+
return $this
|
|
17
|
+
}
|
|
18
18
|
|
|
19
|
-
export {
|
|
19
|
+
export { component as default };
|
|
20
20
|
//# sourceMappingURL=index39.js.map
|
package/dist/index39.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index39.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"index39.js","sources":["../src/components/gui/dialogbox/itemMenu.ce"],"sourcesContent":["<Container>\n <Rect width height color=\"#595971\" alpha visible={isSelected} />\n <Container flexDirection=\"row\" alignItems=\"center\" justifyContent=\"center\">\n <Text text color=\"#fff\" fontSize={18} margin={10} />\n </Container>\n</Container>\n\n<script>\nimport { animatedSignal } from \"canvasengine\";\n\nconst { text, isSelected } = defineProps();\n\nconst alpha = animatedSignal(1, {\n repeatType: \"reverse\",\n duration: 500,\n repeat: Infinity,\n});\n\nalpha.set(0.5);\n\nconst height = 40;\nconst width = 256;\n</script>"],"names":[],"mappings":";;AAQqB,SAAS,SAAS,CAAC,OAAO,EAAE;AACjD,QAAuB,QAAQ,CAAC,OAAO;AACvC,QAAQ,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO;AAClD,QAAQ,IAAI,EAAE,GAAG,WAAW,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,EAAE,CAAC,UAAU;AAC1E,IAAI,KAAK,GAAG,cAAc,CAAC,CAAC,EAAE;AAC9B,IAAI,UAAU,EAAE,SAAS;AACzB,IAAI,QAAQ,EAAE,GAAG;AACjB,IAAI,MAAM,EAAE,QAAQ;AACpB,CAAC,CAAC;AACF,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC;AACd,IAAI,MAAM,GAAG,EAAE;AACf,IAAI,KAAK,GAAG,GAAG;AACf,QAAQ,IAAI,KAAK,GAAG,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;AACrQ,QAAQ,OAAO;AACf;;;;"}
|
package/dist/index4.js
CHANGED
|
@@ -5,16 +5,20 @@ import { WebSocketToken, AbstractWebsocket } from './index17.js';
|
|
|
5
5
|
import { UpdateMapToken, UpdateMapService } from '@rpgjs/common';
|
|
6
6
|
|
|
7
7
|
class BridgeWebsocket extends AbstractWebsocket {
|
|
8
|
-
constructor(context, options) {
|
|
8
|
+
constructor(context, options = {}) {
|
|
9
9
|
super(context);
|
|
10
10
|
this.context = context;
|
|
11
11
|
this.options = options;
|
|
12
12
|
}
|
|
13
|
-
async connection() {
|
|
13
|
+
async connection(listeners) {
|
|
14
14
|
class Room {
|
|
15
15
|
}
|
|
16
16
|
const instance = new Room();
|
|
17
|
-
this.socket = await connectionRoom(
|
|
17
|
+
this.socket = await connectionRoom({
|
|
18
|
+
host: this.options.host || window.location.host,
|
|
19
|
+
room: "lobby-1"
|
|
20
|
+
}, instance);
|
|
21
|
+
listeners?.(this.socket);
|
|
18
22
|
}
|
|
19
23
|
on(key, callback) {
|
|
20
24
|
this.socket.on(key, callback);
|
|
@@ -25,6 +29,15 @@ class BridgeWebsocket extends AbstractWebsocket {
|
|
|
25
29
|
emit(event, data) {
|
|
26
30
|
this.socket.emit(event, data);
|
|
27
31
|
}
|
|
32
|
+
updateProperties({ room }) {
|
|
33
|
+
this.socket.conn.updateProperties({
|
|
34
|
+
room,
|
|
35
|
+
host: this.options.host
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
async reconnect(listeners) {
|
|
39
|
+
this.socket.conn.reconnect();
|
|
40
|
+
}
|
|
28
41
|
}
|
|
29
42
|
class UpdateMapStandaloneService extends UpdateMapService {
|
|
30
43
|
constructor(context, options) {
|
package/dist/index4.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index4.js","sources":["../src/services/mmorpg.ts"],"sourcesContent":["import { Context } from \"@signe/di\";\nimport { connectionRoom } from \"@signe/sync/client\";\nimport { RpgGui } from \"../Gui/Gui\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./AbstractSocket\";\nimport { UpdateMapService, UpdateMapToken } from \"@rpgjs/common\";\n\ninterface MmorpgOptions {\n host
|
|
1
|
+
{"version":3,"file":"index4.js","sources":["../src/services/mmorpg.ts"],"sourcesContent":["import { Context } from \"@signe/di\";\nimport { connectionRoom } from \"@signe/sync/client\";\nimport { RpgGui } from \"../Gui/Gui\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { AbstractWebsocket, WebSocketToken } from \"./AbstractSocket\";\nimport { UpdateMapService, UpdateMapToken } from \"@rpgjs/common\";\n\ninterface MmorpgOptions {\n host?: string;\n}\n\nclass BridgeWebsocket extends AbstractWebsocket {\n private socket: any;\n\n constructor(protected context: Context, private options: MmorpgOptions = {}) {\n super(context);\n }\n\n async connection(listeners?: (data: any) => void) {\n // tmp\n class Room {\n \n }\n const instance = new Room()\n this.socket = await connectionRoom({\n host: this.options.host || window.location.host,\n room: \"lobby-1\",\n }, instance)\n\n listeners?.(this.socket)\n }\n\n on(key: string, callback: (data: any) => void) {\n this.socket.on(key, callback);\n }\n\n off(event: string, callback: (data: any) => void) {\n this.socket.off(event, callback);\n }\n\n emit(event: string, data: any) {\n this.socket.emit(event, data);\n }\n\n updateProperties({ room }: { room: any }) {\n this.socket.conn.updateProperties({\n room: room,\n host: this.options.host\n })\n }\n\n async reconnect(listeners?: (data: any) => void) {\n this.socket.conn.reconnect()\n }\n}\n\nclass UpdateMapStandaloneService extends UpdateMapService {\n constructor(protected context: Context, private options: MmorpgOptions) {\n super(context);\n }\n\n async update(map: any) {\n // nothing\n }\n}\n\nexport function provideMmorpg(options: MmorpgOptions) {\n return [\n {\n provide: WebSocketToken,\n useFactory: (context: Context) => new BridgeWebsocket(context, options),\n },\n {\n provide: UpdateMapToken,\n useFactory: (context: Context) => new UpdateMapStandaloneService(context, options),\n },\n RpgGui,\n RpgClientEngine,\n ];\n}\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,wBAAwB,iBAAkB,CAAA;AAAA,EAG9C,WAAsB,CAAA,OAAA,EAA0B,OAAyB,GAAA,EAAI,EAAA;AAC3E,IAAA,KAAA,CAAM,OAAO,CAAA;AADO,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAEhD,EAEA,MAAM,WAAW,SAAiC,EAAA;AAAA,IAEhD,MAAM,IAAK,CAAA;AAAA;AAGX,IAAM,MAAA,QAAA,GAAW,IAAI,IAAK,EAAA;AAC1B,IAAK,IAAA,CAAA,MAAA,GAAS,MAAM,cAAe,CAAA;AAAA,MAC/B,IAAM,EAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,IAAQ,OAAO,QAAS,CAAA,IAAA;AAAA,MAC3C,IAAM,EAAA;AAAA,OACP,QAAQ,CAAA;AAEX,IAAA,SAAA,GAAY,KAAK,MAAM,CAAA;AAAA;AACzB,EAEA,EAAA,CAAG,KAAa,QAA+B,EAAA;AAC7C,IAAK,IAAA,CAAA,MAAA,CAAO,EAAG,CAAA,GAAA,EAAK,QAAQ,CAAA;AAAA;AAC9B,EAEA,GAAA,CAAI,OAAe,QAA+B,EAAA;AAChD,IAAK,IAAA,CAAA,MAAA,CAAO,GAAI,CAAA,KAAA,EAAO,QAAQ,CAAA;AAAA;AACjC,EAEA,IAAA,CAAK,OAAe,IAAW,EAAA;AAC7B,IAAK,IAAA,CAAA,MAAA,CAAO,IAAK,CAAA,KAAA,EAAO,IAAI,CAAA;AAAA;AAC9B,EAEA,gBAAA,CAAiB,EAAE,IAAA,EAAuB,EAAA;AACxC,IAAK,IAAA,CAAA,MAAA,CAAO,KAAK,gBAAiB,CAAA;AAAA,MAChC,IAAA;AAAA,MACA,IAAA,EAAM,KAAK,OAAQ,CAAA;AAAA,KACpB,CAAA;AAAA;AACH,EAEA,MAAM,UAAU,SAAiC,EAAA;AAChD,IAAK,IAAA,CAAA,MAAA,CAAO,KAAK,SAAU,EAAA;AAAA;AAE9B;AAEA,MAAM,mCAAmC,gBAAiB,CAAA;AAAA,EACxD,WAAA,CAAsB,SAA0B,OAAwB,EAAA;AACtE,IAAA,KAAA,CAAM,OAAO,CAAA;AADO,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAAA;AAEhD,EAEA,MAAM,OAAO,GAAU,EAAA;AAAA;AAGzB;AAEO,SAAS,cAAc,OAAwB,EAAA;AACpD,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,eAAA,CAAgB,SAAS,OAAO;AAAA,KACxE;AAAA,IACA;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,0BAAA,CAA2B,SAAS,OAAO;AAAA,KACnF;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|
package/dist/index5.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { injector, inject
|
|
1
|
+
import { Context, injector, inject } from './index16.js';
|
|
2
2
|
import { RpgClientEngine } from './index2.js';
|
|
3
3
|
import { setInject } from './index6.js';
|
|
4
4
|
|
|
5
5
|
async function startGame(options) {
|
|
6
6
|
const context = new Context();
|
|
7
|
+
context["side"] = "client";
|
|
7
8
|
setInject(context);
|
|
8
9
|
await injector(context, options.providers);
|
|
9
10
|
const engine = inject(context, RpgClientEngine);
|
package/dist/index5.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index5.js","sources":["../src/core/setup.ts"],"sourcesContent":["import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { setInject } from \"./inject\";\n\ninterface SetupOptions {\n providers: Providers;\n}\n\nexport async function startGame(options: SetupOptions) {\n const context = new Context();\n setInject(context);\n\n await injector(context, options.providers);\n\n const engine = inject(context, RpgClientEngine);\n await engine.start();\n return context;\n}"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"index5.js","sources":["../src/core/setup.ts"],"sourcesContent":["import { Context, FactoryProvider, findProvider, findProviders, inject, injector, Providers } from \"@signe/di\";\nimport { RpgClientEngine } from \"../RpgClientEngine\";\nimport { setInject } from \"./inject\";\n\ninterface SetupOptions {\n providers: Providers;\n}\n\n\nexport async function startGame(options: SetupOptions) {\n const context = new Context();\n context['side'] = 'client'\n setInject(context);\n\n await injector(context, options.providers);\n\n const engine = inject(context, RpgClientEngine);\n await engine.start();\n return context;\n}"],"names":[],"mappings":";;;;AASA,eAAsB,UAAU,OAAuB,EAAA;AACrD,EAAM,MAAA,OAAA,GAAU,IAAI,OAAQ,EAAA;AAC5B,EAAA,OAAA,CAAQ,MAAM,CAAI,GAAA,QAAA;AAClB,EAAA,SAAA,CAAU,OAAO,CAAA;AAEjB,EAAM,MAAA,QAAA,CAAS,OAAS,EAAA,OAAA,CAAQ,SAAS,CAAA;AAEzC,EAAM,MAAA,MAAA,GAAS,MAAO,CAAA,OAAA,EAAS,eAAe,CAAA;AAC9C,EAAA,MAAM,OAAO,KAAM,EAAA;AACnB,EAAO,OAAA,OAAA;AACT;;;;"}
|
package/dist/index7.js
CHANGED
|
@@ -6,6 +6,9 @@ class LoadMapService {
|
|
|
6
6
|
constructor(context, options) {
|
|
7
7
|
this.context = context;
|
|
8
8
|
this.options = options;
|
|
9
|
+
if (context["side"] === "server") {
|
|
10
|
+
return;
|
|
11
|
+
}
|
|
9
12
|
this.updateMapService = inject(context, UpdateMapToken);
|
|
10
13
|
}
|
|
11
14
|
async load(mapId) {
|
|
@@ -18,7 +21,12 @@ function provideLoadMap(options) {
|
|
|
18
21
|
return [
|
|
19
22
|
{
|
|
20
23
|
provide: UpdateMapToken,
|
|
21
|
-
useFactory: (context) =>
|
|
24
|
+
useFactory: (context) => {
|
|
25
|
+
if (context["side"] === "client") {
|
|
26
|
+
console.warn("UpdateMapToken is not overridden");
|
|
27
|
+
}
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
22
30
|
},
|
|
23
31
|
{
|
|
24
32
|
provide: LoadMapToken,
|
package/dist/index7.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index7.js","sources":["../src/services/loadMap.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { UpdateMapToken, UpdateMapService } from \"@rpgjs/common\";\n\nexport const LoadMapToken = 'LoadMapToken'\n\nexport type LoadMapOptions = (mapId: string) => Promise<
|
|
1
|
+
{"version":3,"file":"index7.js","sources":["../src/services/loadMap.ts"],"sourcesContent":["import { Context, inject } from \"@signe/di\";\nimport { UpdateMapToken, UpdateMapService } from \"@rpgjs/common\";\n\nexport const LoadMapToken = 'LoadMapToken'\n\n/**\n * Represents the structure of map data that should be returned by the load map callback.\n * This interface defines all the properties that can be provided when loading a custom map.\n * \n * @interface MapData\n */\ntype MapData = {\n /** Raw map data that will be passed to the map component */\n data: any;\n /** CanvasEngine component that will render the map */\n component: any;\n /** Optional map width in pixels, used for viewport calculations */\n width?: number;\n /** Optional map height in pixels, used for viewport calculations */\n height?: number;\n /** Optional map events data (NPCs, interactive objects, etc.) */\n events?: any;\n /** Optional map identifier, defaults to the mapId parameter if not provided */\n id?: string;\n}\n\n/**\n * Callback function type for loading map data.\n * This function receives a map ID and should return either a MapData object directly\n * or a Promise that resolves to a MapData object.\n * \n * @callback LoadMapOptions\n * @param {string} mapId - The identifier of the map to load\n * @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it\n */\nexport type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData \n\nexport class LoadMapService {\n private updateMapService: UpdateMapService;\n\n constructor(private context: Context, private options: LoadMapOptions) {\n if (context['side'] === 'server') {\n return\n }\n this.updateMapService = inject(context, UpdateMapToken);\n }\n\n async load(mapId: string) {\n const map = await this.options(mapId.replace('map-', ''))\n await this.updateMapService.update(mapId, map);\n return map;\n }\n}\n\n/**\n * Creates a dependency injection configuration for custom map loading on the client side.\n * \n * This function allows you to customize how maps are loaded and displayed by providing\n * a callback that defines custom map data and rendering components. It's designed to work\n * with the RPG-JS dependency injection system and enables integration of custom map formats\n * like Tiled TMX files or any other map data structure.\n * \n * The function sets up the necessary service providers for map loading, including:\n * - UpdateMapToken: Handles map updates in the client context\n * - LoadMapToken: Provides the LoadMapService with your custom loading logic\n * \n * **Design Concept:**\n * The function follows the provider pattern, creating a modular way to inject custom\n * map loading behavior into the RPG-JS client engine. It separates the concern of\n * map data fetching from map rendering, allowing developers to focus on their specific\n * map format while leveraging the engine's rendering capabilities.\n * \n * @param {LoadMapOptions} options - Callback function that handles map loading logic\n * @returns {Array<Object>} Array of dependency injection provider configurations\n * \n * @example\n * ```typescript\n * import { provideLoadMap } from '@rpgjs/client'\n * import { createModule } from '@rpgjs/common'\n * import MyTiledMapComponent from './MyTiledMapComponent.ce'\n * \n * // Basic usage with JSON map data\n * export function provideCustomMap() {\n * return createModule(\"CustomMap\", [\n * provideLoadMap(async (mapId) => {\n * const response = await fetch(`/maps/${mapId}.json`)\n * const mapData = await response.json()\n * \n * return {\n * data: mapData,\n * component: MyTiledMapComponent,\n * width: mapData.width,\n * height: mapData.height,\n * events: mapData.events\n * }\n * })\n * ])\n * }\n * \n * // Advanced usage with Tiled TMX files\n * export function provideTiledMap() {\n * return createModule(\"TiledMap\", [\n * provideLoadMap(async (mapId) => {\n * // Load TMX file\n * const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)\n * const tmxData = await tmxResponse.text()\n * \n * // Parse TMX data (using a TMX parser)\n * const parsedMap = parseTMX(tmxData)\n * \n * return {\n * data: parsedMap,\n * component: TiledMapRenderer,\n * width: parsedMap.width * parsedMap.tilewidth,\n * height: parsedMap.height * parsedMap.tileheight,\n * events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects\n * }\n * })\n * ])\n * }\n * \n * // Synchronous usage for static maps\n * export function provideStaticMap() {\n * return createModule(\"StaticMap\", [\n * provideLoadMap((mapId) => {\n * const staticMaps = {\n * 'town': { tiles: [...], npcs: [...] },\n * 'dungeon': { tiles: [...], monsters: [...] }\n * }\n * \n * return {\n * data: staticMaps[mapId],\n * component: StaticMapComponent,\n * width: 800,\n * height: 600\n * }\n * })\n * ])\n * }\n * ```\n * \n * @since 4.0.0\n * @see {@link LoadMapOptions} for callback function signature\n * @see {@link MapData} for return data structure\n */\nexport function provideLoadMap(options: LoadMapOptions) {\n return [\n {\n provide: UpdateMapToken,\n useFactory: (context: Context) => {\n if (context['side'] === 'client') {\n console.warn('UpdateMapToken is not overridden')\n }\n return\n },\n },\n {\n provide: LoadMapToken,\n useFactory: (context: Context) => new LoadMapService(context, options),\n },\n ];\n}\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAe,GAAA;AAkCrB,MAAM,cAAe,CAAA;AAAA,EAG1B,WAAA,CAAoB,SAA0B,OAAyB,EAAA;AAAnD,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAA0B,IAAA,IAAA,CAAA,OAAA,GAAA,OAAA;AAC5C,IAAI,IAAA,OAAA,CAAQ,MAAM,CAAA,KAAM,QAAU,EAAA;AAChC,MAAA;AAAA;AAEF,IAAK,IAAA,CAAA,gBAAA,GAAmB,MAAO,CAAA,OAAA,EAAS,cAAc,CAAA;AAAA;AACxD,EAEA,MAAM,KAAK,KAAe,EAAA;AACxB,IAAM,MAAA,GAAA,GAAM,MAAM,IAAK,CAAA,OAAA,CAAQ,MAAM,OAAQ,CAAA,MAAA,EAAQ,EAAE,CAAC,CAAA;AACxD,IAAA,MAAM,IAAK,CAAA,gBAAA,CAAiB,MAAO,CAAA,KAAA,EAAO,GAAG,CAAA;AAC7C,IAAO,OAAA,GAAA;AAAA;AAEX;AA6FO,SAAS,eAAe,OAAyB,EAAA;AACtD,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAS,EAAA,cAAA;AAAA,MACT,UAAA,EAAY,CAAC,OAAqB,KAAA;AAChC,QAAI,IAAA,OAAA,CAAQ,MAAM,CAAA,KAAM,QAAU,EAAA;AAChC,UAAA,OAAA,CAAQ,KAAK,kCAAkC,CAAA;AAAA;AAEjD,QAAA;AAAA;AACF,KACF;AAAA,IACA;AAAA,MACE,OAAS,EAAA,YAAA;AAAA,MACT,YAAY,CAAC,OAAA,KAAqB,IAAI,cAAA,CAAe,SAAS,OAAO;AAAA;AACvE,GACF;AACF;;;;"}
|
|
@@ -1,14 +1,135 @@
|
|
|
1
1
|
import { Context } from '@signe/di';
|
|
2
2
|
export declare const LoadMapToken = "LoadMapToken";
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Represents the structure of map data that should be returned by the load map callback.
|
|
5
|
+
* This interface defines all the properties that can be provided when loading a custom map.
|
|
6
|
+
*
|
|
7
|
+
* @interface MapData
|
|
8
|
+
*/
|
|
9
|
+
type MapData = {
|
|
10
|
+
/** Raw map data that will be passed to the map component */
|
|
11
|
+
data: any;
|
|
12
|
+
/** CanvasEngine component that will render the map */
|
|
13
|
+
component: any;
|
|
14
|
+
/** Optional map width in pixels, used for viewport calculations */
|
|
15
|
+
width?: number;
|
|
16
|
+
/** Optional map height in pixels, used for viewport calculations */
|
|
17
|
+
height?: number;
|
|
18
|
+
/** Optional map events data (NPCs, interactive objects, etc.) */
|
|
19
|
+
events?: any;
|
|
20
|
+
/** Optional map identifier, defaults to the mapId parameter if not provided */
|
|
21
|
+
id?: string;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Callback function type for loading map data.
|
|
25
|
+
* This function receives a map ID and should return either a MapData object directly
|
|
26
|
+
* or a Promise that resolves to a MapData object.
|
|
27
|
+
*
|
|
28
|
+
* @callback LoadMapOptions
|
|
29
|
+
* @param {string} mapId - The identifier of the map to load
|
|
30
|
+
* @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it
|
|
31
|
+
*/
|
|
32
|
+
export type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData;
|
|
4
33
|
export declare class LoadMapService {
|
|
5
34
|
private context;
|
|
6
35
|
private options;
|
|
7
36
|
private updateMapService;
|
|
8
37
|
constructor(context: Context, options: LoadMapOptions);
|
|
9
|
-
load(mapId: string): Promise<
|
|
38
|
+
load(mapId: string): Promise<MapData>;
|
|
10
39
|
}
|
|
40
|
+
/**
|
|
41
|
+
* Creates a dependency injection configuration for custom map loading on the client side.
|
|
42
|
+
*
|
|
43
|
+
* This function allows you to customize how maps are loaded and displayed by providing
|
|
44
|
+
* a callback that defines custom map data and rendering components. It's designed to work
|
|
45
|
+
* with the RPG-JS dependency injection system and enables integration of custom map formats
|
|
46
|
+
* like Tiled TMX files or any other map data structure.
|
|
47
|
+
*
|
|
48
|
+
* The function sets up the necessary service providers for map loading, including:
|
|
49
|
+
* - UpdateMapToken: Handles map updates in the client context
|
|
50
|
+
* - LoadMapToken: Provides the LoadMapService with your custom loading logic
|
|
51
|
+
*
|
|
52
|
+
* **Design Concept:**
|
|
53
|
+
* The function follows the provider pattern, creating a modular way to inject custom
|
|
54
|
+
* map loading behavior into the RPG-JS client engine. It separates the concern of
|
|
55
|
+
* map data fetching from map rendering, allowing developers to focus on their specific
|
|
56
|
+
* map format while leveraging the engine's rendering capabilities.
|
|
57
|
+
*
|
|
58
|
+
* @param {LoadMapOptions} options - Callback function that handles map loading logic
|
|
59
|
+
* @returns {Array<Object>} Array of dependency injection provider configurations
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* ```typescript
|
|
63
|
+
* import { provideLoadMap } from '@rpgjs/client'
|
|
64
|
+
* import { createModule } from '@rpgjs/common'
|
|
65
|
+
* import MyTiledMapComponent from './MyTiledMapComponent.ce'
|
|
66
|
+
*
|
|
67
|
+
* // Basic usage with JSON map data
|
|
68
|
+
* export function provideCustomMap() {
|
|
69
|
+
* return createModule("CustomMap", [
|
|
70
|
+
* provideLoadMap(async (mapId) => {
|
|
71
|
+
* const response = await fetch(`/maps/${mapId}.json`)
|
|
72
|
+
* const mapData = await response.json()
|
|
73
|
+
*
|
|
74
|
+
* return {
|
|
75
|
+
* data: mapData,
|
|
76
|
+
* component: MyTiledMapComponent,
|
|
77
|
+
* width: mapData.width,
|
|
78
|
+
* height: mapData.height,
|
|
79
|
+
* events: mapData.events
|
|
80
|
+
* }
|
|
81
|
+
* })
|
|
82
|
+
* ])
|
|
83
|
+
* }
|
|
84
|
+
*
|
|
85
|
+
* // Advanced usage with Tiled TMX files
|
|
86
|
+
* export function provideTiledMap() {
|
|
87
|
+
* return createModule("TiledMap", [
|
|
88
|
+
* provideLoadMap(async (mapId) => {
|
|
89
|
+
* // Load TMX file
|
|
90
|
+
* const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)
|
|
91
|
+
* const tmxData = await tmxResponse.text()
|
|
92
|
+
*
|
|
93
|
+
* // Parse TMX data (using a TMX parser)
|
|
94
|
+
* const parsedMap = parseTMX(tmxData)
|
|
95
|
+
*
|
|
96
|
+
* return {
|
|
97
|
+
* data: parsedMap,
|
|
98
|
+
* component: TiledMapRenderer,
|
|
99
|
+
* width: parsedMap.width * parsedMap.tilewidth,
|
|
100
|
+
* height: parsedMap.height * parsedMap.tileheight,
|
|
101
|
+
* events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects
|
|
102
|
+
* }
|
|
103
|
+
* })
|
|
104
|
+
* ])
|
|
105
|
+
* }
|
|
106
|
+
*
|
|
107
|
+
* // Synchronous usage for static maps
|
|
108
|
+
* export function provideStaticMap() {
|
|
109
|
+
* return createModule("StaticMap", [
|
|
110
|
+
* provideLoadMap((mapId) => {
|
|
111
|
+
* const staticMaps = {
|
|
112
|
+
* 'town': { tiles: [...], npcs: [...] },
|
|
113
|
+
* 'dungeon': { tiles: [...], monsters: [...] }
|
|
114
|
+
* }
|
|
115
|
+
*
|
|
116
|
+
* return {
|
|
117
|
+
* data: staticMaps[mapId],
|
|
118
|
+
* component: StaticMapComponent,
|
|
119
|
+
* width: 800,
|
|
120
|
+
* height: 600
|
|
121
|
+
* }
|
|
122
|
+
* })
|
|
123
|
+
* ])
|
|
124
|
+
* }
|
|
125
|
+
* ```
|
|
126
|
+
*
|
|
127
|
+
* @since 4.0.0
|
|
128
|
+
* @see {@link LoadMapOptions} for callback function signature
|
|
129
|
+
* @see {@link MapData} for return data structure
|
|
130
|
+
*/
|
|
11
131
|
export declare function provideLoadMap(options: LoadMapOptions): {
|
|
12
132
|
provide: string;
|
|
13
133
|
useFactory: (context: Context) => void;
|
|
14
134
|
}[];
|
|
135
|
+
export {};
|
|
@@ -4,17 +4,21 @@ import { RpgClientEngine } from '../RpgClientEngine';
|
|
|
4
4
|
import { AbstractWebsocket } from './AbstractSocket';
|
|
5
5
|
import { UpdateMapService } from '@rpgjs/common';
|
|
6
6
|
interface MmorpgOptions {
|
|
7
|
-
host
|
|
7
|
+
host?: string;
|
|
8
8
|
}
|
|
9
9
|
declare class BridgeWebsocket extends AbstractWebsocket {
|
|
10
10
|
protected context: Context;
|
|
11
11
|
private options;
|
|
12
12
|
private socket;
|
|
13
|
-
constructor(context: Context, options
|
|
14
|
-
connection(): Promise<void>;
|
|
13
|
+
constructor(context: Context, options?: MmorpgOptions);
|
|
14
|
+
connection(listeners?: (data: any) => void): Promise<void>;
|
|
15
15
|
on(key: string, callback: (data: any) => void): void;
|
|
16
16
|
off(event: string, callback: (data: any) => void): void;
|
|
17
17
|
emit(event: string, data: any): void;
|
|
18
|
+
updateProperties({ room }: {
|
|
19
|
+
room: any;
|
|
20
|
+
}): void;
|
|
21
|
+
reconnect(listeners?: (data: any) => void): Promise<void>;
|
|
18
22
|
}
|
|
19
23
|
declare class UpdateMapStandaloneService extends UpdateMapService {
|
|
20
24
|
protected context: Context;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rpgjs/client",
|
|
3
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"version": "5.0.0-alpha.8",
|
|
4
4
|
"description": "RPGJS is a framework for creating RPG/MMORPG games",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"pixi.js": "^8.9.2"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@rpgjs/common": "5.0.0-alpha.
|
|
25
|
+
"@rpgjs/common": "5.0.0-alpha.8",
|
|
26
26
|
"@signe/di": "^2.3.3",
|
|
27
27
|
"@signe/room": "^2.3.3",
|
|
28
28
|
"@signe/sync": "^2.3.3",
|
|
29
29
|
"rxjs": "^7.8.2"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@canvasengine/compiler": "2.0.0-beta.
|
|
32
|
+
"@canvasengine/compiler": "2.0.0-beta.22",
|
|
33
33
|
"vite": "^6.2.5",
|
|
34
34
|
"vite-plugin-dts": "^4.5.3",
|
|
35
35
|
"vitest": "^3.1.1"
|
package/src/RpgClient.ts
CHANGED
|
@@ -12,7 +12,7 @@ export interface RpgClientEngineHooks {
|
|
|
12
12
|
* @prop { (engine: RpgClientEngine) => boolean | any } [onStart]
|
|
13
13
|
* @memberof RpgEngineHooks
|
|
14
14
|
*/
|
|
15
|
-
onStart?: (engine: RpgClientEngine) => boolean | void
|
|
15
|
+
onStart?: (engine: RpgClientEngine) => boolean | void | Promise<boolean | void>
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
18
|
* Each frame
|
package/src/components/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<Container sound={backgroundMusic} >
|
|
2
2
|
<Container sound={backgroundAmbientSound} />
|
|
3
3
|
|
|
4
|
-
<sceneComponent() data={map.@data} />
|
|
4
|
+
<sceneComponent() data={map.@data} params={map.@params} />
|
|
5
5
|
|
|
6
6
|
@for (effect of effects) {
|
|
7
7
|
<Container>
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
const effects = engine.effects
|
|
22
22
|
const map = engine.sceneMap.data
|
|
23
23
|
const sceneComponent = computed(() => map()?.component)
|
|
24
|
+
const sceneParams = map()?.params
|
|
24
25
|
const mapParams = map().params
|
|
25
26
|
const animations = engine.sceneMap.animations
|
|
26
27
|
const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
|
package/src/core/setup.ts
CHANGED
package/src/services/loadMap.ts
CHANGED
|
@@ -3,12 +3,45 @@ import { UpdateMapToken, UpdateMapService } from "@rpgjs/common";
|
|
|
3
3
|
|
|
4
4
|
export const LoadMapToken = 'LoadMapToken'
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Represents the structure of map data that should be returned by the load map callback.
|
|
8
|
+
* This interface defines all the properties that can be provided when loading a custom map.
|
|
9
|
+
*
|
|
10
|
+
* @interface MapData
|
|
11
|
+
*/
|
|
12
|
+
type MapData = {
|
|
13
|
+
/** Raw map data that will be passed to the map component */
|
|
14
|
+
data: any;
|
|
15
|
+
/** CanvasEngine component that will render the map */
|
|
16
|
+
component: any;
|
|
17
|
+
/** Optional map width in pixels, used for viewport calculations */
|
|
18
|
+
width?: number;
|
|
19
|
+
/** Optional map height in pixels, used for viewport calculations */
|
|
20
|
+
height?: number;
|
|
21
|
+
/** Optional map events data (NPCs, interactive objects, etc.) */
|
|
22
|
+
events?: any;
|
|
23
|
+
/** Optional map identifier, defaults to the mapId parameter if not provided */
|
|
24
|
+
id?: string;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Callback function type for loading map data.
|
|
29
|
+
* This function receives a map ID and should return either a MapData object directly
|
|
30
|
+
* or a Promise that resolves to a MapData object.
|
|
31
|
+
*
|
|
32
|
+
* @callback LoadMapOptions
|
|
33
|
+
* @param {string} mapId - The identifier of the map to load
|
|
34
|
+
* @returns {Promise<MapData> | MapData} The map data object or a promise resolving to it
|
|
35
|
+
*/
|
|
36
|
+
export type LoadMapOptions = (mapId: string) => Promise<MapData> | MapData
|
|
7
37
|
|
|
8
38
|
export class LoadMapService {
|
|
9
39
|
private updateMapService: UpdateMapService;
|
|
10
40
|
|
|
11
41
|
constructor(private context: Context, private options: LoadMapOptions) {
|
|
42
|
+
if (context['side'] === 'server') {
|
|
43
|
+
return
|
|
44
|
+
}
|
|
12
45
|
this.updateMapService = inject(context, UpdateMapToken);
|
|
13
46
|
}
|
|
14
47
|
|
|
@@ -19,11 +52,107 @@ export class LoadMapService {
|
|
|
19
52
|
}
|
|
20
53
|
}
|
|
21
54
|
|
|
55
|
+
/**
|
|
56
|
+
* Creates a dependency injection configuration for custom map loading on the client side.
|
|
57
|
+
*
|
|
58
|
+
* This function allows you to customize how maps are loaded and displayed by providing
|
|
59
|
+
* a callback that defines custom map data and rendering components. It's designed to work
|
|
60
|
+
* with the RPG-JS dependency injection system and enables integration of custom map formats
|
|
61
|
+
* like Tiled TMX files or any other map data structure.
|
|
62
|
+
*
|
|
63
|
+
* The function sets up the necessary service providers for map loading, including:
|
|
64
|
+
* - UpdateMapToken: Handles map updates in the client context
|
|
65
|
+
* - LoadMapToken: Provides the LoadMapService with your custom loading logic
|
|
66
|
+
*
|
|
67
|
+
* **Design Concept:**
|
|
68
|
+
* The function follows the provider pattern, creating a modular way to inject custom
|
|
69
|
+
* map loading behavior into the RPG-JS client engine. It separates the concern of
|
|
70
|
+
* map data fetching from map rendering, allowing developers to focus on their specific
|
|
71
|
+
* map format while leveraging the engine's rendering capabilities.
|
|
72
|
+
*
|
|
73
|
+
* @param {LoadMapOptions} options - Callback function that handles map loading logic
|
|
74
|
+
* @returns {Array<Object>} Array of dependency injection provider configurations
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```typescript
|
|
78
|
+
* import { provideLoadMap } from '@rpgjs/client'
|
|
79
|
+
* import { createModule } from '@rpgjs/common'
|
|
80
|
+
* import MyTiledMapComponent from './MyTiledMapComponent.ce'
|
|
81
|
+
*
|
|
82
|
+
* // Basic usage with JSON map data
|
|
83
|
+
* export function provideCustomMap() {
|
|
84
|
+
* return createModule("CustomMap", [
|
|
85
|
+
* provideLoadMap(async (mapId) => {
|
|
86
|
+
* const response = await fetch(`/maps/${mapId}.json`)
|
|
87
|
+
* const mapData = await response.json()
|
|
88
|
+
*
|
|
89
|
+
* return {
|
|
90
|
+
* data: mapData,
|
|
91
|
+
* component: MyTiledMapComponent,
|
|
92
|
+
* width: mapData.width,
|
|
93
|
+
* height: mapData.height,
|
|
94
|
+
* events: mapData.events
|
|
95
|
+
* }
|
|
96
|
+
* })
|
|
97
|
+
* ])
|
|
98
|
+
* }
|
|
99
|
+
*
|
|
100
|
+
* // Advanced usage with Tiled TMX files
|
|
101
|
+
* export function provideTiledMap() {
|
|
102
|
+
* return createModule("TiledMap", [
|
|
103
|
+
* provideLoadMap(async (mapId) => {
|
|
104
|
+
* // Load TMX file
|
|
105
|
+
* const tmxResponse = await fetch(`/tiled/${mapId}.tmx`)
|
|
106
|
+
* const tmxData = await tmxResponse.text()
|
|
107
|
+
*
|
|
108
|
+
* // Parse TMX data (using a TMX parser)
|
|
109
|
+
* const parsedMap = parseTMX(tmxData)
|
|
110
|
+
*
|
|
111
|
+
* return {
|
|
112
|
+
* data: parsedMap,
|
|
113
|
+
* component: TiledMapRenderer,
|
|
114
|
+
* width: parsedMap.width * parsedMap.tilewidth,
|
|
115
|
+
* height: parsedMap.height * parsedMap.tileheight,
|
|
116
|
+
* events: parsedMap.objectGroups?.find(g => g.name === 'events')?.objects
|
|
117
|
+
* }
|
|
118
|
+
* })
|
|
119
|
+
* ])
|
|
120
|
+
* }
|
|
121
|
+
*
|
|
122
|
+
* // Synchronous usage for static maps
|
|
123
|
+
* export function provideStaticMap() {
|
|
124
|
+
* return createModule("StaticMap", [
|
|
125
|
+
* provideLoadMap((mapId) => {
|
|
126
|
+
* const staticMaps = {
|
|
127
|
+
* 'town': { tiles: [...], npcs: [...] },
|
|
128
|
+
* 'dungeon': { tiles: [...], monsters: [...] }
|
|
129
|
+
* }
|
|
130
|
+
*
|
|
131
|
+
* return {
|
|
132
|
+
* data: staticMaps[mapId],
|
|
133
|
+
* component: StaticMapComponent,
|
|
134
|
+
* width: 800,
|
|
135
|
+
* height: 600
|
|
136
|
+
* }
|
|
137
|
+
* })
|
|
138
|
+
* ])
|
|
139
|
+
* }
|
|
140
|
+
* ```
|
|
141
|
+
*
|
|
142
|
+
* @since 4.0.0
|
|
143
|
+
* @see {@link LoadMapOptions} for callback function signature
|
|
144
|
+
* @see {@link MapData} for return data structure
|
|
145
|
+
*/
|
|
22
146
|
export function provideLoadMap(options: LoadMapOptions) {
|
|
23
147
|
return [
|
|
24
148
|
{
|
|
25
149
|
provide: UpdateMapToken,
|
|
26
|
-
useFactory: (context: Context) =>
|
|
150
|
+
useFactory: (context: Context) => {
|
|
151
|
+
if (context['side'] === 'client') {
|
|
152
|
+
console.warn('UpdateMapToken is not overridden')
|
|
153
|
+
}
|
|
154
|
+
return
|
|
155
|
+
},
|
|
27
156
|
},
|
|
28
157
|
{
|
|
29
158
|
provide: LoadMapToken,
|
package/src/services/mmorpg.ts
CHANGED
|
@@ -6,23 +6,28 @@ import { AbstractWebsocket, WebSocketToken } from "./AbstractSocket";
|
|
|
6
6
|
import { UpdateMapService, UpdateMapToken } from "@rpgjs/common";
|
|
7
7
|
|
|
8
8
|
interface MmorpgOptions {
|
|
9
|
-
host
|
|
9
|
+
host?: string;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
class BridgeWebsocket extends AbstractWebsocket {
|
|
13
13
|
private socket: any;
|
|
14
14
|
|
|
15
|
-
constructor(protected context: Context, private options: MmorpgOptions) {
|
|
15
|
+
constructor(protected context: Context, private options: MmorpgOptions = {}) {
|
|
16
16
|
super(context);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
async connection() {
|
|
19
|
+
async connection(listeners?: (data: any) => void) {
|
|
20
20
|
// tmp
|
|
21
21
|
class Room {
|
|
22
22
|
|
|
23
23
|
}
|
|
24
24
|
const instance = new Room()
|
|
25
|
-
this.socket = await connectionRoom(
|
|
25
|
+
this.socket = await connectionRoom({
|
|
26
|
+
host: this.options.host || window.location.host,
|
|
27
|
+
room: "lobby-1",
|
|
28
|
+
}, instance)
|
|
29
|
+
|
|
30
|
+
listeners?.(this.socket)
|
|
26
31
|
}
|
|
27
32
|
|
|
28
33
|
on(key: string, callback: (data: any) => void) {
|
|
@@ -36,6 +41,17 @@ class BridgeWebsocket extends AbstractWebsocket {
|
|
|
36
41
|
emit(event: string, data: any) {
|
|
37
42
|
this.socket.emit(event, data);
|
|
38
43
|
}
|
|
44
|
+
|
|
45
|
+
updateProperties({ room }: { room: any }) {
|
|
46
|
+
this.socket.conn.updateProperties({
|
|
47
|
+
room: room,
|
|
48
|
+
host: this.options.host
|
|
49
|
+
})
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
async reconnect(listeners?: (data: any) => void) {
|
|
53
|
+
this.socket.conn.reconnect()
|
|
54
|
+
}
|
|
39
55
|
}
|
|
40
56
|
|
|
41
57
|
class UpdateMapStandaloneService extends UpdateMapService {
|