replace most systems with THREE

src/entity.js

@@ -1,51 +1,72 @@
-import { Circle } from 'detect-collisions'
-import Victor from 'victor'
+import * as THREE from 'three'
 
 export default class Entity {
   id = crypto.randomUUID()
-  pos = new Victor(0, 0)
-  speed = 280
-  radius = 0
-  #collider = null
+  speed = 400
+
   #dest = null
   #game = null
+  #mesh = null
 
   constructor(...options) {
     Object.entries(options).forEach((value, key) => this[key] = value)
-    this.#collider = new Circle(this.pos, this.radius)
+    const geometry = new THREE.CircleGeometry(options.radius ?? 0)
+    this.#mesh = new THREE.Mesh(geometry)
   }
 
-  get collider() { return this.#collider }
   get game() { return this.#game }
-  get system() { return this.game?.system }
+  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 }
   set game(value) { this.#game = value }
+  set x(value) { this.#mesh.position.x = value }
+  set y(value) { this.#mesh.position.y = value }
+
+  set radius(value) {
+    this.#mesh.geometry = new THREE.CircleGeometry(value)
+    this.#mesh.userData.radius = value
+  }
 
   moveAction(x, y) {
-    this.#dest = new Victor(x, y)
+    this.#dest = new THREE.Vector3(x, y, 0)
   }
 
-  async takeStep() {
+  state() {
+    return {
+      ...this,
+      pos: {
+        x: this.x,
+        y: this.y,
+      },
+      radius: this.radius,
+    }
+  }
+
+  teleport(x, y) {
+    this.#mesh.position.set(x, y, 0)
+  }
+
+  takeStep() {
     const speed = this.speed / (this.game?.tickBudget ?? 1000)
     if (this.#dest != null) {
-      this.pos.add(this.#dest.clone().subtract(this.pos).normalize().multiplyScalar(speed))
-      if (this.pos.clone().subtract(this.#dest).length() <= speed) {
-        this.pos = this.#dest
+      const fixedDest = new THREE.Vector3(
+        Math.min(Math.max(this.radius, this.#dest.x), this.game?.height ?? 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)
         this.#dest = null
       }
     }
   }
 
-  async updateCollider() {
-    if (this.pos.x != this.collider.pos.x || this.pos.y != this.collider.pos.y || this.radius != this.collider.unscaledRadius) {
-      this.system?.remove(this.#collider)
-      this.#collider = new Circle(this.pos, this.radius)
-      this.system?.insert(this.#collider)
-    }
-  }
-
   async update() {
     await Promise.allSettled([
-      this.updateCollider(),
       this.takeStep(),
     ])
   }

src/game.js

@@ -1,25 +1,31 @@
-import { System } from 'detect-collisions'
 import { EventEmitter } from 'node:events'
 
 export default class Game {
-  entities = []
   tickRate = 30
   currentTick = 0
+  width = 15000
+  height = 15000
 
+  #entities = []
   #eventEmitter = new EventEmitter()
-  #system = new System()
   #tickBudget = Math.floor(1000 / this.tickRate)
 
+  get entities() { return this.#entities }
   get eventEmitter() { return this.#eventEmitter }
-  get system() { return this.#system }
   get tickBudget() { return this.#tickBudget }
 
   spawn_entity(entity) {
-    this.entities.push(entity)
-    this.#system.insert(entity.collider)
+    this.#entities.push(entity)
     entity.game = this
   }
 
+  state() {
+    return {
+      ...this,
+      entities: this.#entities.map((e) => e.state()),
+    }
+  }
+
   async start() {
     const start = performance.now()
     await this.update()
@@ -27,7 +33,7 @@ export default class Game {
   }
 
   async update() {
-    Promise.allSettled(this.entities.map((e) => e.update()))
+    Promise.allSettled(this.#entities.map((e) => e.update()))
     this.currentTick++
     this.eventEmitter.emit('tick')
   }

src/index.js

@@ -2,7 +2,6 @@ import express from 'express'
 import { WebSocketExpress } from 'websocket-express'
 import Game from './game.js'
 import Entity from './entity.js'
-import Victor from 'victor'
 
 const app = new WebSocketExpress()
 const port = 1280
@@ -15,7 +14,7 @@ app.use(express.urlencoded({ extended: true }))
 app.ws('/ws', async (req, res) => {
   const websocket = await res.accept()
 
-  const subscription = () => websocket.send(JSON.stringify(game))
+  const subscription = () => websocket.send(JSON.stringify(game.state()))
   game.eventEmitter.on('tick', subscription)
 
   websocket.on('close', () => {
@@ -24,15 +23,14 @@ app.ws('/ws', async (req, res) => {
 
   websocket.on('message', (rawData) => {
     const message = JSON.parse(rawData)
+    const entity = message.id != null ? game.entities.find((e) => e.id == message.id) : null
     console.log(message)
 
     if (message.action == 'teleport') {
-      const entity = game.entities.find((e) => e.id == message.id)
-      entity.pos = new Victor(message.x, message.y)
+      entity.teleport(message.x, message.y)
     }
 
     if (message.action == 'move') {
-      const entity = game.entities.find((e) => e.id == message.id)
       entity.moveAction(message.x, message.y)
     }
   })
@@ -43,13 +41,13 @@ app.listen(port, () => {
 
   const entity = new Entity()
   entity.id = '1'
-  entity.pos = new Victor(0, 0)
+  entity.teleport(0, 0)
   entity.radius = 35
   game.spawn_entity(entity)
 
   const entity2 = new Entity()
   entity2.id = '2'
-  entity2.pos = new Victor(200, 100)
+  entity.teleport(200, 100)
   entity2.radius = 35
   game.spawn_entity(entity2)