Skip to content

Instantly share code, notes, and snippets.

@biesnecker
Created October 21, 2014 23:22
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save biesnecker/0c47af9ec6e57ad90940 to your computer and use it in GitHub Desktop.
/** @jsx React.DOM */
var GameStatus = {
NOTSTARTED: 0,
FINISHED: 1,
INPROGRESS: 2
}
var Suits = ['H', 'D', 'C', 'S'];
var Cards = [];
for (var i = 2; i < 15; i++) {
for (var j = 0; j < Suits.length; j++) {
Cards.push(i + '_' + Suits[j]);
}
}
var StatusComponent = React.createClass({
render: function() {
var winner = this.props.currentWinner;
var status = this.props.status;
var spoils = this.props.cardsWon;
var war = this.props.wasWar;
var text = '';
if (status === GameStatus.NOTSTARTED || winner === null) {
text = '';
} else if (status === GameStatus.FINISHED) {
text = 'Player ' + winner + ' won the game!';
} else {
if (war) {
text += 'WAR! ';
}
text += 'Player ' + winner + ' won ' + spoils + ' cards.';
}
return (
<div>{text}</div>
);
}
});
var ButtonComponent = React.createClass({
render: function() {
var text_options = ['Start Game', 'Play Again', 'Next Round'];
var button_text = text_options[this.props.status];
return (
<button onClick={this.props.clickHandler}>{button_text}</button>
);
}
});
var PlayerComponent = React.createClass({
cardImagePath: function(key) {
var svgFilename = 'back.svg'
if (key) {
svgFilename = key.replace('_', '') + '.svg'
}
return ('/public/images/cards/' + svgFilename);
},
render: function() {
var cardCount = this.props.cardCount;
var currentCard = this.props.currentCard;
var count = "";
if (cardCount) {
c = cardCount === 1 ? 'card' : 'cards';
count = <p>{cardCount} {c} remaining</p>;
}
return (
<div>
<p>
<img width='100%' src={this.cardImagePath(currentCard)} />
</p>
{count}
</div>
)
}
});
var WarGameComponent = React.createClass({
startGame: function() {
// get our own copy of the Cards array
var cardArray = Cards.slice();
// shuffle the cards
var currentIndex = cardArray.length;
var tempValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
tempValue = cardArray[currentIndex];
cardArray[currentIndex] = cardArray[randomIndex];
cardArray[randomIndex] = tempValue;
}
// give each player half and update the game status
this.setState({
playerADeck: cardArray.slice(0, 26),
playerBDeck: cardArray.slice(26),
status: GameStatus.INPROGRESS,
currentWinner: null,
currentWasWar: null,
currentCardsWon: null
});
},
stepForward: function() {
// step the state forward
var spoils = [];
var aDeck = this.state.playerADeck;
var bDeck = this.state.playerBDeck;
var complete = false;
var nextStatus = GameStatus.INPROGRESS;
var isWar = false;
// cycle until there isn't a match
while (!complete) {
var aCard = aDeck.shift();
var bCard = bDeck.shift();
var winner;
spoils.push(aCard, bCard);
var caVal = parseInt(aCard.split('_')[0]);
var cbVal = parseInt(bCard.split('_')[0]);
if (caVal === cbVal) {
// WAR!
isWar = true;
if (aDeck.length < 2) {
winner = 'B';
nextStatus = GameStatus.FINISHED;
complete = true;
} else if (bDeck.length < 2) {
winner = 'A';
nextStatus = GameStatus.FINISHED;
complete = true;
} else {
// hidden card
spoils.push(aDeck.shift(), bDeck.shift());
aCard = aDeck.shift();
bCard = bDeck.shift();
spoils.push(aCard, bCard);
caVal = parseInt(aCard.split('_')[0]);
cbVal = parseInt(bCard.split('_')[0]);
if (caVal !== cbVal) {
complete = true;
if (caVal > cbVal) {
winner = 'A';
aDeck.push.apply(aDeck, spoils);
} else {
winner = 'B';
bDeck.push.apply(bDeck, spoils);
}
}
}
} else {
complete = true;
if (caVal > cbVal) {
winner = 'A';
aDeck.push.apply(aDeck, spoils);
} else {
winner = 'B';
bDeck.push.apply(bDeck, spoils);
}
}
}
if (!aDeck.length || !bDeck.length) {
nextStatus = GameStatus.FINISHED;
}
this.setState({
status: nextStatus,
currentWinner: winner,
currentWasWar: isWar,
currentCardsWon: spoils.length,
playerACurrentCard: aCard,
playerBCurrentCard: bCard,
playerADeck: aDeck,
playerBDeck: bDeck
});
},
clickHandler: function() {
switch(this.state.status) {
case GameStatus.NOTSTARTED:
this.startGame();
break;
case GameStatus.INPROGRESS:
this.stepForward();
break;
case GameStatus.FINISHED:
this.startGame();
}
},
getInitialState: function() {
return ({
playerADeck: null,
playerBDeck: null,
playerACurrentCard: null,
playerBCurrentCard: null,
status: GameStatus.NOTSTARTED,
currentWinner: null,
currentWasWar: null,
currentCardsWon: null
})
},
render: function() {
return (
<div id='war_game_component'>
<table>
<tr>
<td width='33%' rowSpan='2' className='center-align'>
<PlayerComponent
cardCount={this.state.playerADeck ? this.state.playerADeck.length : null }
currentCard={this.state.playerACurrentCard}
/>
</td>
<td width='34%' height='50%' className='center-align'>
<ButtonComponent
clickHandler={this.clickHandler}
status={this.state.status}
/>
</td>
<td width='33%' rowSpan='2' className='center-align' >
<PlayerComponent
cardCount={this.state.playerBDeck ? this.state.playerBDeck.length : null }
currentCard={this.state.playerBCurrentCard}
/>
</td>
</tr>
<tr>
<td className='center-align'>
<StatusComponent
currentWinner={this.state.currentWinner}
wasWar={this.state.currentWasWar}
cardsWon={this.state.currentCardsWon}
status={this.state.status}
/>
</td>
</tr>
</table>
</div>
);
}
});
React.renderComponent(
<WarGameComponent />,
document.getElementById('war')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment