Permalink
Browse files

The interface is usable now.

  • Loading branch information...
1 parent bc8d90b commit 7864f03558772de93b16d919eaf9ba7d8d91d0a6 @blixt committed Jun 5, 2008
View
@@ -17,6 +17,10 @@ handlers:
static_files: \2/\1
upload: (css|js)/(.*\.\1)
+- url: /(.*\.(gif|jpg|png))
+ static_files: img/\1
+ upload: img/.+\.(gif|jpg|png)
+
- url: /.*
script: main.py
login: required
View
@@ -1,6 +1,73 @@
+#body {
+ background: #fff;
+ color: #111;
+ margin: 70px 50px 40px;
+ padding: 15px;
+}
+
+#user {
+ font-size: medium;
+ line-height: 40px;
+ position: absolute;
+ right: 55px;
+ top: 30px;
+}
+
+#user a {
+ color: #8f0;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background: #333;
+ color: #fff;
+ font: large/1.3em Verdana, sans-serif;
+}
+
+h1 {
+ height: 40px;
+ left: 50px;
+ position: absolute;
+ top: 20px;
+}
+
+h1 a {
+ color: #8f0;
+ font-family: Georgia, serif;
+ line-height: 40px;
+ text-decoration: none;
+}
+
+h2, h3, h4, h5, h6 {
+ font-family: Georgia, serif;
+ line-height: 1.6em;
+}
+
+p {
+ margin-bottom: .5em;
+}
+
+table {
+ width: 100%;
+}
+
+th {
+ text-align: left;
+}
+
+/* MoNKey! client-specific styles */
+div.monkey button {
+ font-size: large;
+}
+
div.monkey div.game table {
border: #000 solid 2px;
border-collapse: collapse;
+ width: auto;
}
div.monkey div.game td {
@@ -28,3 +95,40 @@ div.monkey div.game td.player-2 {
background: #c00;
cursor: default;
}
+
+div.monkey div.lobby .action {
+ text-align: center;
+ width: 150px;
+}
+
+div.monkey div.lobby td {
+ border-color: #ddd;
+ border-style: solid;
+ border-width: 1px 0;
+ font-size: medium;
+ padding: .2em .5em;
+}
+
+div.monkey div.lobby td.no-games {
+ color: #666;
+ font-style: italic;
+ text-align: center;
+}
+
+div.monkey div.lobby td.slot, div.monkey div.lobby td.slot button {
+ font-size: small;
+ line-height: 1em;
+}
+
+div.monkey div.lobby th {
+ font-family: Georgia, serif;
+}
+
+div.monkey select {
+ font-size: large;
+ margin-right: .5em;
+}
+
+div.monkey table {
+ margin: 1em auto;
+}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -10,7 +10,7 @@ indexes:
# automatically uploaded to the admin console when you next deploy
# your application using appcfg.py.
-# Used 52 times in query history.
+# Used 3280 times in query history.
- kind: Game
properties:
- name: state
View
@@ -76,8 +76,12 @@ var MonkeyService = new Class({
this.call('create', { rule_set_id: ruleSetId }, onSuccess, onError);
},
- gameStatus: function (gameId, onSuccess, onError) {
- this.call('status', { game_id: gameId }, onSuccess, onError);
+ gameStatus: function (gameId, turn, onSuccess, onError) {
+ this.call('status', { game_id: gameId, turn: turn }, onSuccess, onError);
+ },
+
+ getRuleSets: function (onSuccess, onError) {
+ this.call('rule_sets', {}, onSuccess, onError);
},
joinGame: function(gameId, onSuccess, onError) {
@@ -89,7 +93,7 @@ var MonkeyService = new Class({
},
move: function (gameId, x, y, onSuccess, onError) {
- this.call('move', { 'game_id': gameId, 'x': x, 'y': y }, onSuccess, onError);
+ this.call('move', { game_id: gameId, 'x': x, 'y': y }, onSuccess, onError);
}
});
@@ -99,21 +103,22 @@ var MonkeyClient = new Class({
mc.gameId = null;
mc.service = new MonkeyService();
+ mc.turn = null;
+
+ var ruleSets;
mc.html = {};
$extend(mc.html, {
game: new Element('div', {
'class': 'game'
}).adopt(
+ mc.html.gameStatus = new Element('p'),
new Element('p').adopt(
- new Element('a', {
+ new Element('button', {
events: {
- click: function () {
- mc.setMode(MonkeyClient.Mode.lobby);
- }
+ click: mc.setMode.bind(mc, MonkeyClient.Mode.lobby)
},
- href: '#lobby',
- text: 'Back to the lobby (this will not end the game)'
+ text: 'To the lobby'
})
),
mc.html.players = new Element('ol', { 'class': 'players' }),
@@ -127,20 +132,29 @@ var MonkeyClient = new Class({
lobby: new Element('div', {
'class': 'lobby'
}).adopt(
+ new Element('p').adopt(
+ ruleSets = new Element('select'),
+ new Element('button', {
+ events: {
+ click: function () { mc.createGame(parseInt(ruleSets.value)); }
+ },
+ text: 'Create game'
+ })
+ ),
new Element('table').adopt(
new Element('thead').adopt(
new Element('tr').adopt(
new Element('th', {
+ 'class': 'action',
+ text: 'View/Play'
+ }),
+ new Element('th', {
'class': 'rule-set',
text: 'Rule set'
}),
new Element('th', {
'class': 'players',
text: 'Players'
- }),
- new Element('th', {
- 'class': 'action',
- text: 'View/Play'
})
)
),
@@ -149,9 +163,20 @@ var MonkeyClient = new Class({
)
});
+ mc.service.getRuleSets(function (list) {
+ for (var i = 0; i < list.length; i++) {
+ new Element('option', { text: list[i].name, value: list[i].id }).inject(ruleSets);
+ }
+ ruleSets.value = list[0].id;
+ });
+
mc.setMode(MonkeyClient.Mode.lobby);
},
+ createGame: function (ruleSetId) {
+ this.service.createGame(ruleSetId, this.goToGame.bind(this));
+ },
+
goToGame: function (gameId) {
this.gameId = gameId;
this.setMode(MonkeyClient.Mode.game);
@@ -173,26 +198,25 @@ var MonkeyClient = new Class({
var g = games[i], row;
this.html.gameList.adopt(new Element('tr').adopt(
new Element('td', {
- 'class': 'rule-set',
- rowspan: g.rule_set.num_players,
- text: g.rule_set.name
- }),
- new Element('td', {
- 'class': 'slot',
- text: g.players[0]
- }),
- new Element('td', {
'class': 'action',
rowspan: g.rule_set.num_players
}).adopt(
- new Element('a', {
+ new Element('button', {
events: {
click: this.goToGame.bind(this, g.id)
},
- href: '#' + g.id,
text: g.playable ? 'Play' : 'View'
})
- )
+ ),
+ new Element('td', {
+ 'class': 'rule-set',
+ rowspan: g.rule_set.num_players,
+ text: g.rule_set.name
+ }),
+ new Element('td', {
+ 'class': 'slot',
+ text: g.players[0]
+ })
));
for (var j = 1; j < g.rule_set.num_players; j++) {
@@ -202,12 +226,11 @@ var MonkeyClient = new Class({
new Element('td', {
'class': 'open slot'
}).adopt(
- new Element('a', {
+ new Element('button', {
events: {
click: this.joinGame.bind(this, g.id)
},
- href: '#' + g.id,
- text: 'Open spot'
+ text: 'Join game'
})
):
new Element('td', {
@@ -224,24 +247,57 @@ var MonkeyClient = new Class({
},
handleStatus: function (game) {
- this.html.gameBoard.empty();
+ if (game !== false) {
+ this.turn = game.turn;
- var width = game.board.length, height = game.board[0].length;
- for (var y = 0; y < height; y++) {
- var row = new Element('tr').inject(this.html.gameBoard);
+ var pa = game.playing_as;
+ var cp = game.current_player;
- for (var x = 0; x < width; x++) {
- var player = game.board[x][y];
- new Element('td', {
- events: {
- click: this.move.bind(this, [x, y]),
- mouseenter: function () { this.addClass('hover'); },
- mouseleave: function () { this.removeClass('hover'); }
- },
- 'class': player ? 'player-' + player : 'empty'
- }).adopt(
- new Element('span', { text: player })
- ).inject(row);
+ var status;
+ switch (game.state) {
+ case 'waiting':
+ status = 'This game needs more players before it can start.';
+ break;
+ case 'playing':
+ status = 'This game is currently being played. It\'s ' +
+ (pa == cp ? 'your' : game.players[cp - 1] + '\'s') +
+ ' turn.';
+ break;
+ case 'aborted':
+ status = 'This game was aborted.';
+ break;
+ case 'draw':
+ status = 'This game ended in a draw.';
+ break;
+ case 'win':
+ status = 'This game has ended. ';
+ if (pa == cp)
+ status += 'You won!';
+ else
+ status += game.players[cp - 1] + ' won.';
+ break;
+ }
+
+ this.html.gameStatus.set('text', status);
+ this.html.gameBoard.empty();
+
+ var width = game.board.length, height = game.board[0].length;
+ for (var y = 0; y < height; y++) {
+ var row = new Element('tr').inject(this.html.gameBoard);
+
+ for (var x = 0; x < width; x++) {
+ var player = game.board[x][y];
+ new Element('td', {
+ events: {
+ click: this.move.bind(this, [x, y]),
+ mouseenter: function () { this.addClass('hover'); },
+ mouseleave: function () { this.removeClass('hover'); }
+ },
+ 'class': player ? 'player-' + player : 'empty'
+ }).adopt(
+ new Element('span', { text: player })
+ ).inject(row);
+ }
}
}
@@ -271,7 +327,7 @@ var MonkeyClient = new Class({
this.service.listGames(this.handleList.bind(this));
break;
case MonkeyClient.Mode.game:
- this.service.gameStatus(this.gameId, this.handleStatus.bind(this));
+ this.service.gameStatus(this.gameId, this.turn, this.handleStatus.bind(this));
break;
}
},
@@ -282,10 +338,16 @@ var MonkeyClient = new Class({
switch (this.mode) {
case MonkeyClient.Mode.lobby:
this.html.lobby.dispose();
+ this.html.gameList.empty();
+
break;
case MonkeyClient.Mode.game:
- this.gameId = null;
this.html.game.dispose();
+ this.html.gameBoard.empty();
+
+ this.gameId = null;
+ this.turn = null;
+
break;
}
Oops, something went wrong.

0 comments on commit 7864f03

Please sign in to comment.