{"id":20075426,"url":"https://github.com/scc416/battleship","last_synced_at":"2025-05-05T21:33:06.667Z","repository":{"id":43092459,"uuid":"453849963","full_name":"scc416/battleship","owner":"scc416","description":"A real-time battleship game (also known as Battleships or Sea Battle) for pairs of players, built with React and Socket.IO","archived":false,"fork":false,"pushed_at":"2023-06-02T01:25:14.000Z","size":2618,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-28T15:58:56.589Z","etag":null,"topics":["battleship","battleship-game","heroku","javascript","javascript-game","javascriptgame","netlify","node","node-js","nodejs","nodemon","react","react-hooks","reactjs","socket-io","socketio"],"latest_commit_sha":null,"homepage":"https://github.com/scc416/battleship","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scc416.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-31T01:40:51.000Z","updated_at":"2024-03-26T20:51:47.000Z","dependencies_parsed_at":"2022-08-19T14:40:48.428Z","dependency_job_id":null,"html_url":"https://github.com/scc416/battleship","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fbattleship","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fbattleship/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fbattleship/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scc416%2Fbattleship/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scc416","download_url":"https://codeload.github.com/scc416/battleship/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224470989,"owners_count":17316709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["battleship","battleship-game","heroku","javascript","javascript-game","javascriptgame","netlify","node","node-js","nodejs","nodemon","react","react-hooks","reactjs","socket-io","socketio"],"created_at":"2024-11-13T14:59:23.895Z","updated_at":"2024-11-13T14:59:24.504Z","avatar_url":"https://github.com/scc416.png","language":"JavaScript","readme":"# Battleship\nA real-time [battleship game](\u003chttps://en.wikipedia.org/wiki/Battleship_(game)\u003e) (also known as Battleships or Sea Battle) for pairs of players, built with [React](https://reactjs.org/) and [Socket.IO](https://socket.io/).\n\nThe project is built on [create-react-app-example](https://github.com/socketio/socket.io/tree/master/examples/create-react-app-example) of [Socket.io](https://socket.io/).\nThe example is bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Table of Content\n\n- [Final Product](#final-product)\n- [About the Game](#about-the-game)\n- [Custom hook: useGame](#custom-hook-usegame)\n- [Dependencies](#dependencies)\n- [Getting Started](#getting-started)\n- [File Structure](#file-structure)\n- [Credits](#credits)\n              \n## Final Product\n\n1. 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)\n\n![Waiting for opponent](./docs/waiting-for-opponent.png)\n\n2. 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).\n\n![Picking Tiles](./docs/picking-tiles.png)\n\n3. 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.\n\n![Players taking turn](./docs/players-taking-turn.png)\n\n4. 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.\n\n![End of the game](./docs/end.png)\n\n## About the Game\n\nEach player has a 10x10 board on which the player is able to place 5 ships:\n\n- A Carrier, which is 5 tiles long\n- A Battleship, which is 4 tiles long\n- A Cruiser, which is 3 tiles long\n- A Submarine, which is 3 tiles long\n- A Destroyer, which is 2 tiles long\n\nEach ship can be placed either horizontally or vertically on the board, and cannot be placed partially off the board.\n\nEach tile is denoted by a coordinate, A-J for columns and 1-10 for rows.\n\nEach player then takes turns picking a tile on the opposing player’s grid, taking a shot at that tile.\n\n- If the tile contains a ship, the shot is a HIT\n- If the tile does not contain a ship, the shot is a MISS.\n\nA ship is sunk if all the tiles for that ship have been marked as a HIT.\n\nThe game ends when one player has sunk all of the opposing players ships.\n\n## Custom hook: `useGame`\n\nuseGame is a custom hook that control the flow of the game.\n\n- A state contains all details of the player.\n- A reducer handle actions\n\n### `state`\n\n#### `gameState`\n\n- 0: Waiting for another player to join\n- 1: Players are ready, picking tiles for battleship\n- 2: Done with picking tiles, waiting for the opponent to be done\n- 3: Player's turn to shoot\n- 4: Opponent's turn to shoot\n- 5: Player won\n- 6: Player lost\n\n#### `shipTilesState`\n\n- 0: Selecting tiles for the carrier, which is 5 tiles long\n- 1: Selecting tiles for the battleship, which is 4 tiles long\n- 2: Selecting tiles for the cruiser, which is 3 tiles long\n- 3: Selecting tiles for the submarine, which is 3 tiles long\n- 4: Selecting tiles for the destroyer, which is 2 tiles long\n\n## Dependencies\n\n- [Node.js](https://nodejs.org/)\n- [React](https://reactjs.org/)\n- [Socket.io](https://socket.io/)\n\n## Getting Started\n\n1. Clone this project to your computer\n2. `cd` to the folder where this project is cloned\n3. Install all dependencies with `npm install` command\n4. Run the Socket.IO server with `npm run start-server` command\n5. Run the app in the development mode with `npm start` command\n6. Open the broswer and visit: http://localhost:3000\n\nThe page will reload if you make edits. You will also see any lint errors in the console.\n\n## File Structure\n\n```\n📦battleship\n ┣ 📂docs\n ┣ 📂public\n ┃ ┣ 📜favicon.png\n ┃ ┗ 📜index.html\n ┣ 📂src\n ┃ ┣ 📂Components\n ┃ ┃ ┣ 📂Display\n ┃ ┃ ┃ ┣ 📂Board\n ┃ ┃ ┃ ┃ ┣ 📂Coordinate\n ┃ ┃ ┃ ┃ ┃ ┣ 📜Coordinate.css\n ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateLabelList.jsx\n ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateLabelListItem.jsx\n ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateList.jsx\n ┃ ┃ ┃ ┃ ┃ ┣ 📜CoordinateListItem.jsx\n ┃ ┃ ┃ ┃ ┃ ┗ 📜index.jsx\n ┃ ┃ ┃ ┃ ┣ 📂ShipList\n ┃ ┃ ┃ ┃ ┃ ┣ 📜ShipList.css\n ┃ ┃ ┃ ┃ ┃ ┣ 📜ShipListItem.jsx\n ┃ ┃ ┃ ┃ ┃ ┣ 📜TileButtons.jsx\n ┃ ┃ ┃ ┃ ┃ ┗ 📜index.jsx\n ┃ ┃ ┃ ┃ ┣ 📜Board.css\n ┃ ┃ ┃ ┃ ┣ 📜Overlay.jsx\n ┃ ┃ ┃ ┃ ┗ 📜index.jsx\n ┃ ┃ ┃ ┣ 📜Display.css\n ┃ ┃ ┃ ┗ 📜index.jsx\n ┃ ┃ ┣ 📂Log\n ┃ ┃ ┃ ┣ 📜Log.css\n ┃ ┃ ┃ ┣ 📜LogListItem.jsx\n ┃ ┃ ┃ ┣ 📜NewGameButton.jsx\n ┃ ┃ ┃ ┗ 📜index.jsx\n ┃ ┃ ┗ 📜Heading.jsx\n ┃ ┣ 📂hooks\n ┃ ┃ ┣ 📜useGame.js\n ┃ ┃ ┗ 📜useScrollToBottom.js\n ┃ ┣ 📜App.css\n ┃ ┣ 📜App.jsx\n ┃ ┣ 📜constants.js\n ┃ ┣ 📜helpers.js\n ┃ ┗ 📜index.js\n ┣ 📜.gitignore\n ┣ 📜README.md\n ┣ 📜helpers.js\n ┣ 📜package-lock.json\n ┣ 📜package.json\n ┗ 📜server.js\n```\n\n### 📂docs\n\n### 📂public\n\nContains the favicon.png (image displayed in the web app) ajd index.html (document where the app is render).\n\n### 📂src\n\n#### 📂Components\n\nContains most react components of the app.\n\n#### 📂hooks\n\nContains the custom hooks `useGame` (See [Custom hook: useGame](#custom-hook-usegame) for details) and `useScrollToBottom`.  \nThe log list is always scroll to the bottom. This is controlled by `useScrollToBottom`.\n\n#### 📜App.css\n\nContains styles of react component (`App.jsx`).\n\n#### 📜App.jsx\n\nThe high level root react component.\n\n#### 📜constants.js\n\nContain constants that are used in the client.\n\n#### 📜helpers.js\n\nContain helper functions used by the client.\n\n#### 📜index.js\n\nRenders the component.\n\n### 📜.gitignore\n\nSpecifies intentionally untracked files that Git should ignore.\n\n### 📜README.md\n\nThis document that you are reading.\n\n### 📜helpers.js\n\nContain the helper functions used by the server.\n\n### 📜package.json\n\nContain the commands and dependecies for the server.\n\n### 📜server.js\n\nThe main file where the server is defined.\n\n## Credits\n\n- [Icon](https://www.flaticon.com/premium-icon/ship_870170) created by [Freepik](https://www.flaticon.com/authors/freepik) - [Flaticon](https://www.flaticon.com/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscc416%2Fbattleship","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscc416%2Fbattleship","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscc416%2Fbattleship/lists"}