<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Ludum Dare 48</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="icon" href="img/favicon.png" type="image/png">
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!--<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>-->
<!--<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>-->

<script src="ai.js"></script>
<script src="Entity.js"></script>
<script src="HealthBar.js"></script>
<script src="Map.js"></script>
<script src="Player.js"></script>

<script src="Building.js"></script>
<script src="ArcherSpawner.js"></script>
<script src="FlyingSpawner.js"></script>
<script src="GoldMine.js"></script>
<script src="Spawner.js"></script>
<script src="Turret.js"></script>

<script type="text/javascript">

</script>
</head>

<body>

<div id="content">
<canvas id="renderCanvas" touch-action="none"></canvas>
<script src="main.js"></script>

<div id="topUI">
<div style="position:relative;width:100%;height:100%;">
<div id="healthBackground1">
<div id="health1">
</div>
</div>
<div id="healthBackground2">
<div id="health2">
</div>
</div>
</div>
</div>

<div id="htmlOverlay">
<div style="color:#ffffff;margin-bottom:15px;padding-right:50px;"><span id="playerGold">20</span></div>
<button onclick="buildGoldMine()" onmouseover="showBuildingHover(GOLDMINE)" onmouseout="hideBuildingHover()">Gold Mine<br>(<script>document.write(GOLDMINE_PRICE)</script>)</button>
<button onclick="buildSpawner()" onmouseover="showBuildingHover(SPAWNER)" onmouseout="hideBuildingHover()">Mining Camp<br>(<script>document.write(SPAWNER_PRICE)</script>)</button>
<button onclick="buildFlyingSpawner()" onmouseover="showBuildingHover(FLYING_SPAWNER)" onmouseout="hideBuildingHover()">Wyvern Nest<br>(<script>document.write(FLYING_SPAWNER_PRICE)</script>)</button>
<button onclick="buildArcherSpawner()" onmouseover="showBuildingHover(ARCHER_SPAWNER)" onmouseout="hideBuildingHover()">Archer Camp<br>(<script>document.write(ARCHER_SPAWNER_PRICE)</script>)</button>
<button onclick="buildTurret()" onmouseover="showBuildingHover(TURRET)" onmouseout="hideBuildingHover()">Arrow Tower<br>(<script>document.write(TURRET_PRICE)</script>)</button>
</div>

<div id="buildingButtonHover">
<div id="buildingHoverTitle"></div>
<div style="padding:10px">
<span id="buildingHoverPrice"></span><br><hr>
<span id="buildingHoverDescription" style="font-size:16px;"></span>
</div>
</div>

<div id="gameOver">
<span id="gameOverText"></span><br><br>
<button onclick="restart()">Play Again!</button>
</div>

<div id="intro">
<span id="introText"></span><br><br>
<button onclick="start()">Play</button>
</div>

<div id="infoText"><b>Right Click</b>: move camera&ensp;-&ensp;<b>P</b>: pause game&ensp;-&ensp;<b>M</b>: toggle music&ensp;-&ensp;<a href="https://twitter.com/pingpoli" target="_blank">@pingpoli</a></div>

<div id="tutorial" onclick="closeTutorial()">Build a Gold Mine</div>

<div id="buildingWindow">
<div id="buildingWindowTitle"><span id="buildingWindowTitleText"></span><button onclick="closeWindow()">x</button></div>
<div style="padding:10px;text-align:center;">
<span id="buildingWindowContent" style="font-size:16px;text-align:center;"></span>
</div>
</div>

</div>

</body>

</html>