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.
2024-12-21 23:46:01 +09:00
commit 2957903cb1
15 changed files with 1509 additions and 0 deletions
@@ -0,0 +1,4 @@
 .git
 *Dockerfile*
 *docker-compose*
 node_modules
@@ -0,0 +1,130 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 # Runtime data
 pids
 *.pid
 *.seed
 *.pid.lock
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 *.lcov
 # nyc test coverage
 .nyc_output
 # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 # Bower dependency directory (https://bower.io/)
 bower_components
 # node-waf configuration
 .lock-wscript
 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
 # Snowpack dependency directory (https://snowpack.dev/)
 web_modules/
 # TypeScript cache
 *.tsbuildinfo
 # Optional npm cache directory
 .npm
 # Optional eslint cache
 .eslintcache
 # Optional stylelint cache
 .stylelintcache
 # Microbundle cache
 .rpt2_cache/
 .rts2_cache_cjs/
 .rts2_cache_es/
 .rts2_cache_umd/
 # Optional REPL history
 .node_repl_history
 # Output of 'npm pack'
 *.tgz
 # Yarn Integrity file
 .yarn-integrity
 # dotenv environment variable files
 .env
 .env.development.local
 .env.test.local
 .env.production.local
 .env.local
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 .parcel-cache
 # Next.js build output
 .next
 out
 # Nuxt.js build / generate output
 .nuxt
 dist
 # Gatsby files
 .cache/
 # Comment in the public line in if your project uses Gatsby and not Next.js
 # https://nextjs.org/blog/next-9-1#public-directory-support
 # public
 # vuepress build output
 .vuepress/dist
 # vuepress v2.x temp and cache directory
 .temp
 .cache
 # Docusaurus cache and generated files
 .docusaurus
 # Serverless directories
 .serverless/
 # FuseBox cache
 .fusebox/
 # DynamoDB Local files
 .dynamodb/
 # TernJS port file
 .tern-port
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 # yarn v2
 .yarn/cache
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
@@ -0,0 +1,6 @@
 FROM node:current-alpine
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm install
 COPY . .
 CMD ["node", "js/index.js"]
@@ -0,0 +1,18 @@
 {
  "name": "instructions-clear",
  "version": "1.0.0",
  "main": "src/index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Thayol",
  "license": "UNLICENSED",
  "description": "",
  "dependencies": {
    "detect-collisions": "^9.24.0",
    "three": "^0.171.0",
    "victor": "^1.1.0",
    "websocket-express": "^3.1.2"
  }
 }
@@ -0,0 +1,46 @@
 <html>
  <head>
    <meta charset="UTF-8">
    <meta name="author" content="Thayol">
    <script type="importmap">
      {
        "imports": {
          "three": "/three/build/three.module.js",
          "three/addons/": "/three/examples/jsm/"
        }
      }
    </script>
    <style>
      * {
        box-sizing: border-box;
      }
      html {
        font-family: sans-serif;
      }
      html, body {
        margin: 0;
        padding: 0;
      }
      .debug-panel {
        position: fixed;
        inset: 0 0 auto auto;
        border-bottom-left-radius: 10px;
        padding: 10px 10px 20px 20px;
        background-color: white;
        border: 5px solid gray;
        border-top: none;
        border-right: none;
      }
    </style>
  </head>
  <body>
    <div class="debug-panel">
      <p>Connection: <span id="connection"></span></p>
      <pre id="state"></pre>
    </div>
    <script type="module" src="main.js"></script>
  </body>
 </html>
@@ -0,0 +1,73 @@
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
 const global = (0,eval)("this")
 const scene = new THREE.Scene()
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
 const renderer = new THREE.WebGLRenderer()
 const entities = {}
 renderer.setSize(window.innerWidth, window.innerHeight)
 renderer.setAnimationLoop(animate)
 document.body.appendChild(renderer.domElement)
 const geometry = new THREE.BoxGeometry(1000, 1000)
 const material = new THREE.MeshBasicMaterial({ color: 0x115011 })
 const ground = new THREE.Mesh(geometry, material)
 scene.add(ground)
 // const loader = new GLTFLoader();
 // loader.load('player.gltf', (gltf) => scene.add(gltf.scene), undefined, (err) => console.log(err))
 global.camera = camera
 global.scene = scene
 camera.position.set(0, -250, 500)
 camera.lookAt(0, 0, 0)
 function animate() {
 	renderer.render(scene, camera)
 }
 var websocket = null
 var timerId = null
 function connectWebSocket() {
  websocket = new WebSocket('ws://127.0.0.1:1280/ws')
  global.websocket = websocket
  websocket.onerror = () => websocket.close()
  websocket.onopen = () => {
    document.getElementById('connection').innerHTML = 'open'
    clearInterval(timerId)
  }
  websocket.onclose = () => {
    websocket = null
    document.getElementById('connection').innerHTML = 'closed'
    timerId = setInterval(() => {
      if (websocket == null) {
        connectWebSocket()
      }
    }, 2000)
  }
  websocket.onmessage = (event) => {
    let state = JSON.parse(event.data)
    for (const e of state.entities) {
      let entity
      if (e.id in entities) {
        entity = entities[e.id]
      }
      else {
        entity = new THREE.Mesh(new THREE.SphereGeometry(e.radius), new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }))
        scene.add(entity)
        entities[e.id] = entity
      }
      entity.position.set(e.pos.x, e.pos.y, e.radius)
    }
    document.getElementById('state').innerHTML = JSON.stringify(state, null, 2)
  }
 }
 window.addEventListener('load', () => {
  connectWebSocket()
 })
@@ -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(),
    ])
  }
 }
@@ -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')
  }
 }
@@ -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()
 })