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);
  assert.doesNotMatch(sprite, /stroke=/);
});

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/);
  assert.match(css, /\.fleet-ship\.sunk svg \{ opacity: \.48; \}/);
});

test('fleet renderer gives every external symbol its own viewport', () => {
  const app = fs.readFileSync(path.join(__dirname, '../../data/app.js'), 'utf8');
  assert.match(app, /viewBox: '0 0 192 50'/);
  assert.match(app, /viewBox: '0 0 144 40'/);
  assert.match(app, /viewBox: '0 0 96 30'/);
  assert.match(app, /viewBox: '0 0 48 26'/);
  assert.match(app, /svg\.setAttribute\('viewBox', shipClass\.viewBox\)/);
  assert.match(app, /preserveAspectRatio', 'xMidYMax meet'/);
});