Only auto aim and healthbars

resources/css/game.css

@@ -213,6 +213,21 @@ html, body {
 	color: #bbb;
 	min-height: 18px;
 }
+.lobby-players-title {
+	font-size: 11px;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	color: #888;
+	margin-bottom: 6px;
+}
+.lobby-player {
+	padding: 3px 0;
+	font-size: 14px;
+	color: #eee;
+}
+.lobby-player.you {
+	color: #4fe3ff;
+}
 #gameover {
 	position: fixed;
 	inset: 0;

resources/js/game/Player.js

@@ -1,7 +1,6 @@
 import { GameObject } from '../engine/GameObject.js';
 import { Vector2D } from '../engine/Vector2D.js';
 import { Bullet } from './Bullet.js';
-import { Zombie } from './Zombie.js';
 
 export class Player extends GameObject {
   constructor(
@@ -23,7 +22,6 @@ export class Player extends GameObject {
       particles = null,
       sounds = null,
       size = 24,
-      autoAim = false,
     } = {},
   ) {
     super(viewport.width / 2, viewport.height / 2);
@@ -51,7 +49,6 @@ export class Player extends GameObject {
     this._recoil = new Vector2D(0, 0);
     this._damageCooldown = 0;
     this._time = 0;
-    this.autoAim = autoAim;
   }
 
   update(dt) {
@@ -81,15 +78,6 @@ export class Player extends GameObject {
     this.pos.y = Math.min(Math.max(this.pos.y, maxY), height - maxY);
 
     let aim = this.input.mouse.subV(this.pos);
-    if (this.autoAim) {
-      const nearest = this._nearestZombie();
-      if (nearest) {
-        const toEnemy = nearest.pos.subV(this.pos);
-        if (toEnemy.lengthSqrt() > 1) {
-          aim = toEnemy;
-        }
-      }
-    }
     if (aim.lengthSqrt() > 1) {
       this._aimDirection = aim.divS(aim.length());
     }
@@ -104,21 +92,6 @@ export class Player extends GameObject {
     }
   }
 
-  _nearestZombie() {
-    let best = null;
-    let bestDistSq = Infinity;
-    for (const obj of this.container || []) {
-      if (!(obj instanceof Zombie)) continue;
-      const delta = obj.pos.subV(this.pos);
-      const distSq = delta.lengthSqrt();
-      if (distSq < bestDistSq) {
-        bestDistSq = distSq;
-        best = obj;
-      }
-    }
-    return best;
-  }
-
   shoot() {
     const aimAngle = Math.atan2(this._aimDirection.y, this._aimDirection.x);
     this._recoil = this._aimDirection.mulS(-this.recoilSpeed);

resources/js/main.js

@@ -46,7 +46,6 @@ window.addEventListener('orientationchange', resizeToWindow);
 resizeToWindow();
 
 const input = new Input(canvas, viewport);
-const isMobile = input.isMobile;
 
 const fullscreenButton = document.getElementById('fullscreen');
 const updateFullscreenLabel = () => {
@@ -87,9 +86,7 @@ const updateCamera = (cx, cy) => {
   camera.y = Math.min(Math.max(0, targetY), Math.max(0, WORLD_H - viewport.height));
 };
 
-let autoAim = isMobile;
 let muted = false;
-let autoAimNotice = 0;
 let muteNotice = 0;
 let gameStarted = false;
 let lastEventSeq = -1;
@@ -555,7 +552,6 @@ const Lobby = (() => {
   };
 
   el.name.value = me.name;
-  el.room.value = localStorage.getItem('zombies.room') || '';
 
   const setStatus = (text, error = false) => {
     el.status.textContent = text;
@@ -579,7 +575,20 @@ const Lobby = (() => {
       return;
     }
     const my = players.find((p) => p.id === me.id) || null;
-    el.players.textContent = `In room: ${players.map((p) => `${p.name}${p.host ? ' (host)' : ''}${p.id === me.id ? ' (you)' : ''}`).join(', ')}`;
+    el.players.textContent = '';
+    const title = document.createElement('div');
+    title.className = 'lobby-players-title';
+    title.textContent = 'Players';
+    el.players.appendChild(title);
+    for (const p of players) {
+      const row = document.createElement('div');
+      row.className = 'lobby-player';
+      row.textContent = `${p.name}${p.id === me.id ? ' (you)' : ''}${p.host ? ' (host)' : ''}`;
+      if (p.id === me.id) {
+        row.classList.add('you');
+      }
+      el.players.appendChild(row);
+    }
     el.roomCode.textContent = me.room;
     showInRoom();
     if (players.length === 1) {
@@ -917,11 +926,11 @@ const drawHud = (state, my, now, t) => {
   textRenderer.draw(renderer, `Score: ${my.score}`, 12, 12, { size: 20, fillStyle: '#fff' });
   textRenderer.draw(renderer, `HP: ${my.hp}`, 12, 40, { size: 20, fillStyle: '#fff' });
 
-  if (autoAim) {
-    const aaEntry = textRenderer.measure('AUTO-AIM', { size: 14, fillStyle: '#4fe3ff' });
-    textRenderer.draw(renderer, 'AUTO-AIM', viewport.width - aaEntry.width - 12, 12, {
-      size: 14,
-      fillStyle: '#4fe3ff',
+  if (my.dead && state.state === 'playing' && state.players.some((p) => p.id !== my.id && !p.dead)) {
+    const specEntry = textRenderer.measure('SPECTATING', { size: 20, fillStyle: '#8a8a8a' });
+    textRenderer.draw(renderer, 'SPECTATING', viewport.width / 2 - specEntry.width / 2, 60, {
+      size: 20,
+      fillStyle: '#8a8a8a',
     });
   }
 
@@ -947,15 +956,6 @@ const drawHud = (state, my, now, t) => {
       fillStyle: '#fff',
     });
   }
-  if (autoAimNotice > 0) {
-    autoAimNotice -= t;
-    const notice = autoAim ? 'Auto-aim ON' : 'Auto-aim OFF';
-    const entry = textRenderer.measure(notice, { size: 22, fillStyle: '#fff' });
-    textRenderer.draw(renderer, notice, viewport.width / 2 - entry.width / 2, viewport.height / 2 - 20, {
-      size: 22,
-      fillStyle: '#4fe3ff',
-    });
-  }
 
   void now;
 };
@@ -978,20 +978,18 @@ const gameLoop = (now) => {
     muted = sounds.toggleMuted();
     muteNotice = 1.2;
   }
-  if (!isMobile && input.pressed.has('q')) {
-    input.clearPressed();
-    autoAim = !autoAim;
-    autoAimNotice = 1.2;
-  }
 
   renderer.clear(0, 0, 0, 1);
 
   const snapshot = networking.curr;
   const frame = snapshot ? interpolate(now) : null;
   const own = frame ? frame.players.find((p) => p.id === me.id) || null : null;
-  if (own) {
-    entities.setTarget(own.x, own.y);
-    updateCamera(own.x, own.y);
+  const anchor = own
+    ? (own.dead ? frame.players.find((p) => p.id !== me.id && !p.dead) || own : own)
+    : null;
+  if (anchor) {
+    entities.setTarget(anchor.x, anchor.y);
+    updateCamera(anchor.x, anchor.y);
   } else {
     updateCamera(WORLD_W / 2, WORLD_H / 2);
   }
@@ -1084,7 +1082,6 @@ const gameLoop = (now) => {
       keys: [...input.keys],
       aim: { x: mouse.x - own.x, y: mouse.y - own.y },
       fire: input.mouseDown,
-      autoAim,
     });
   } else {
     networking.stopSendingInput();

resources/js/net/NetEntities.js

@@ -93,6 +93,9 @@ export class NetEntities {
       this._stampPlayer(view, snapshot, now);
       if (!snapshot.dead) {
         view.draw(renderer);
+        if (snapshot.name) {
+          this._drawName(snapshot, renderer, textRenderer);
+        }
       }
     }
 
@@ -110,6 +113,27 @@ export class NetEntities {
     this.players.clear();
   }
 
+  _drawName(snapshot, renderer, textRenderer) {
+    const hp = snapshot.hp ?? 0;
+    const mhp = snapshot.mhp ?? hp;
+    const label = `${snapshot.name}  HP: ${hp}/${mhp}`;
+    const opts = { size: 12, fillStyle: '#fff', bold: true };
+    const entry = textRenderer.measure(label, opts);
+
+    const barW = 40;
+    const barH = 4;
+    const barX = snapshot.x - barW / 2;
+    const barY = snapshot.y - PLAYER_SIZE / 2 - barH - 2;
+    renderer.drawTexture(renderer.whiteTexture, barX, barY, barW, barH, [0, 0, 0, 0.6]);
+    const ratio = mhp > 0 ? Math.max(0, Math.min(1, hp / mhp)) : 0;
+    if (ratio > 0) {
+      const color = ratio > 2 / 3 ? [0.3, 0.9, 0.35, 0.9] : ratio > 1 / 3 ? [0.95, 0.8, 0.2, 0.9] : [0.9, 0.25, 0.25, 0.9];
+      renderer.drawTexture(renderer.whiteTexture, barX, barY, barW * ratio, barH, color);
+    }
+
+    textRenderer.draw(renderer, label, snapshot.x - entry.width / 2, barY - entry.height - 2, opts);
+  }
+
   _stamp(view, entity, now) {
     view.pos.x = entity.x;
     view.pos.y = entity.y;

resources/js/net/NetworkClient.js

@@ -140,13 +140,12 @@ export class NetworkClient {
 
   _flushInput() {
     if (!this._input || !this._connected()) return;
-    const { id, keys, aim, fire, autoAim } = this._input;
+    const { id, keys, aim, fire } = this._input;
     this.socket.trigger('client-input', this._inputChannel(), {
       id,
       keys,
       aim,
       fire,
-      autoAim,
     });
   }