gameBoardBattleship.js

import Ship from './ships';

// Grid config
let COLUMNS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
let ROWS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Lengths of battleships. For every length, create a ship. TODO: Rewrite this to one object to include cords and length in an to be created ship object.
const shipLengths = [1, 3]; // Set lengths of ships

const cords = [
  // Ship one
  [[3, 'A']],
  // Ship Two
  [
    [1, 'A'],
    [1, 'B'],
    [1, 'C'],
  ],
];

function Gameboard() {
  // If Ship Factory is called, push the new ship inside this array.
  const placedShips = [
    // Array where all the shipObjects will be pushed too
  ];

  // Gameboard grid.
  function createGrid() {
    const board = document.getElementById('gameboard');
    board.classList.add('flex', 'w-full', 'justify-center');

    const container = document.createElement('div');
    container.classList.add();

    for (let i = 0; i < ROWS.length; i++) {
      const ROW = document.createElement('div');
      ROW.setAttribute('data-value-y', [ROWS[i]]);
      ROW.classList.add('grid-cols-10', 'grid', 'border-l', 'last:border-b');

      for (let i = 0; i < COLUMNS.length; i++) {
        const CELL = document.createElement('div');
        CELL.setAttribute('data-value-x', [COLUMNS[i]]);

        CELL.classList.add('border-t', 'border-r', 'h-12', 'w-12');
        ROW.appendChild(CELL);
      }
      container.appendChild(ROW);
    }
    board.appendChild(container);
  }

  // Create and 'place' ships
  const placeShips = () => {
    for (let i = 0; i < shipLengths.length; i++) {
      const newShip = Ship(shipLengths[i], cords[i]);
      placedShips.push(newShip);
    }

    return placedShips;
    // Places ship on grid and return cords
    // Ships can't overlap eachother
    // Should track placement of each ship (maybe inside a separate array with there coords)
  };

  const receiveAttack = (cords) => {
    // Takes cords as parameter, checks if one of the seven ships is on this cord
    // If yes, call hit() method on that ship object
    // If not, mark missed cell as red (disable click actions)
  };

  const gameEnded = () => {
    // if all isShunk() method of ships return true, game is lost/won
  };

  return { createGrid, placeShips, receiveAttack, gameEnded, placedShips };
}

export default Gameboard;