refactor:

- add single point of entry for all per-frame updates (GameLoop), add centralized event system (GameEvents). Controllers emit events instead of calling each other directly.
- remove unused images, optimize path and imports
- rework font usege with using template method

src/controllers/LootC.ts

@@ -1,9 +1,11 @@
 import { Sprite, SpriteMaterial, Texture, TextureLoader, SRGBColorSpace, Vector3 } from "three";
 import * as TWEEN from "@tweenjs/tween.js";
-import { UpdateController, CameraC_internal } from "@24tools/playable_template";
+import { CameraC_internal } from "@24tools/playable_template";
 import { ThreeC } from "./ThreeC";
 import { TestSceneC } from "./TestSceneC"; // for groundY (ground level)
-import { woodIconUrl } from "../resources/images/woodIcon";
+import { GameEvents } from "../core/GameEvents";
+import { GameLoop } from "../core/GameLoop";
+import { images } from "../resources/resources";
 import { worldToScreen } from "../utils/screen";
 
 // Tunables — tweak here
@@ -46,7 +48,7 @@ export class LootC {
   private static tweens = new TWEEN.Group();
 
   static init() {
-    this.texture = new TextureLoader().load(woodIconUrl);
+    this.texture = new TextureLoader().load(images.woodIconUrl);
     this.texture.colorSpace = SRGBColorSpace; // correct color
 
     // The wood icon/count live in the HUD (built by HudC). We just reference
@@ -55,8 +57,11 @@ export class LootC {
     this.countEl = document.getElementById("wood-count");
     this.renderCount();
 
+    // Listen for loot spawns (from crate breaks or state changes)
+    GameEvents.onLootSpawn.addDelegate(({ position, count }) => this.spawn(position, count));
+
     // ⚠️ Key: pump our group every frame, otherwise the tweens don't advance.
-    UpdateController.Instance.onUpdate.addDelegate(() => this.tweens.update());
+    GameLoop.register(() => this.tweens.update());
   }
 
   /** Current spendable wood. */
@@ -69,6 +74,9 @@ export class LootC {
     const taken = Math.min(amount, this.balance);
     this.balance -= taken;
     this.renderCount();
+    if (taken > 0) {
+      GameEvents.onWoodSpent.Invoke({ amount: taken, balance: this.balance });
+    }
     return taken;
   }
 
@@ -209,7 +217,7 @@ export class LootC {
     this.remove(piece);
 
     const flier = document.createElement("img");
-    flier.src = woodIconUrl;
+    flier.src = images.woodIconUrl;
     flier.style.cssText =
       `position:fixed; left:0; top:0; width:${sizePx}px; height:${sizePx}px;` +
       // above #hud (z-index 9999) so the wood clearly flies on top of, and into, the icon
@@ -218,7 +226,7 @@ export class LootC {
 
     // White "glint" copy that rides on top of the flier and fades out as it moves.
     const flash = document.createElement("img");
-    flash.src = woodIconUrl;
+    flash.src = images.woodIconUrl;
     flash.style.cssText = flier.style.cssText;
     flash.style.filter = "brightness(0) invert(1)"; // solid white silhouette
     flash.style.zIndex = "10001";
@@ -255,7 +263,14 @@ export class LootC {
       .to({ progress: 1 }, FLY_MS)
       .easing(TWEEN.Easing.Quadratic.InOut)
       .onUpdate(apply)
-      .onComplete(() => { flier.remove(); flash.remove(); this.balance++; this.renderCount(); this.pulseUiIcon(); });
+      .onComplete(() => {
+        flier.remove();
+        flash.remove();
+        this.balance++;
+        this.renderCount();
+        this.pulseUiIcon();
+        GameEvents.onWoodCollected.Invoke({ amount: 1, balance: this.balance });
+      });
     // Shrink — SAME duration as the flight, so the two start AND finish together
     // (no "shrink first"); Sinusoidal makes the size change extra smooth.
     const shrink = new TWEEN.Tween(anim, this.tweens)