test/tic-tac-toe.html

   1 <html>
   2 <head>
   3     <title>tic tac toe</title>
   4     <style>
   5         td {
   6                 border: 1px solid black;
   7                 width: 3em;
   8                 height: 3em;
   9                 font-weight: bolder;
  10                 text-align: center;
  11                 align-content: center;
  12         }
  13         .button {
  14                 border: 1px solid black;
  15                 border-radius: 5px;
  16         }
  17         .button:hover {
  18                 border-width: 2px;
  19                 font-weight: bolder;
  20         }
  21     </style>
  22     <script type="text/javascript" src="AFB.js"></script>
  23     <script type="text/javascript">
  24         var afb = new AFB("api", "HELLO");
  25         var ws;
  26
  27         function $(x) { return document.getElementById(x); }
  28
  29
  30         function replyok(obj) {
  31                 $("id").innerHTML = obj.response.boardid;
  32                 var i;
  33                 for (var i = 0 ; i < 9 ; i++)
  34                         $("cell-" + i).innerHTML = obj.response.board[i];
  35         }
  36         function replyerr(obj) {
  37         }
  38         function gotevent(obj) {
  39                 ws.call("tictactoe/board").then(replyok, replyerr);
  40         }
  41
  42         function onopen() {
  43                 $("main").style.visibility = "visible";
  44                 $("connected").innerHTML = "Connected to WebSocket server";
  45                 ws.onevent("tictactoe/board", gotevent);
  46                 ws.call("tictactoe/new").then(gotevent, replyerr);
  47         }
  48         function onabort() {
  49                 $("main").style.visibility = "hidden";
  50                 $("connected").innerHTML = "Connected Closed";
  51         }
  52
  53         function init() {
  54                 ws = new afb.ws(onopen, onabort);
  55         }
  56
  57     </script>
  58
  59 <body onload="init();">
  60     <h1>Tic Tac Toe</h1>
  61     <div id="connected">Not Connected</div>
  62     <div id="main" style="visibility:hidden">
  63             <div>board id <span id="id"></span></div>
  64             <div>
  65                     <table>
  66                             <tr>
  67                                     <td id="cell-0" onclick="javascript: ws.call('tictactoe/move',{'index':0})"> </td>
  68                                     <td id="cell-1" onclick="javascript: ws.call('tictactoe/move',{'index':1})"> </td>
  69                                     <td id="cell-2" onclick="javascript: ws.call('tictactoe/move',{'index':2})"> </td>
  70                             </tr>
  71                             <tr>
  72                                     <td id="cell-3" onclick="javascript: ws.call('tictactoe/move',{'index':3})"> </td>
  73                                     <td id="cell-4" onclick="javascript: ws.call('tictactoe/move',{'index':4})"> </td>
  74                                     <td id="cell-5" onclick="javascript: ws.call('tictactoe/move',{'index':5})"> </td>
  75                             </tr>
  76                             <tr>
  77                                     <td id="cell-6" onclick="javascript: ws.call('tictactoe/move',{'index':6})"> </td>
  78                                     <td id="cell-7" onclick="javascript: ws.call('tictactoe/move',{'index':7})"> </td>
  79                                     <td id="cell-8" onclick="javascript: ws.call('tictactoe/move',{'index':8})"> </td>
  80                             </tr>
  81                     </table>
  82             </div>
  83             <div><span class="button" id="play" onclick="javascript: ws.call('tictactoe/play')">play</span></div>
  84             <div><span class="button" id="undo" onclick="javascript: ws.call('tictactoe/undo')">undo</span></div>
  85             <div><span class="button" id="new" onclick="javascript: ws.call('tictactoe/new')">new</span></div>
  86     </div>
  87