<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//VoiceXML Forum//DTD XHTML+Voice 1.2//EN" "http://www.voicexml.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ev="http://www.w3.org/2001/xml-events"
	xmlns:xv="http://www.voicexml.org/2002/xhtml+voice">

<head>
<title>Tic Tac Toe</title>
<script>
<![CDATA[
function playerMoveTo(player,num)
{
	var temp=(player)?'X':'O';
	if(document.getElementById('board' + num ).value.length <= 0) {
		document.getElementById('board' + num ).value = temp;
		document.getElementById('box' + num).src = "ttt/"+temp+".gif";
		return true;
	} else {
		return false;
	}
}

function winner()
{
	var win = false;
	var checkBoard = new Array();
	for(var i = 0; i < 9; i++) {
		checkBoard[i] = document.getElementById('board' + (i + 1)).value;
	}

	if ((checkBoard[0]=="X")&&(checkBoard[1]=="X")&&(checkBoard[2]=="X")){win = true;}
	if ((checkBoard[3]=="X")&&(checkBoard[4]=="X")&&(checkBoard[5]=="X")){win = true;}
	if ((checkBoard[6]=="X")&&(checkBoard[7]=="X")&&(checkBoard[8]=="X")){win = true;}
	if ((checkBoard[0]=="X")&&(checkBoard[3]=="X")&&(checkBoard[6]=="X")){win = true;}
	if ((checkBoard[1]=="X")&&(checkBoard[4]=="X")&&(checkBoard[7]=="X")){win = true;}
	if ((checkBoard[2]=="X")&&(checkBoard[5]=="X")&&(checkBoard[8]=="X")){win = true;}
	if ((checkBoard[0]=="X")&&(checkBoard[4]=="X")&&(checkBoard[8]=="X")){win = true;}
	if ((checkBoard[2]=="X")&&(checkBoard[4]=="X")&&(checkBoard[6]=="X")){win = true;}

	if ((checkBoard[0]=="O")&&(checkBoard[1]=="O")&&(checkBoard[2]=="O")){win = true;}
	if ((checkBoard[3]=="O")&&(checkBoard[4]=="O")&&(checkBoard[5]=="O")){win = true;}
	if ((checkBoard[6]=="O")&&(checkBoard[7]=="O")&&(checkBoard[8]=="O")){win = true;}
	if ((checkBoard[0]=="O")&&(checkBoard[3]=="O")&&(checkBoard[6]=="O")){win = true;}
	if ((checkBoard[1]=="O")&&(checkBoard[4]=="O")&&(checkBoard[7]=="O")){win = true;}
	if ((checkBoard[2]=="O")&&(checkBoard[5]=="O")&&(checkBoard[8]=="O")){win = true;}
	if ((checkBoard[0]=="O")&&(checkBoard[4]=="O")&&(checkBoard[8]=="O")){win = true;}
	if ((checkBoard[2]=="O")&&(checkBoard[4]=="O")&&(checkBoard[6]=="O")){win = true;}

	return win;
}

function catsGame()
{
	var catsGame = true;
	var checkBoard = new Array();
	for(var i = 0; i < 9; i++) {
		checkBoard[i] = document.getElementById('board' + (i + 1)).value;
	}

	for(var i = 0; i < checkBoard.length; i++) {
		if(checkBoard[i] == ''){catsGame = false;}
	}
	if(catsGame){document.getElementById('messageWindow').src="ttt/winNO.gif";}
	return catsGame;
}

//note: this is set up backwards because the player is switched before this is called.
function setMessage(player)
{
	var msg = "Player ";
	if(player)
	{
		msg += "O Wins!";
		document.getElementById('messageWindow').src="ttt/winO.gif";
	}
	else
	{
		msg += "X Wins!";
		document.getElementById('messageWindow').src="ttt/winX.gif";
	}
	document.getElementById('message').value = msg;
	return msg;
}

function newGame()
{
	for(var i = 0; i < 9; i++) {
		document.getElementById('board' + (i + 1)).value = "";
	}
	document.getElementById('message').value = "";
	document.getElementById('box1').src="ttt/1.gif";
	document.getElementById('box2').src="ttt/2.gif";
	document.getElementById('box3').src="ttt/3.gif";
	document.getElementById('box4').src="ttt/4.gif";
	document.getElementById('box5').src="ttt/5.gif";
	document.getElementById('box6').src="ttt/6.gif";
	document.getElementById('box7').src="ttt/7.gif";
	document.getElementById('box8').src="ttt/8.gif";
	document.getElementById('box9').src="ttt/9.gif";
	document.getElementById('messageWindow').src="ttt/playerX.gif";
}
]]>
</script>
<form xmlns="http://www.w3.org/2001/vxml" id="speakNow">
	<block>
		Welcome to the tic tac toe game.
	</block>

	<var name="playerOne" expr="true"/>

	<block>
		Player X goes first.
	</block>

	<field name="typing_loop" modal="true">
		<grammar>
			<![CDATA[
				#JSGF V1.0;
				grammar numbers;
				public <numbers> = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | stop;
			]]>
		</grammar>
		<prompt timeout="10s">
		</prompt>
		<catch event="nomatch noinput help">
			<throw event="invalidNumber"/>
		</catch>
		<filled>
			<if cond="typing_loop == 'stop'">
				Game stopped.
			<elseif cond="typing_loop == '10'" />
				<throw event="invalidNumber" />
			<else/>
				<if cond="playerMoveTo(playerOne,typing_loop)">
					<if cond="playerOne">
						<assign name="playerOne" expr="false"/>
					<else/>
						<assign name="playerOne" expr="true"/>
					</if>
				<else/>
					Someone has already gone at <value expr="typing_loop" />.
				</if>

				<if cond="winner()">
					<value expr="setMessage(playerOne)" />
				<elseif cond="catsGame()"/>
					Cats game.
				<else/>
					<if cond="playerOne">
						Player X's turn.
						<assign name="document.getElementById('messageWindow').src" expr="'ttt/playerX.gif'" />
					<else/>
						Player O's turn.
						<assign name="document.getElementById('messageWindow').src" expr="'ttt/playerO.gif'" />
					</if>
					<throw event="repeat"/>
				</if>
			</if>
		</filled>
	</field>

	<!--
	* Falls into this field from the first one.
	-->
	<field name="new_game" modal="true">
		<grammar>
			<![CDATA[
				#JSGF V1.0;
				grammar yesNo;
				public <yesNo> = yes | no;
			]]>
		</grammar>
		<prompt timeout="10s">
			Do you want to play another game?
		</prompt>
		<catch event="nomatch noinput help">
			Please answer yes or no.
		</catch>
		<filled>
			<if cond="new_game == 'yes'">
				Player X goes first.
				<value expr="newGame()"/>
				<assign name="playerOne" expr="true"/>
				<throw event="repeat"/>
			<else/>
				<throw event="finished"/>
			</if>
		</filled>
	</field>

	<catch event="invalidNumber">
		Player 
		<if cond="playerOne == true">
			X
		<else/>
			O
		</if>
		Please say a number 1 through 9.
		<throw event="repeat"/>
	</catch>
	<!--
	* Sends back to the top of the form for the first prompt.
	* clear is needed in case the field was filled.
	-->
	<catch event="repeat">
		<clear namelist="typing_loop new_game"/>
		<reprompt/>
	</catch>
	<catch event="finished">
		Thank you for playing Tic Tac Toe.
	</catch>
</form>

<style type="text/css">
* {margin:0;padding:0;}
body {background:#221E1F;}
#tictactoegame {display:none;}
.tictactoe {width:1.5em;}
#messageArea {width:450px;height:175px;margin:0 auto;}
#grid {width:450px;height:450px;margin:0 auto;position:relative;background:transparent url(ttt/board.gif) no-repeat;}
#box1 {position:absolute;left:40px;top:45px;}
#box2 {position:absolute;left:190px;top:45px;}
#box3 {position:absolute;left:320px;top:45px;}
#box4 {position:absolute;left:40px;top:175px;}
#box5 {position:absolute;left:190px;top:175px;}
#box6 {position:absolute;left:320px;top:175px;}
#box7 {position:absolute;left:40px;top:300px;}
#box8 {position:absolute;left:190px;top:300px;}
#box9 {position:absolute;left:320px;top:300px;}
</style>
</head>

<body ev:event="load" ev:handler="#speakNow">
<form id="tictactoegame">
<div id="spoken">
<input id="board1" type="text" class="tictactoe" />
<input id="board2" type="text" class="tictactoe" />
<input id="board3" type="text" class="tictactoe" />
<br />
<input id="board4" type="text" class="tictactoe" />
<input id="board5" type="text" class="tictactoe" />
<input id="board6" type="text" class="tictactoe" />
<br />
<input id="board7" type="text" class="tictactoe" />
<input id="board8" type="text" class="tictactoe" />
<input id="board9" type="text" class="tictactoe" />
<br />
<input id="message" type="text" value="" />
</div>
</form>

<div id="messageArea"><img src="ttt/playerX.gif" alt="" id="messageWindow" /></div>
<div id="grid">
	<img src="ttt/1.gif" alt="" id="box1" />
	<img src="ttt/2.gif" alt="" id="box2" />
	<img src="ttt/3.gif" alt="" id="box3" />
	<img src="ttt/4.gif" alt="" id="box4" />
	<img src="ttt/5.gif" alt="" id="box5" />
	<img src="ttt/6.gif" alt="" id="box6" />
	<img src="ttt/7.gif" alt="" id="box7" />
	<img src="ttt/8.gif" alt="" id="box8" />
	<img src="ttt/9.gif" alt="" id="box9" />
</div>

</body>
</html>