Buff Queen AKA "Ez egy fa?"

Because the first placeholder player model
resembled a queen that's been to the gym a
bit too much. Also, before she got her head
and hands, she looked like a tree, legit.

src/entity.js

@@ -0,0 +1,50 @@
+import { Circle } from 'detect-collisions'
+import Victor from 'victor'
+
+export default class Entity {
+  id = crypto.randomUUID()
+  pos = new Victor(0, 0)
+  radius = 0
+  #collider = null
+  #dest = null
+  #game = null
+
+  constructor(...options) {
+    Object.entries(options).forEach((value, key) => this[key] = value)
+    this.#collider = new Circle(this.pos, this.radius)
+  }
+
+  get collider() { return this.#collider }
+  get game() { return this.#game }
+  get system() { return this.game?.system }
+  set game(value) { this.#game = value }
+
+  moveAction(x, y) {
+    this.#dest = new Victor(x, y)
+  }
+
+  async takeStep() {
+    if (this.#dest != null) {
+      this.pos.add(this.#dest.clone().subtract(this.pos).normalize())
+      if (this.pos.clone().subtract(this.#dest).length() <= 1) {
+        this.pos = this.#dest
+        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

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

src/index.js

@@ -0,0 +1,57 @@
+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
+const game = new Game()
+
+app.use('/', express.static('public'))
+app.use('/three/', express.static('node_modules/three'))
+app.use(express.urlencoded({ extended: true }))
+
+app.ws('/ws', async (req, res) => {
+  const websocket = await res.accept()
+
+  const subscription = () => websocket.send(JSON.stringify(game))
+  game.eventEmitter.on('tick', subscription)
+
+  websocket.on('close', () => {
+    game.eventEmitter.removeListener('tick', subscription)
+  })
+
+  websocket.on('message', (rawData) => {
+    const message = JSON.parse(rawData)
+    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)
+    }
+
+    if (message.action == 'move') {
+      const entity = game.entities.find((e) => e.id == message.id)
+      entity.moveAction(message.x, message.y)
+    }
+  })
+})
+
+app.listen(port, () => {
+  console.log(`Server started! Visit http://localhost:${port}`)
+
+  const entity = new Entity()
+  entity.id = '1'
+  entity.pos = new Victor(0, 0)
+  entity.radius = 35
+  game.spawn_entity(entity)
+
+  const entity2 = new Entity()
+  entity2.id = '2'
+  entity2.pos = new Victor(200, 100)
+  entity2.radius = 35
+  game.spawn_entity(entity2)
+
+  game.start()
+})