index.html

<!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">
	    <title>BattleshipJS</title>
	    <link rel="stylesheet" href="src/battlestyles.css">
	    <link rel="icon" type="image/png" sizes="32x32" href="src/favicon-32x32.png">
	</head>

	<body>
		<h1>
			<span style="color: #24fcff">BattleshipJS</span>
		</h1>
		<img src="src/battleship_header.png"></img>
		
		<div id="gameInfo">
			<h2> PLAYER:
			<span id="currentPlayer"></span></h2>
			<h2> DIMENSION:
			<span id="currentDimension"></span></h2>
			<h2> MODE:
			<span id="currentMode"></span></h2>
			<div id="currentRoundWrapper">
				<h2> ROUND:
				<span id="currentRound"></span></h2>
			</div>
		</div>
		<div id="boardSizeSelectionDiv" class="flex-container">
			<div style="width:150px">Select board size: </div>
			<div id="sizeSelectionContainer"></div>
		</div>

		<div id="gameShips">
			<h2 style="width: 150px"> SHIPS </h2> 
			<form class="radiobuttons-container" id="ships"></form>
		</div>

		<div id="gameShipsDestroyedP0" style="display: none">
			<h2 style="width: 150px"> SHIPS DESTROYED </h2> 
			<div id="shipsDestroyedP0"></div>
		</div>

		<div id="gameShipsDestroyedP1" style="display: none">
			<h2 style="width: 150px"> SHIPS DESTROYED </h2> 
			<div id="shipsDestroyedP1"></div>
		</div>

		<div id="gameShipDirection">
			<h2 style="width: 150px"> SHIP DIRECTION </h2> 
			<form class="radiobuttons-container-2" id="shipDirectionSelection">
				<label for="horizontal">Horizontal</label>
				<input onchange="updateDirection(this)" id="horizontal" checked="checked" type="radio" name="direction" value="horizontal" />
				
				<label for="vertical">Vertical</label>
				<input onchange="updateDirection(this)" id="vertical" type="radio" name="direction" value="vertical" />
			</form>
			<div id="shipSelected"></div>
		</div>

		<div id="gameNext" style="display:none">
			<button id="next" onclick="nextShooter()">END TURN</button>
			<i> (1. Press the cell to shoot, 2. End turn by pressing the button) </i>
		</div>

		<div id="gameOver" style="display:none">
			<div id="gameOverWinningPlayer">
				<h1>GAME IS OVER</h1>
			</div>
			<button value="Refresh Page" onClick="window.location.reload();">
				PLAY AGAIN
			</button>
		</div>		

		<div id="containerP0"></div>
		<div id="containerP1"></div>
		<script src="src/battlescript.js"></script>
	</body>
</html>