index.html

<html>
<head>
<link rel="icon" href="favicon.ico" >
<title>SpheresIO.net</title>
<style>

* 
{
	font-family: sans-serif;
	margin: 0px;
	padding: 0px;
}
body 
{
	background-color:gray;
}
h1 
{
	margin-bottom: 10px;
}
ol 
{
	margin-top: 0px;
	margin-left: 18px;
	list-style-type:decimal;
}
p, ul
{
	font-size: 10pt;
}
#title 
{
	border: thin solid red;
	border-radius: 25px;
	background-color: gray;
	text-align: center;
	position: absolute;
	z-index: 1;
	top: 30%;
	left: 30%;
	width: 30em;
	height: 20em;
}
.UIhidden
{
	visibility:hidden;
}
#nameBox 
{
	margin-bottom: 10px;
}
#slideContainer
{
	text-align: left;
	color: white;
	text-align: center;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	bottom: 0%;
	left: 20%;
	width: 60%;
	height: 2.5em;
	pointer-events: none;
}
#unitSlider
{
	width: 50%;
	pointer-events: auto;
}
#topUI 
{
	color: white;
	text-align: center;
	overflow:hidden;
	position: absolute;
	z-index: 1;
	top: 0%;
	left: 30%;
	width: 40%;
	height: 5em;
	pointer-events:none;
}
#leaderboard 
{
	color: white;
	text-align: left;
	overflow:hidden;
	position: absolute;
	z-index: 1;
	top: 0%;
	right: 0%;
	width: 12em;
	height: 18em;
	pointer-events:none;
}
#disconnected
{
	visibility: hidden;	
	border: thin solid red;
	border-radius: 25px;
	background-color: gray;
	text-align: center;
	position: absolute;
	z-index: 1;
	top: 40%;
	left: 25%;
	width: 50%;
	height: 20%;
}
#game 
{
	position: relative;
	top: 0;
	left: 0;
}
#viewport
{
	background-color:black;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
</style>
</head>

<body>

<script src="/socket.io/socket.io.js"></script>


<div id = "title">
	<h1>SpheresIO.net</h1>
	<input type="textbox" id = "nameBox" value = "" maxlength = "20"> <br>
	<input type="button" value = "  Play  " onclick = "initialize(); /*player.spawn()*/">
	<!--<input type="button" value = "Spectate" onclick = "initialize();">-->
	<!--
	<input type="button" value = "How to play" onclick = "document.getElementById('howToPlay').style.visibility = 'visible'">
	<input type="button" value = "Settings" onclick = "document.getElementById('settings').style.visibility = 'visible'">
	-->
	<div id = "howToPlay">
		<h3> How to Play: </h3> 
		<ul>
			<li>Select nodes with left-click, then click on a node to move units to it.</li>
			<li>Capturing nodes to increases your unit cap and spawn rates.</li>
			<li>To win, capture three out of the four cores by capturing all of the nodes orbiting them.</li>
		</ul>
		<h3>Controls:</h3>
		<ul>
			<li>Use the mouse to move your units between nodes.</li>
			<li>Use WASD or the mouse to move the camera.</li>
			<li>You can zoom in or out using the scroll wheel.</li>
			<li>Use E and Q to increase or decrease the amount of units sent per move.</li>
			<li>Hold spacebar to box select.</li>
			<li>Press X to deselect the node underneath your mouse.</li>
		</ul>
	</div>
	<div id = "settings">
		<!-- Insert settings customization here -->
	</div>
	<a href = SpheresIOChangelog.txt>Changelog</a>
	<a href = https://discord.gg/GYddMRG>Discord</a>
	<a href = https://iogames.space>More IO games</a>
</div>
<div id = "disconnected">
	<h2 id="disconnectMessage"></h2>
</div>

<div id = "slideContainer" class = "UIhidden">
	<p id = "unitValue">50%</p>
	<input type="range" min="1" max="100" value="50" id="unitSlider">
</div>

<div id = "topUI" class = "UIhidden">
<h4 id = "popCounter">POP: 0/0</h4>
<h2 id = "announcement">Double-click on a neutral node to spawn in.</h2>
</div>

<div id = "leaderboard" class = "UIhidden">
<h2>Leaderboard</h2>
<ol>
<li id = "1"></li>
<li id = "2"></li>
<li id = "3"></li>
<li id = "4"></li>
<li id = "5"></li>
<li id = "6"></li>
<li id = "7"></li>
<li id = "8"></li>
<li id = "9"></li>
<li id = "10"></li>
</ol>
</div>

<div id = "game">
		<canvas id="viewport" width="1280" height="918">
		<script src="consts.js"></script>
		<script src="Spheres.js"></script>
</div>

</body>
</html>