feat: add Ship-Class Silhouettes and Red Sunk Markers

test/web/test_ship_sprite.js

@@ -0,0 +1,27 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const zlib = require('node:zlib');
+
+const sprite = fs.readFileSync(path.join(__dirname, '../../data/ship-sprite.svg'), 'utf8');
+
+test('ship sprite contains four independently drawn class symbols', () => {
+  const ids = ['ship-1-cutter', 'ship-2-destroyer', 'ship-3-cruiser', 'ship-4-battleship'];
+  const symbols = ids.map(id => {
+    const match = sprite.match(new RegExp(`<symbol id="${id}" viewBox="([^"]+)">([\\s\\S]*?)</symbol>`));
+    assert.ok(match, `${id} is present`);
+    assert.match(match[1], /0 0 \d+ \d+/);
+    return match[2];
+  });
+  assert.equal(new Set(symbols).size, ids.length);
+  assert.ok(Buffer.byteLength(sprite) < 15 * 1024);
+  assert.ok(zlib.gzipSync(sprite).length < 5 * 1024);
+});
+
+test('fleet CSS provides a shared red sunk cross overlay', () => {
+  const css = fs.readFileSync(path.join(__dirname, '../../data/styles.css'), 'utf8');
+  assert.match(css, /\.fleet-ship\.sunk::before, \.fleet-ship\.sunk::after/);
+  assert.match(css, /border-top: \.16rem solid #ff5f55/);
+  assert.match(css, /border-radius: 99rem/);
+});