🚢 Battleship - The Server-Controlled Game

Welcome to a modern, web-based implementation of the classic Battleship game! This project features a dynamic frontend built with JavaScript and a smart Node.js backend that controls the opponent's moves, including a special "Rapid Fire" batch move feature.

---

✨ Key Features

• Interactive Gameplay: A visually appealing and responsive game board.
• MVC Architecture: Clean separation of concerns on the frontend using the Model-View-Controller pattern.
• Node.js Server: A custom backend server provides game moves via an API.
• Single & Rapid Fire Modes:
  • 🔥 Single Fire: Request one strategic move from the server.
  • 💣 Rapid Fire: Unleash a random salvo of 3-12 moves at once!
• Smart Stateful Server: The server remembers moves sent to each client during a session to avoid sending duplicates, making it a more realistic opponent.
• Dynamic UI: Smooth animations for hits, misses, and sinking ships enhance the user experience.
• Client-Server Sync: Robust logic ensures that the game state remains synchronized between the client and server, even on page reloads.

---

💻 Tech Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+), jQuery (for AJAX)
• Backend: Node.js
• APIs: Custom HTTP-based API, whatwg-url for server-side URL parsing.

---

📂 Project Structure

The project is organized into two main parts: frontend and backend.

Battleship-Server/
├── backend/
│   ├── server.js             # Main Node.js server file
│   ├── battleshipmoves.js    # Logic for generating unique moves
│   └── package.json          # Server dependencies
│
└── frontend/
    ├── index.html            # Welcome/Login page
    ├── gameplay.html         # The main game page
    └── assets/
        ├── css/
        │   └── style.css     # All styles for the application
        ├── js/
        │   ├── app.js        # Main controller logic (init, game loop)
        │   ├── listeners.js  # DOM event listeners (clicks, etc.)
        │   ├── models.js     # Data model (Ship, Board state)
        │   └── view.js       # DOM manipulation (rendering the board/messages)
        └── images/
            └── ...           # Ship images for hits

---

🚀 Getting Started

Follow these instructions to get the project running on your local machine.

Prerequisites

You must have Node.js and npm (which comes with Node.js) installed on your system.

Installation & Setup

1. Clone the repository:

   git clone https://github.com/TylerFortune/Battleship-Server.git
   cd Battleship-Server

2. Install backend dependencies: Navigate to the backend directory and install the required npm packages.

   cd backend
   npm install

Running the Application

1. Start the backend server: From the /backend directory, run:

   npm start

   You should see a confirmation message in your terminal: Battleship server is running at http://127.0.0.1:3000.

2. Launch the frontend: Open the frontend/index.html file in your favorite web browser. You can usually do this by double-clicking the file.

---

🎮 How to Play

1. Enter a username on the welcome screen and click "Start Game".
2. The game board will appear. You cannot click the board directly.
3. Click "Single Fire" to request one move from the server. The result (hit, miss, or sunk) will be displayed on the board and in the message log.
4. Click "Rapid Fire" to request a random batch of moves. Watch as the server executes them in quick succession!
5. The game is over when all enemy ships have been sunk.

---

🧠 Key Design Features & Server Logic

This project goes beyond a simple frontend game by incorporating a "smart" backend server.

MVC Pattern (Frontend)

The client-side code is structured using the Model-View-Controller pattern to ensure a clean separation of concerns:

• Model (models.js): Manages all game data and state. It knows where the ships are, what cells have been hit, and the rules of the game. It has no knowledge of the HTML.
• View (view.js): Responsible for all DOM manipulation. It renders the board, displays messages, and updates cell appearances based on instructions from the controller. It doesn't know any game rules.
• Controller (app.js, listeners.js): Acts as the bridge. It handles user input (button clicks), communicates with the server to get moves, and tells the Model and View how to update.

Stateful Server Memory 🧠

While HTTP is stateless, our server simulates a "stateful" session for each player to provide a better game experience.

• In-Memory Storage: The server uses a JavaScript Map (clientMoveHistory) to store the moves it has already sent to each player.
• Client Identification: Each player is identified by their IP address, which acts as the key in the Map.
• Guaranteed Unique Moves: For each player's session, the server stores their moves in a Set. When generating a new move, it repeatedly creates random coordinates until it finds one that is not in that player's Set, guaranteeing no duplicate moves are sent during a game.
• Automatic Cleanup: A setInterval function runs every 5 minutes to purge the history of inactive players, preventing memory leaks on the server.

Client-Server State Synchronization 🔄

A critical feature is ensuring the client's fresh game board and the server's move history are always in sync.

• The Problem: If a user refreshes the page, the client creates a new board, but the server would still remember the old moves, making the game unwinnable.
• The Solution: The server exposes a /?restart=true endpoint. The client's init() function (which runs on every page load) immediately calls this endpoint. This tells the server to delete the move history for that client's IP, ensuring both client and server start from a clean slate every time.