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

package/src/components/character.ce

@@ -1,11 +1,11 @@
 <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) {
@@ -21,18 +21,18 @@
       </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)
@@ -56,8 +56,10 @@
   import PlayerComponents from "./player-components.ce";
   import { RpgGui } from "../Gui/Gui";
   import { getCanMoveValue } from "../utils/readPropValue";
+  import { getKeyboardControlBind, resolveKeyboardActionInput } from "../services/actionInput";
 
   const { object, id } = defineProps();
+  const sprite = object();
 
   const client = inject(RpgClientEngine);
   const hooks = inject(ModulesToken);
@@ -71,9 +73,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 +152,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) : []
     };
   };
 
@@ -259,7 +261,7 @@
     isConnected,
     graphicsSignals,
     flashTrigger
-  } = object;
+  } = sprite;
 
   /**
    * Flash configuration signals for dynamic options
@@ -304,11 +306,11 @@
 
   const particleSettings = client.particleSettings;
 
-  const canControls = () => isMe() && getCanMoveValue(object)
+  const canControls = () => isMe() && getCanMoveValue(sprite)
   const keyboardControls = client.globalConfig.keyboardControls;
 
   const visible = computed(() => {
-    if (object.isEvent()) {
+    if (sprite.isEvent()) {
       return true
     }
     return isConnected()
@@ -344,10 +346,10 @@
       },
     },
     action: {
-      bind: keyboardControls.action,
+      bind: getKeyboardControlBind(keyboardControls.action),
       keyDown() {
         if (canControls()) {
-          client.processAction({ action: 'action' })
+          client.processAction(resolveKeyboardActionInput(keyboardControls.action, client, sprite))
         }
       },
     },
@@ -373,7 +375,7 @@
   });
 
   const z = computed(() => {
-    return object.y() + object.z()
+    return sprite.y() + sprite.z()
   });
 
   const realAnimationName = signal(animationName());
@@ -734,8 +736,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,13 +766,13 @@
     }
     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();
     }
@@ -786,10 +788,10 @@
     else if (!movementAnimations.includes(curr)) {
       realAnimationName.set(curr);
     }
-    if (!isMoving && object.animationIsPlaying && object.animationIsPlaying()) {
+    if (!isMoving && sprite.animationIsPlaying && sprite.animationIsPlaying()) {
       if (movementAnimations.includes(curr)) {
-        if (typeof object.resetAnimationState === 'function') {
-          object.resetAnimationState();
+        if (typeof sprite.resetAnimationState === 'function') {
+          sprite.resetAnimationState();
         }
       }
     }
@@ -806,7 +808,7 @@
    * await onBeforeDestroy();
    */
   const waitForTemporaryAnimationEnd = (maxDuration = 1200) => {
-    if (!object.animationIsPlaying || !object.animationIsPlaying()) {
+    if (!sprite.animationIsPlaying || !sprite.animationIsPlaying()) {
       return Promise.resolve();
     }
 
@@ -822,7 +824,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();
@@ -836,13 +838,13 @@
     animationMovementSubscription.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()
+    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());
             }

package/src/components/gui/menu/equip-menu.ce

@@ -90,6 +90,7 @@
     import { signal, computed, createTabindexNavigator, effect } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -380,7 +381,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!listEntries().length) return;
                 commitSelection(selectedItem());

package/src/components/gui/menu/exit-menu.ce

@@ -16,6 +16,7 @@
     import { signal } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const keyboardControls = engine.globalConfig.keyboardControls;
@@ -23,7 +24,7 @@
 
     const controls = signal({
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (onConfirm) onConfirm();
             }

package/src/components/gui/menu/items-menu.ce

@@ -90,6 +90,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 keyboardControls = engine.globalConfig.keyboardControls;
@@ -226,7 +227,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (!confirmOpen()) return;
                 confirmSelect(selectedConfirm())();
@@ -289,7 +290,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (confirmOpen()) {
                     confirmSelect(selectedConfirm())();

package/src/components/gui/menu/main-menu.ce

@@ -101,6 +101,7 @@
     import ExitMenu from "./exit-menu.ce";
     import { getEntityProp } from "../../../utils/getEntityProp";
     import { delay } from "@rpgjs/common";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const currentPlayer = engine.scene.currentPlayer;
@@ -259,7 +260,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (saveOverlay()) return;
                 if (view() !== "menu") return;

package/src/components/gui/save-load.ce

@@ -40,6 +40,7 @@
     import { SaveClientService } from "../../services/save";
     import { PrebuiltGui } from "@rpgjs/common";
     import { RpgGui } from "../../Gui/Gui";
+    import { getKeyboardControlBind } from "../../services/actionInput";
 
     const engine = inject(RpgClientEngine);
     const saveClient = inject(SaveClientService);
@@ -185,7 +186,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 triggerSelect(selectedSlot());
             }

package/src/components/gui/shop/shop.ce

@@ -180,6 +180,7 @@
     import { mount, signal, computed, createTabindexNavigator, effect } from "canvasengine";
     import { inject } from "../../../core/inject";
     import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { getKeyboardControlBind } from "../../../services/actionInput";
 
     const engine = inject(RpgClientEngine)
     const currentPlayer = engine.scene.currentPlayer
@@ -387,7 +388,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 const mode = selectedModeIndex() === 0 ? 'buy' : 'sell'
                 tradeMode.set(mode)
@@ -433,7 +434,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (quantityDialogOpen()) {
                     const item = currentItem()

package/src/components/gui/title-screen.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);
@@ -150,7 +151,7 @@
             }
         },
         action: {
-            bind: keyboardControls.action,
+            bind: getKeyboardControlBind(keyboardControls.action),
             keyDown() {
                 if (guiService.isDisplaying(PrebuiltGui.Save)) return;
                 triggerSelect(selectedEntry());

package/src/components/index.ts

@@ -1,7 +1,8 @@
 import EventLayerComponent from "./scenes/event-layer.ce";
+import SceneMap from "./scenes/draw-map.ce";
 import CharacterComponent from "./character.ce";
 
 // Prebuilt sprite components
 export { HpBar } from "./prebuilt";
 
-export { EventLayerComponent, CharacterComponent } 
+export { EventLayerComponent, SceneMap, CharacterComponent } 

package/src/components/player-components.ce

@@ -29,7 +29,7 @@
           justifyContent="center"
           alignItems="center"
         >
-          <entry.component object ...entry.props />
+          <entry.component object={sprite} ...entry.props />
         </Container>
       }
     </Container>
@@ -54,6 +54,7 @@ const { object, position, graphicBounds } = defineProps({
     default: 'top'
   }
 });
+const sprite = object();
 
 const client = inject(RpgClientEngine);
 const warnedComponents = new Set();
@@ -63,16 +64,16 @@ const readPosition = computed(() => position?.() ?? 'top');
 const componentSource = computed(() => {
   switch (readPosition()) {
     case 'bottom':
-      return object.componentsBottom?.();
+      return sprite.componentsBottom?.();
     case 'center':
-      return object.componentsCenter?.();
+      return sprite.componentsCenter?.();
     case 'left':
-      return object.componentsLeft?.();
+      return sprite.componentsLeft?.();
     case 'right':
-      return object.componentsRight?.();
+      return sprite.componentsRight?.();
     case 'top':
     default:
-      return object.componentsTop?.();
+      return sprite.componentsTop?.();
   }
 });
 
@@ -98,16 +99,16 @@ const componentData = computed(() => {
 
 const layout = computed(() => componentData()?.layout ?? {});
 const rows = computed(() => componentData()?.components ?? []);
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 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 estimateTextWidth = (value, style = {}) => {
-  const text = String(resolveDynamicValue(value ?? '', object) ?? '');
+  const text = String(resolveDynamicValue(value ?? '', sprite) ?? '');
   const fontSize = toNumber(style.fontSize, 12);
   return Math.max(1, Math.ceil(text.length * fontSize * 0.6));
 };
@@ -206,7 +207,7 @@ const renderedRows = computed(() => {
 
       entries.push({
         component,
-        props: resolveDynamicProps(getComponentProps(definition), object),
+        props: resolveDynamicProps(getComponentProps(definition), sprite),
         width: cell.width,
         height: cell.height
       });

package/src/components/prebuilt/hp-bar.ce

@@ -46,6 +46,7 @@
 import { computed, animatedSignal, effect } from "canvasengine";
 
 const { object } = defineProps();
+const sprite = object();
 
 // ====================
 // Configuration
@@ -93,14 +94,14 @@ const highlightHeight = Math.floor(fillHeight / 2);
 // ====================
 
 /** Gets hitbox dimensions for positioning */
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 /**
  * Gets the current HP value from the player object
  * Uses hpSignal which is synchronized from the server
  */
 const currentHp = computed(() => {
-  return object.hpSignal?.() ?? 0;
+  return sprite.hpSignal?.() ?? 0;
 });
 
 /**
@@ -108,7 +109,7 @@ const currentHp = computed(() => {
  * Reads from _param.maxHp which contains calculated stats
  */
 const maxHp = computed(() => {
-  const params = object._param?.() ?? {};
+  const params = sprite._param?.() ?? {};
   return params.maxHp ?? 100;
 });
 

package/src/components/prebuilt/light-halo.ce

@@ -31,6 +31,7 @@ const {
   opacitySpeed,
   lightColor
 } = defineProps();
+const sprite = object();
 
 // ====================
 // Props with default values
@@ -92,7 +93,7 @@ const currentOpacity = computed(() => {
 // Position calculations
 // ====================
 
-const hitbox = object.hitbox;
+const hitbox = sprite.hitbox;
 
 const position = computed(() => ({
   x: hitbox().w / 2,
@@ -145,4 +146,3 @@ tick(() => {
   time.update(t => t + 1);
 });
 </script>
-