Skip to content

Commit

Permalink
Working Tic Tac Toe.
Browse files Browse the repository at this point in the history
  • Loading branch information
Jordan Fowler committed Dec 15, 2009
1 parent 48db271 commit 157dd8c
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 28 deletions.
21 changes: 9 additions & 12 deletions examples/tictactoe.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -24,28 +24,25 @@
height: 100px; height: 100px;
padding: 5px; padding: 5px;
background: #000; background: #000;
color: #FFF;
font-size: 100px;
text-align: center;
vertical-align: middle;
} }
</style> </style>
</head> </head>
<body> <body>


<h1>Tic Tac Toe</h1> <h1>Tic Tac Toe</h1>


<div id="user-count"></div>
<div id="game-stats"></div>
<div id="status"></div> <div id="status"></div>


<div id="navigation">
<!-- <p>Your Username: <input id="username" type="text" name="username" value="" /></p> -->

<ul>
<!-- <li><a href="#" id="new-game">Start a New Game</a></li> -->
<li><a href="#" id="join-game">Join a Game</a></li>
</ul>
</div>

<table id="game-board"> <table id="game-board">
<tr><td id="cell-0-0" class="open cell"></td><td id="cell-1-0" class="open cell"></td><td id="cell-2-0" class="open cell"></td></tr> <tr><td id="cell-0-0" class="cell"></td><td id="cell-1-0" class="cell"></td><td id="cell-2-0" class="cell"></td></tr>
<tr><td id="cell-0-1" class="open cell"></td><td id="cell-1-1" class="open cell"></td><td id="cell-2-1" class="open cell"></td></tr> <tr><td id="cell-0-1" class="cell"></td><td id="cell-1-1" class="cell"></td><td id="cell-2-1" class="cell"></td></tr>
<tr><td id="cell-0-2" class="open cell"></td><td id="cell-1-2" class="open cell"></td><td id="cell-2-2" class="open cell"></td></tr> <tr><td id="cell-0-2" class="cell"></td><td id="cell-1-2" class="cell"></td><td id="cell-2-2" class="cell"></td></tr>
</table> </table>


<script type="text/javascript" charset="utf-8" src="mootools-1.2.4-core-nc.js"></script> <script type="text/javascript" charset="utf-8" src="mootools-1.2.4-core-nc.js"></script>
Expand Down
98 changes: 82 additions & 16 deletions examples/tictactoe.js
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,62 +1,128 @@
// Author: Jordan Fowler // Author: Jordan Fowler (TheBreeze)

var currentGame = null;


var TicTacToe = new Class({ var TicTacToe = new Class({
wins: 0,
loses: 0,
draws: 0,
methodMap: { methodMap: {
'queued': 'onQueued', 'queued': 'onQueued',
'start': 'onStart', 'start': 'onStart',
'turn': 'onTurn', 'turn': 'onTurn',
'move': 'onMove', 'move': 'onMove',
'game_over': 'onGameOver' 'game_over': 'onGameOver',
'win': 'onWin',
'loss': 'onLoss',
'draw': 'onDraw',
'user_count': 'onUserCount'
}, },


initialize: function() { initialize: function() {
if (TicTacToe.connection == null) { if (TicTacToe.connection == null) {
TicTacToe.connection = new WebSocket('ws://192.168.0.2:8000/tictactoe'); TicTacToe.connection = new WebSocket('ws://192.168.0.2:8000/tictactoe');
}; };


TicTacToe.connection.onopen = this.onJoin.bind(this); TicTacToe.connection.onopen = this.join.bind(this);
TicTacToe.connection.onmessage = this.onMessage.bind(this); TicTacToe.connection.onmessage = this.onMessage.bind(this);
TicTacToe.connection.onclose = this.onGameOver.bind(this); TicTacToe.connection.onclose = this.onGameOver.bind(this);

this.setGameStats();
}, },


onMessage: function(event) { onMessage: function(event) {
var command = JSON.decode(event.data); var command = JSON.decode(event.data);


console.log('[RCV] ' + command.msg); console.log('[RCV] ' + command.msg);


this[this.methodMap[command.msg]].call(this, [command]); this[this.methodMap[command.msg]].call(this, command);
}, },


onJoin: function(event) { message: function(msg, options) {
console.log('[SENT] join game'); var command = JSON.encode({msg: msg, data: options});


TicTacToe.connection.send(JSON.encode({msg: 'join'})); console.log('[SENT] ' + msg);

TicTacToe.connection.send(command);
}, },


onQueued: function(command) { setStatus: function(status) {
$('status').set('text', status);
},

setGameStats: function() {
$('game-stats').set('text', 'Wins: '+this.wins+' / Losses: '+this.wins+' / Draws: '+this.draws);
},

setUserCount: function(userCount) {
$('user-count').set('text', 'Number of players: ' + userCount);
},

join: function(event) {
this.message('join');

this.setStatus('Connecting you to a game...');
},

reset: function() {


}, },


onQueued: function(command) {
this.setStatus('Waiting for another player...');
},

onStart: function(command) { onStart: function(command) {

this.setStatus('Game found! Their turn first...');
}, },


onTurn: function(command) { onTurn: function(command) {

this.setStatus('Your turn...');
}, },


onMove: function(command) { onMove: function(command) {

$('cell-'+command.data.x+'-'+command.data.y).set('text', command.key);

this.setStatus('Their turn...');
},

move: function(x, y) {
this.message('move', {x: x, y: y});
}, },


onGameOver: function(command) { onGameOver: function(command) {

this.setStatus('Game over.');
this.setGameStats();
this.reset();
},

onWin: function(command) {
this.wins += 1;
this.setStatus('Game over. You win!');
this.setGameStats();
},

onLoss: function(command) {
this.losses += 1;
this.setStatus('Game over. You lose!');
this.setGameStats();
},

onDraw: function(command) {
this.draws += 1;
this.setStatus('Game over. It was a draw!');
this.setGameStats();
},

onUserCount: function(command) {
this.setUserCount(command.data);
} }
}); });


$('join-game').addEvent('click', function(event) { $$('.cell').addEvent('click', function(event) {
currentGame = new TicTacToe(); try {
currentGame.move($(this).get('id').split('-')[1], $(this).get('id').split('-')[2]);
} catch(error) {
alert('Please wait while we connect you to a game...');
}
}); });


currentGame = new TicTacToe();

0 comments on commit 157dd8c

Please sign in to comment.