working version

2023-08-02 18:18:27 -07:00 · 2023-08-02 18:18:27 -07:00 · 5b5fbc5775
commit 5b5fbc5775
parent 7c8e1ad7d0
36 changed files with 17670 additions and 1 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,11 @@
+{
+  "plugins": ["@babel/syntax-dynamic-import"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": "auto"
+      }
+    ]
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+node_modules
+.eslint*
+.prettier*
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
--- a/README.md
+++ b/README.md
@ -1,3 +1,3 @@
 # js-battleship

-Battleship implemented in ES6 via TDD
+Battleship implemented in ES6
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,3 @@
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+}; 
--- a/dist/195d86f550b47476dbb8.jpg
+++ b/dist/195d86f550b47476dbb8.jpg
--- a/dist/4a2cd718d7031b732e76.ttf
+++ b/dist/4a2cd718d7031b732e76.ttf
--- a/dist/bb975c966c37455a1bc3.woff2
+++ b/dist/bb975c966c37455a1bc3.woff2
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<meta name="Description" content="Battleship"/>
+<title>Battleship</title>
+<script defer src="main.js"></script></head>
+<body class="d-flex flex-column text-center text-white">
+    <div class="cover-container d-flex p-3 mx-auto flex-column">
+        <header class="mb-3">
+            <h3 class="float-md-start mb-0">Battleship</h3>
+            <nav class="nav nav-masthead justify-content-center float-md-end gap-2">
+                <button type="button" class="btn newbtn">
+                    New
+                </button>
+            </nav>
+        </header>
+        <div class="rounded-3 px-5 pb-5 pt-1">
+            <div class="d-flex gap-5">
+                <div class="d-flex justify-content-center py-1 align-items-center">
+                    <div class="text-success">Player</div>
+                </div>
+                <div class="d-flex justify-content-center py-1 align-items-center">
+                    <div class="text-danger">Enemy</div>
+                </div>
+            </div>
+            <div class="d-flex gap-5" id="boards">
+                <div class="text-black" id="playerboard">
+                </div>
+                <div class="text-black" id="enemyboard">
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
--- a/dist/main.js
+++ b/dist/main.js
--- a/jest-setup.js
+++ b/jest-setup.js
@ -0,0 +1 @@
+import '@testing-library/jest-dom'
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1 @@
+setupFilesAfterEnv: ['<rootDir>/jest-setup.js']
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,48 @@
+{
+  "name": "js-battleship",
+  "version": "1.0.0",
+  "description": "Battleship implemented in ES6 via TDD",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve",
+    "test": "jest",
+    "watch": "jest --watch src/js/*.test.js",
+    "build": "webpack --mode=development",
+    "build:prod": "webpack --mode=production --node-env=production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "AGPL-3.0-or-later",
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@webpack-cli/generators": "^3.0.7",
+    "autoprefixer": "^10.4.14",
+    "babel-jest": "^29.6.1",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "html-webpack-plugin": "^5.5.3",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.2",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.27",
+    "postcss-loader": "^7.3.3",
+    "prettier": "^3.0.0",
+    "sass": "^1.64.1",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.1"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  // Add you postcss configuration here
+  // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files
+  plugins: [["autoprefixer"]],
+};
--- a/src/images/battleship1.jpg
+++ b/src/images/battleship1.jpg
--- a/src/images/battleship2.jpg
+++ b/src/images/battleship2.jpg
--- a/src/images/battleship3.jpg
+++ b/src/images/battleship3.jpg
--- a/src/images/battleship4.jpg
+++ b/src/images/battleship4.jpg
--- a/src/images/battleship5.jpg
+++ b/src/images/battleship5.jpg
--- a/src/images/battleship6.jpg
+++ b/src/images/battleship6.jpg
--- a/src/images/battleship7.jpg
+++ b/src/images/battleship7.jpg
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<meta name="Description" content="Battleship"/>
+<title>Battleship</title>
+</head>
+<body class="d-flex flex-column text-center text-white">
+    <div class="cover-container d-flex p-3 mx-auto flex-column">
+        <header class="mb-3">
+            <h3 class="float-md-start mb-0">Battleship</h3>
+            <nav class="nav nav-masthead justify-content-center float-md-end gap-2">
+                <button type="button" class="btn newbtn">
+                    New
+                </button>
+            </nav>
+        </header>
+        <div class="rounded-3 px-5 pb-5 pt-1">
+            <div class="d-flex gap-5">
+                <div class="d-flex justify-content-center py-1 align-items-center">
+                    <div class="text-success">Player</div>
+                </div>
+                <div class="d-flex justify-content-center py-1 align-items-center">
+                    <div class="text-danger">Enemy</div>
+                </div>
+            </div>
+            <div class="d-flex gap-5" id="boards">
+                <div class="text-black" id="playerboard">
+                </div>
+                <div class="text-black" id="enemyboard">
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
--- a/src/js/Game.js
+++ b/src/js/Game.js
@ -0,0 +1,56 @@
+import { Player } from "./Player.js";
+import { UI } from "./UI.js";
+// The game loop should set up a new game by creating Players and Gameboards
+export const Game = () => {
+  const bot = Player("AI");
+  const user = Player("Steve");
+  // populate each Gameboard
+  // bot goes first
+  let dir, y, x;
+  function roll() {
+    // math.ceil() because the function needs to hit 4 and 9 inclusively more often than not
+    dir = Math.ceil(Math.random() * 4);
+    y = Math.ceil(Math.random() * 9);
+    x = Math.ceil(Math.random() * 9);
+  }
+  // for all ship sizes
+  for (let i = 5; i > 0; i--) {
+    let length;
+    i == 1 ? (length = 3) : (length = i);
+    // perpetual loop
+    while (true) {
+      // if valid, place ship and stop loop
+      try {
+        bot.board.placeShip(y, x, length, dir);
+        break;
+      } catch {
+        // otherwise re-roll variables and try again
+        roll();
+        continue;
+      }
+    }
+  }
+  (async function start() {
+    const DOM = UI(user, bot);
+    await DOM.initialized;
+    // Create conditions so that the game ends once one player’s ships have all been sunk.
+    let aiTurn = false;
+    while (bot.board.allSunk() === false && user.board.allSunk() === false) {
+      if (aiTurn === true) {
+        aiTurn = false;
+        DOM.aiTurnPopup();
+        await DOM.aiTurnOkayed();
+        bot.move(user);
+        DOM.displayBoard(user.board.board);
+      } else {
+        aiTurn = true;
+        DOM.playerTurnPopup();
+        let target = await DOM.playerTurnFinished();
+        user.move(bot, target[0], target[1]);
+        DOM.displayBoard(bot.board.board);
+      }
+    }
+    if (bot.board.allSunk()) DOM.displayWinner(user);
+    else if (user.board.allSunk()) DOM.displayWinner(bot);
+  })();
+};
--- a/src/js/Gameboard.js
+++ b/src/js/Gameboard.js
@ -0,0 +1,100 @@
+import { Ship } from "./Ship.js";
+import { square } from "./square.js";
+// game board factory
+export const Gameboard = () => {
+  const ships = [],
+    misses = [];
+  // initializes board
+  const init = (size) => {
+    const yarr = [];
+    for (let y = 0; y <= size - 1; y++) {
+      const xarr = [];
+      for (let x = 0; x <= size - 1; x++) {
+        xarr.push(square(y, x));
+      }
+      yarr.push(xarr);
+    }
+    return yarr.flat();
+  };
+  const board = init(10);
+  // finds specified square
+  const find = (y, x) => {
+    for (let i = 0; i < board.length; i++) {
+      if (board[i].y === y && board[i].x === x) {
+        return board[i];
+      }
+    }
+    return null;
+  };
+  // places ships at specific coordinates
+  const placeShip = (y, x, length, direction) => {
+    if ((!x && x != 0) || typeof x != "number")
+      throw new Error("x-coordinate invalid!");
+    if ((!y && y != 0) || typeof y != "number")
+      throw new Error("y-coordinate invalid!");
+    if (!length || typeof length != "number" || length === 0)
+      throw new Error("Ship length invalid!");
+    if (!direction) throw new Error("Ship direction not provided!");
+    // check for valid squares first
+    const valid = [];
+    for (let i = 0; i < length; i++) {
+      // ship can go one of eight directions
+      let found;
+      if (direction === "N" || direction === 1) found = find(y + i, x);
+      else if (direction === "E" || direction === 2) found = find(y, x + i);
+      else if (direction === "S" || direction === 3) found = find(y - i, x);
+      else if (direction === "W" || direction === 4) found = find(y, x - i);
+      // if direction not one of the above, throw error
+      else if (direction) throw new Error("Ship direction invalid!");
+      // if square is not found on the board, throw out of bounds error
+      if (!found) throw new Error("Ship position out of bounds!");
+      // by default an empty square has null for a ship. if it exists, a ship is already occupying this square
+      if (found.ship)
+        throw new Error("Ship position conflicts with another ship!");
+      // otherwise push to valid squares array
+      valid.push(found);
+    }
+    // assuming error-free execution,
+    // make new ship of length and add to global ships variable
+    const ship = Ship(length);
+    ships.push(ship);
+    // each valid square's ship property is set to current ship
+    valid.forEach((sq) => (sq.ship = ship));
+  };
+  // receive attack and process misses or hits
+  const receiveAttack = (y, x) => {
+    if ((!x && x != 0) || typeof x != "number")
+      throw new Error("x-coordinate invalid!");
+    if ((!y && y != 0) || typeof y != "number")
+      throw new Error("y-coordinate invalid!");
+    const found = find(y, x);
+    if (!found) throw new Error("Attack coordinates out of bounds!");
+    if (!found.ship) {
+      found.shot = true;
+      misses.push(found);
+    } else {
+      found.ship.hit();
+      found.shot = true;
+    }
+  };
+  // check whether all ships are sunk
+  const allSunk = () => {
+    let sunk = 0;
+    for (let i = 0; i < ships.length; i++) {
+      if (ships[i].isSunk()) sunk++;
+    }
+    if (sunk === ships.length) {
+      return true;
+    }
+    return false;
+  };
+  return {
+    board,
+    placeShip,
+    receiveAttack,
+    misses,
+    allSunk,
+    find,
+    ships,
+  };
+};
--- a/src/js/Gameboard.test.js
+++ b/src/js/Gameboard.test.js
@ -0,0 +1,100 @@
+// game board factory
+import { Gameboard } from "./Gameboard.js";
+
+test("Gameboard returns .board object", () => {
+  expect(Gameboard().board).toEqual(expect.any(Object));
+});
+test(".board object has 10x10 entries for board grid", () => {
+  expect(Gameboard().board.length).toEqual(100);
+});
+test("Gameboard returns .placeShip() function", () => {
+  expect(Gameboard().placeShip).toEqual(expect.any(Function));
+});
+test(".placeShip() function throws error if any argument is not provided", () => {
+  expect(() => Gameboard().placeShip(null, 0, 4, "N")).toThrow();
+  expect(() => Gameboard().placeShip(0, null, 4, "N")).toThrow();
+  expect(() => Gameboard().placeShip(0, 0, null, "N")).toThrow();
+  expect(() => Gameboard().placeShip(0, 0, 4, null)).toThrow();
+});
+test(".placeShip() function throws error if ship length is 0", () => {
+  expect(() => Gameboard().placeShip(0, 0, 0, "N")).toThrow();
+});
+// syntax is compass syntax - 'N, NE, etc.'
+test(".placeShip() function throws error if direction argument is invalid", () => {
+  expect(() => Gameboard().placeShip(0, 0, 4, "bogusDirection")).toThrow(
+    "Ship direction invalid!",
+  );
+});
+test(".placeShip() function throws error if ship starting position is out-of-bounds", () => {
+  expect(() => Gameboard().placeShip(1, 10, 4, "N")).toThrow(
+    "Ship position out of bounds!",
+  );
+});
+test(".placeShip() function throws error if ship starting position is already occupied by another ship", () => {
+  const current = Gameboard();
+  current.placeShip(0, 0, 4, "N");
+  expect(() => current.placeShip(4, 0, 3, "S")).toThrow(
+    "Ship position conflicts with another ship!",
+  );
+});
+test(".placeShip() function marks relevant squares as being occupied by the ship", () => {
+  const current = Gameboard();
+  current.placeShip(0, 0, 4, "N");
+  const testSquare = current.board[0];
+  expect(testSquare.ship.length).toBe(4);
+});
+test("Gameboard returns .receiveAttack() function", () => {
+  expect(Gameboard().receiveAttack).toEqual(expect.any(Function));
+});
+test(".receiveAttack() function throws error if arguments are not provided or invalid", () => {
+  expect(() => Gameboard().receiveAttack(null, 8)).toThrow();
+  expect(() => Gameboard().receiveAttack(8, null)).toThrow();
+});
+test(".receiveAttack() function throws error if coordinates are out of bounds", () => {
+  expect(() => Gameboard().receiveAttack(11, 11)).toThrow();
+});
+test(".receiveAttack() function registers missed hits as misses", () => {
+  const current = Gameboard();
+  current.placeShip(0, 0, 4, "N");
+  current.receiveAttack(1, 5);
+  expect(current.misses.length).toBeGreaterThan(0);
+});
+test(".receiveAttack() function registers on-target hits and sinks ships", () => {
+  const current = Gameboard();
+  current.placeShip(0, 0, 4, "E");
+  current.receiveAttack(0, 0);
+  current.receiveAttack(0, 1);
+  current.receiveAttack(0, 2);
+  current.receiveAttack(0, 3);
+  const testSquare = current.board[0];
+  expect(testSquare.ship.isSunk()).toBe(true);
+});
+test("Gameboard can report whether or not all ships have been sunk", () => {
+  const current = Gameboard();
+  current.placeShip(0, 0, 4, "E");
+  current.placeShip(1, 0, 4, "E");
+  expect(current.allSunk()).toBe(false);
+  current.receiveAttack(0, 0);
+  current.receiveAttack(0, 1);
+  current.receiveAttack(0, 2);
+  current.receiveAttack(0, 3);
+  expect(current.allSunk()).toBe(false);
+  current.receiveAttack(1, 0);
+  current.receiveAttack(1, 1);
+  current.receiveAttack(1, 2);
+  current.receiveAttack(1, 3);
+  expect(current.allSunk()).toBe(true);
+});
+test("Gameboard can return square at specified x and y coordinates", () => {
+  const current = Gameboard();
+  current.placeShip(0, 0, 2, "N");
+  current.receiveAttack(0, 0);
+  expect(current.find(0, 0).x).toBe(0);
+  expect(current.find(0, 0).y).toBe(0);
+});
+test("Gameboard returns .ships array", () => {
+  const current = Gameboard();
+  current.placeShip(0, 0, 2, "N");
+  expect(current.ships).toEqual(expect.any(Array));
+  expect(current.ships[0].length).toBe(2);
+});
--- a/src/js/Player.js
+++ b/src/js/Player.js
@ -0,0 +1,40 @@
+import { Gameboard } from "./Gameboard.js";
+
+// Players can take turns playing the game by attacking the enemy Gameboard
+export const Player = (name = "AI") => {
+  // initializes Player's gameboard
+  const board = Gameboard();
+  // for AI only, initialize moves array
+  const moves = [];
+  // move function takes an enemy and coordinates as args
+  const move = (enemy, y = null, x = null) => {
+    // if Player is AI, do a random move
+    if (name === "AI") {
+      (function roll() {
+        y = Math.round(Math.random() * 9);
+        x = Math.round(Math.random() * 9);
+      })();
+      function unique() {
+        let bool = true;
+        for (let i = 0; i < moves.length; i++) {
+          if (moves[i][0] === y && moves[i][1] === x) {
+            bool = false;
+          }
+        }
+        return bool;
+      }
+      while (!unique) roll();
+      // push random move to moves array and FIRE!
+      moves.push(new Array(y, x));
+      enemy.board.receiveAttack(y, x);
+      return;
+    }
+    // otherwise get coords from user - these will be passed in from UI
+    enemy.board.receiveAttack(y, x);
+  };
+  return {
+    board,
+    move,
+    name,
+  };
+};
--- a/src/js/Player.test.js
+++ b/src/js/Player.test.js
@ -0,0 +1,22 @@
+import { Player } from "./Player.js";
+import { Gameboard } from "./Gameboard.js";
+
+// Players can take turns playing the game by attacking the enemy Gameboard
+test("Player returns object", () => {
+  expect(Player("Steve")).toEqual(expect.any(Object));
+});
+test("Player returns Gameboard object", () => {
+  expect(JSON.stringify(Player("Steve").board)).toEqual(
+    JSON.stringify(Gameboard()),
+  );
+});
+test("Player returns move function", () => {
+  expect(Player("Steve").move).toEqual(expect.any(Function));
+});
+test("AI Player move affects opponent Gameboard", () => {
+  const bot = Player("AI");
+  const user = Player("Steve");
+  bot.move(user);
+  // expect the modified Gameboard to not equal a blank Gameboard
+  expect(JSON.stringify(user.board)).not.toEqual(JSON.stringify(Gameboard()));
+});
--- a/src/js/Ship.js
+++ b/src/js/Ship.js
@ -0,0 +1,23 @@
+// ship factory function - takes length as an argument
+export const Ship = (length) => {
+  //let variable;
+  let hits = 0;
+  const getHits = () => {
+    return hits;
+  };
+  // increase by one when hit
+  function hit() {
+    hits++;
+  }
+  // if hits are at or more than length, ship is sunk
+  const isSunk = () => {
+    if (hits >= length) return true;
+    else return false;
+  };
+  return {
+    length,
+    hit,
+    getHits,
+    isSunk,
+  };
+};
--- a/src/js/Ship.test.js
+++ b/src/js/Ship.test.js
@ -0,0 +1,19 @@
+// ship factory function
+// ships to include length, number of times hit, and whether or not they have been sunk
+import { Ship } from "./Ship.js";
+
+test("Ship is created when passed length argument", () => {
+  expect(Ship(4)).toEqual(expect.any(Object));
+});
+test("Ship outputs length", () => {
+  expect(Ship(4).length).toBe(4);
+});
+test("Ship is sunk if full length hit", () => {
+  const destroyer = Ship(2);
+  destroyer.hit();
+  destroyer.hit();
+  expect(destroyer.isSunk()).toBe(true);
+});
+test("Ship outputs hits", () => {
+  expect(Ship(4).getHits()).toBe(0);
+});
--- a/src/js/UI.js
+++ b/src/js/UI.js
@ -0,0 +1,362 @@
+// UI displays Gameboards
+
+import { start } from "@popperjs/core";
+import { square } from "./square";
+
+export const UI = (player, enemy) => {
+  // variables to smooth operations
+  let length, placing, turnOkayed, playerInputTime, playerMoved, playerMove;
+  let unplaced = true;
+  const currentShip = {};
+  // highlights nav button based on mouse hover
+  const navButtonInit = () => {
+    // gets buttons
+    const navButtons = [document.querySelector(".newbtn")];
+    // button hovered over
+    function activate() {
+      this.className = this.className + " active";
+    }
+    // mouse moved off button
+    function deactivate() {
+      this.className = this.className.replace(" active", "");
+    }
+    // assign for all buttons
+    navButtons.forEach((button) => {
+      button.onmouseenter = activate;
+      button.onmouseleave = deactivate;
+    });
+    // initialize 'New' button
+    document.querySelector(".newbtn").onclick = function () {
+      location.reload();
+    };
+  };
+  // displays board
+  function displayBoard(board) {
+    // clear board when displaying (refresh function)
+    board === player.board.board
+      ? (document.querySelector("#playerboard").innerHTML = "")
+      : (document.querySelector("#enemyboard").innerHTML = "");
+    // for board length
+    for (let i = 0; i < board.length; i++) {
+      // make square with coordinates
+      let square = document.createElement("div");
+      square.className =
+        "griditem d-flex justify-content-center align-items-center";
+      if (board === enemy.board.board) {
+        // enemy board
+        square.id = `e${board[i].y}${board[i].x}`;
+        if (board[i].shot) {
+          // if square has been shot
+          let indicator;
+          if (board[i].ship) {
+            // if it's a hit
+            indicator = document.createElement("i");
+            indicator.className = "fa-solid fa-bullseye fa-2x";
+          } else {
+            // if it's a miss
+            indicator = document.createElement("i");
+            indicator.className = "fa-solid fa-xmark fa-2x";
+          }
+          square.appendChild(indicator);
+        } else square.onclick = () => clicked(square, enemy.board);
+        document.querySelector("#enemyboard").appendChild(square);
+      } else {
+        // if board is player board
+        square.id = `p${board[i].y}${board[i].x}`;
+        let indicator;
+        if (board[i].shot) {
+          // if square has been shot
+          if (board[i].ship) {
+            // if it's a hit
+            indicator = document.createElement("i");
+            indicator.className = "fa-solid fa-fire fa-2x";
+          } else {
+            // if it's a miss
+            indicator = document.createElement("i");
+            indicator.className = "fa-solid fa-xmark fa-2x";
+          }
+        } else if (board[i].ship) {
+          // else if square is unshot but has a player ship
+          indicator = document.createElement("i");
+          // if any ship is unplaced, that is if player is still placing ships, do fade pulse animation otherwise solid
+          unplaced
+            ? (indicator.className = "fa-solid fa-anchor fa-2x fa-beat")
+            : (indicator.className = "fa-solid fa-anchor fa-2x");
+        }
+        if (indicator)
+          square.appendChild(
+            indicator,
+          ); // if any of the previous conditions initialized indicator, append
+        else square.onclick = () => clicked(square, player.board);
+        document.querySelector("#playerboard").appendChild(square);
+      }
+    }
+  }
+  // creates basic window and returns main div to append to, as well as title div and custom exit callback
+  const makeWindow = () => {
+    // create custom close function callback variable
+    let callback;
+    // make divs
+    const darken = document.createElement("div");
+    darken.className = "darken";
+    document.querySelector("body").appendChild(darken);
+    const card = document.createElement("div");
+    card.className = "card";
+    darken.appendChild(card);
+    // main div to append to
+    const main = document.createElement("div");
+    main.className = "card-body";
+    card.appendChild(main);
+    // title div
+    const title = document.createElement("h6");
+    title.className = "card-text my-3";
+    main.appendChild(title);
+    // okay button/close button
+    const okayButton = document.createElement("div");
+    okayButton.className = "btn btn-success";
+    okayButton.textContent = "Ok";
+    main.appendChild(okayButton);
+    okayButton.onclick = close;
+    // detects Enter keystroke
+    document.addEventListener("keypress", function enterHandler(e) {
+      if (e.code === "Enter") {
+        if (document.querySelector("body").lastChild.className === "darken") {
+          e.preventDefault();
+          document.removeEventListener("keypress", enterHandler);
+          okayButton.click();
+        }
+      }
+    });
+    function customClose(fn) {
+      callback = fn;
+    }
+    function close() {
+      document
+        .querySelector("body")
+        .removeChild(document.querySelector(".darken"));
+      if (callback) callback();
+    }
+    return {
+      main,
+      title,
+      customClose,
+    };
+  };
+  // gets player name
+  function getPlayerName() {
+    // makes window
+    let enchilada = makeWindow();
+    enchilada.title.textContent = "Welcome! Please enter your name:";
+    // gets input
+    enchilada.main.insertBefore(
+      document.createElement("br"),
+      enchilada.title.nextSibling,
+    );
+    const nameInput = document.createElement("input");
+    nameInput.className = "mb-3";
+    nameInput.setAttribute("type", "text");
+    enchilada.main.insertBefore(nameInput, enchilada.title.nextSibling);
+    nameInput.focus();
+    // sets name and passes off to placeShip(5) -- carrier
+    function finish() {
+      player.name = nameInput.value;
+      const playerNameUI = document.querySelector(".text-success");
+      playerNameUI.textContent = player.name;
+      while (playerNameUI.offsetWidth > 500) {
+        const currWeight = window
+          .getComputedStyle(playerNameUI)
+          .fontSize.replace("px", "");
+        if (currWeight === 1) {
+          break;
+        }
+        const newWeight = currWeight - 1 + "px";
+        playerNameUI.style.fontSize = newWeight;
+      }
+      length = 5;
+      displayBoard(player.board.board);
+      startPlacement();
+    }
+    enchilada.customClose(finish);
+  }
+  // displays ship placement tooltip window and begins ship placement
+  function startPlacement() {
+    let enchilada = makeWindow();
+    // change based on length
+    switch (length) {
+      case 5:
+        currentShip.name = "Carrier";
+        currentShip.size = 5;
+        const greeter = document.createElement("h6"); // add a greeter since carrier is always placed first
+        greeter.className = "card-text my-3";
+        greeter.innerHTML = `Welcome, ${
+          document.querySelector(".text-success").textContent
+        }! Please begin by placing your ships.`;
+        enchilada.main.insertBefore(greeter, enchilada.title);
+        unplaced = true; // set unplaced to true until all ships placed
+        break;
+      case 4:
+        currentShip.name = "Battleship";
+        currentShip.size = 4;
+        break;
+      case 3:
+        currentShip.name = "Cruiser";
+        currentShip.size = 3;
+        break;
+      case 2:
+        currentShip.name = "Submarine";
+        currentShip.size = 3;
+        break;
+      case 1:
+        currentShip.name = "Destroyer";
+        currentShip.size = 2;
+    }
+    enchilada.title.innerHTML = `Please choose starting square for a ${currentShip.name} sized ${currentShip.size} squares.`;
+    function finish() {
+      // sets placing to true
+      placing = true;
+    }
+    enchilada.customClose(finish);
+  }
+  // ends placement by hooking into Game() functionality
+  function endPlacement(square) {
+    let enchilada = makeWindow();
+    enchilada.title.textContent = `Next, please choose a direction for your ${currentShip.name} sized ${currentShip.size} squares.`;
+    const directions = document.createElement("select");
+    directions.className = "form-select";
+    const def = document.createElement("option");
+    def.selected = true;
+    def.textContent = "Direction";
+    directions.appendChild(def);
+    const dirs = ["North", "East", "South", "West"];
+    for (let i = 0; i < dirs.length; i++) {
+      const dir = document.createElement("option");
+      dir.setAttribute("value", i + 1);
+      dir.textContent = dirs[i];
+      directions.appendChild(dir);
+    }
+    enchilada.main.insertBefore(
+      document.createElement("br"),
+      enchilada.title.nextSibling,
+    );
+    enchilada.main.insertBefore(directions, enchilada.title.nextSibling);
+    function finish() {
+      if (directions.selectedIndex === 0) {
+        const errWindow = makeWindow();
+        errWindow.title.textContent = "Select direction!";
+        errWindow.customClose(function () {
+          endPlacement(square);
+        });
+        return;
+      }
+      const dirName = dirs[directions.selectedIndex - 1]; // -1 for default 'Direction' option in the dropdown
+      const dir = dirName.replace(/[^A-Z]/g, "");
+      try {
+        const y = parseInt(square.id[1]);
+        const x = parseInt(square.id[2]);
+        // add ship to board
+        player.board.placeShip(y, x, currentShip.size, dir);
+        // custom congratulatory popup window
+        const shipPlaced = makeWindow();
+        shipPlaced.title.textContent = "Ship successfully placed!";
+        shipPlaced.customClose(function () {
+          // if there are still ships to place, place new ships otherwise mark unplaced as false and notify game that we are turnOkayedy to go
+          length--;
+          if (length > 0) startPlacement();
+          else {
+            displayBoard(enemy.board.board);
+            unplaced = false;
+          }
+          // display updated board
+          displayBoard(player.board.board);
+        });
+      } catch (error) {
+        const errWindow = makeWindow();
+        errWindow.title.textContent = error;
+        errWindow.customClose(function () {
+          startPlacement();
+        });
+      }
+    }
+    enchilada.customClose(finish);
+  }
+  // function for registering clicks on squares
+  function clicked(sq, gameboard) {
+    if (gameboard === player.board && length && placing)
+      endPlacement(
+        sq,
+      ); // playerboard only active if placing ships and there are ships to be placed
+    else if (gameboard === enemy.board && playerInputTime === true) {
+      // enemyboard only active if player's input time
+      playerMove = [parseInt(sq.id[1]), parseInt(sq.id[2])]; // mark square
+      playerMoved = true; // toggle boolean
+    }
+  }
+  // ai turn notification window - ai then makes move on player's board
+  function aiTurnPopup() {
+    let enchilada = makeWindow();
+    enchilada.title.textContent = "Enemy's turn";
+    enchilada.customClose(function () {
+      turnOkayed = true;
+    });
+  }
+  // player move notification window
+  function playerTurnPopup() {
+    let enchilada = makeWindow();
+    enchilada.title.textContent = "Your turn";
+    playerMove = null;
+    playerInputTime = true;
+  }
+  // initializes UI
+  navButtonInit();
+  getPlayerName();
+  // promise to wait until everything is initialized
+  let initialized = new Promise((resolve, reject) => {
+    (function waitForPlacement() {
+      if (unplaced === false) return resolve(true);
+      setTimeout(waitForPlacement, 1000);
+    })();
+  });
+  // promise to wait until player ok's aiTurn prompt
+  let aiTurnOkayed = async () => {
+    let promise = new Promise((resolve, reject) => {
+      (function waitForAcknowledgement() {
+        if (turnOkayed === true) {
+          turnOkayed = false;
+          return resolve(Math.random());
+        }
+        setTimeout(waitForAcknowledgement, 100);
+      })();
+    });
+    return await promise;
+  };
+  // promise to wait until player chooses square
+  let playerTurnFinished = async () => {
+    let promise = new Promise((resolve, reject) => {
+      (function waitForMove() {
+        if (playerMoved === true) {
+          playerMoved = false;
+          return resolve(playerMove);
+        }
+        setTimeout(waitForMove, 100);
+      })();
+    });
+    return await promise;
+  };
+  // display winner
+  function displayWinner(who) {
+    const enchilada = makeWindow();
+    enchilada.title.textContent = `${who.name} won!`;
+    enchilada.customClose(function () {
+      location.reload();
+    });
+  }
+  return {
+    displayBoard,
+    initialized,
+    aiTurnPopup,
+    aiTurnOkayed,
+    playerTurnPopup,
+    playerTurnFinished,
+    displayWinner,
+  };
+};
--- a/src/js/main.js
+++ b/src/js/main.js
@ -0,0 +1,4 @@
+import "../scss/styles.scss";
+import * as bootstrap from "bootstrap";
+import { Game } from "./Game.js";
+Game();
--- a/src/js/square.js
+++ b/src/js/square.js
@ -0,0 +1,11 @@
+// simple square, shows occupying ship (if any) and whether its been shot at
+export const square = (y, x) => {
+  let shot = false;
+  let ship = null;
+  return {
+    y,
+    x,
+    ship,
+    shot,
+  };
+};
--- a/src/js/square.test.js
+++ b/src/js/square.test.js
@ -0,0 +1,20 @@
+// simple square with a visited boolean
+import { square } from "./square.js";
+import { Ship } from "./Ship.js";
+
+const ship = Ship(4);
+const sq = square(1, 2);
+test("Square object outputs y-coordinate", () => {
+  expect(sq.y).toBe(1);
+});
+test("Square object outputs x-coordinate", () => {
+  expect(sq.x).toBe(2);
+});
+test("Square object outputs occupying Ship", () => {
+  sq.ship = ship;
+  expect(sq.ship).toEqual(ship);
+});
+test("Square object outputs whether it has been shot", () => {
+  sq.shot = true;
+  expect(sq.shot).toBe(true);
+});
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@ -0,0 +1,145 @@
+// Import all of Bootstrap's CSS
+@import "bootstrap/scss/bootstrap";
+// Import Font Awesome icons
+@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
+@import "@fortawesome/fontawesome-free/css/solid.min.css";
+
+header, header > nav > .btn, header > nav > div > .btn {
+    text-shadow: 1px 1px 1px black !important;
+}
+
+body {
+    background-image: url("../images/battleship7.jpg");
+    background-size: 100vw 100vh;
+}
+
+.cover-container > .rounded-3 {
+    background-color: rgba($color: $light, $alpha: 0.5);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+@mixin unclicked {
+    color: #fff;
+    background-color: rgba($color: #000000, $alpha: 0.0) !important;
+    border: 1px solid rgba(0, 0, 0, 0);
+}
+
+.newbtn {
+    @include unclicked();
+}
+
+.newbtn.active {
+    background-color: $success !important;
+    border: 1px solid rgba($color: $dark, $alpha: 0.5);
+}
+
+.nav>.btn-group>.dropdown-toggle {
+    @include unclicked();
+}
+
+.nav>.btn-group>.dropdown-toggle.active, .nav>.btn-group>.dropdown-toggle.show {
+    background-color: $primary !important;
+    border: 1px solid rgba($color: $dark, $alpha: 0.5);
+}
+
+.griditem {
+    border: 1px solid $dark;
+    transform: rotate(180deg);
+}
+
+#playerboard, #enemyboard {
+    height: 500px;
+    width: 500px;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(10, 1fr);
+    text-shadow: none;
+    transform: rotate(180deg);
+    direction: rtl;
+}
+
+.griditem {
+}
+
+.fa-solid {
+    direction: ltr;
+}
+
+.fa-bullseye::before {
+    color: #e01b24;
+}
+
+.fa-fire::before {
+    color: #ff4d00;
+}
+
+.fa-anchor::before {
+    color: $primary;
+    text-shadow: 1px 1px 1px $info;
+}
+
+.d-flex > .flex-fill.rounded-3 {
+    background: rgba($color: $dark, $alpha: 0.25);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6x);
+    -webkit-backdrop-filter: blur(6x);
+    border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.darken {
+    background: rgba($color: $dark, $alpha: 0.75);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    height: 100%;
+    width: 100%; 
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.cover-container {
+    z-index: 0;
+}
+
+.fa-circle-xmark {
+    justify-content: end;
+    cursor: pointer;
+    align-items: center;
+    border: 1px black;
+}
+
+.fa-circle-xmark::before {
+    color: #e01b24;
+}
+
+.text-success {
+    font-size: 1.5rem;
+    font-size: 2vw;
+}
+
+.d-flex.gap-5 > .d-flex.justify-content-center.py-1 {
+    flex: 0 50%;
+}
+
+.d-flex.justify-content-center > div {
+    font-size: 1.5rem;
+    text-shadow: 1px 1px 0px black !important;
+}
+
+.dropdown-menu.show {
+    background: rgba($color: $light, $alpha: 0.7);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.dropdown-menu > li {
+    text-shadow: none;
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,87 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const isProduction = process.env.NODE_ENV == 'production';
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const autoprefixer = require('autoprefixer')
+
+const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
+
+const config = {
+    entry: './src/js/main.js',
+    output: {
+        filename: 'main.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    devServer: {
+      static: path.resolve(__dirname, 'dist'),
+      port: 5000,
+      hot: true
+    },  
+    plugins: [
+        new HtmlWebpackPlugin({ template: './src/index.html' })
+    ],   
+    module: {
+        rules: [
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                  {
+                    // Adds CSS to the DOM by injecting a `<style>` tag
+                    loader: 'style-loader'
+                  },
+                  {
+                    // Interprets `@import` and `url()` like `import/require()` and will resolve them
+                    loader: 'css-loader'
+                  },
+                  {
+                    // Loader for webpack to process CSS with PostCSS
+                    loader: 'postcss-loader',
+                    options: {
+                      postcssOptions: {
+                        plugins: [
+                          autoprefixer
+                        ]
+                      }
+                    }
+                  },
+                  {
+                    // Loads a SASS/SCSS file and compiles it to CSS
+                    loader: 'sass-loader'
+                  }
+                ]
+            },
+            {
+                test: /\.css$/i,
+                use: [stylesHandler, 'css-loader', 'postcss-loader'],
+            },
+            {
+                test: /\.(js|jsx)$/i,
+                loader: 'babel-loader',
+            },
+
+            {
+                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+                type: 'asset',
+            },
+            // Add your rules for custom modules here
+            // Learn more about loaders from https://webpack.js.org/loaders/
+        ],
+    },
+};
+
+module.exports = () => {
+    if (isProduction) {
+        config.mode = 'production';
+        
+        config.plugins.push(new MiniCssExtractPlugin());
+        
+        
+        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
+        
+    } else {
+        config.mode = 'development';
+    }
+    return config;
+};
				`@ -0,0 +1 @@`
				`setupFilesAfterEnv: ['<rootDir>/jest-setup.js']`