feat: create recognizable Early-20th-Century Warship Silhouettes
This commit is contained in:
@@ -1336,3 +1336,219 @@ After implementation, report:
|
||||
- Measurements: `test/web/test_ship_sprite.js` verifies all four distinct symbols, sprite raw size below 15 KiB, and shared cross styling; it and the existing interaction tests passed 6/6. `make -C test/host run`, `node --check data/app.js`, `git diff --check`, `pio run -e esp32-c6-devkitm-1 -t buildfs`, and `pio run -e esp32-c6-devkitm-1` passed. Sprite size is 1,032 B raw / 419 B gzip; related CSS is 11,721 B raw / 3,130 B gzip; JavaScript is 23,305 B raw / 6,299 B gzip; the generated LittleFS image is 2,031,616 B. Firmware uses 39,588 / 327,680 B RAM (12.1%) and 1,019,306 / 2,097,152 B flash (48.6%).
|
||||
- Issues or deviations: No browser backend is attached in this environment, so live mobile/tablet screenshots and visual cross-readability checks remain physical-browser verification steps. No firmware or filesystem upload was performed.
|
||||
- Next action: Milestone 020 is not started.
|
||||
|
||||
|
||||
# Milestone 020 — Amendment: Recognizable Early-20th-Century Warship Silhouettes
|
||||
|
||||
**Status:** DONE
|
||||
**Depends on:** Milestone 019
|
||||
|
||||
Redesign the fleet SVG artwork. The current silhouettes look like generic boats and do not clearly represent early-20th-century warships.
|
||||
|
||||
Create four independently illustrated side-profile silhouettes inspired by naval vessels from approximately 1905–1918.
|
||||
|
||||
Do not copy a specific historical ship exactly. Use historically recognizable class characteristics while keeping the artwork simple enough for a compact game interface.
|
||||
|
||||
## General art direction
|
||||
|
||||
All vessels must:
|
||||
|
||||
- use a consistent horizontal side view;
|
||||
- have the bow facing right;
|
||||
- share a consistent waterline and baseline;
|
||||
- look like steel military vessels, not civilian boats or modern yachts;
|
||||
- use early-20th-century funnels, masts, bridges, and gun arrangements;
|
||||
- avoid modern missile launchers, radar domes, aircraft decks, submarines, and contemporary angular stealth profiles;
|
||||
- remain recognizable at mobile size;
|
||||
- use clean filled shapes rather than thin technical line drawings;
|
||||
- preserve their aspect ratios;
|
||||
- have independently drawn geometry rather than stretched copies of one vessel.
|
||||
|
||||
Use restrained detail. At small sizes, emphasize the features that distinguish each class rather than adding tiny historically accurate details that disappear when rendered.
|
||||
|
||||
## Class 1: Cutter or torpedo boat
|
||||
|
||||
The one-cell ship should appear small, fast, and lightly armed.
|
||||
|
||||
Required identifying features:
|
||||
|
||||
- short, narrow, low hull;
|
||||
- noticeably raised bow;
|
||||
- compact wheelhouse;
|
||||
- one small funnel;
|
||||
- one short mast or signal pole;
|
||||
- one small gun near the bow;
|
||||
- minimal rear superstructure.
|
||||
|
||||
It must not look like a fishing boat, yacht, tugboat, or miniature battleship.
|
||||
|
||||
## Class 2: Destroyer
|
||||
|
||||
The two-cell ship should have the characteristic long, narrow profile of an early destroyer.
|
||||
|
||||
Required identifying features:
|
||||
|
||||
- long, low hull;
|
||||
- raised forecastle;
|
||||
- small bridge near the forward section;
|
||||
- two or three narrow funnels;
|
||||
- a light mast;
|
||||
- small guns positioned toward the bow and stern;
|
||||
- a relatively open deck;
|
||||
- narrow stern.
|
||||
|
||||
The multiple funnels and long, light hull should make it immediately distinguishable from the cutter and cruiser.
|
||||
|
||||
## Class 3: Cruiser
|
||||
|
||||
The three-cell ship should look heavier and taller than the destroyer without reaching battleship proportions.
|
||||
|
||||
Required identifying features:
|
||||
|
||||
- deeper and longer hull;
|
||||
- more substantial bow and stern;
|
||||
- larger central superstructure;
|
||||
- two prominent funnels;
|
||||
- one or two visible masts;
|
||||
- several medium gun positions;
|
||||
- visibly greater freeboard than the destroyer;
|
||||
- balanced profile with significant structure across the middle of the ship.
|
||||
|
||||
It must not look like a destroyer stretched horizontally.
|
||||
|
||||
## Class 4: Battleship or dreadnought
|
||||
|
||||
The four-cell ship should be the heaviest and most visually dominant vessel.
|
||||
|
||||
Required identifying features:
|
||||
|
||||
- long, deep, massive hull;
|
||||
- high freeboard;
|
||||
- heavy main-gun turrets near the bow and stern;
|
||||
- clearly visible large gun barrels;
|
||||
- substantial bridge and central superstructure;
|
||||
- two large funnels;
|
||||
- prominent mast or tripod-style mast;
|
||||
- broad visual mass through the center;
|
||||
- a heavier bow and stern profile than every other class.
|
||||
|
||||
The battleship must remain identifiable even when shown without its label.
|
||||
|
||||
## Visual hierarchy and proportional scale
|
||||
|
||||
Use proportional width based on fleet class:
|
||||
|
||||
- cutter: approximately 1 visual unit;
|
||||
- destroyer: approximately 2 units;
|
||||
- cruiser: approximately 3 units;
|
||||
- battleship: approximately 4 units.
|
||||
|
||||
Height should also communicate class:
|
||||
|
||||
- cutter: lowest and lightest;
|
||||
- destroyer: long but relatively low;
|
||||
- cruiser: visibly taller and heavier;
|
||||
- battleship: tallest and most massive.
|
||||
|
||||
Do not force every ship into an identical-height bounding box if that destroys the class differences. Instead, place them inside consistently aligned fleet-item containers with a shared waterline.
|
||||
|
||||
Recommended SVG construction:
|
||||
|
||||
- separate `<symbol>` and `viewBox` for every class;
|
||||
- hull as the primary filled shape;
|
||||
- superstructure as one or two simplified filled shapes;
|
||||
- funnels, masts, and guns with a minimum visual thickness that survives mobile rendering;
|
||||
- optional subtle deck or waterline cutout;
|
||||
- no filters, raster textures, embedded images, or unnecessary path complexity.
|
||||
|
||||
## Small-size legibility
|
||||
|
||||
Test every silhouette at its actual mobile display size, not only at an enlarged development preview.
|
||||
|
||||
At the final size:
|
||||
|
||||
- funnels must not merge into one indistinct block;
|
||||
- gun barrels must remain visible;
|
||||
- masts must not disappear;
|
||||
- the gap between major structures must remain readable;
|
||||
- the bow direction must remain obvious;
|
||||
- adjacent ships must not visually merge;
|
||||
- silhouettes must not appear blurry or unevenly scaled.
|
||||
|
||||
Slightly exaggerate turrets, funnels, and superstructures when necessary for recognition.
|
||||
|
||||
## Fleet-list layout
|
||||
|
||||
Improve the current fleet presentation:
|
||||
|
||||
- align class names in a consistent label column;
|
||||
- align all ship silhouettes on a shared waterline;
|
||||
- keep predictable spacing between repeated ships;
|
||||
- give the artwork more horizontal room;
|
||||
- avoid making silhouettes so small that their class-specific features disappear;
|
||||
- keep each class on its own row;
|
||||
- preserve the order:
|
||||
1. “Линкор”;
|
||||
2. “Крейсер”;
|
||||
3. “Эсминец”;
|
||||
4. “Катер”.
|
||||
|
||||
On narrow mobile screens, reduce spacing before reducing ship artwork below its recognizable minimum size.
|
||||
|
||||
## Sunk appearance
|
||||
|
||||
Keep the requested red-cross treatment.
|
||||
|
||||
For each sunk ship:
|
||||
|
||||
- retain the recognizable silhouette underneath;
|
||||
- reduce the ship opacity moderately;
|
||||
- overlay an individual red X across that ship only;
|
||||
- use two clean diagonal strokes;
|
||||
- use rounded stroke caps;
|
||||
- ensure the X follows the complete width and height of the particular vessel;
|
||||
- prevent the X from crossing adjacent ships or the class label.
|
||||
|
||||
Use a strong naval-warning red with sufficient contrast against both the white silhouette and dark background.
|
||||
|
||||
The red X must not be the only indication of state. Also apply a muted silhouette treatment and an accessible “потоплен” label.
|
||||
|
||||
## Review requirement
|
||||
|
||||
Before integrating the artwork, render a visual reference sheet containing:
|
||||
|
||||
- all four classes at enlarged size;
|
||||
- all four classes at their actual mobile size;
|
||||
- alive and sunk versions;
|
||||
- the complete classic fleet in its final mobile layout.
|
||||
|
||||
Review the reference sheet for recognizability before replacing the production assets.
|
||||
|
||||
A reviewer should be able to identify the battleship, cruiser, destroyer, and cutter from their silhouettes without reading the labels.
|
||||
|
||||
## Acceptance criteria
|
||||
|
||||
- Every class uses unique SVG geometry.
|
||||
- The ships visually evoke the 1905–1918 naval period.
|
||||
- The battleship has recognizable heavy turrets and a massive hull.
|
||||
- The cruiser has a substantial superstructure and medium armament.
|
||||
- The destroyer has a long, light hull and multiple narrow funnels.
|
||||
- The cutter is visibly small and lightly armed.
|
||||
- All silhouettes remain recognizable at the actual mobile size.
|
||||
- Sunk ships use an individual red X without obscuring adjacent ships.
|
||||
- The complete fleet fits on mobile without horizontal page overflow.
|
||||
- The SVG sprite remains local, compact, and compatible with the existing LittleFS asset pipeline.
|
||||
- The implementation does not expose opponent ship positions or orientations.
|
||||
|
||||
At completion, provide the reference sheet, screenshots of the mobile and tablet fleet lists, the SVG sprite size before and after gzip, and the resulting LittleFS size delta.
|
||||
|
||||
### Execution record
|
||||
|
||||
- Date: 2026-08-30
|
||||
- Board model and revision: ESP32-C6FH4 QFN32, revision v0.2.
|
||||
- Toolchain and library versions: PlatformIO Core 6.1.19; `espressif32` 7.0.1; ESP-IDF 6.0.1; `esp_littlefs` 1.20.4.
|
||||
- Result: PASS, pending live-browser visual capture.
|
||||
- Evidence: Replaced the four fleet symbols with independently drawn, filled side profiles inspired by 1905–1918 naval vessels: a low cutter with one funnel and light bow gun, a long destroyer with three narrow funnels, a taller cruiser with two funnels and medium armament, and a broad battleship with a deep hull, turret/gun groups, heavy superstructure, two funnels, and mast. The renderer now assigns every external SVG `<use>` instance its matching class-specific `viewBox` and `preserveAspectRatio`, correcting the former common default viewport that made the silhouettes appear the same. Rows retain the required order and a shared waterline, with class-proportional widths. The red X stays at 96% opacity above only the 48%-opacity sunk silhouette. The review sheet is `docs/ship-silhouette-reference.html` and references the production sprite for enlarged, sunk, and complete compact mobile-fleet variants.
|
||||
- Measurements: `node --test test/web/test_target_interaction.js test/web/test_ship_sprite.js` passed 7/7, including the class-specific viewport assertion; `make -C test/host run`, `node --check data/app.js`, `git diff --check`, `pio run -e esp32-c6-devkitm-1 -t buildfs`, and `pio run -e esp32-c6-devkitm-1` passed. The sprite changed from 1,032 B to 975 B raw and from 419 B to 496 B gzip; it remains below the 15 KiB / 5 KiB targets. The generated LittleFS image remains the fixed 2,031,616-B partition image (0-B image-size delta). Firmware uses 39,588 / 327,680 B RAM (12.1%) and 1,019,248 / 2,097,152 B flash (48.6%). Static assets now use `no-cache`, so an updated filesystem upload is revalidated instead of retaining the prior sprite/app bundle.
|
||||
- Issues or deviations: This environment has neither a Chromium executable nor an attached browser backend, so screenshots and live mobile/tablet inspection could not be captured. No firmware or filesystem upload was performed.
|
||||
- Next action: No subsequent milestone was started.
|
||||
|
||||
Reference in New Issue
Block a user