feat: touch long-press + drag for warship multi-select on mobile

- Hold finger ~800ms to activate selection mode
- Drag to draw selection box (same pixel-dashed style as desktop)
- Release to select warships, tap water to send them
- Long-press cancelled if finger moves >10px before timer fires
- Single SelectionBoxLayer handles both Shift+drag and touch long-press

Author: baculinivan-web

src/client/InputHandler.ts

@@ -126,6 +126,14 @@ export class WarshipMultiSelectionEvent implements GameEvent {
   constructor(public readonly units: UnitView[]) {}
 }
 
+/** Emitted when a touch long-press is detected (shows crosshair indicator) */
+export class TouchLongPressStartEvent implements GameEvent {
+  constructor(
+    public readonly x: number,
+    public readonly y: number,
+  ) {}
+}
+
 export class ShowBuildMenuEvent implements GameEvent {
   constructor(
     public readonly x: number,
@@ -197,6 +205,11 @@ export class InputHandler {
   // Warship selection box state
   private selectionBoxActive: boolean = false;
 
+  // Touch long-press state
+  private longPressTimer: ReturnType<typeof setTimeout> | null = null;
+  private longPressActive: boolean = false;
+  private readonly LONG_PRESS_MS = 800;
+
   private moveInterval: NodeJS.Timeout | null = null;
   private activeKeys = new Set<string>();
   private keybinds: Record<string, string> = {};
@@ -256,6 +269,11 @@ export class InputHandler {
       }
       this.pointerDown = false;
       this.pointers.clear();
+      if (this.longPressTimer !== null) {
+        clearTimeout(this.longPressTimer);
+        this.longPressTimer = null;
+      }
+      this.longPressActive = false;
       this.canvas.style.cursor = "";
     });
     this.pointers.clear();
@@ -528,6 +546,22 @@ export class InputHandler {
       this.lastPointerDownY = event.clientY;
 
       this.eventBus.emit(new MouseDownEvent(event.clientX, event.clientY));
+
+      // Start long-press timer for touch devices
+      if (event.pointerType === "touch") {
+        this.longPressActive = false;
+        this.longPressTimer = setTimeout(() => {
+          this.longPressTimer = null;
+          this.longPressActive = true;
+          this.canvas.style.cursor = "crosshair";
+          this.eventBus.emit(
+            new TouchLongPressStartEvent(
+              this.lastPointerDownX,
+              this.lastPointerDownY,
+            ),
+          );
+        }, this.LONG_PRESS_MS);
+      }
     } else if (this.pointers.size === 2) {
       this.lastPinchDistance = this.getPinchDistance();
     }
@@ -545,6 +579,17 @@ export class InputHandler {
     this.pointerDown = false;
     this.pointers.clear();
 
+    // Clean up long-press state
+    if (this.longPressTimer !== null) {
+      clearTimeout(this.longPressTimer);
+      this.longPressTimer = null;
+    }
+    const wasLongPress = this.longPressActive;
+    this.longPressActive = false;
+    if (wasLongPress) {
+      this.canvas.style.cursor = "";
+    }
+
     // Complete selection box if it was active
     if (this.selectionBoxActive) {
       this.selectionBoxActive = false;
@@ -656,8 +701,19 @@ export class InputHandler {
       const deltaX = event.clientX - this.lastPointerX;
       const deltaY = event.clientY - this.lastPointerY;
 
-      // If shift is held, draw selection box instead of panning
-      if (this.activeKeys.has(this.keybinds.shiftKey)) {
+      // Cancel long-press if finger moved significantly before timer fires
+      if (this.longPressTimer !== null) {
+        const moveDist =
+          Math.abs(event.clientX - this.lastPointerDownX) +
+          Math.abs(event.clientY - this.lastPointerDownY);
+        if (moveDist >= 10) {
+          clearTimeout(this.longPressTimer);
+          this.longPressTimer = null;
+        }
+      }
+
+      // If shift is held OR touch long-press is active, draw selection box
+      if (this.activeKeys.has(this.keybinds.shiftKey) || this.longPressActive) {
         this.selectionBoxActive = true;
         this.eventBus.emit(
           new WarshipSelectionBoxUpdateEvent(

src/client/graphics/layers/SelectionBoxLayer.ts

@@ -10,8 +10,8 @@ import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
 /**
- * Renders the shift+drag warship selection rectangle in world-space,
- * using the same pixel-dashed style as the warship selection box in UILayer.
+ * Renders the shift+drag / touch long-press warship selection rectangle
+ * in world-space, using the same pixel-dashed style as UILayer.
  */
 export class SelectionBoxLayer implements Layer {
   private active = false;
@@ -63,7 +63,6 @@ export class SelectionBoxLayer implements Layer {
   renderLayer(context: CanvasRenderingContext2D) {
     if (!this.active || !this.ctx) return;
 
-    // Convert screen corners to world coordinates
     const topLeft = this.transformHandler.screenToWorldCoordinates(
       Math.min(this.startX, this.endX),
       Math.min(this.startY, this.endY),
@@ -78,31 +77,26 @@ export class SelectionBoxLayer implements Layer {
     const wx2 = Math.floor(bottomRight.x);
     const wy2 = Math.floor(bottomRight.y);
 
-    // Clamp to canvas bounds to avoid out-of-bounds fillRect
     const cx1 = Math.max(0, wx1);
     const cy1 = Math.max(0, wy1);
     const cx2 = Math.min(this.canvas.width - 1, wx2);
     const cy2 = Math.min(this.canvas.height - 1, wy2);
 
     if (cx2 <= cx1 || cy2 <= cy1) return;
 
-    // Player color — fall back to a neutral cyan if no player yet
     const myPlayer = this.game.myPlayer();
     const baseColor = myPlayer ? myPlayer.territoryColor().lighten(0.2) : null;
     const colorStr = baseColor
       ? baseColor.alpha(0.85).toRgbString()
       : "rgba(100,200,255,0.85)";
 
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-    // Draw dashed border using 4 line passes (O(n) not O(n²))
     this.ctx.fillStyle = colorStr;
-    this.drawDashedLine(this.ctx, cx1, cy1, cx2, cy1); // top
-    this.drawDashedLine(this.ctx, cx1, cy2, cx2, cy2); // bottom
-    this.drawDashedLine(this.ctx, cx1, cy1, cx1, cy2); // left
-    this.drawDashedLine(this.ctx, cx2, cy1, cx2, cy2); // right
+    this.drawDashedLine(this.ctx, cx1, cy1, cx2, cy1);
+    this.drawDashedLine(this.ctx, cx1, cy2, cx2, cy2);
+    this.drawDashedLine(this.ctx, cx1, cy1, cx1, cy2);
+    this.drawDashedLine(this.ctx, cx2, cy1, cx2, cy2);
 
-    // Subtle fill
     this.ctx.fillStyle = baseColor
       ? baseColor.alpha(0.06).toRgbString()
       : "rgba(100,200,255,0.06)";
@@ -117,7 +111,6 @@ export class SelectionBoxLayer implements Layer {
     );
   }
 
-  /** Draw a dashed 1px line using the (x+y) % 2 pattern to match UILayer style */
   private drawDashedLine(
     ctx: CanvasRenderingContext2D,
     x1: number,