Revert "highlight周りのtick関数を名前変更&移動"

This reverts commit 9f8c188.

Author: na-trium-144

src/main.ts

@@ -1,4 +1,4 @@
-import { Application, Container, Sprite, type Ticker } from "pixi.js";
+import { Application, Container, type Ticker } from "pixi.js";
 import { derived, get, writable } from "svelte/store";
 import { Facing } from "./constants.ts";
 import { Grid, createCellsFromStageDefinition } from "./grid.ts";
@@ -32,6 +32,19 @@ export async function setup(
     }
   };
 
+  function tick() {
+    // highlight is re-rendered every tick
+    const highlight = Player.createHighlight(cx);
+    if (highlight) {
+      stage.addChild(highlight);
+    }
+    return () => {
+      if (highlight) {
+        stage.removeChild(highlight);
+      }
+    };
+  }
+
   // Create a new application
   const app = new Application();
   const stage = new Container();
@@ -91,14 +104,11 @@ export async function setup(
   const uiContext = derived([state, history], ([$state, $history]) => {
     return useUI($state, $history);
   });
-  const highlight = new Sprite();
-  stage.addChild(highlight);
   const cx: Context = {
     _stage_container: stage,
     grid,
     dynamic: {
       focus: null,
-      highlight,
       player: {
         // HACK: these values are immediately overwritten inside Player.init().
         sprite: null,
@@ -131,7 +141,13 @@ export async function setup(
   cx.dynamic.player = Player.init(cx, bunnyTexture);
   app.ticker.add(unlessPaused((ticker) => Player.tick(cx, ticker)));
 
-  app.ticker.add(unlessPaused(() => Player.highlightTick(cx)));
+  let cleanup: undefined | (() => void) = undefined;
+  app.ticker.add(
+    unlessPaused(() => {
+      if (cleanup) cleanup();
+      cleanup = tick();
+    }),
+  );
 
   // Append the application canvas to the document body
   el.appendChild(app.canvas);

src/player.ts

@@ -70,24 +70,20 @@ export function getCoords(cx: Context) {
   const y = Math.round((coords.y - marginY) / blockSize) - 1; // it was not working well so take my patch
   return { x, y };
 }
-export function highlightTick(cx: Context) {
+export function createHighlight(cx: Context) {
   const state = get(cx.state);
   const player = cx.dynamic.player;
-  const highlight = cx.dynamic.highlight;
   const { blockSize, marginY } = get(cx.config);
-  if (!player.holdingKeys[Inputs.Ctrl] || !player.onGround) {
-    // no highlight
-    highlight.scale = 0;
-    return;
-  }
-  highlight.texture =
+  if (!player.holdingKeys[Inputs.Ctrl] || !player.onGround) return;
+  const texture =
     state.inventory === null ? highlightTexture : highlightHoldTexture;
-  highlight.scale = 1;
+  const highlight: Sprite = new Sprite(texture);
   highlight.width = blockSize;
   highlight.height = blockSize;
   const highlightCoords = Ability.focusCoord(getCoords(cx), player.facing);
   highlight.x = highlightCoords.x * blockSize;
   highlight.y = highlightCoords.y * blockSize + marginY;
+  return highlight;
 }
 
 export function handleInput(

src/public-types.ts

@@ -63,7 +63,6 @@ export type Context = {
   // no need to serialize.
   dynamic: {
     focus: Coords | null; // current focus coordinates
-    highlight: Sprite;
     player: {
       holdingKeys: { [key in Inputs]?: boolean };
       coords: () => { x: number; y: number };