Skip to content

Commit

Permalink
No commit message
Browse files Browse the repository at this point in the history
  • Loading branch information
moishel committed Nov 5, 2010
1 parent 7f144b7 commit 0de4064
Show file tree
Hide file tree
Showing 4 changed files with 354 additions and 61 deletions.
2 changes: 1 addition & 1 deletion app.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
application: cha-tac-toe
application: moishetest
version: 1
runtime: python
api_version: 1
Expand Down
59 changes: 41 additions & 18 deletions chatactoe.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ def send_update(self):
gameUpdate = {
'board': self.game.board,
'userX': self.game.userX.user_id(),
'userY': 0 if not self.game.userY else self.game.userY.user_id(),
'userY': '' if not self.game.userY else self.game.userY.user_id(),
'moveX': self.game.moveX
}

Expand All @@ -51,26 +51,43 @@ def send_update(self):
channel.send_message(self.game.userY.user_id() + self.game.key().id_or_name(), message)


class GameFromRequest():
game = None;

def __init__(self, request):
user = users.get_current_user()
game_key = request.get('g')
if user and id:
self.game = Game.get_by_key_name(game_key)

def get_game(self):
return self.game


class MovePage(webapp.RequestHandler):

def post(self):
game = GameFromRequest(self.request).get_game()
user = users.get_current_user()
id = int(self.request.get('i'))
game_key = self.request.get('g')
if user and id:
game = Game.get_by_key_name(game_key)
if game and user == game.userX or user == game.userY:
if game.moveX == (user == game.userX):
boardList = list(game.board)
if (boardList[id] == ' '):
boardList[id] = 'X' if game.moveX else 'Y'
game.board = "".join(boardList)
game.moveX = not game.moveX
game.put()
GameUpdater(game).send_update()
self.response.out.write('ok')
return
if id >= 0 and game and user == game.userX or user == game.userY:
if game.moveX == (user == game.userX):
boardList = list(game.board)
if (boardList[id] == ' '):
boardList[id] = 'X' if game.moveX else 'Y'
game.board = "".join(boardList)
game.moveX = not game.moveX
game.put()
GameUpdater(game).send_update()
self.response.out.write('ok')
return
self.response.out.write('no')


class OpenedPage(webapp.RequestHandler):
def post(self):
game = GameFromRequest(self.request).get_game()
GameUpdater(game).send_update()


class MainPage(webapp.RequestHandler):
Expand All @@ -84,27 +101,32 @@ def get(self):
game = None
if user:
if not game_key:
game_key = user.user_id() + 'random'
game_key = user.user_id()
token = 'x'
while len(token) % 4 != 0:
game_key = game_key + 'x'
token = channel.create_channel(user.user_id() + game_key)

game = Game(key_name = game_key,
userX = user,
moveX = True,
board = ' ')
game.put()
else:
token = channel.create_channel(user.user_id() + game_key)
game = Game.get_by_key_name(game_key)
if not game.userY:
game.userY = user
game.put()

if game:
token = channel.create_channel(user.user_id() + game_key)
template_values = {'token': token,
'me': user.user_id(),
'moveX': game.moveX,
'board': game.board,
'game_key': game_key,
'userX': game.userX.user_id(),
'userY': 0 if not game.userY else game.userY.user_id()}
'userY': '' if not game.userY else game.userY.user_id()}
path = os.path.join(os.path.dirname(__file__), 'index.html')

self.response.out.write(template.render(path, template_values))
Expand All @@ -116,6 +138,7 @@ def get(self):

application = webapp.WSGIApplication([
('/', MainPage),
('/opened', OpenedPage),
('/move', MovePage)], debug=True)


Expand Down
221 changes: 221 additions & 0 deletions index-template
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
<html>
<head>
<script src='/_ah/channel/jsapi'></script>
<style type='text/css'>
.row {
float: top;
}

.board {
margin: 20px;
}

td {
width: 50px;
height: 50px;
font-family: "Helvetica";
font-size: 16pt;
border: none;
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
}

td.ul {
border-bottom: 1pt solid black;
border-right: 1pt solid black;
}

td.um {
border-bottom: 1pt solid black;
}

td.ur {
border-bottom: 1pt solid black;
border-left: 1pt solid black;
}

td.ml {
border-right: 1px solid black;
}

td.mr {
border-left: 1px solid black;
}

td.bl {
border-top: 1pt solid black;
border-right: 1pt solid black;
}

td.bm {
border-top: 1pt solid black;
}

td.br {
border-top: 1pt solid black;
border-left: 1pt solid black;
}
</style>
</head>
<body>
<script type='text/javascript'>
var state = {
game_key: '{{ game_key }}',
me: '{{ me }}'
};

updateGame = function() {
for (i = 0; i < 9; i++) {
var square = document.getElementById(i);
square.innerHTML = state.board[i];
if (state.winner != '' && state.winningBoard != '') {
if (state.winningBoard[i] == state.board[i]) {
square.style.background = "red";
}
}
}

var display = {
'other-player': 'none',
'your-move': 'none',
'their-move': 'none'
};

if (!state.userO || state.userO == '') {
display['other-player'] = 'block';
var path = window.location.href + '?g={{ game_key }}';
var link = '<a href="' + path + '">' + path + '</a">';
document.getElementById('other-player').innerHTML = link;
} else if (isMyMove()) {
display['your-move'] = 'block';
} else {
display['their-move'] = 'block';
}

for (var label in display) {
document.getElementById(label).style.display = display[label];
}
};

isMyMove = function() {
return (state.winner == "") &&
(state.moveX == (state.userX == state.me));
}

myPiece = function() {
return state.userX == state.me ? 'X' : 'O';
}

sendMessage = function(path, opt_param) {
path += '?g=' + state.game_key;
if (opt_param) {
path += '&' + opt_param;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', path, true);
xhr.send();
};

moveInSquare = function(id) {
if (isMyMove() && state.board[id] == ' ') {
sendMessage('/move', 'i=' + id);
}
}

highlightSquare = function(id) {
for (i = 0; i < 9; i++) {
if (i == id && isMyMove()) {
if (state.board[i] = ' ') {
color = 'lightblue';
} else {
color = 'lightgrey';
}
} else {
color = 'white';
}

document.getElementById(i).style['background-color'] = color;
}
}

onOpened = function() {
sendMessage('/opened');
};

onMessage = function(m) {
newState = JSON.parse(m.data);
state.board = newState.board || state.board;
state.userX = newState.userX || state.userX;
state.userO = newState.userO || state.userO;
state.moveX = newState.moveX == 'true';
state.winner = newState.winner || "";
state.winningBoard = newState.winningBoard || "";
updateGame();
}

openChannel = function() {
var token = '{{ token }}';
var channel = new goog.appengine.Channel(token);
var handler = {
'onopen': onOpened,
'onmessage': onMessage,
'onerror': function() {},
'onclose': function() {}
};
var socket = channel.open(handler);
socket.onopen = onOpened;
socket.onmessage = onMessage;
}

initialize = function() {
openChannel();
var i;
for (i = 0; i < 9; i++) {
var square = document.getElementById(i);
square.onmouseover = new Function('highlightSquare(' + i + ')');
square.onclick = new Function('moveInSquare(' + i + ')');
}
onMessage({data: '{{ initial_message }}'});
}

setTimeout(initialize, 100);

</script>
<div id='display-area'>
<h2>Channel-based Tic Tac Toe</h2>
<div id='other-player' style='display:none'>
Waiting for another player to join.<br>
Send them this link to play:<br>
<div id='game-link'>
</div>
</div>
<div id='your-move' style='display:none'>
Your move! Click a square to place your piece.
</div>
<div id='their-move' style='display:none'>
Waiting for other player to move...
</div>
<div id='board'>
<table style='border-spacing: 0px 0px'>
<tr>
<td id='0' class='ul'></td>
<td id='1' class='um'></td>
<td id='2' class='ur'></td>
</tr>
<tr>
<td id='3' class='ml'></td>
<td id='4' class='mm'></td>
<td id='5' class='mr'></td>
</tr>
<tr>
<td id='6' class='bl'></td>
<td id='7' class='bm'></td>
<td id='8' class='br'></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 0de4064

Please sign in to comment.