Naval Warfare

Project info

An interactive, two player game of Battleship. The purpose of this project is to practice Test Driven Development (TDD) and tie together the concepts learned in the JavaScript module of The Odin Project. This is the capstone project of The Odin Project's JavaScript course.

Project description can be found here.

Live demo

Live demo available here

Table of Contents

• Features
• Technologies utilized
• Learning outcomes
• Project screenshots
• Behind the Scenes
• Installation

Features

• Singleplayer mode
• Multiplayer mode
• Manual ship placement
• Responsive design with mobile support

Technologies utilized

• HTML5
• CSS3
• JavaScript ES6
• Jest
• webpack
• Babel
• ESLint
• Prettier

Learning outcomes

This project helped to reinforce the following skills:

• Test Driven Development (TDD) with Jest
• ESLint integration
• Prettier integration
• Babel integration
• webpack
• JavaScript modules
• DOM manipulation
• CSS styling

Project screenshots

Start menu (desktop & mobile)

Name input (desktop & mobile)

Ship placement (desktop & mobile)

Gameplay (desktop & mobile)

Multiplayer privacy screen (desktop & mobile)

Winner declaration (desktop & mobile)

Behind the scenes

Improvements

This project could be improved with:

• Single player difficulty modes
• Drag and drop feature to place ships
• Ship icons to indicate ship placement instead of tile background color
• Animations or transitions for hit & miss attacks

Notes

• ESLint and prettier config did not seem to be working together. After much time trying to debug, restarting VSCode seemed to resolve the issue.

Resources

• Jest docs

• This resource was helpful for setting up jest and configuring npm run watch

• This resource was helpful when running into node version errors while setting up jest.

• Webpack docs - Getting started

• Webpack docs - Asset management

• Webpack docs - HtmlWebpackPlugin

• This resource was helpful for setting up webpack for both development as well as production.

• This resource was helpful when my node version kept resetting.

• Jest Webpack Guide

• ESLint docs - Getting started

• While setting up ESLint and Prettier with VSCode, I referenced this resource in addition to the docs.

• Prettier vscode docs

• Prettier docs

• ESLint-config-prettier

• The top answer of this thread seemed to resolve some ESLint errors that I was getting.

• This resource is helpful when deploying to GitHub Pages.

• This discussion seemed informativve when choosing between class and factory.

• This codepen is very useful for assigning colors to SVG icons.

• SVG Repo for icons

Terminal commmands used during development

• Jest setup

  • sudo apt install npm
  • nvm install 18.18.0
  • nvm use 18.18.0
  • nvm alias default v18.18.0
  • npm init, but maybe should have used npm init jest@latest
  • npm install --save-dev jest
  • npm install --save-dev babel-jest @babel/core @babel/preset-env
  • npm install --save-dev @babel/preset-env
  • npm test or npm run watch:jest to run tests

• Webpack setup

  • npm install webpack webpack-cli --save-dev
  • npm install --save lodash
  • npm install --save-dev style-loader css-loader
  • npm install --save-dev html-webpack-plugin
  • npm install --save-dev webpack-dev-server
  • npx webpack or npm run build:dev to bundle in development mode
  • npm run build:prod to bundle in production mode
  • npm run watch:webpack to recompile on save
  • npm run start:webpack to recompile on save and refresh page
    • source-maps may not be configured correctly when using this option

• ESLint & Prettier setup

  • I don't think there is a difference between these:
    • npm init @eslint/config@latest (ESLint docs)
    • npm install eslint --save-dev & ./node_modules/.bin/eslint --init (Digital Ocean Article)
  • npm install --save-dev eslint-config-prettier
  • npm install prettier -D --save-exact
  • node --eval "fs.writeFileSync('.prettierrc','{}\n')"^C

• Deployment

  • npm run deploy

Installation

• Clone this repository to your desktop.
• Navigate to the top level of the directory by running cd naval-warfare.
• Run npm install to install the required dependencies.
• Open dist/index.html in your browser.
• Run npm run watch:webpack to update the dist folder on save
• Refresh page after saving to see changes