gameConsole.htm

<style type="text/css">
	table button{
		display: inline-block;
		height: 100px;
		width: 100px;
		font-size: 30px;
		-webkit-appearance: none;
	}
	h3, h4, h5{
		text-align: center;
	}
</style>

<h3>X {{namePlayer1}} vs {{namePlayer2}} O</h3>
<h5 id="tips">Next:</h5><h5 id="alert"></h5>
<table id="gameBoard" style="margin: auto">
	<tr>
		<td><button class="gameButton" id="TL" onclick="toggle(TL.id)" value="8"></button></td>
		<td><button class="gameButton" id="TC" onclick="toggle(TC.id)" value="1"></button></td>
		<td><button class="gameButton" id="TR" onclick="toggle(TR.id)" value="6"></button></td>
	</tr>
	<tr>
		<td><button class="gameButton" id="ML" onclick="toggle(ML.id)" value="3"></button></td>
		<td><button class="gameButton" id="MC" onclick="toggle(MC.id)" value="5"></button></td>
		<td><button class="gameButton" id="MR" onclick="toggle(MR.id)" value="7"></button></td>
	</tr>
	<tr>
		<td><button class="gameButton" id="BL" onclick="toggle(BL.id)" value="4"></button></td>
		<td><button class="gameButton" id="BC" onclick="toggle(BC.id)" value="9"></button></td>
		<td><button class="gameButton" id="BR" onclick="toggle(BR.id)" value="2"></button></td>
	</tr>
	<tr>
		<td></td>
		<td><button onclick="reset()" style="height: 50px; font-size: 17px;">Clear</button></td>
		<td><button ng-click="_exit()" style="height: 50px; font-size: 17px;">Exit</button></td>
	</tr>
</table>


<div>
	<h3><span id="XScore">0</span> : <span id="OScore">0</span> </h3>
</div>