give Battleships & Destroyers health, make shells more frequent & larger

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { Layer } from './Layer';
-import { Game, Player, Unit } from '../../../core/game/Game';
+import { Game, Player, Unit, UnitType } from '../../../core/game/Game';
 import { ClientID } from '../../../core/Schemas';
 import { EventBus } from '../../../core/EventBus';
 import { TransformHandler } from '../TransformHandler';
@@ -55,7 +55,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
             this.player = owner;
             this.setVisible(true);
         } else if (!tile.isLand()) {
-            const units = this.game.units()
+            const units = this.game.units(UnitType.Destroyer, UnitType.Battleship)
                 .filter(u => euclideanDist(worldCoord, u.tile().cell()) < 50)
                 .sort(distSortUnit(tile));
 
@@ -71,9 +71,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     }
 
     tick() {
-        if (this.game.ticks() % 10 == 0) {
-            this.requestUpdate()
-        }
+        this.requestUpdate()
         // Implementation for Layer interface
     }
 
@@ -111,13 +109,16 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     private renderUnitInfo(unit: Unit) {
         const isAlly = (unit.owner() == this.myPlayer() || this.myPlayer()?.isAlliedWith(unit.owner())) ?? false;
         return html`
-            <div class="info-content">
-                <div class="player-name ${isAlly ? 'ally' : ''}">${unit.owner().name()}</div>
-                <div class="unit-details">
-                    <div class="type-label">${unit.type()}</div>
-                </div>
+        <div class="info-content">
+            <div class="player-name ${isAlly ? 'ally' : ''}">${unit.owner().name()}</div>
+            <div class="unit-details">
+                <div class="type-label">${unit.type()}</div>
+                ${unit.hasHealth() ? html`
+                    <div class="type-label">Health: ${unit.health()}</div>
+                ` : ''}
             </div>
-            `
+        </div>
+    `
     }
 
     render() {

src/client/graphics/layers/UnitLayer.ts

@@ -25,6 +25,8 @@ export class UnitLayer implements Layer {
 
     private myPlayer: Player | null = null
 
+    private oldShellTile = new Map<Unit, Tile>()
+
 
     constructor(private game: Game, private eventBus: EventBus, private clientID: ClientID) {
         this.theme = game.config().theme();
@@ -143,11 +145,18 @@ export class UnitLayer implements Layer {
 
     private handleShellEvent(event: UnitEvent) {
         const rel = this.relationship(event.unit)
+
         this.clearCell(event.oldTile.cell())
+        if (this.oldShellTile.has(event.unit)) {
+            this.clearCell(this.oldShellTile.get(event.unit).cell())
+        }
+
+        this.oldShellTile.set(event.unit, event.oldTile)
         if (!event.unit.isActive()) {
             return
         }
         this.paintCell(event.unit.tile().cell(), rel, this.theme.borderColor(event.unit.owner().info()), 255)
+        this.paintCell(event.oldTile.cell(), rel, this.theme.borderColor(event.unit.owner().info()), 255)
     }