diff options
Diffstat (limited to 'test/tic-tac-toe.html')
| -rw-r--r-- | test/tic-tac-toe.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/test/tic-tac-toe.html b/test/tic-tac-toe.html new file mode 100644 index 00000000..d9ea664c --- /dev/null +++ b/test/tic-tac-toe.html @@ -0,0 +1,87 @@ +<html> +<head> + <title>tic tac toe</title> + <style> + td { + border: 1px solid black; + width: 3em; + height: 3em; + font-weight: bolder; + text-align: center; + align-content: center; + } + .button { + border: 1px solid black; + border-radius: 5px; + } + .button:hover { + border-width: 2px; + font-weight: bolder; + } + </style> + <script type="text/javascript" src="AFB.js"></script> + <script type="text/javascript"> + var afb = new AFB("api", "HELLO"); + var ws; + + function $(x) { return document.getElementById(x); } + + + function replyok(obj) { + $("id").innerHTML = obj.response.boardid; + var i; + for (var i = 0 ; i < 9 ; i++) + $("cell-" + i).innerHTML = obj.response.board[i]; + } + function replyerr(obj) { + } + function gotevent(obj) { + ws.call("tictactoe/board").then(replyok, replyerr); + } + + function onopen() { + $("main").style.visibility = "visible"; + $("connected").innerHTML = "Connected to WebSocket server"; + ws.onevent("tictactoe/board", gotevent); + ws.call("tictactoe/new").then(gotevent, replyerr); + } + function onabort() { + $("main").style.visibility = "hidden"; + $("connected").innerHTML = "Connected Closed"; + } + + function init() { + ws = new afb.ws(onopen, onabort); + } + + </script> + +<body onload="init();"> + <h1>Tic Tac Toe</h1> + <div id="connected">Not Connected</div> + <div id="main" style="visibility:hidden"> + <div>board id <span id="id"></span></div> + <div> + <table> + <tr> + <td id="cell-0" onclick="javascript: ws.call('tictactoe/move',{'index':0})"> </td> + <td id="cell-1" onclick="javascript: ws.call('tictactoe/move',{'index':1})"> </td> + <td id="cell-2" onclick="javascript: ws.call('tictactoe/move',{'index':2})"> </td> + </tr> + <tr> + <td id="cell-3" onclick="javascript: ws.call('tictactoe/move',{'index':3})"> </td> + <td id="cell-4" onclick="javascript: ws.call('tictactoe/move',{'index':4})"> </td> + <td id="cell-5" onclick="javascript: ws.call('tictactoe/move',{'index':5})"> </td> + </tr> + <tr> + <td id="cell-6" onclick="javascript: ws.call('tictactoe/move',{'index':6})"> </td> + <td id="cell-7" onclick="javascript: ws.call('tictactoe/move',{'index':7})"> </td> + <td id="cell-8" onclick="javascript: ws.call('tictactoe/move',{'index':8})"> </td> + </tr> + </table> + </div> + <div><span class="button" id="play" onclick="javascript: ws.call('tictactoe/play')">play</span></div> + <div><span class="button" id="undo" onclick="javascript: ws.call('tictactoe/undo')">undo</span></div> + <div><span class="button" id="new" onclick="javascript: ws.call('tictactoe/new')">new</span></div> + </div> + |