@rpgjs/client 5.0.0-beta.4 → 5.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/character.ce.js +10 -0
  2. package/dist/components/character.ce.js.map +1 -1
  3. package/dist/components/gui/dialogbox/index.ce.js +14 -5
  4. package/dist/components/gui/dialogbox/index.ce.js.map +1 -1
  5. package/package.json +4 -4
  6. package/src/components/character.ce +14 -1
  7. package/src/components/gui/dialogbox/index.ce +15 -6
package/dist/components/character.ce.js CHANGED
@@ -155,6 +155,15 @@ function component($$props) {
155
155
  }
156
156
  };
157
157
  };
158
+ const graphicScale = (graphicObject) => {
159
+ const scale = graphicObject?.scale;
160
+ if (Array.isArray(scale)) return scale;
161
+ if (typeof scale === "number") return [scale, scale];
162
+ if (scale && typeof scale === "object") {
163
+ const x = typeof scale.x === "number" ? scale.x : 1;
164
+ return [x, typeof scale.y === "number" ? scale.y : x];
165
+ }
166
+ };
158
167
  const movementAnimations = ["walk", "stand"];
159
168
  const epsilon = 0;
160
169
  const stateX$ = smoothX.animatedState.observable;
@@ -217,6 +226,7 @@ function component($$props) {
217
226
  }),
218
227
  h(Container, null, loop(graphicsSignals, (graphicObj) => h(Sprite, {
219
228
  sheet: computed(() => sheet(graphicObj)),
229
+ scale: computed(() => graphicScale(graphicObj)),
220
230
  direction,
221
231
  tint,
222
232
  hitbox,
package/dist/components/character.ce.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"character.ce.js","names":[],"sources":["../../src/components/character.ce"],"sourcesContent":["<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy visible>\n @for (compConfig of normalizedComponentsBehind) {\n <Container>\n <compConfig.component object ...compConfig.props />\n </Container>\n } \n <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />\n <Container>\n @for (graphicObj of graphicsSignals) {\n <Sprite \n sheet={sheet(graphicObj)} \n direction \n tint \n hitbox\n flash={flashConfig}\n />\n }\n </Container>\n @for (compConfig of normalizedComponentsInFront) {\n <Container dependencies={compConfig.dependencies}>\n <compConfig.component object ...compConfig.props />\n </Container>\n }\n @for (attachedGui of attachedGuis) {\n @if (shouldDisplayAttachedGui) {\n <Container>\n <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {\n onAttachedGuiFinish(attachedGui, data)\n }} onInteraction={(name, data) => {\n onAttachedGuiInteraction(attachedGui, name, data)\n }} />\n </Container>\n }\n }\n</Container>\n\n<script>\n import { signal, effect, mount, computed, tick, animatedSignal, on } from \"canvasengine\";\n\n import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from \"rxjs\";\n import { Particle } from \"@canvasengine/presets\";\n import { GameEngineToken, ModulesToken } 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 import PlayerComponents from \"./player-components.ce\";\n import { RpgGui } from \"../Gui/Gui\";\n\n const { object, id } = defineProps();\n\n const client = inject(RpgClientEngine);\n const hooks = inject(ModulesToken);\n const guiService = inject(RpgGui);\n\n const spritesheets = client.spritesheets;\n const playerId = client.playerId;\n const componentsBehind = client.spriteComponentsBehind;\n const componentsInFront = client.spriteComponentsInFront;\n const isMe = computed(() => id() === playerId);\n\n /**\n * Normalize a single sprite component configuration\n * \n * Handles both direct component references and configuration objects with optional props and dependencies.\n * Extracts the component reference and creates a computed function that returns the props.\n * \n * ## Design\n * \n * Supports two formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`\n * \n * The normalization process:\n * - Extracts the actual component from either format\n * - Extracts dependencies function if provided\n * - Creates a computed function that returns props (static object or dynamic function result)\n * - Returns a normalized object with `component`, `props`, and `dependencies`\n * \n * @param comp - Component reference or configuration object\n * @returns Normalized component configuration with component, props, and dependencies\n * \n * @example\n * ```ts\n * // Direct component\n * normalizeComponent(ShadowComponent)\n * // => { component: ShadowComponent, props: {}, dependencies: undefined }\n * \n * // With static props\n * normalizeComponent({ component: LightHalo, props: { radius: 30 } })\n * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }\n * \n * // With dynamic props and dependencies\n * normalizeComponent({ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * })\n * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }\n * ```\n */\n const normalizeComponent = (comp) => {\n let componentRef;\n let propsValue;\n let dependenciesFn;\n \n // If it's a direct component reference\n if (typeof comp === 'function' || (comp && typeof comp === 'object' && !comp.component)) {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n // If it's a configuration object with component and props\n else if (comp && typeof comp === 'object' && comp.component) {\n componentRef = comp.component;\n // Support both \"data\" (legacy) and \"props\" (new) for backward compatibility\n propsValue = comp.props !== undefined ? comp.props : comp.data;\n dependenciesFn = comp.dependencies;\n }\n // Fallback: treat as direct component\n else {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n \n // Return props directly (object or function), not as computed\n // The computed will be created in the template when needed\n return {\n component: componentRef,\n props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},\n dependencies: dependenciesFn ? dependenciesFn(object) : []\n };\n };\n\n /**\n * Normalize an array of sprite components\n * \n * Applies normalization to each component in the array using `normalizeComponent`.\n * \n * @param components - Array of component references or configuration objects\n * @returns Array of normalized component configurations\n */\n const normalizeComponents = (components) => {\n return components.map((comp) => normalizeComponent(comp));\n };\n\n\n /**\n * Normalized components to render behind sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * Supports multiple formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...} }`\n * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`\n * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`\n * \n * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).\n * The object is passed to the dependencies function to allow sprite-specific dependency resolution.\n * \n * @example\n * ```ts\n * // Direct component\n * componentsBehind: [ShadowComponent]\n * \n * // With static props\n * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]\n * \n * // With dynamic props and dependencies\n * componentsBehind: [{ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * }]\n * ```\n */\n const normalizedComponentsBehind = computed(() => {\n return normalizeComponents(componentsBehind());\n });\n\n /**\n * Normalized components to render in front of sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * See `normalizedComponentsBehind` for format details.\n * Components with dependencies will only be displayed when all dependencies are resolved.\n */\n const normalizedComponentsInFront = computed(() => {\n return normalizeComponents(componentsInFront());\n });\n \n /**\n * Determine if the camera should follow this sprite\n * \n * The camera follows this sprite if:\n * - It's explicitly set as the camera follow target, OR\n * - It's the current player and no explicit target is set (default behavior)\n */\n const shouldFollowCamera = computed(() => {\n const cameraTargetId = client.cameraFollowTargetId();\n // If a target is explicitly set, only follow if this sprite is the target\n if (cameraTargetId !== null) {\n return id() === cameraTargetId;\n }\n // Otherwise, follow the current player (default behavior)\n return isMe();\n });\n\n /**\n * Get all attached GUI components that should be rendered on sprites\n * These are GUIs with attachToSprite: true\n */\n const attachedGuis = computed(() => {\n return guiService.getAttachedGuis();\n });\n\n /**\n * Check if attached GUIs should be displayed for this sprite\n * This is controlled by showAttachedGui/hideAttachedGui on the server\n */\n const shouldDisplayAttachedGui = computed(() => {\n return guiService.shouldDisplayAttachedGui(id());\n });\n\n const { \n x, \n y, \n tint, \n direction, \n animationName, \n animationCurrentIndex,\n emitParticleTrigger, \n particleName, \n graphics, \n hitbox,\n isConnected,\n graphicsSignals,\n flashTrigger\n } = object;\n\n /**\n * Flash configuration signals for dynamic options\n * These signals are updated when the flash trigger is activated with options\n */\n const flashType = signal<'alpha' | 'tint' | 'both'>('alpha');\n const flashDuration = signal(300);\n const flashCycles = signal(1);\n const flashAlpha = signal(0.3);\n const flashTint = signal(0xffffff);\n\n /**\n * Listen to flash trigger to update configuration dynamically\n * When flash is triggered with options, update the signals\n */\n on(flashTrigger, (data) => {\n if (data && typeof data === 'object') {\n if (data.type !== undefined) flashType.set(data.type);\n if (data.duration !== undefined) flashDuration.set(data.duration);\n if (data.cycles !== undefined) flashCycles.set(data.cycles);\n if (data.alpha !== undefined) flashAlpha.set(data.alpha);\n if (data.tint !== undefined) flashTint.set(data.tint);\n }\n });\n\n /**\n * Flash configuration for the sprite\n * \n * This configuration is used by the flash directive to create visual feedback effects.\n * The flash trigger is exposed through the object, allowing both server events and\n * client-side code to trigger flash animations. Options can be passed dynamically\n * through the trigger, which updates the reactive signals.\n */\n const flashConfig = computed(() => ({\n trigger: flashTrigger,\n type: flashType(),\n duration: flashDuration(),\n cycles: flashCycles(),\n alpha: flashAlpha(),\n tint: flashTint(),\n }));\n\n const particleSettings = client.particleSettings;\n\n const canControls = () => isMe() && object.canMove()\n const keyboardControls = client.globalConfig.keyboardControls;\n\n const visible = computed(() => {\n if (object.isEvent()) {\n return true\n }\n return isConnected()\n });\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 }\n },\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (canControls()) {\n client.processAction({ action: 'escape' })\n }\n },\n },\n gamepad: {\n enabled: true\n }\n });\n\n const smoothX = animatedSignal(x(), {\n duration: isMe() ? 0 : 0\n });\n\n const smoothY = animatedSignal(y(), {\n duration: isMe() ? 0 : 0,\n });\n\n const z = computed(() => {\n return object.y() + object.z()\n });\n\n const realAnimationName = signal(animationName());\n\n const xSubscription = x.observable.subscribe((value) => {\n smoothX.set(value);\n });\n\n const ySubscription = y.observable.subscribe((value) => {\n smoothY.set(value);\n });\n \n const sheet = (graphicObject) => {\n return {\n definition: graphicObject,\n playing: realAnimationName(),\n params: {\n direction: direction()\n },\n onFinish() {\n animationCurrentIndex.update(index => index + 1)\n }\n };\n }\n\n // Combine animation change detection with movement state from smoothX/smoothY\n const movementAnimations = ['walk', 'stand'];\n const epsilon = 0; // movement threshold to consider the easing still running\n\n const stateX$ = smoothX.animatedState.observable;\n const stateY$ = smoothY.animatedState.observable;\n const animationName$ = animationName.observable;\n\n const moving$ = combineLatest([stateX$, stateY$]).pipe(\n map(([sx, sy]) => {\n const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;\n const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;\n return !xFinished || !yFinished; // moving if X or Y is not finished\n }),\n startWith(false)\n );\n\n const animationChange$ = animationName$.pipe(\n startWith(animationName()),\n pairwise(),\n filter(([prev, curr]) => prev !== curr)\n );\n\n const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {\n if (curr == 'stand' && !isMoving) {\n realAnimationName.set(curr);\n }\n else if (curr == 'walk' && isMoving) {\n realAnimationName.set(curr);\n }\n else if (!movementAnimations.includes(curr)) {\n realAnimationName.set(curr);\n }\n if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {\n if (movementAnimations.includes(curr)) {\n if (typeof object.resetAnimationState === 'function') {\n object.resetAnimationState();\n }\n }\n }\n });\n\n /**\n * Cleanup subscriptions and call hooks before sprite destruction.\n *\n * # Design\n * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.\n * - Execute destruction hooks to notify modules and scene map of sprite removal.\n *\n * @example\n * await onBeforeDestroy();\n */\n const onBeforeDestroy = async () => {\n animationMovementSubscription.unsubscribe();\n xSubscription.unsubscribe();\n ySubscription.unsubscribe();\n await lastValueFrom(hooks.callHooks(\"client-sprite-onDestroy\", object)) \n await lastValueFrom(hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, object))\n }\n\n mount((element) => {\n hooks.callHooks(\"client-sprite-onAdd\", object).subscribe()\n hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, object).subscribe()\n if (isMe()) client.setKeyboardControls(element.directives.controls)\n })\n\n /**\n * Handle attached GUI finish event\n * \n * @param gui - The GUI instance\n * @param data - Data passed from the GUI component\n */\n const onAttachedGuiFinish = (gui, data) => {\n guiService.guiClose(gui.name, data);\n };\n\n /**\n * Handle attached GUI interaction event\n * \n * @param gui - The GUI instance\n * @param name - Interaction name\n * @param data - Interaction data\n */\n const onAttachedGuiInteraction = (gui, name, data) => {\n guiService.guiInteraction(gui.name, name, data);\n };\n\n tick(() => {\n hooks.callHooks(\"client-sprite-onUpdate\").subscribe()\n })\n</script>"],"mappings":"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"}
1
+ {"version":3,"file":"character.ce.js","names":[],"sources":["../../src/components/character.ce"],"sourcesContent":["<Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy visible>\n @for (compConfig of normalizedComponentsBehind) {\n <Container>\n <compConfig.component object ...compConfig.props />\n </Container>\n } \n <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />\n <Container>\n @for (graphicObj of graphicsSignals) {\n <Sprite \n sheet={sheet(graphicObj)} \n scale={graphicScale(graphicObj)}\n direction \n tint \n hitbox\n flash={flashConfig}\n />\n }\n </Container>\n @for (compConfig of normalizedComponentsInFront) {\n <Container dependencies={compConfig.dependencies}>\n <compConfig.component object ...compConfig.props />\n </Container>\n }\n @for (attachedGui of attachedGuis) {\n @if (shouldDisplayAttachedGui) {\n <Container>\n <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {\n onAttachedGuiFinish(attachedGui, data)\n }} onInteraction={(name, data) => {\n onAttachedGuiInteraction(attachedGui, name, data)\n }} />\n </Container>\n }\n }\n</Container>\n\n<script>\n import { signal, effect, mount, computed, tick, animatedSignal, on } from \"canvasengine\";\n\n import { lastValueFrom, combineLatest, pairwise, filter, map, startWith } from \"rxjs\";\n import { Particle } from \"@canvasengine/presets\";\n import { GameEngineToken, ModulesToken } 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 import PlayerComponents from \"./player-components.ce\";\n import { RpgGui } from \"../Gui/Gui\";\n\n const { object, id } = defineProps();\n\n const client = inject(RpgClientEngine);\n const hooks = inject(ModulesToken);\n const guiService = inject(RpgGui);\n\n const spritesheets = client.spritesheets;\n const playerId = client.playerId;\n const componentsBehind = client.spriteComponentsBehind;\n const componentsInFront = client.spriteComponentsInFront;\n const isMe = computed(() => id() === playerId);\n\n /**\n * Normalize a single sprite component configuration\n * \n * Handles both direct component references and configuration objects with optional props and dependencies.\n * Extracts the component reference and creates a computed function that returns the props.\n * \n * ## Design\n * \n * Supports two formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...}, dependencies: (object) => [...] }`\n * \n * The normalization process:\n * - Extracts the actual component from either format\n * - Extracts dependencies function if provided\n * - Creates a computed function that returns props (static object or dynamic function result)\n * - Returns a normalized object with `component`, `props`, and `dependencies`\n * \n * @param comp - Component reference or configuration object\n * @returns Normalized component configuration with component, props, and dependencies\n * \n * @example\n * ```ts\n * // Direct component\n * normalizeComponent(ShadowComponent)\n * // => { component: ShadowComponent, props: {}, dependencies: undefined }\n * \n * // With static props\n * normalizeComponent({ component: LightHalo, props: { radius: 30 } })\n * // => { component: LightHalo, props: { radius: 30 }, dependencies: undefined }\n * \n * // With dynamic props and dependencies\n * normalizeComponent({ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * })\n * // => { component: HealthBar, props: {...}, dependencies: (object) => [...] }\n * ```\n */\n const normalizeComponent = (comp) => {\n let componentRef;\n let propsValue;\n let dependenciesFn;\n \n // If it's a direct component reference\n if (typeof comp === 'function' || (comp && typeof comp === 'object' && !comp.component)) {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n // If it's a configuration object with component and props\n else if (comp && typeof comp === 'object' && comp.component) {\n componentRef = comp.component;\n // Support both \"data\" (legacy) and \"props\" (new) for backward compatibility\n propsValue = comp.props !== undefined ? comp.props : comp.data;\n dependenciesFn = comp.dependencies;\n }\n // Fallback: treat as direct component\n else {\n componentRef = comp;\n propsValue = undefined;\n dependenciesFn = undefined;\n }\n \n // Return props directly (object or function), not as computed\n // The computed will be created in the template when needed\n return {\n component: componentRef,\n props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},\n dependencies: dependenciesFn ? dependenciesFn(object) : []\n };\n };\n\n /**\n * Normalize an array of sprite components\n * \n * Applies normalization to each component in the array using `normalizeComponent`.\n * \n * @param components - Array of component references or configuration objects\n * @returns Array of normalized component configurations\n */\n const normalizeComponents = (components) => {\n return components.map((comp) => normalizeComponent(comp));\n };\n\n\n /**\n * Normalized components to render behind sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * Supports multiple formats:\n * 1. Direct component: `ShadowComponent`\n * 2. Configuration object: `{ component: LightHalo, props: {...} }`\n * 3. With dynamic props: `{ component: LightHalo, props: (object) => {...} }`\n * 4. With dependencies: `{ component: HealthBar, dependencies: (object) => [object.hp, object.param.maxHp] }`\n * \n * Components with dependencies will only be displayed when all dependencies are resolved (!= undefined).\n * The object is passed to the dependencies function to allow sprite-specific dependency resolution.\n * \n * @example\n * ```ts\n * // Direct component\n * componentsBehind: [ShadowComponent]\n * \n * // With static props\n * componentsBehind: [{ component: LightHalo, props: { radius: 30 } }]\n * \n * // With dynamic props and dependencies\n * componentsBehind: [{ \n * component: HealthBar, \n * props: (object) => ({ hp: object.hp(), maxHp: object.param.maxHp() }),\n * dependencies: (object) => [object.hp, object.param.maxHp]\n * }]\n * ```\n */\n const normalizedComponentsBehind = computed(() => {\n return normalizeComponents(componentsBehind());\n });\n\n /**\n * Normalized components to render in front of sprites\n * Handles both direct component references and configuration objects with optional props and dependencies\n * \n * See `normalizedComponentsBehind` for format details.\n * Components with dependencies will only be displayed when all dependencies are resolved.\n */\n const normalizedComponentsInFront = computed(() => {\n return normalizeComponents(componentsInFront());\n });\n \n /**\n * Determine if the camera should follow this sprite\n * \n * The camera follows this sprite if:\n * - It's explicitly set as the camera follow target, OR\n * - It's the current player and no explicit target is set (default behavior)\n */\n const shouldFollowCamera = computed(() => {\n const cameraTargetId = client.cameraFollowTargetId();\n // If a target is explicitly set, only follow if this sprite is the target\n if (cameraTargetId !== null) {\n return id() === cameraTargetId;\n }\n // Otherwise, follow the current player (default behavior)\n return isMe();\n });\n\n /**\n * Get all attached GUI components that should be rendered on sprites\n * These are GUIs with attachToSprite: true\n */\n const attachedGuis = computed(() => {\n return guiService.getAttachedGuis();\n });\n\n /**\n * Check if attached GUIs should be displayed for this sprite\n * This is controlled by showAttachedGui/hideAttachedGui on the server\n */\n const shouldDisplayAttachedGui = computed(() => {\n return guiService.shouldDisplayAttachedGui(id());\n });\n\n const { \n x, \n y, \n tint, \n direction, \n animationName, \n animationCurrentIndex,\n emitParticleTrigger, \n particleName, \n graphics, \n hitbox,\n isConnected,\n graphicsSignals,\n flashTrigger\n } = object;\n\n /**\n * Flash configuration signals for dynamic options\n * These signals are updated when the flash trigger is activated with options\n */\n const flashType = signal<'alpha' | 'tint' | 'both'>('alpha');\n const flashDuration = signal(300);\n const flashCycles = signal(1);\n const flashAlpha = signal(0.3);\n const flashTint = signal(0xffffff);\n\n /**\n * Listen to flash trigger to update configuration dynamically\n * When flash is triggered with options, update the signals\n */\n on(flashTrigger, (data) => {\n if (data && typeof data === 'object') {\n if (data.type !== undefined) flashType.set(data.type);\n if (data.duration !== undefined) flashDuration.set(data.duration);\n if (data.cycles !== undefined) flashCycles.set(data.cycles);\n if (data.alpha !== undefined) flashAlpha.set(data.alpha);\n if (data.tint !== undefined) flashTint.set(data.tint);\n }\n });\n\n /**\n * Flash configuration for the sprite\n * \n * This configuration is used by the flash directive to create visual feedback effects.\n * The flash trigger is exposed through the object, allowing both server events and\n * client-side code to trigger flash animations. Options can be passed dynamically\n * through the trigger, which updates the reactive signals.\n */\n const flashConfig = computed(() => ({\n trigger: flashTrigger,\n type: flashType(),\n duration: flashDuration(),\n cycles: flashCycles(),\n alpha: flashAlpha(),\n tint: flashTint(),\n }));\n\n const particleSettings = client.particleSettings;\n\n const canControls = () => isMe() && object.canMove()\n const keyboardControls = client.globalConfig.keyboardControls;\n\n const visible = computed(() => {\n if (object.isEvent()) {\n return true\n }\n return isConnected()\n });\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 }\n },\n },\n escape: {\n bind: keyboardControls.escape,\n keyDown() {\n if (canControls()) {\n client.processAction({ action: 'escape' })\n }\n },\n },\n gamepad: {\n enabled: true\n }\n });\n\n const smoothX = animatedSignal(x(), {\n duration: isMe() ? 0 : 0\n });\n\n const smoothY = animatedSignal(y(), {\n duration: isMe() ? 0 : 0,\n });\n\n const z = computed(() => {\n return object.y() + object.z()\n });\n\n const realAnimationName = signal(animationName());\n\n const xSubscription = x.observable.subscribe((value) => {\n smoothX.set(value);\n });\n\n const ySubscription = y.observable.subscribe((value) => {\n smoothY.set(value);\n });\n \n const sheet = (graphicObject) => {\n return {\n definition: graphicObject,\n playing: realAnimationName(),\n params: {\n direction: direction()\n },\n onFinish() {\n animationCurrentIndex.update(index => index + 1)\n }\n };\n }\n\n const graphicScale = (graphicObject) => {\n const scale = graphicObject?.scale;\n if (Array.isArray(scale)) return scale;\n if (typeof scale === 'number') return [scale, scale];\n if (scale && typeof scale === 'object') {\n const x = typeof scale.x === 'number' ? scale.x : 1;\n const y = typeof scale.y === 'number' ? scale.y : x;\n return [x, y];\n }\n return undefined;\n }\n\n // Combine animation change detection with movement state from smoothX/smoothY\n const movementAnimations = ['walk', 'stand'];\n const epsilon = 0; // movement threshold to consider the easing still running\n\n const stateX$ = smoothX.animatedState.observable;\n const stateY$ = smoothY.animatedState.observable;\n const animationName$ = animationName.observable;\n\n const moving$ = combineLatest([stateX$, stateY$]).pipe(\n map(([sx, sy]) => {\n const xFinished = Math.abs(sx.value.current - sx.value.end) <= epsilon;\n const yFinished = Math.abs(sy.value.current - sy.value.end) <= epsilon;\n return !xFinished || !yFinished; // moving if X or Y is not finished\n }),\n startWith(false)\n );\n\n const animationChange$ = animationName$.pipe(\n startWith(animationName()),\n pairwise(),\n filter(([prev, curr]) => prev !== curr)\n );\n\n const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {\n if (curr == 'stand' && !isMoving) {\n realAnimationName.set(curr);\n }\n else if (curr == 'walk' && isMoving) {\n realAnimationName.set(curr);\n }\n else if (!movementAnimations.includes(curr)) {\n realAnimationName.set(curr);\n }\n if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {\n if (movementAnimations.includes(curr)) {\n if (typeof object.resetAnimationState === 'function') {\n object.resetAnimationState();\n }\n }\n }\n });\n\n /**\n * Cleanup subscriptions and call hooks before sprite destruction.\n *\n * # Design\n * - Prevent memory leaks by unsubscribing from all local subscriptions created in this component.\n * - Execute destruction hooks to notify modules and scene map of sprite removal.\n *\n * @example\n * await onBeforeDestroy();\n */\n const onBeforeDestroy = async () => {\n animationMovementSubscription.unsubscribe();\n xSubscription.unsubscribe();\n ySubscription.unsubscribe();\n await lastValueFrom(hooks.callHooks(\"client-sprite-onDestroy\", object)) \n await lastValueFrom(hooks.callHooks(\"client-sceneMap-onRemoveSprite\", client.sceneMap, object))\n }\n\n mount((element) => {\n hooks.callHooks(\"client-sprite-onAdd\", object).subscribe()\n hooks.callHooks(\"client-sceneMap-onAddSprite\", client.sceneMap, object).subscribe()\n if (isMe()) client.setKeyboardControls(element.directives.controls)\n })\n\n /**\n * Handle attached GUI finish event\n * \n * @param gui - The GUI instance\n * @param data - Data passed from the GUI component\n */\n const onAttachedGuiFinish = (gui, data) => {\n guiService.guiClose(gui.name, data);\n };\n\n /**\n * Handle attached GUI interaction event\n * \n * @param gui - The GUI instance\n * @param name - Interaction name\n * @param data - Interaction data\n */\n const onAttachedGuiInteraction = (gui, name, data) => {\n guiService.guiInteraction(gui.name, name, data);\n };\n\n tick(() => {\n hooks.callHooks(\"client-sprite-onUpdate\").subscribe()\n })\n</script>\n"],"mappings":"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"}
package/dist/components/gui/dialogbox/index.ce.js CHANGED
@@ -21,7 +21,11 @@ function component($$props) {
21
21
  });
22
22
  const dialogPosition = computed(() => resolveProp(position) || "bottom");
23
23
  const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
24
- const hasFace = computed(() => !!resolveProp(face));
24
+ const dialogFace = computed(() => resolveProp(face));
25
+ const hasFace = computed(() => {
26
+ const value = dialogFace();
27
+ return !!(value && value.id);
28
+ });
25
29
  const displayMessage = signal("");
26
30
  const fullMessage = signal("");
27
31
  const isTyping = signal(false);
@@ -116,10 +120,10 @@ function component($$props) {
116
120
  _onFinish();
117
121
  }
118
122
  } });
119
- const faceSheet = (graphicId, animationName) => {
123
+ const faceSheet = (faceValue) => {
120
124
  return {
121
- definition: engine.getSpriteSheet(graphicId),
122
- playing: animationName
125
+ definition: engine.getSpriteSheet(faceValue.id),
126
+ playing: faceValue.expression || "default"
123
127
  };
124
128
  };
125
129
  mount((element) => {
@@ -177,7 +181,12 @@ function component($$props) {
177
181
  ]), cond(hasFace(), () => h(DOMElement, {
178
182
  element: "div",
179
183
  attrs: { class: "rpg-ui-dialog-face" }
180
- }, h(DOMSprite, { sheet: computed(() => faceSheet(face.id, face.expression)) })))]), cond(showIndicator, () => h(DOMElement, {
184
+ }, h(DOMSprite, {
185
+ sheet: computed(() => faceSheet(dialogFace())),
186
+ width: "100%",
187
+ height: "100%",
188
+ objectFit: "contain"
189
+ })))]), cond(showIndicator, () => h(DOMElement, {
181
190
  element: "div",
182
191
  attrs: { class: "rpg-ui-dialog-indicator" }
183
192
  }))])));
package/dist/components/gui/dialogbox/index.ce.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n <div\n class=\"rpg-ui-dialog-container\"\n data-position={dialogPosition()}\n data-full-width={isFullWidth() ? \"true\" : \"false\"}\n data-has-face={hasFace() ? \"true\" : \"false\"}\n >\n <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n <div class=\"rpg-ui-dialog-body\">\n <div>\n @if (speakerName()) {\n <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n }\n <div class=\"rpg-ui-dialog-content\">\n {displayMessage()}\n </div>\n @if (hasChoices()) {\n <Navigation tabindex={selectedItem} controls={controls}>\n <div class=\"rpg-ui-dialog-choices\">\n @for ((choice,index) of choices) {\n <div\n class=\"rpg-ui-dialog-choice\"\n class={{active: selectedItem() === index}}\n tabindex={index}\n data-choice-index={index}\n click={selectChoice(index)}\n >{{ choice.text }}</div>\n }\n </div>\n </Navigation>\n }\n </div>\n @if (hasFace()) {\n <div class=\"rpg-ui-dialog-face\">\n <DOMSprite sheet={faceSheet(face.id, face.expression)} />\n </div>\n }\n </div>\n @if (showIndicator) {\n <div class=\"rpg-ui-dialog-indicator\"></div>\n }\n </div>\n </div>\n</DOMContainer>\n \n<script>\n import { effect, signal, computed, createTabindexNavigator, mount } 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 currentPlayer = engine.scene.currentPlayer\n const keyboardControls = engine.globalConfig.keyboardControls;\n\n engine.stopProcessingInput = true;\n\n const selectedItem = signal(0)\n let isDestroyed = false;\n\n const {\n data,\n onFinish,\n onInteraction\n } = defineProps();\n\n const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();\n const fullWidth = computed(() => data().fullWidth || false);\n\n const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n\n const speakerName = computed(() => {\n const value = resolveProp(speaker);\n return value ? String(value) : \"\";\n });\n\n const dialogPosition = computed(() => resolveProp(position) || \"bottom\");\n const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n const hasFace = computed(() => !!resolveProp(face));\n\n const displayMessage = signal(\"\");\n const fullMessage = signal(\"\");\n const isTyping = signal(false);\n let typewriterTimer = null;\n let rootElement = null;\n\n mount((element) => {\n rootElement = element;\n });\n\n const startTypewriter = (text) => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n displayMessage.set(\"\");\n if (!text) return;\n let index = 0;\n isTyping.set(true);\n typewriterTimer = setInterval(() => {\n index += 1;\n displayMessage.set(text.slice(0, index));\n if (index >= text.length) {\n clearInterval(typewriterTimer);\n typewriterTimer = null;\n isTyping.set(false);\n }\n }, 20);\n };\n\n const finishTyping = () => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n typewriterTimer = null;\n displayMessage.set(fullMessage());\n isTyping.set(false);\n };\n\n effect(() => {\n const text = resolveProp(message) || \"\";\n fullMessage.set(text);\n const useTypewriter = resolveProp(typewriterEffect) !== false;\n if (!useTypewriter) {\n finishTyping();\n return;\n }\n startTypewriter(text);\n });\n\n\n const hasChoices = computed(() => choices.length > 0);\n const showIndicator = computed(() => !hasChoices() && !isTyping());\n const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');\n\n function selectChoice(index) {\n return function() {\n selectedItem.set(index);\n onSelect(index);\n }\n }\n\n function _onFinish(value) {\n if (onFinish) onFinish(value);\n }\n\n const onSelect = (index) => {\n _onFinish(index);\n };\n\n const controls = signal({\n up: {\n repeat: true,\n bind: keyboardControls.up,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(-1);\n }\n },\n down: {\n repeat: true,\n bind: keyboardControls.down,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(1);\n }\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (!hasChoices()) return;\n onSelect(selectedItem());\n }\n },\n gamepad: {\n enabled: true\n }\n });\n \n const dialogControls = signal({\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (hasChoices()) return;\n _onFinish();\n }\n },\n })\n\n const faceSheet = (graphicId, animationName) => {\n return {\n definition: engine.getSpriteSheet(graphicId),\n playing: animationName,\n };\n }\n\n mount((element) => {\n return () => {\n isDestroyed = true;\n // Wait destroy is finished before start processing input\n delay(() => {\n engine.stopProcessingInput = false;\n })\n }\n })\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n <div\n class=\"rpg-ui-dialog-container\"\n data-position={dialogPosition()}\n data-full-width={isFullWidth() ? \"true\" : \"false\"}\n data-has-face={hasFace() ? \"true\" : \"false\"}\n >\n <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n <div class=\"rpg-ui-dialog-body\">\n <div>\n @if (speakerName()) {\n <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n }\n <div class=\"rpg-ui-dialog-content\">\n {displayMessage()}\n </div>\n @if (hasChoices()) {\n <Navigation tabindex={selectedItem} controls={controls}>\n <div class=\"rpg-ui-dialog-choices\">\n @for ((choice,index) of choices) {\n <div\n class=\"rpg-ui-dialog-choice\"\n class={{active: selectedItem() === index}}\n tabindex={index}\n data-choice-index={index}\n click={selectChoice(index)}\n >{{ choice.text }}</div>\n }\n </div>\n </Navigation>\n }\n </div>\n @if (hasFace()) {\n <div class=\"rpg-ui-dialog-face\">\n <DOMSprite\n sheet={faceSheet(dialogFace())}\n width=\"100%\"\n height=\"100%\"\n objectFit=\"contain\"\n />\n </div>\n }\n </div>\n @if (showIndicator) {\n <div class=\"rpg-ui-dialog-indicator\"></div>\n }\n </div>\n </div>\n</DOMContainer>\n \n<script>\n import { effect, signal, computed, createTabindexNavigator, mount } 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 currentPlayer = engine.scene.currentPlayer\n const keyboardControls = engine.globalConfig.keyboardControls;\n\n engine.stopProcessingInput = true;\n\n const selectedItem = signal(0)\n let isDestroyed = false;\n\n const {\n data,\n onFinish,\n onInteraction\n } = defineProps();\n\n const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();\n const fullWidth = computed(() => data().fullWidth || false);\n\n const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n\n const speakerName = computed(() => {\n const value = resolveProp(speaker);\n return value ? String(value) : \"\";\n });\n\n const dialogPosition = computed(() => resolveProp(position) || \"bottom\");\n const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n const dialogFace = computed(() => resolveProp(face));\n const hasFace = computed(() => {\n const value = dialogFace();\n return !!(value && value.id);\n });\n\n const displayMessage = signal(\"\");\n const fullMessage = signal(\"\");\n const isTyping = signal(false);\n let typewriterTimer = null;\n let rootElement = null;\n\n mount((element) => {\n rootElement = element;\n });\n\n const startTypewriter = (text) => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n displayMessage.set(\"\");\n if (!text) return;\n let index = 0;\n isTyping.set(true);\n typewriterTimer = setInterval(() => {\n index += 1;\n displayMessage.set(text.slice(0, index));\n if (index >= text.length) {\n clearInterval(typewriterTimer);\n typewriterTimer = null;\n isTyping.set(false);\n }\n }, 20);\n };\n\n const finishTyping = () => {\n if (typewriterTimer) clearInterval(typewriterTimer);\n typewriterTimer = null;\n displayMessage.set(fullMessage());\n isTyping.set(false);\n };\n\n effect(() => {\n const text = resolveProp(message) || \"\";\n fullMessage.set(text);\n const useTypewriter = resolveProp(typewriterEffect) !== false;\n if (!useTypewriter) {\n finishTyping();\n return;\n }\n startTypewriter(text);\n });\n\n\n const hasChoices = computed(() => choices.length > 0);\n const showIndicator = computed(() => !hasChoices() && !isTyping());\n const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');\n\n function selectChoice(index) {\n return function() {\n selectedItem.set(index);\n onSelect(index);\n }\n }\n\n function _onFinish(value) {\n if (onFinish) onFinish(value);\n }\n\n const onSelect = (index) => {\n _onFinish(index);\n };\n\n const controls = signal({\n up: {\n repeat: true,\n bind: keyboardControls.up,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(-1);\n }\n },\n down: {\n repeat: true,\n bind: keyboardControls.down,\n throttle: 150,\n keyDown() {\n if (!hasChoices()) return;\n nav.next(1);\n }\n },\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (!hasChoices()) return;\n onSelect(selectedItem());\n }\n },\n gamepad: {\n enabled: true\n }\n });\n \n const dialogControls = signal({\n action: {\n bind: keyboardControls.action,\n keyDown() {\n if (isTyping()) {\n finishTyping();\n return;\n }\n if (hasChoices()) return;\n _onFinish();\n }\n },\n })\n\n const faceSheet = (faceValue) => {\n return {\n definition: engine.getSpriteSheet(faceValue.id),\n playing: faceValue.expression || \"default\",\n };\n }\n\n mount((element) => {\n return () => {\n isDestroyed = true;\n // Wait destroy is finished before start processing input\n delay(() => {\n engine.stopProcessingInput = false;\n })\n }\n })\n</script>\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rpgjs/client",
3
- "version": "5.0.0-beta.4",
3
+ "version": "5.0.0-beta.5",
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,9 +22,9 @@
22
22
  "pixi.js": "^8.9.2"
23
23
  },
24
24
  "dependencies": {
25
- "@rpgjs/common": "5.0.0-beta.4",
26
- "@rpgjs/server": "5.0.0-beta.4",
27
- "@rpgjs/ui-css": "5.0.0-beta.4",
25
+ "@rpgjs/common": "5.0.0-beta.5",
26
+ "@rpgjs/server": "5.0.0-beta.5",
27
+ "@rpgjs/ui-css": "5.0.0-beta.5",
28
28
  "@signe/di": "^2.9.0",
29
29
  "@signe/room": "^2.9.0",
30
30
  "@signe/sync": "^2.9.0",
package/src/components/character.ce CHANGED
@@ -9,6 +9,7 @@
9
9
  @for (graphicObj of graphicsSignals) {
10
10
  <Sprite
11
11
  sheet={sheet(graphicObj)}
12
+ scale={graphicScale(graphicObj)}
12
13
  direction
13
14
  tint
14
15
  hitbox
@@ -377,6 +378,18 @@
377
378
  };
378
379
  }
379
380
 
381
+ const graphicScale = (graphicObject) => {
382
+ const scale = graphicObject?.scale;
383
+ if (Array.isArray(scale)) return scale;
384
+ if (typeof scale === 'number') return [scale, scale];
385
+ if (scale && typeof scale === 'object') {
386
+ const x = typeof scale.x === 'number' ? scale.x : 1;
387
+ const y = typeof scale.y === 'number' ? scale.y : x;
388
+ return [x, y];
389
+ }
390
+ return undefined;
391
+ }
392
+
380
393
  // Combine animation change detection with movement state from smoothX/smoothY
381
394
  const movementAnimations = ['walk', 'stand'];
382
395
  const epsilon = 0; // movement threshold to consider the easing still running
@@ -467,4 +480,4 @@
467
480
  tick(() => {
468
481
  hooks.callHooks("client-sprite-onUpdate").subscribe()
469
482
  })
470
- </script>
483
+ </script>
package/src/components/gui/dialogbox/index.ce CHANGED
@@ -29,10 +29,15 @@
29
29
  </div>
30
30
  </Navigation>
31
31
  }
32
- </div>
32
+ </div>
33
33
  @if (hasFace()) {
34
34
  <div class="rpg-ui-dialog-face">
35
- <DOMSprite sheet={faceSheet(face.id, face.expression)} />
35
+ <DOMSprite
36
+ sheet={faceSheet(dialogFace())}
37
+ width="100%"
38
+ height="100%"
39
+ objectFit="contain"
40
+ />
36
41
  </div>
37
42
  }
38
43
  </div>
@@ -76,7 +81,11 @@
76
81
 
77
82
  const dialogPosition = computed(() => resolveProp(position) || "bottom");
78
83
  const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
79
- const hasFace = computed(() => !!resolveProp(face));
84
+ const dialogFace = computed(() => resolveProp(face));
85
+ const hasFace = computed(() => {
86
+ const value = dialogFace();
87
+ return !!(value && value.id);
88
+ });
80
89
 
81
90
  const displayMessage = signal("");
82
91
  const fullMessage = signal("");
@@ -192,10 +201,10 @@
192
201
  },
193
202
  })
194
203
 
195
- const faceSheet = (graphicId, animationName) => {
204
+ const faceSheet = (faceValue) => {
196
205
  return {
197
- definition: engine.getSpriteSheet(graphicId),
198
- playing: animationName,
206
+ definition: engine.getSpriteSheet(faceValue.id),
207
+ playing: faceValue.expression || "default",
199
208
  };
200
209
  }
201
210