The BattleCommand website serves as the digital command center for an innovative reimagining of the classic Battleship game. By blending traditional gameplay with modern technology, the website bridges generations, offering nostalgic adults and curious kids an exciting, immersive gaming experience. Players will find a hub for game rules, interactive features, and cutting-edge integrations, such as voice commands, LED feedback, and OpenCV-powered ship detection. Whether you're here to learn the game, explore the hardware setup, or dive into a new battle, the BattleCommand website makes it seamless, engaging, and accessible.

• Educating players about the game and its rules.

• Providing a platform to interact with the game hardware.

• Enhancing the user experience with integrated technology.

The website is split into 4 pages:

• Home page: Introduces the game, showcases the project's goals, and sets the tone with a visually appealing gradient background. Details how the physical board and components like the camera, LED lights, and voice recognition enhance gameplay.

• Game page:  Provides the user to select the difficulty of the game, number of ships to use in this game and lets him play on teh website also.

• Rules page: Offers a clear and concise explanation of how to play Battleship and introduces the technological advancements, like OpenCV and LED systems.

• About us page: Provides users with information of the team behind the project. Provides a space for users to leave feedback or seek assistance.

• Gradient-based visually immersive design.

• Progressive enhancement with animations (e.g., fading elements for better engagement).

• External links for additional thematic context (e.g., Geneva Conventions).

• Accessibility for diverse audiences.

• Frontend: React, Next.js, and Tailwind CSS for fast, responsive design.

• Integrations: OpenCV for camera processing, voice commands, and LED systems for real-time feedback.

• Supabase: Hosts backend server and database integration.

• Vercel: Hosts the frontend of our website

• Multiplayer integration.

• Advanced analytics for player feedback.

• Various difficulties of gameplay.

The backend of the website will not be very complex. On the backend, just the game algorithm will run whenever a customer will want to start a session. For this, Supabase backend server will be used because it has free access for students and allows also for database development on their backend by using Supabase keys. The user authentication functionality will also be done via Supabase as it will make working with the database and different type of customers/users much easier. The backend server will communicate with the PIC via the database, so between a game and user tables there will be a user_game table to connect each user to a specific game. This feature can be then easily extended to a multiplayer version of the game.  The bot logic will have different difficulty levels, so there will be 3 versions of the bot on the backend: easy, normal, hard. This feature will ensure that users of different experience can all enjoy the game.

To host the website, Vercel is used as it is a free hosting service for students and allows the possibility to use different hosting environments, like production and development, but for the sense of this project, only a production environment will be used. The website can already be accessed through this link: https://engineering-experience-3.vercel.app/ . The website will include features like animations for the front end to make it more fun and more enjoying for the customers to use and also to include "gamification" features that attract and retain the attention of the customers. After thorough research, the front end part of the website will make use of component libraries and libraries that include animations, instead of doing CSS animations:

• AOS

• Tailwind animations classes

• Wow js

• Anime js

Now, let's take a look at our website. This is just a prototype, there is much more work to do.

This are screenshots of the homepage. The second picture is zoomed out so the footer can also fit inside the screenshot.

A dedicated graphical interface has been developed to work concurrently with the physical board. On the website, the board displayed represents the bot's board, and from this interface, the player can choose the level of difficulty for the game.

• Easy:
  The bot employs a basic target-and-hunt strategy. It initially fires at random squares until it registers a hit. Once a ship is detected, the bot queues the adjacent cells and proceeds to target those one by one until it fully uncovers the ship.

• Normal:
  In this mode, the bot uses a probability-based strategy. Before each turn, the system calculates the likelihood of finding a ship of each remaining dimension by considering the current state of hits and misses. All these probability matrices are then summed into a single probability grid. The bot selects the square with the highest probability value to attack. This approach ensures that the bot makes informed decisions, generally giving it an advantage over random guessing.

• Hard:
  The hard level builds upon the normal mode’s probability strategy but introduces an extra twist. When the bot scores a hit, it immediately sinks the entire ship in one turn—destroying all segments of that ship. In contrast, the human player must manually hit every individual cell to sink a ship. This added advantage makes the hard level significantly more challenging to beat, though victory is still within reach.

Below, you can see screenshots of the front-end interface along with console logs that demonstrate how the probability grid evolves and how the bot strategizes its attacks during gameplay.

• Easy difficulty:

• Hard difficulty:

Below is a summary of the key UI and UX improvements we’ve shipped in the latest version of our Battleship web interface. (Screenshots to be added.)

Old	New	Description
Easy	Normal	Basic “target-and-hunt” queue strategy
Medium	Hard	Probability-grid AI that picks the highest-chance cell
Hard	removed	Entire-ship sink on first hit (reserved as “Insane”)

In future: if we re-add the old “hard” sink-in-one-turn mode, we’ll call it Insane or Impossible.

• Grid headers (A–J / 1–10) rendered in the same React grid as the game board.

• Hit/miss feedback:

  • Green dropping “water drop” + smoke animation

  • White “✕” on misses

• LED integration remains under the hood, updating on every turn.

1. Bad image → Overlay: invites retry or random fallback

2. No camera access → Test-mode toggle

3. LED resets on mount/unmount with a 1 s debounce

4. Voice recognition sends an alert or error to the user