@rpgjs/client 5.0.0-beta.10 → 5.0.0-beta.12

package/src/components/animations/fx.ce

@@ -0,0 +1,101 @@
+<Fx
+  name={name}
+  preset={preset}
+  trigger={trigger}
+  autostart={autostart}
+  loop={loop}
+  enabled={enabled}
+  x={x}
+  y={y}
+  rotation={rotation}
+  scale={scale}
+  alpha={alpha}
+  timeScale={timeScale}
+  maxParticles={maxParticles}
+  preload={preload}
+  missingTexture={missingTexture}
+  zIndex={zIndex}
+  onStart={onStart}
+  onComplete={finish}
+  onParticleSpawn={onParticleSpawn}
+/>
+
+<script>
+  import { tick } from "canvasengine";
+  import { Fx } from "@canvasengine/presets";
+
+  const {
+    name,
+    preset,
+    trigger,
+    onFinish,
+    onStart,
+    onComplete,
+    onParticleSpawn,
+    displayDuration,
+    duration,
+    autostart,
+    loop,
+    enabled,
+    x,
+    y,
+    rotation,
+    scale,
+    alpha,
+    timeScale,
+    maxParticles,
+    preload,
+    missingTexture,
+    zIndex,
+  } = defineProps({
+    autostart: {
+      default: true,
+    },
+    loop: {
+      default: false,
+    },
+    enabled: {
+      default: true,
+    },
+    rotation: {
+      default: 0,
+    },
+    scale: {
+      default: 1,
+    },
+    alpha: {
+      default: 1,
+    },
+    timeScale: {
+      default: 1,
+    },
+    maxParticles: {
+      default: 600,
+    },
+    preload: {
+      default: true,
+    },
+    missingTexture: {
+      default: "shape",
+    },
+  });
+
+  let elapsedTime = 0;
+  let finished = false;
+
+  function finish(instance) {
+    if (finished) return;
+    finished = true;
+    onComplete?.(instance);
+    onFinish?.(instance);
+  }
+
+  tick(({ deltaTime }) => {
+    const maxDuration = displayDuration?.() ?? (loop() ? duration?.() : undefined);
+    if (!maxDuration || finished) return;
+    elapsedTime += deltaTime;
+    if (elapsedTime >= maxDuration) {
+      finish();
+    }
+  });
+</script>

package/src/components/animations/index.ts

@@ -1,7 +1,9 @@
 import Hit from "./hit.ce";
 import Animation from "./animation.ce";
+import Fx from "./fx.ce";
 
 export const PrebuiltComponentAnimations = {
     Hit,
-    Animation
-}
+    Animation,
+    Fx
+}

package/src/components/character.ce

@@ -1,14 +1,14 @@
 <Container x={smoothX} y={smoothY} zIndex={z} viewportFollow={shouldFollowCamera} controls onBeforeDestroy  visible>
   @for (compConfig of normalizedComponentsBehind) {
     <Container>
-      <compConfig.component object ...compConfig.props />
+      <compConfig.component object={sprite} ...compConfig.props />
     </Container>
   } 
-  <PlayerComponents object position="bottom" graphicBounds />
-  <PlayerComponents object position="left" graphicBounds />
+  <PlayerComponents object={sprite} position="bottom" graphicBounds />
+  <PlayerComponents object={sprite} position="left" graphicBounds />
   <Particle emit={emitParticleTrigger} settings={particleSettings} zIndex={1000} name={particleName} />
   <Container>
-    @for (graphicObj of graphicsSignals) {
+    @for (graphicObj of renderedGraphics) {
       <Container scale={graphicScale(graphicObj)}>
         <Sprite 
           sheet={sheet(graphicObj)} 
@@ -20,19 +20,24 @@
         />
       </Container>
     }
+    @for (eventComponent of resolvedEventComponents) {
+      <Container dependencies={eventComponent.dependencies}>
+        <eventComponent.component ...eventComponent.props />
+      </Container>
+    }
   </Container>
-  <PlayerComponents object position="center" graphicBounds />
-  <PlayerComponents object position="right" graphicBounds />
-  <PlayerComponents object position="top" graphicBounds />
+  <PlayerComponents object={sprite} position="center" graphicBounds />
+  <PlayerComponents object={sprite} position="right" graphicBounds />
+  <PlayerComponents object={sprite} position="top" graphicBounds />
   @for (compConfig of normalizedComponentsInFront) {
     <Container dependencies={compConfig.dependencies}>
-      <compConfig.component object ...compConfig.props />
+      <compConfig.component object={sprite} ...compConfig.props />
     </Container>
   }
   @for (attachedGui of attachedGuis) {
     @if (shouldDisplayAttachedGui) {
       <Container>
-        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={object} onFinish={(data) => {
+        <attachedGui.component ...attachedGui.data() dependencies={attachedGui.dependencies} object={sprite} onFinish={(data) => {
           onAttachedGuiFinish(attachedGui, data)
         }} onInteraction={(name, data) => {
           onAttachedGuiInteraction(attachedGui, name, data)
@@ -52,12 +57,20 @@
   import { RpgClientEngine } from "../RpgClientEngine";
   import { inject } from "../core/inject";  
   import { Direction, Animation } from "@rpgjs/common";
+  import { normalizeEventComponent } from "../Game/EventComponentResolver";
   import Hit from "./effects/hit.ce";
   import PlayerComponents from "./player-components.ce";
   import { RpgGui } from "../Gui/Gui";
   import { getCanMoveValue } from "../utils/readPropValue";
+  import {
+    getKeyboardControlBind,
+    keyboardEventMatchesBind,
+    resolveKeyboardActionInput,
+    resolveKeyboardDirectionInput,
+  } from "../services/actionInput";
 
   const { object, id } = defineProps();
+  const sprite = object();
 
   const client = inject(RpgClientEngine);
   const hooks = inject(ModulesToken);
@@ -71,9 +84,9 @@
     const playerId = client.playerIdSignal();
     const currentPlayer = playerId ? client.sceneMap?.players?.()?.[playerId] : undefined;
     return readProp(id) === playerId
-      || readProp(object?.id) === playerId
-      || object === currentPlayer
-      || object === client.sceneMap?.getCurrentPlayer?.();
+      || readProp(sprite?.id) === playerId
+      || sprite === currentPlayer
+      || sprite === client.sceneMap?.getCurrentPlayer?.();
   };
   const isMe = computed(isCurrentPlayer);
   const shadowsEnabled = computed(() => {
@@ -150,8 +163,8 @@
     // The computed will be created in the template when needed
     return {
       component: componentRef,
-      props: typeof propsValue === 'function' ? propsValue(object) : propsValue || {},
-      dependencies: dependenciesFn ? dependenciesFn(object) : []
+      props: typeof propsValue === 'function' ? propsValue(sprite) : propsValue || {},
+      dependencies: dependenciesFn ? dependenciesFn(sprite) : []
     };
   };
 
@@ -211,6 +224,18 @@
   const normalizedComponentsInFront = computed(() => {
     return normalizeComponents(componentsInFront());
   });
+
+  const isEventSprite = () => {
+    return typeof sprite?.isEvent === 'function'
+      ? sprite.isEvent()
+      : sprite?._type === 'event';
+  };
+
+  const resolvedEventComponents = computed(() => {
+    if (!isEventSprite()) return [];
+    const eventComponent = normalizeEventComponent(client.resolveEventComponent(sprite), sprite);
+    return eventComponent ? [eventComponent] : [];
+  });
   
   /**
    * Determine if the camera should follow this sprite
@@ -259,7 +284,13 @@
     isConnected,
     graphicsSignals,
     flashTrigger
-  } = object;
+  } = sprite;
+
+  const renderedGraphics = computed(() => {
+    const eventComponent = resolvedEventComponents()[0];
+    if (eventComponent && !eventComponent.renderGraphic) return [];
+    return graphicsSignals();
+  });
 
   /**
    * Flash configuration signals for dynamic options
@@ -304,11 +335,92 @@
 
   const particleSettings = client.particleSettings;
 
-  const canControls = () => isMe() && getCanMoveValue(object)
+  const canControls = () => isMe() && getCanMoveValue(sprite)
   const keyboardControls = client.globalConfig.keyboardControls;
+  const activeDirectionKeys = new Map();
+
+  const resolveHeldDirection = () => {
+    const directions = Array.from(activeDirectionKeys.values());
+    return directions[directions.length - 1];
+  };
+
+  const resolveSpriteDirection = () => {
+    const heldDirection = resolveHeldDirection();
+    if (heldDirection) return heldDirection;
+    if (typeof sprite.getDirection === 'function') return sprite.getDirection();
+    if (typeof sprite.direction === 'function') return sprite.direction();
+    return direction();
+  };
+
+  const withCurrentDirection = (payload) => {
+    if (payload.action !== 'action') return payload;
+    const data = payload.data && typeof payload.data === 'object'
+      ? { ...payload.data }
+      : {};
+    return {
+      ...payload,
+      data: {
+        ...data,
+        direction: data.direction ?? resolveSpriteDirection(),
+      },
+    };
+  };
+
+  const resolveCurrentActionInput = () =>
+    withCurrentDirection(
+      resolveKeyboardActionInput(keyboardControls.action, client, sprite)
+    );
+
+  const playPredictedWalkAnimation = () => {
+    if (sprite.animationFixed) return;
+    if (sprite.animationIsPlaying && sprite.animationIsPlaying()) return;
+    realAnimationName.set('walk');
+  };
+
+  const resumeHeldDirectionWalkAnimation = () => {
+    if (!isCurrentPlayer()) return false;
+    if (activeDirectionKeys.size === 0) return false;
+    if (!canControls()) return false;
+    if (sprite.animationFixed) return false;
+    if (sprite.animationIsPlaying && sprite.animationIsPlaying()) return false;
+    realAnimationName.set('walk');
+    return true;
+  };
+
+  const processMovementInput = (input) => {
+    if (!canControls()) return;
+    client.processInput({ input });
+    playPredictedWalkAnimation();
+  };
+
+  const actionBind = () => getKeyboardControlBind(keyboardControls.action);
+  const keyboardEventId = (event) => `${event.keyCode}:${event.code}:${event.key}`;
+
+  const handleNativeActionWhileMoving = (event) => {
+    const inputDirection = resolveKeyboardDirectionInput(event, keyboardControls);
+    if (inputDirection) {
+      const keyId = keyboardEventId(event);
+      if (event.type === 'keydown') {
+        activeDirectionKeys.delete(keyId);
+        activeDirectionKeys.set(keyId, inputDirection);
+        resumeHeldDirectionWalkAnimation();
+      }
+      else {
+        activeDirectionKeys.delete(keyId);
+      }
+    }
+
+    if (!isCurrentPlayer()) return;
+    if (event.type !== 'keydown' || event.repeat) return;
+    if (activeDirectionKeys.size === 0) return;
+    if (!keyboardEventMatchesBind(event, actionBind())) return;
+    if (!canControls()) return;
+
+    client.processAction(resolveCurrentActionInput());
+  };
 
   const visible = computed(() => {
-    if (object.isEvent()) {
+    if (sprite.isEvent()) {
       return true
     }
     return isConnected()
@@ -319,35 +431,35 @@
       repeat: true,
       bind: keyboardControls.down,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Down })
+        processMovementInput(Direction.Down)
       },
     },
     up: {
       repeat: true,
       bind: keyboardControls.up,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Up })
+        processMovementInput(Direction.Up)
       },
     },
     left: {
       repeat: true,
       bind: keyboardControls.left,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Left })
+        processMovementInput(Direction.Left)
       },
     },
     right: {
       repeat: true,
       bind: keyboardControls.right,
       keyDown() {
-        if (canControls()) client.processInput({ input: Direction.Right })
+        processMovementInput(Direction.Right)
       },
     },
     action: {
-      bind: keyboardControls.action,
+      bind: getKeyboardControlBind(keyboardControls.action),
       keyDown() {
         if (canControls()) {
-          client.processAction({ action: 'action' })
+          client.processAction(resolveCurrentActionInput())
         }
       },
     },
@@ -373,7 +485,7 @@
   });
 
   const z = computed(() => {
-    return object.y() + object.z()
+    return sprite.y() + sprite.z()
   });
 
   const realAnimationName = signal(animationName());
@@ -646,6 +758,10 @@
   const graphicBounds = computed(() => {
     const box = hitbox();
     const fallback = hitboxBounds();
+    const customEventComponent = resolvedEventComponents()[0];
+    if (customEventComponent && !customEventComponent.renderGraphic) {
+      return fallback;
+    }
     const dimensions = imageDimensions();
     const graphics = graphicsSignals();
     let bounds = null;
@@ -734,8 +850,8 @@
   let beforeRemovePromise = null;
   let beforeRemoveTransitionValue = null;
   const resolveRemoveContext = () => {
-    if (!object._removeTransition) return null;
-    const value = object._removeTransition();
+    if (!sprite._removeTransition) return null;
+    const value = sprite._removeTransition();
     if (!value || typeof value !== 'string') return null;
     try {
       const context = JSON.parse(value);
@@ -764,37 +880,57 @@
     }
     beforeRemoveTransitionValue = context.__transitionValue;
     beforeRemovePromise = withTimeout(
-      lastValueFrom(hooks.callHooks("client-sprite-onBeforeRemove", object, context)),
+      lastValueFrom(hooks.callHooks("client-sprite-onBeforeRemove", sprite, context)),
       context.timeoutMs
     );
     return beforeRemovePromise;
   };
 
-  const removeTransitionSubscription = object._removeTransition?.observable?.subscribe(() => {
+  const removeTransitionSubscription = sprite._removeTransition?.observable?.subscribe(() => {
     if (resolveRemoveContext()) {
       runBeforeRemove();
     }
   });
 
   const animationMovementSubscription = combineLatest([animationChange$, moving$]).subscribe(([[prev, curr], isMoving]) => {
+    const isMovementAnimation = movementAnimations.includes(curr);
+    const isTemporaryAnimationPlaying =
+      sprite.animationIsPlaying && sprite.animationIsPlaying();
+
+    if (sprite.animationFixed && isMovementAnimation && isTemporaryAnimationPlaying) {
+      return;
+    }
+
     if (curr == 'stand' && !isMoving) {
-      realAnimationName.set(curr);
+      if (!resumeHeldDirectionWalkAnimation()) {
+        realAnimationName.set(curr);
+      }
     }
     else if (curr == 'walk' && isMoving) {
       realAnimationName.set(curr);
     }
-    else if (!movementAnimations.includes(curr)) {
+    else if (!isMovementAnimation) {
       realAnimationName.set(curr);
     }
-    if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {
-      if (movementAnimations.includes(curr)) {
-        if (typeof object.resetAnimationState === 'function') {
-          object.resetAnimationState();
+    if (!isMoving && isTemporaryAnimationPlaying) {
+      if (isMovementAnimation) {
+        if (typeof sprite.resetAnimationState === 'function') {
+          sprite.resetAnimationState();
         }
       }
     }
   });
 
+  const resumeWalkSubscriptions = [
+    sprite._canMove,
+    sprite._animationFixed,
+    sprite.animationIsPlaying,
+  ]
+    .filter(signal => signal?.observable)
+    .map(signal => signal.observable.subscribe(() => {
+      resumeHeldDirectionWalkAnimation();
+    }));
+
   /**
    * Cleanup subscriptions and call hooks before sprite destruction.
    *
@@ -806,7 +942,7 @@
    * await onBeforeDestroy();
    */
   const waitForTemporaryAnimationEnd = (maxDuration = 1200) => {
-    if (!object.animationIsPlaying || !object.animationIsPlaying()) {
+    if (!sprite.animationIsPlaying || !sprite.animationIsPlaying()) {
       return Promise.resolve();
     }
 
@@ -822,7 +958,7 @@
         resolve();
       };
       timeout = setTimeout(finish, maxDuration);
-      subscription = object.animationIsPlaying.observable.subscribe((isPlaying) => {
+      subscription = sprite.animationIsPlaying.observable.subscribe((isPlaying) => {
         if (!isPlaying) finish();
       });
       if (finished) subscription.unsubscribe();
@@ -832,17 +968,26 @@
   const onBeforeDestroy = async () => {
     await runBeforeRemove();
     await waitForTemporaryAnimationEnd();
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('keydown', handleNativeActionWhileMoving);
+      document.removeEventListener('keyup', handleNativeActionWhileMoving);
+    }
     removeTransitionSubscription?.unsubscribe();
     animationMovementSubscription.unsubscribe();
+    resumeWalkSubscriptions.forEach(subscription => subscription.unsubscribe());
     xSubscription.unsubscribe();
     ySubscription.unsubscribe();
-    await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", object)) 
-    await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, object))
+    await lastValueFrom(hooks.callHooks("client-sprite-onDestroy", sprite)) 
+    await lastValueFrom(hooks.callHooks("client-sceneMap-onRemoveSprite", client.sceneMap, sprite))
   }
 
   mount((element) => {
-    hooks.callHooks("client-sprite-onAdd", object).subscribe()
-    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, object).subscribe()
+    if (typeof document !== 'undefined') {
+      document.addEventListener('keydown', handleNativeActionWhileMoving);
+      document.addEventListener('keyup', handleNativeActionWhileMoving);
+    }
+    hooks.callHooks("client-sprite-onAdd", sprite).subscribe()
+    hooks.callHooks("client-sceneMap-onAddSprite", client.sceneMap, sprite).subscribe()
     effect(() => {
       if (isCurrentPlayer()) {
         client.setKeyboardControls(element.directives.controls)

package/src/components/dynamics/bar.ce

@@ -10,17 +10,18 @@ import { computed } from "canvasengine";
 import { resolveDynamicValue } from "./parse-value";
 
 const { object, current, max, style, text } = defineProps();
+const sprite = object();
 
 const read = (prop, fallback) => prop ? prop() : fallback;
 
 const toNumber = (value, fallback = 0) => {
-  const resolved = resolveDynamicValue(value, object);
+  const resolved = resolveDynamicValue(value, sprite);
   const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);
   return Number.isFinite(num) ? num : fallback;
 };
 
 const toColor = (value, fallback) => {
-  const resolved = resolveDynamicValue(value, object);
+  const resolved = resolveDynamicValue(value, sprite);
   if (typeof resolved === 'number') return resolved;
   if (typeof resolved === 'string' && resolved.startsWith('#')) {
     return parseInt(resolved.slice(1), 16);
@@ -57,7 +58,7 @@ const labelText = computed(() => {
     .replace(/\{\$max\}/g, String(maxValue()))
     .replace(/\{\$percent\}/g, String(Math.round(percent() * 100)));
 
-  return String(resolveDynamicValue(value, object) ?? '');
+  return String(resolveDynamicValue(value, sprite) ?? '');
 });
 const labelSize = computed(() => toNumber(config().fontSize, 10));
 const hasLabel = computed(() => labelText().length > 0);

package/src/components/dynamics/image.ce

@@ -7,10 +7,11 @@ import { inject } from "../../core/inject";
 import { resolveDynamicValue } from "./parse-value";
 
 const { object, value } = defineProps();
+const sprite = object();
 const client = inject(RpgClientEngine);
 
 const sheet = computed(() => {
-  const id = resolveDynamicValue(value?.(), object);
+  const id = resolveDynamicValue(value?.(), sprite);
   if (!id) return null;
   return {
     definition: client.getSpriteSheet(id),

package/src/components/dynamics/shape.ce

@@ -9,17 +9,18 @@ import { getShapeBox, translatePolygonPoints } from "./shape-utils";
 
 const props = defineProps();
 const { object } = props;
+const sprite = object();
 
 const read = (prop, fallback) => prop ? prop() : fallback;
 
 const toNumber = (value, fallback = 0) => {
-  const resolved = resolveDynamicValue(value, object);
+  const resolved = resolveDynamicValue(value, sprite);
   const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);
   return Number.isFinite(num) ? num : fallback;
 };
 
 const toColor = (value, fallback) => {
-  const resolved = resolveDynamicValue(value, object);
+  const resolved = resolveDynamicValue(value, sprite);
   if (typeof resolved === 'number') return resolved;
   if (typeof resolved === 'string' && resolved.startsWith('#')) {
     return parseInt(resolved.slice(1), 16);

package/src/components/dynamics/text.ce

@@ -5,11 +5,12 @@ import { computed } from "canvasengine";
 import { resolveDynamicValue } from "./parse-value";
 
 const { object, value, style } = defineProps();
+const sprite = object();
 
 const read = (prop, fallback) => prop ? prop() : fallback;
 
 const parseNumericStyleValue = (value, object) => {
-    value = resolveDynamicValue(value, object);
+    value = resolveDynamicValue(value, sprite);
     if (value === undefined || value === null) return undefined;
     if (typeof value === 'number') return value;
 
@@ -22,15 +23,15 @@ const getTextStyle = (style) => {
     const textStyle = {};
 
     if (style.fontStyle !== undefined) {
-        textStyle.fontStyle = resolveDynamicValue(style.fontStyle, object);
+        textStyle.fontStyle = resolveDynamicValue(style.fontStyle, sprite);
     }
 
     if (style.fontWeight !== undefined) {
-        textStyle.fontWeight = resolveDynamicValue(style.fontWeight, object);
+        textStyle.fontWeight = resolveDynamicValue(style.fontWeight, sprite);
     }
 
     if (style.stroke !== undefined) {
-        textStyle.stroke = resolveDynamicValue(style.stroke, object);
+        textStyle.stroke = resolveDynamicValue(style.stroke, sprite);
     }
 
     if (style.opacity !== undefined) {
@@ -45,16 +46,16 @@ const getTextStyle = (style) => {
     }
 
     if (style.align !== undefined) {
-        textStyle.align = resolveDynamicValue(style.align, object);
+        textStyle.align = resolveDynamicValue(style.align, sprite);
     }
 
     return textStyle;
 };
 
-const textValue = computed(() => String(resolveDynamicValue(read(value, ''), object) ?? ''));
+const textValue = computed(() => String(resolveDynamicValue(read(value, ''), sprite) ?? ''));
 const textColor = computed(() => {
     const currentStyle = read(style, {});
-    return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, object) : undefined;
+    return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, sprite) : undefined;
 });
 const textSize = computed(() => {
     const currentStyle = read(style, {});
@@ -62,7 +63,7 @@ const textSize = computed(() => {
 });
 const textFontFamily = computed(() => {
     const currentStyle = read(style, {});
-    return currentStyle.fontFamily !== undefined ? resolveDynamicValue(currentStyle.fontFamily, object) : undefined;
+    return currentStyle.fontFamily !== undefined ? resolveDynamicValue(currentStyle.fontFamily, sprite) : undefined;
 });
 const textStyle = computed(() => getTextStyle(read(style, {})));
 </script>

package/src/components/gui/dialogbox/index.ce

@@ -53,6 +53,7 @@
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const currentPlayer = engine.scene.currentPlayer
@@ -172,7 +173,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (isTyping()) {
                     finishTyping();
@@ -189,7 +190,7 @@
     
     const dialogControls = signal({
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (isTyping()) {
                     finishTyping();

package/src/components/gui/gameover.ce

@@ -31,6 +31,7 @@
     import { inject } from "../../core/inject";
     import { RpgClientEngine } from "../../RpgClientEngine";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const guiService = inject(RpgGui);
@@ -146,7 +147,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 triggerSelect(selectedEntry());
             }