add visual distinction for teams

public/client.js

@@ -18,6 +18,11 @@ camera.layers.enable(2)
 const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff })
 const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xff00ff })
 const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 })
+const teamMaterials = {
+  blue: new THREE.MeshToonMaterial({ color: 0x4444ff }),
+  neutral: new THREE.MeshToonMaterial({ color: 0x22dd22 }),
+  red: new THREE.MeshToonMaterial({ color: 0xff4444 }),
+}
 
 const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10)
 const minimapRenderer = new THREE.WebGLRenderer()
@@ -176,7 +181,7 @@ function connectWebSocket() {
         entity.rotation.x = Math.PI / 2
         entity.userData.type = 'entity'
         entity.userData.id = e.id
-        entity.position.set(e.position.x / 100, e.position.y / 100, e.radius / 100)
+        entity.position.set(e.position.x / 100, e.position.y / 100, e.height / 100)
         scene.add(entity)
 
         // TODO: player model out of basic geometries
@@ -194,11 +199,18 @@ function connectWebSocket() {
         hp.layers.set(1)
         maxHp.add(hp)
 
+        const teamMaterial = teamMaterials[e.team]
+        const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.radius + 2) / 100, (e.radius + 2) / 100, 1), teamMaterial)
+        teamMarker.scale.y = e.height / 400
+        teamMarker.position.y = (e.height / 800) - (e.height / 100)
+        entity.rotation.x = Math.PI / 2
+        entity.add(teamMarker)
+
         entities[e.id] = entity
       }
 
       entity.userData.flaggedForRemoval = false
-      positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z: e.radius / 100 }, tweenDuration).start()
+      positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z: e.height / 100 }, tweenDuration).start()
 
       const hp = entity.children.at(0).children.at(0)
       const percentageHp = e.health / e.maxHealth

public/index.html

@@ -167,7 +167,6 @@
         <div id="ability-3-cooldown-text" class="cooldown-text"></div>
       </div>
     </div>
-    <!-- TODO: cast indicator -->
     <script type="module" src="client.js"></script>
   </body>
 </html>

src/index.js

@@ -139,7 +139,7 @@ function laneScenario() {
   const entity1 = new Entity({
     id: '1',
     health: 100,
-    height: 100,
+    height: 80,
     maxHealth: 100,
     position: new Vector2(500, 150),
     radius: 50,
@@ -151,7 +151,7 @@ function laneScenario() {
   const entity2 = new Entity({
     id: '2',
     health: 100,
-    height: 100,
+    height: 80,
     maxHealth: 100,
     position: new Vector2(1600, 1800),
     radius: 50,