Commits

Colin Copeland committed 55a82c0

make server only move for a single player; update client to listen for and redraw board on server move

  • Participants
  • Parent commits 28a9c62

Comments (0)

Files changed (3)

tic-tac-toe/media/game.js

 var ws = undefined;
 
 function setup_board(ctx) {
-    box_size = ctx.canvas.width/3.0;
-    // adjust board size to fit line widths
-    ctx.canvas.width += line_size;
-    ctx.canvas.height += line_size;
-    console.log('box size', box_size);
-    console.log('line size', line_size);
     ctx.clearRect(0, 0, ctx.canvas.height, ctx.canvas.width);
     // border
+    ctx.fillStyle = '#000000';
     ctx.fillRect(0, 0, line_size, ctx.canvas.height);
     ctx.fillRect(0, 0, ctx.canvas.width, line_size);
     ctx.fillRect(ctx.canvas.height - line_size, 0, line_size, ctx.canvas.height);
 }
 
 function mark(ctx, row, col) {
-    console.log('mark', row, col);
+    console.log('mark', row, col, board);
     var game = new TicTacToe(board);
     if (game.space_is_free(row, col)) {
-        game.move(row, col, turn);
-        ctx.fillStyle = colors[turn];
-        var x = col * box_size + line_size;
-        var y = row * box_size + line_size;
-        ctx.fillRect(x, y, box_size - line_size, box_size - line_size);
+        game.move(row, col, 1);
+        game.draw(ctx);
+        board = game.board;
+        send_message(JSON.stringify({'board': board}));
     }
-    board = game.board;
-    turn *= -1;
-    
-    
-
-    send_message(JSON.stringify({'board': board}));
-    
-    // $.ajax({
-    //     url: 'http://localhost:8888/',
-    //     type: 'POST',
-    //     data: JSON.stringify({'board': board}),
-    //     dataType: 'json',
-    //     // contentType: 'json',
-    //     processData: false,
-    //     success: function(response) {
-    //         console.log(response);
-    //     }
-    // });
 }
 
 
 function TicTacToe(board) {
     this.board = board;
+    this.ctx = $('#board').get(0).getContext("2d");
     this.space_is_free = function(row, col) {
         return this.board[row][col] == 0;
     }
     this.move = function(row, col, turn) {
         this.board[row][col] = turn;
     }
+    this.draw = function(ctx) {
+        setup_board(ctx);
+        var game = this;
+        $(this.board).each(function (row, x) {
+            console.log('test', x, this);
+            $(x).each(function (col, val) {
+                console.log(row, col, val);
+                if (!game.space_is_free(row, col)) {
+                    console.log('foo');
+                    ctx.fillStyle = colors[val];
+                    var x = col * box_size + line_size;
+                    var y = row * box_size + line_size;
+                    ctx.fillRect(x, y, box_size - line_size, box_size - line_size);
+                }
+            });
+        });
+    }
 }
 
 function send_message(msg) {
     ws.send(msg);
 }
 
+function message_received(e, msg) {
+    var ctx = $('#board').get(0).getContext("2d");
+    var game = new TicTacToe(JSON.parse(msg.board));
+    game.draw(ctx);
+    board = game.board;
+    console.log('new board', board);
+}
+
 $(document).ready(function() {
     var canvas = $('#board');
     var ctx = canvas.get(0).getContext("2d");
+    
+    // init board
+    box_size = ctx.canvas.width/3.0;
+    // adjust board size to fit line widths
+    ctx.canvas.width += line_size;
+    ctx.canvas.height += line_size;
+    console.log('box size', box_size);
+    console.log('line size', line_size);
+    
+    
     canvas.click(function(e) {
         var x = e.pageX - this.offsetLeft;
         var y = e.pageY - this.offsetTop;
     };
     ws.onmessage = function (e) {
         console.debug('WebSocket received:', e.data);
+        console.log(e);
+        message_received(e, JSON.parse(e.data));
     };
     ws.onclose = function(e) {
         console.debug('WebSocket closed', e);

tic-tac-toe/server/requirements.txt

 # pip install -r requirements.txt
 
 -e git+http://github.com/facebook/tornado.git#egg=tornado
-pycurl==7.16.2.1
+pycurl

tic-tac-toe/server/tttserv.py

 
 def move(board):
     import random
-    row = random.choice(range(len(board)))
-    col = random.choice(range(len(board[0])))
-    new_options = [-1,0,1]
-    new_options.remove(board[row][col])
-    board[row][col] = random.choice( new_options )
+    while True:
+        row = random.choice(range(len(board)))
+        col = random.choice(range(len(board[0])))
+        if board[row][col] not in (-1, 1):
+            board[row][col] = -1
+            return board
+    # new_options = [-1,0,1]
+    # new_options.remove(board[row][col])
+    # board[row][col] = -1
     return board
 
 class MainHandler(tornado.web.RequestHandler):