Battleshipz website

by agomestcsb

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1 class = "center-text">Battleships</h1>
  
  <div id="intro">
    <div class ="intro-text"></div>
    <div></div>
    <div class="intro-img"><img src="https://static.wikia.nocookie.net/spongebob/images/9/90/Arrgh%21_134.png/"></div>
    <div id="intro-button"><p>Start</p></div>
  </div>
  
  
<div id="gameplay" style="display: none;">
  <div class="center-box" id="playerTurn">Player 1's Turn</div>
  <div id="grid1"></div>
  <div class="mainButtons" id="unfin">
    <div id="showMyGrid">Show my grid</div>
    <div id="endMyTurn"> End my turn</div>
  </div>
  <div class="mainButtons" id="fin">
   <div id="proceed"></div>
  </div>
</div>
  <script src="script.js"></script>
</body>

</html>

CSS

*
{
margin: 0;
padding: 0;

font-family: "Helvetica";
}

:root
{
    --tileRadius: 4px;
}

.tile
{
    border-radius: var(--tileRadius);
}
.center
{
  margin: 0 auto;
}

.center-text
{
  text-align: center;
}

.tile:hover
{
  filter: drop-shadow(0px 0px 1vw black);
  transition: filter 0.3s;
}

.mainButtons
{
  margin-left: 10vw;
  width: 80vw;
  height: 60px;
  display: flex;
  margin-bottom: 10px;
}

.mainButtons div
{
  width: 30vw;
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 10px;
  border-radius: 1vw;
  
  text-align: center;
  height: 60px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background-color: crimson;
}

.mainButtons #proceed
{
  width: 60vw;
  margin-left: 10vw;
  background-color: #1c4fa4; 
}

#intro .intro-text
{
  text-align: center;
}

#intro #intro-button
{
    width: 60vw;
    height: 16vw;
    background-color: slateblue;
    margin: 0 auto;
    margin-top: 40px;
    border-radius: 2vw;
    display: grid;
    place-items: center;
    cursor: pointer;
}

#intro #intro-button p
{
  color: white;
  text-align: center;
  font-size: 6vw;
}

#intro .intro-img
{
  margin-top: 40px;
  display: grid;
  place-items: center;
}


#intro .intro-img img
{
  width: 90%;
}

.center-box
{
  display: grid;
  place-items: center;
}

#gameplay #playerTurn
{
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: red;
  padding: 4px;
}

h1
{
  margin-top: 10px;
}

JavaScript

//gridWidth changes the size of the grid so depending on the number you put in it will change to that amount. The number must be inbetween 1 and 100, because if you go over the limit you will start to see it not fit inside of the screen
const gridWidth = 85;
//ratio changes the size of the tile inside of the grid. There's a limit where you can only put through 0 to 1. Once you reach 1, you will see that the tile has no space inbetween the others.
const ratio = 0.8;
//gridSize changes the amount of tiles there are on the grid. There's no limit, but putting too much might make it super hard considering theres too many points.  If i input 10, then the grid will be 10x10. If input 5, then it will be 5x5.
let gridSize = 12;
let numOfShips = 4;

const gridBackgroundColor = "slateblue";
const tileColor = "aliceblue";

const tileWater = "<div class='tile'><img src='https://static.wikia.nocookie.net/minecraft_gamepedia/images/d/dc/Water_Bucket_JE2_BE2.png'></div>";

const tileShip = "<div class='tile'><img src='https://i.ibb.co/n06bw0h/Untitled-1.png'></div>";

const tileUnknown = "<div class='tile'><img src='https://static.wikia.nocookie.net/minecraft/images/8/8d/BarrierNew.png'></div>";

const tileDestroyed = "<div class='tile'><img src='https://static.wikia.nocookie.net/minecraft_gamepedia/images/a/a2/TNT_JE3_BE2.png'></div>";

let selectedTile = "";

let grids = {};
grids["grid1"] = gridCreate(gridSize, tileWater);
grids["board1"] = gridCreate(gridSize, tileUnknown);
grids["grid2"] = gridCreate(gridSize, tileWater);
grids["board2"] = gridCreate(gridSize, tileUnknown);
grids["allBlank"] = gridCreate(gridSize, tileUnknown);
spawn_ships(grids["grid1"], numOfShips);
spawn_ships(grids["grid2"], numOfShips);
gridDisplay("grid1", grids["board1"]);

window.onclick = e =>
{
		console.log(e.target.id);
    //updateTile(parseMove(e.target.id), tileUnknown);
    //gridDisplay("grid1", grids["grid1"])
    if(e.target.id.substring(0, 4) == "grid" && e.target.id.length > 5)
    {
  ...