Skip to content

Commit

Permalink
Web frontend: playing of wild cards now works properly and player car…
Browse files Browse the repository at this point in the history 
…d counts are now displayed
  • Loading branch information
@mscdex
mscdex committed Apr 3, 2011
1 parent 46db344 commit 0776f7e
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 46 deletions.
4 changes: 2 additions & 2 deletions lib/frontends/irc/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ IRCPlayer.prototype.handleEvent = function(event, arg1, arg2, arg3) {
return;
} else if (event === 'draw') {
//ret.on('draw', function(player, numCards) {
msg += arg1.name + ' drew ' + arg2 + ' card(s).';
msg += arg1.name + ' drew ' + arg2 + ' card' + (arg2 > 1 ? 's' : '') + '.';
} else if (event === 'pass') {
//ret.on('pass', function(player) {
msg += arg1.name + ' couldn\'t play and decided to pass.';
msg += arg1.name + ' passed.';
} else if (event === 'youknow') {
//ret.on('youknow', function(player) {
msg += arg1.name + ' has one card left!';
Expand Down
93 changes: 65 additions & 28 deletions lib/frontends/web/public/game.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
var conn, callback, players = {}, me, imgBack = 'images/back.png', inGame = false, isWild = false;
var conn, callback, players = {}, me, imgBack = 'images/back.png',
inGame = false, isNewRound = false, isWild = false, elWild;

/* Game functions */
function addPlayer(p) {
Expand All @@ -9,6 +10,12 @@ function delPlayer(p) {
delete players[p.id];
$('#player-' + p.id).remove();
}
function addCardCount(id, amt) {
var numCards = parseInt($('#player-' + id + ' div.cardcount').html());
if (isNaN(numCards))
numCards = 0;
$('#player-' + id + ' div.cardcount').html(''+(numCards += amt));
}
function cardToImage(card) {
if (card[0] < 4)
return 'images/' + card[0] + '_' + card[1] + '.png';
Expand Down Expand Up @@ -47,9 +54,13 @@ function cardToText(card) {
return text;
}
function imageToCard(src) {
var idxSep = src.lastIndexOf('_');
return [parseInt(src.substring(src.lastIndexOf('/')+1, idxSep)),
parseInt(src.substring(idxSep+1, src.lastIndexOf('.')))];
src = src.substring(src.lastIndexOf('/')+1);
var idxSep = src.indexOf('_'), idxEnd = src.indexOf('.');
if (idxSep === -1)
return [parseInt(src.substring(0, idxEnd))];
else
return [parseInt(src.substring(0, idxSep)),
parseInt(src.substring(idxSep+1, idxEnd))];
}
function reset() {
isWild = inGame = false;
Expand All @@ -69,37 +80,42 @@ function handleEvent(res) {
if (res.newOwner)
$('#player-' + res.newOwner.id).addClass('owner');
} else if (res.event === 'start') {
if (res.roundWinner)
status(res.roundWinner.name + ' won this round. Next round started ...');
else {
var msg;
if (res.roundWinner) {
msg = res.roundWinner.name + ' won this round. Next round started.';
isNewRound = true;
} else {
inGame = true;
status('Game started');
msg = 'Game started';
}

$('#discard img').attr('src', cardToImage(res.topCard));

$('.turn').removeClass('turn');
if (res.startPlayer.id === me.id)
status('Your turn');
msg += 'Your turn.';
else
$('#player-' + res.startPlayer.id).addClass('turn');

for (var i=0,len=res.hand.length; i<len; ++i)
$('#hand').append('<img src="' + cardToImage(res.hand[i]) + '" />');
$('.cardcount').html('7');

$('#piles, #hand').show();
$('.cardcount').css('visibility', 'visible');
status(msg);
} else if (res.event === 'play') {
isNewRound = false;
var msg = res.player.name + ' played a ' + cardToText(res.card);
$('#discard img').attr('src', cardToImage(res.card));
if (typeof res.wildColor !== 'undefined') {
isWild = true;
$('#wildColor').css('class', 'wildColor' + res.wildColor).show();
} else {
if (isWild) {
isWild = false;
$('#wildColor').hide();
}
$('#wildColor').attr('class', 'wildColor' + res.wildColor).show();
} else if (isWild) {
isWild = false;
$('#wildColor').hide();
}
addCardCount(res.player.id, -1);
status(msg);
} else if (res.event === 'end') {
status('Game ended' + (res.player ? '. Game winner: ' + res.player.name : ''));
Expand All @@ -117,7 +133,8 @@ function handleEvent(res) {
// add card(s) to hand
for (var i=0,len=res.drawnCards.length; i<len; ++i)
$('#hand').append('<img src="' + cardToImage(res.drawnCards[i]) + '" />');
}
} else
addCardCount(res.player.id, res.numCards);
status(who + ' drew ' + res.numCards + ' card' + (res.numCards > 1 ? 's' : ''));
} else if (res.event === 'pass') {
status(res.player.name + ' passed');
Expand All @@ -141,8 +158,8 @@ function send(text, cb) {
var ret = conn.send(text);
if (typeof ret === 'string')
log('Error while sending data: ' + ret);
/*else
log('Sent: ' + text);*/
else
log('Sent: ' + text);
}
function preloadAssets() {
/* Preload card assets */
Expand Down Expand Up @@ -205,18 +222,38 @@ function initUIHandlers() {
$('#pass').hide();
});
});
$('#hand img').live('click', function() {
var idx = $(this).index(), self = this;
// TODO: check for wild card first
send('play ' + idx, function() {
var card = imageToCard($(self).attr('src'));
$('#discard img').attr('src', $(self).attr('src'));
$(self).remove();
$('#pass').hide();
if (inGame && card[0] < 4)
status('You played a ' + cardToText(card));
$('#colorchooser div').click(function() {
var color = $(this).index(), idxCard = $(elWild).index();
send('play ' + idxCard + ' ' + color, function() {
isWild = true;
if (!isNewRound && inGame)
status(' ');
else
isNewRound = false;
$('#discard img').attr('src', $(elWild).attr('src'));
$(elWild).remove();
$('#pass, #colorchooser').hide();
$('#wildColor').attr('class', 'wildColor' + color).show();
});
});
$('#hand img').live('click', function() {
var idx = $(this).index(), self = this,
card = imageToCard($(self).attr('src'));
if (card[0] > 3) {
elWild = self;
$('#colorchooser').show();
} else {
send('play ' + idx, function() {
if (!isNewRound && inGame)
status(' ');
else
isNewRound = false;
$('#discard img').attr('src', $(self).attr('src'));
$(self).remove();
$('#pass, #colorchooser').hide();
});
}
});
}

/* Setup the connnection */
Expand Down
8 changes: 5 additions & 3 deletions lib/frontends/web/public/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@
.playingarea, #piles, #pass, #hand, #wildColor, #pass, #colorchooser { display: none; }
#hand img, #draw, #discard, #pass, #wildColor, #colorchooser, #colorchooser div, .player { float: left; }

.cardcount { display: inline; visibility: hidden; background-color: black; color: white; padding: 5px; margin-left: 5px; }
#piles { text-align: center; margin-left: auto; margin-right: auto; }
#draw img { border: 1px solid black; }
#colorchooser { border: 1px solid #999999; }
#wildColor, #colorchooser div { width: 40px, height: 40px, border: 1px solid black; }
#colorchooser, #piles { white-space: nowrap; }
#wildColor, #colorchooser div { width: 90px; height: 80px; border: 1px solid black; }
#pass { cursor: pointer; padding: 30px; border: 2px solid black; background-color: #CCCCCC; color: black; }

.wildColor0 { background-color: blue; }
Expand All @@ -30,7 +31,7 @@

#players { margin-bottom: 20px; }

.player { border: 1px solid black; padding: 10px; margin: 10px; }
.player { border: 1px solid black; padding: 10px; margin: 10px; white-sapce: nowrap; }
.owner { border: 3px solid blue; }
.turn { border: 3px solid green; }
</style>
Expand All @@ -40,6 +41,7 @@
<div class="playingarea">
<div id="players"></div>
<div id="piles">
<hr style="clear: both" />
<div id="draw"><img src="images/back.png" /></div>
<div id="discard"><img /></div>
<div id="wildColor">&nbsp;</div>
Expand Down
30 changes: 17 additions & 13 deletions lib/manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ Game.prototype.play = function(card, color) {
return 'Invalid card';

if (curPlayer.hand[card][0] >= CARD_TYPE.WILD) {
if (typeof color === 'undefined' || color < 0 || color > CARD_TYPE.YELLOW)
if (typeof color !== 'number' || color < 0 || color > CARD_TYPE.YELLOW)
return 'Invalid color for Wild card';
this.curColor = wildColor = color;
if (curPlayer.hand[card][0] === CARD_TYPE.WILD4)
Expand Down Expand Up @@ -474,19 +474,23 @@ Manager.prototype.findPlayer = function(playerName, type) {
};
Manager.prototype.play = function(playerName, type, card, color) {
var ret;
if (color && typeof color === 'string') {
if (color === 'blue')
color = CARD_TYPE.BLUE;
else if (color === 'green')
color = CARD_TYPE.GREEN;
else if (color === 'red')
color = CARD_TYPE.RED;
else if (color === 'yellow')
color = CARD_TYPE.YELLOW;
else
color = -1;
if (typeof color === 'string') {
var num = parseInt(color);
if (isNaN(num)) {
if (color === 'blue')
color = CARD_TYPE.BLUE;
else if (color === 'green')
color = CARD_TYPE.GREEN;
else if (color === 'red')
color = CARD_TYPE.RED;
else if (color === 'yellow')
color = CARD_TYPE.YELLOW;
else
color = -1;
} else
color = num;
} else
color = -1;
color = undefined;
ret = this.findPlayer(playerName, type);
if (typeof ret !== 'boolean') {
if (ret.game.curPlayer === ret.game.players.indexOf(ret))
Expand Down

0 comments on commit 0776f7e

Please sign in to comment.