fix hitbox and holding of the iron ith touch controls

Author: sombraSoft

src/AnkleHitbox.ts

@@ -1,19 +1,20 @@
 import {
+  Box3,
   BoxGeometry,
   Mesh,
   MeshBasicMaterial,
   type OrthographicCamera,
   type PerspectiveCamera,
-  Raycaster,
-  type Vector2,
+  Vector3,
 } from "three";
 import { ANKLE_MONITOR_OFFSET, BOZO_POSITION } from "./constants";
 import type { SolderingIron } from "./SolderingIron";
 
 export class AnkleHitbox extends Mesh {
   public health: number = 100;
   public isBeingHit = false;
-  private raycaster = new Raycaster();
+  private hitbox: Box3;
+
   constructor(
     private camera: OrthographicCamera | PerspectiveCamera,
     private solderingIron: SolderingIron,
@@ -32,13 +33,19 @@ export class AnkleHitbox extends Mesh {
       BOZO_POSITION.z + ANKLE_MONITOR_OFFSET.z,
     );
     this.renderOrder = 2;
+
+    // Create and cache the hitbox
+    this.hitbox = new Box3().setFromObject(this);
   }
-  public update(deltaTime: number, mouse: Vector2) {
+  public update(deltaTime: number) {
     if (this.solderingIron.isSoldering) {
-      this.raycaster.setFromCamera(mouse, this.camera);
-      const intersects = this.raycaster.intersectObject(this);
+      // Create a small hitbox for the tip of the iron
+      const ironTipHitbox = new Box3().setFromCenterAndSize(
+        this.solderingIron.position,
+        new Vector3(10, 10, 10), // A small 10x10x10 box
+      );
 
-      if (intersects.length > 0) {
+      if (this.hitbox.intersectsBox(ironTipHitbox)) {
         this.isBeingHit = true;
         this.health -= 10 * deltaTime;
 

src/GameManager.ts

@@ -40,6 +40,7 @@ export class GameManager {
   private clock: Clock;
   private raycaster: Raycaster;
   private mouse: Vector2;
+  public inputType: "mouse" | "touch" = "mouse";
 
   private state: GameState = "LOADING";
   private canInteract: boolean = true;
@@ -500,6 +501,7 @@ export class GameManager {
   private onMouseMove(event: MouseEvent) {
     if (this.state === "LOADING") return;
 
+    this.inputType = "mouse";
     this.unlockAudio();
 
     this.updateMousePosition(event.clientX, event.clientY);
@@ -523,6 +525,7 @@ export class GameManager {
     event.preventDefault(); // Prevent scrolling
     if (this.state === "LOADING") return;
 
+    this.inputType = "touch";
     this.unlockAudio();
 
     if (event.touches.length > 0) {
@@ -637,8 +640,8 @@ export class GameManager {
     if (this.state === "INTRO_ANIMATION") {
       this.introAnimation.update(deltaTime);
     } else if (this.state === "PLAYING") {
-      this.solderingIron.update(deltaTime, this.mouse);
-      this.ankleHitbox.update(deltaTime, this.mouse);
+      this.solderingIron.update(deltaTime, this.mouse, this.inputType);
+      this.ankleHitbox.update(deltaTime);
       this.xandao.update(deltaTime);
       this.bossHealthBar.update(this.ankleHitbox.health);
 

src/SolderingIron.ts

@@ -46,8 +46,12 @@ export class SolderingIron extends Sprite {
     this.smokeSystem = new SmokeSystem();
   }
 
-  public update(deltaTime: number, mouse: Vector2) {
-    this.updatePosition(mouse);
+  public update(
+    deltaTime: number,
+    mouse: Vector2,
+    inputType: "mouse" | "touch",
+  ) {
+    this.updatePosition(mouse, inputType);
     this.smokeSystem.update(deltaTime);
 
     // Only smoke if we are soldering AND hitting the target (sound is playing)
@@ -58,10 +62,17 @@ export class SolderingIron extends Sprite {
     }
   }
 
-  private updatePosition(mouse: Vector2) {
+  private updatePosition(mouse: Vector2, inputType: "mouse" | "touch") {
     const mouse3D = new Vector3(mouse.x, mouse.y, 0.5);
     mouse3D.unproject(this.camera);
     this.position.copy(mouse3D);
+
+    if (inputType === "touch") {
+      // Offset the iron above the touch point
+      this.position.x -= 140;
+      this.position.y += 130;
+    }
+
     // z=4.8 to be in front of mute button (z=4.5) but behind camera (z=5)
     this.position.z = 4.8;
   }