Battleship

A real-time battleship game (also known as Battleships or Sea Battle) for pairs of players, built with React and Socket.IO.

The project is built on create-react-app-example of Socket.io. The example is bootstrapped with Create React App.

Table of Content

• Final Product
• About the Game
• Custom hook: useGame
• Dependencies
• Getting Started
• File Structure
• Credits

Final Product

1. When a player first enter the game, the player need to wait for another player if there is no available player (For testing purpose, they can also open a new tab to create another player)

2. When the player get an opponent, the players can pick the tiles for their ships. They can clear/confirm tiles. Errors are shown in log (at the bottom of the page).

3. After both players have done picking the tiles for their ships. Players start taking turn to shoot at opponent's board. All the shooting is displayed on the boards. They are also shown on the log with coordinate and either MISSED or HIT. When a ship is destroyed, it is shown on the ship list (next to each game board) with a strike-through and the log.

4. When there is a winner, it is shown on the board and the log. The player can click the "New Game" button to start a new game. Players can click the button anytime to start a new game.

About the Game

Each player has a 10x10 board on which the player is able to place 5 ships:

• A Carrier, which is 5 tiles long
• A Battleship, which is 4 tiles long
• A Cruiser, which is 3 tiles long
• A Submarine, which is 3 tiles long
• A Destroyer, which is 2 tiles long

Each ship can be placed either horizontally or vertically on the board, and cannot be placed partially off the board.

Each tile is denoted by a coordinate, A-J for columns and 1-10 for rows.

Each player then takes turns picking a tile on the opposing player’s grid, taking a shot at that tile.

• If the tile contains a ship, the shot is a HIT
• If the tile does not contain a ship, the shot is a MISS.

A ship is sunk if all the tiles for that ship have been marked as a HIT.

The game ends when one player has sunk all of the opposing players ships.

Custom hook: useGame

useGame is a custom hook that control the flow of the game.

• A state contains all details of the player.
• A reducer handle actions

state

gameState

• 0: Waiting for another player to join
• 1: Players are ready, picking tiles for battleship
• 2: Done with picking tiles, waiting for the opponent to be done
• 3: Player's turn to shoot
• 4: Opponent's turn to shoot
• 5: Player won
• 6: Player lost

shipTilesState

• 0: Selecting tiles for the carrier, which is 5 tiles long
• 1: Selecting tiles for the battleship, which is 4 tiles long
• 2: Selecting tiles for the cruiser, which is 3 tiles long
• 3: Selecting tiles for the submarine, which is 3 tiles long
• 4: Selecting tiles for the destroyer, which is 2 tiles long

Dependencies

• Node.js
• React
• Socket.io

Getting Started

1. Clone this project to your computer
2. cd to the folder where this project is cloned
3. Install all dependencies with npm install command
4. Run the Socket.IO server with npm run start-server command
5. Run the app in the development mode with npm start command
6. Open the broswer and visit: http://localhost:3000

The page will reload if you make edits. You will also see any lint errors in the console.

File Structure

📦battleship
 ┣ 📂docs
 ┣ 📂public
 ┃ ┣ 📜favicon.png
 ┃ ┗ 📜index.html
 ┣ 📂src
 ┃ ┣ 📂Components
 ┃ ┃ ┣ 📂Display
 ┃ ┃ ┃ ┣ 📂Board
 ┃ ┃ ┃ ┃ ┣ 📂Coordinate
 ┃ ┃ ┃ ┃ ┃ ┣ 📜Coordinate.css
 ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateLabelList.jsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateLabelListItem.jsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateList.jsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateListItem.jsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┃ ┣ 📂ShipList
 ┃ ┃ ┃ ┃ ┃ ┣ 📜ShipList.css
 ┃ ┃ ┃ ┃ ┃ ┣ 📜ShipListItem.jsx
 ┃ ┃ ┃ ┃ ┃ ┣ 📜TileButtons.jsx
 ┃ ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┃ ┣ 📜Board.css
 ┃ ┃ ┃ ┃ ┣ 📜Overlay.jsx
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📜Display.css
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂Log
 ┃ ┃ ┃ ┣ 📜Log.css
 ┃ ┃ ┃ ┣ 📜LogListItem.jsx
 ┃ ┃ ┃ ┣ 📜NewGameButton.jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┗ 📜Heading.jsx
 ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📜useGame.js
 ┃ ┃ ┗ 📜useScrollToBottom.js
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.jsx
 ┃ ┣ 📜constants.js
 ┃ ┣ 📜helpers.js
 ┃ ┗ 📜index.js
 ┣ 📜.gitignore
 ┣ 📜README.md
 ┣ 📜helpers.js
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┗ 📜server.js

📂docs

📂public

Contains the favicon.png (image displayed in the web app) ajd index.html (document where the app is render).

📂src

📂Components

Contains most react components of the app.

📂hooks

Contains the custom hooks useGame (See Custom hook: useGame for details) and useScrollToBottom.
The log list is always scroll to the bottom. This is controlled by useScrollToBottom.

📜App.css

Contains styles of react component (App.jsx).

📜App.jsx

The high level root react component.

📜constants.js

Contain constants that are used in the client.

📜helpers.js

Contain helper functions used by the client.

📜index.js

Renders the component.

📜.gitignore

Specifies intentionally untracked files that Git should ignore.

📜README.md

This document that you are reading.

📜helpers.js

Contain the helper functions used by the server.

📜package.json

Contain the commands and dependecies for the server.

📜server.js

The main file where the server is defined.

Credits

• Icon created by Freepik - Flaticon