add minimap

public/index.html

@@ -27,6 +27,7 @@
 
       .debug-panel {
         position: fixed;
+        opacity: 0.2;
         inset: 0 0 auto auto;
         border-bottom-left-radius: 10px;
         padding: 10px 10px 20px 20px;
@@ -35,6 +36,21 @@
         border-top: none;
         border-right: none;
         width: 400px;
+        transition-duration: 0.2s;
+        transition-property: opacity;
+      }
+
+      .debug-panel:hover {
+        opacity: 1;
+      }
+
+      .minimap {
+        position: fixed;
+        inset: auto 0 0 auto;
+        border: 5px solid gray;
+        border-top-left-radius: 10px;
+        border-bottom: none;
+        border-right: none;
       }
     </style>
   </head>

public/main.js

@@ -2,12 +2,22 @@ import * as THREE from 'three'
 
 const global = (0,eval)("this")
 const scene = new THREE.Scene()
-const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000)
 const raycaster = new THREE.Raycaster()
+const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000)
 const renderer = new THREE.WebGLRenderer()
-const entities = {}
 renderer.setSize(window.innerWidth, window.innerHeight)
-renderer.setAnimationLoop(animate)
+renderer.setAnimationLoop(render)
+camera.position.set(5, -12, 10)
+camera.rotation.set((60 / 180) * Math.PI, 0, 0)
+
+const minimapCamera = new THREE.OrthographicCamera(-5, 5, 5, -5)
+const minimapRenderer = new THREE.WebGLRenderer()
+
+minimapRenderer.setSize(300, 300)
+minimapRenderer.setAnimationLoop(minimapRender)
+minimapCamera.position.set(5, 5, 10)
+
+const entities = {}
 
 const geometry = new THREE.PlaneGeometry(0, 0)
 const material = new THREE.MeshToonMaterial({ color: 0x115011 })
@@ -26,13 +36,15 @@ global.THREE = THREE
 global.renderer = renderer
 global.camera = camera
 global.scene = scene
-camera.position.set(3, -12, 10)
-camera.rotation.set((60 / 180) * Math.PI, 0, 0)
 
-function animate() {
+function render() {
 	renderer.render(scene, camera)
 }
 
+function minimapRender() {
+	minimapRenderer.render(scene, minimapCamera)
+}
+
 var websocket = null
 global.websocket = null
 var timerId = null
@@ -87,6 +99,8 @@ window.addEventListener('load', () => {
   connectWebSocket()
 
   const canvas = renderer.domElement
+  canvas.classList.add('canvas')
+
   canvas.addEventListener('mousedown', (event) => {
     raycaster.setFromCamera(new THREE.Vector2((event.clientX / canvas.clientWidth) * 2 - 1, (event.clientY / canvas.clientHeight) * -2 + 1), camera)
     const intersect = raycaster.intersectObject(ground).at(0)?.point
@@ -131,4 +145,8 @@ window.addEventListener('load', () => {
   document.addEventListener("contextmenu", (event) => event.preventDefault())
 
   document.body.appendChild(canvas)
+
+  const minimap = minimapRenderer.domElement
+  minimap.classList.add('minimap')
+  document.body.appendChild(minimap)
 })

src/entity.js

@@ -61,8 +61,8 @@ export default class Entity {
     const speed = this.speed / (this.game?.tickBudget ?? 1000)
     if (this.#dest != null) {
       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),
+        Math.min(Math.max(this.radius, this.#dest.x), (this.game?.width ?? Infinity) - this.radius),
+        Math.min(Math.max(this.radius, this.#dest.y), (this.game?.height ?? Infinity) - this.radius),
       )
 
       const distance = this.position.clone().sub(fixedDest).length()

src/game.js

@@ -3,8 +3,8 @@ import { EventEmitter } from 'node:events'
 export default class Game {
   tickRate = 30
   currentTick = 0
-  width = 15000
-  height = 15000
+  width = 1000
+  height = 1000
 
   #entities = []
   #eventEmitter = new EventEmitter()

src/index.js

@@ -41,13 +41,13 @@ app.listen(port, () => {
 
   const entity = new Entity()
   entity.id = '1'
-  entity.teleport(0, 0)
+  entity.teleport(100, 100)
   entity.radius = 35
   game.spawn_entity(entity)
 
   const entity2 = new Entity()
   entity2.id = '2'
-  entity2.teleport(100, 100)
+  entity2.teleport(200, 100)
   entity2.radius = 35
   game.spawn_entity(entity2)