GBC Gemini Battleship Command

Command your fleet in this high-fidelity React Battleship game. Features ranked online matchmaking, hotseat multiplayer, and a ruthless algorithmic AI wrapped in a stunning sci-fi radar interface.

Comment

Description

Gemini Battleship Command (GBC) is a modern, immersive reimagining of the classic naval strategy game. Built for the web, it combines a retro-futuristic aesthetic with robust gameplay mechanics. Unlike standard grid games, GBC focuses on immersion through procedural sound synthesis, dynamic CSS radar animations, and a responsive "glassmorphism" UI. It features three distinct game modes: a Single Player campaign against an adaptive AI, Local Multiplayer for pass-and-play, and a real-time Online Multiplayer powered by WebSockets.

Inspiration

I wanted to move beyond the static, flat grids typical of board game clones. My inspiration came from sci-fi movie interfaces—specifically the tension of submarine warfare displays. I wanted the user to feel like a commander looking at a live radar feed rather than just clicking div elements. As a solo developer, I also wanted to challenge myself to build a full-stack real-time multiplayer system from scratch without relying on "black box" backend-as-a-service solutions.

What it does

  • Tactical AI: In single-player, the "Hard" difficulty AI uses a Probability Density Function (heatmap) to calculate the most statistically probable ship locations, making it a genuine challenge without cheating.
  • Real-Time Online Multiplayer: Users can queue up for "Ranked" matches. The custom Node.js/Socket.io server handles matchmaking, room creation, and state synchronization to prevent client-side cheating.
  • Procedural Audio Engine: The app uses the Web Audio API to synthesize sound effects (sonar pings, explosions, launch sounds) and uses the browser's Speech Synthesis API for voice status reports ("Target Destroyed", "We are hit"). No external audio files are loaded.
  • Immersive UI: Features a fully responsive 10x10 grid with drag-and-drop ship placement, rotation logic, and visual feedback for hits, misses, and sunk ships.

How I built it

  • Frontend: Built with React 19 and TypeScript. I used Tailwind CSS heavily for the radar aesthetics, using custom keyframe animations for the scanning lines and pulse effects. Lucide-React provides the iconography.
  • Backend: A custom Node.js server using Socket.io. It handles the matchmaking queue, game rooms, and validates shots server-side to ensure game integrity.
  • State Management: I used React's useState and useEffect for local state, and a custom socketService class to bridge the gap between React components and WebSocket events.
  • AI: The aiService.ts contains purely algorithmic logic. The "Hard" mode calculates potential ship placements for every remaining enemy ship to create a target heatmap.

Challenges I ran into

  • State Synchronization: Keeping the game state in sync between two online players was tricky. I had to ensure that when Player A fired, Player B's board updated immediately, and the turn switched only after the animation completed.
  • Mobile Responsiveness: Fitting two 10x10 grids and a log on a mobile screen is a UI nightmare. I solved this by implementing a "tab-like" view on mobile where you switch between "Radar (Target)" and "Fleet Status."
  • Audio Autoplay Policies: Browsers block audio contexts from starting without user interaction. I had to implement a lazy-loading strategy in my SoundService to initialize the AudioContext only after the first user click.

Accomplishments that I'm proud of

  • The "Heatmap" AI: Writing the logic for the Hard AI was satisfying. Watching it methodically hunt down a ship after a single hit feels very human-like.
  • The Sound Engine: I'm proud that the app has zero static assets for audio. Every beep and boop is generated mathematically on the fly, keeping the bundle size tiny.
  • Robust Disconnect Handling: Implementing the logic to detect when an opponent rage-quits or loses connection and awarding the victory to the remaining player ensures the game doesn't just hang indefinitely.

What I learned

I gained a deep understanding of WebSocket event-driven architecture. Handling the race conditions between a user clicking a cell and the server confirming the hit taught me a lot about optimistic UI updates versus server-authoritative state. I also learned how to use CSS gradients and masks to create complex visual effects like the rotating radar sweep without using HTML Canvas.

What's next for GBC Gemini Battleship Command

  • True GenAI Integration: While the current AI is algorithmic, I plan to integrate the Google Gemini API to provide "Chat" functionality where the enemy AI taunts you or comments on the battle state in real-time based on the game log.
  • Fleet Customization: allowing players to choose different fleet compositions (e.g., more submarines, fewer battleships).
  • Spectator Mode: Allowing others to join a room via ID and watch the battle unfold.

Built With

Share this project:

Updates