rename main.js to client.js

public/client.js

@@ -0,0 +1,152 @@
+import * as THREE from 'three'
+
+const global = (0,eval)("this")
+const scene = new THREE.Scene()
+const raycaster = new THREE.Raycaster()
+const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000)
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize(window.innerWidth, window.innerHeight)
+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 })
+const ground = new THREE.Mesh(geometry, material)
+scene.add(ground)
+
+const ambientLight = new THREE.AmbientLight(0x404040)
+scene.add(ambientLight)
+
+const directionalLight = new THREE.DirectionalLight(0xffffff, 2.5)
+directionalLight.position.set(-0.3, 0.1, 1)
+directionalLight.power = 3000
+scene.add(directionalLight)
+
+global.THREE = THREE
+global.renderer = renderer
+global.camera = camera
+global.scene = scene
+
+function render() {
+	renderer.render(scene, camera)
+}
+
+function minimapRender() {
+	minimapRenderer.render(scene, minimapCamera)
+}
+
+var websocket = null
+global.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)
+
+    if (state.width != null && state.height != null && (ground.geometry.attributes.width != state.width || ground.geometry.attributes.height != state.height)) {
+      ground.geometry = new THREE.PlaneGeometry(state.width / 100, state.height / 100)
+      ground.position.set(state.width / 200, state.height / 200, 0)
+    }
+
+    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 / 100), new THREE.MeshToonMaterial({ color: 0xffffff }))
+        entity.userData.type = 'entity'
+        entity.userData.id = e.id
+        scene.add(entity)
+        entities[e.id] = entity
+      }
+
+      entity.position.set(e.position.x / 100, e.position.y / 100, e.radius / 100)
+    }
+
+    document.getElementById('state').innerHTML = JSON.stringify(state, null, 2)
+  }
+}
+
+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
+    if (intersect != null) {
+      if (event.button == 0) {
+        const x = Math.round(intersect.x * 100)
+        const y = Math.round(intersect.y * 100)
+        websocket.send(JSON.stringify({ action: 'move', id: '2', x, y }))
+      }
+
+      if (event.button == 2) {
+        const x = Math.round(intersect.x * 100)
+        const y = Math.round(intersect.y * 100)
+        websocket.send(JSON.stringify({ action: 'move', id: '1', x, y }))
+      }
+    }
+  })
+
+  document.addEventListener('wheel', (event) => {
+    if (event.deltaY < 0) {
+      camera.zoom += 0.2
+      if (camera.zoom > 3) {
+        camera.zoom = 3
+      }
+      camera.updateProjectionMatrix()
+    }
+    if (event.deltaY > 0) {
+      camera.zoom -= 0.2
+      if (camera.zoom < 1) {
+        camera.zoom = 1
+      }
+      camera.updateProjectionMatrix()
+    }
+  })
+
+  window.addEventListener("resize", (event) => {
+    camera.aspect = window.innerWidth / window.innerHeight
+    camera.updateProjectionMatrix()
+    renderer.setSize(window.innerWidth, window.innerHeight)
+  })
+
+  document.addEventListener("contextmenu", (event) => event.preventDefault())
+
+  document.body.appendChild(canvas)
+
+  const minimap = minimapRenderer.domElement
+  minimap.classList.add('minimap')
+  document.body.appendChild(minimap)
+})