A real-time, two-player Battleship you play from a link. No login, no profiles, no matchmaking: one player creates a room, shares the code, and the match begins.
Play at naval.zone · Web game · React and Supabase
Every screen now has a phone layout, so the MOBILE ACCESS DENIED notice is gone. Battle splits into Target and Your Fleet tabs, and when the enemy fires the fleet stays up long enough to see where the shot landed. A phone woken from sleep checks its link and rejoins the room on its own.
INFO opens a tabbed panel with an illustrated rules guide: the goal, the fleet, a turn, the uplinks and the clock, each as a small diagram. Every number in it comes from the game's own constants. Sound gets a panel too, with separate music and effects levels, and the moves that used to be silent now make a noise.
CYAN · cyan light on a teal-black field, hits in orange
The console now comes in eight themes, picked from a panel in the dock: six dark and two light, with VOID taking over from MONO. Each one is only a set of colour tokens, so the screen underneath never changes. Click the shot or pick a swatch to compare them.
All four power-ups get sharper rules. A Radar Scan leaves a box on the board that counts down as its tiles are hit, Shield hides a deflected hit from the attacker, Rapid's salvo ends the turn, and Ghost can move any ship still afloat. Every ability now shares one dotted yellow mark.
A second look for the console: cold grey everywhere, so the only colour left on screen is red, and red always means damage.
The result screen becomes a debrief: the sunk fleet rises in 3D inside a wireframe cube, next to side-by-side stats and the full log. It reads the same on a win or a loss.
The combat log is now a tree: one branch per turn, every shot under it, and the last move flashes. It takes the whole right column.
No one to play? Pick Easy, Normal or Hard and play the computer right in the tab. It plays fair: it only knows what its own shots have told it.
A coin flip decides who opens, and each rematch hands the first shot to the other player. If someone's connection drops, both clocks pause; if they don't come back, they forfeit. Under the hood, every move is now a small pure function, and the database guards who sits in a room.
I wrote up how Naval Zone works and what the hard parts were: shot ownership, the database as the single source of truth, and rooms sealed with anonymous auth. Read it on em97.blog.
Music that follows the phase of the match, with glitch transitions between lobby, placement and battle, and a shared audio engine for the sound effects on every shot, hit and sink.
One rule change: a hit now keeps your turn, and only a miss hands it over.
The game becomes Naval Zone, with its own domain at naval.zone, new ship artwork for the icon and an updated intro map. Colour contrast now passes WCAG AA, and narrow screens get a MOBILE ACCESS DENIED notice for now.
Every player signs in anonymously and silently, and that identity is what row-level security keys off, so only the two people in a room can write to it. Stale rooms expire, and the footer becomes a live connection indicator.
The full game state now lives in a single database column, and the opponent syncs off that one stream of updates, so a move can never be applied twice. Clocks stop drifting between devices, rematches work, resigning forfeits properly, and the game logic gets a test suite.
The end of a match: an isometric recap of the final board, with hits, misses, accuracy, ships destroyed, the longest streak, and the fastest and slowest turn.
Four power-ups, Rapid, Shield, Ghost and Radar Scan, and a 3+2 blitz clock where running out of time loses the match. Damage now shows on the board and in the fleet roster.
The playing phase gets its screen: the boards, a timer panel, rank insignia and the fleet roster.
Built from the Figma design: drag five ships onto a 10×10 grid, rotate them, and mark yourself ready.
An animated world map and a boot intro, with one button to create a game and one field to join with a code.
The repo starts. A week later it's a React and TypeScript scaffold on top of a design system drawn in Figma.
Read the full write-up, or follow along on X.