ditch THREE raycasting for SAT again

src/entity.js

@@ -1,32 +1,42 @@
 import * as THREE from 'three'
+import SAT from 'sat'
+import SATX from './satx.js'
 
 export default class Entity {
   id = crypto.randomUUID()
   speed = 400
+  radius = 0
 
+  #position = new THREE.Vector2(0, 0)
   #dest = null
   #game = null
-  #mesh = null
+
+  static collider(x, y, radius) {
+    return new SAT.Circle(new SAT.Vector(x, y), radius)
+  }
 
   constructor(...options) {
     Object.entries(options).forEach((value, key) => this[key] = value)
-    const geometry = new THREE.CircleGeometry(options.radius ?? 0)
-    this.#mesh = new THREE.Mesh(geometry)
   }
 
   get game() { return this.#game }
-  get mesh() { return this.#mesh }
-  get pos() { return this.#mesh.position }
-  get radius() { return this.#mesh.userData.radius }
-  get x() { return this.#mesh.position.x }
-  get y() { return this.#mesh.position.y }
+  get position() { return this.#position }
+  get x() { return this.position.x }
+  get y() { return this.position.y }
   set game(value) { this.#game = value }
-  set x(value) { this.#mesh.position.x = value }
-  set y(value) { this.#mesh.position.y = value }
+  set x(value) { this.position.x = value }
+  set y(value) { this.position.y = value }
 
-  set radius(value) {
-    this.#mesh.geometry = new THREE.CircleGeometry(value)
-    this.#mesh.userData.radius = value
+  get collidables() {
+    return this.game?.entities.filter((e) => e.id != this.id).map((e) => e.collider)
+  }
+
+  get collider() {
+    return new SAT.Circle(new SAT.Vector(this.x, this.y), this.radius)
+  }
+
+  isColliding(collider) {
+    return SATX.colliding(this.collider, collider)
   }
 
   moveAction(x, y) {
@@ -36,30 +46,38 @@ export default class Entity {
   state() {
     return {
       ...this,
-      pos: {
+      position: {
         x: this.x,
         y: this.y,
       },
-      radius: this.radius,
     }
   }
 
   teleport(x, y) {
-    this.#mesh.position.set(x, y, 0)
+    this.position.set(x, y)
   }
 
   takeStep() {
     const speed = this.speed / (this.game?.tickBudget ?? 1000)
     if (this.#dest != null) {
-      const fixedDest = new THREE.Vector3(
-        Math.min(Math.max(this.radius, this.#dest.x), this.game?.height ?? Infinity),
+      const fixedDest = new THREE.Vector2(
+        Math.min(Math.max(this.radius, this.#dest.x), this.game?.width ?? Infinity),
         Math.min(Math.max(this.radius, this.#dest.y), this.game?.height ?? Infinity),
-        0,
       )
 
-      this.pos.add(fixedDest.clone().sub(this.pos).normalize().multiplyScalar(speed))
-      if (this.pos.clone().sub(fixedDest).length() <= speed) {
-        this.pos.copy(fixedDest)
+      const distance = this.position.clone().sub(fixedDest).length()
+      const direction = fixedDest.clone().sub(this.position).normalize()
+      const stepTaken = this.position.clone().add(direction.multiplyScalar(speed))
+      const position = distance <= speed ? fixedDest : stepTaken
+
+      const collider = Entity.collider(position.x, position.y, this.radius)
+      const isColliding = this.collidables.some((c) => SATX.colliding(collider, c))
+
+      if (!isColliding) {
+        this.position.copy(position)
+      }
+
+      if (this.x == this.#dest?.x && this.y == this.#dest?.y) {
         this.#dest = null
       }
     }