Create a gist now

Instantly share code, notes, and snippets.

@jonsadka /.block
Last active Sep 18, 2016

Embed
What would you like to do?
Rock Paper Scissors
license: mit

Shows ever possible combination of rock paper scissors for a given number of plays.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var rockPaperScissorsGame = function(){
this.options = ['rock', 'paper', 'scissors'];
}
rockPaperScissorsGame.prototype.addAnotherRound = function(){
var existingHands = this.possibleHands || [];
if (existingHands.length < 1){
this.possibleHands = this.options.map(function(option){return [option];});
return;
} else {
var handsToAdd = existingHands.length
for (var i = 0; i < handsToAdd; i++){
var currentHand = this.possibleHands.shift();
for (var j = 0; j < this.options.length; j++){
var newOption = this.options[j];
var newHand = currentHand.slice().concat(newOption);
this.possibleHands.push(newHand);
}
}
}
}
rockPaperScissorsGame.prototype.play = function(rounds){
this.rounds = rounds;
this.possibleHands = [];
var roundsLeft = rounds;
while (roundsLeft > 0){
this.addAnotherRound();
roundsLeft--;
}
return this.possibleHands;
}
</script>
<script>
var game = new rockPaperScissorsGame();
game.play(5);
var width = window.innerWidth || 960,
height = window.innerHeight || 500,
margin = 0;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', 'white')
.append('g')
.attr('transform', 'translate(' + margin + ',' + margin + ')');
var gameContainerWidth = (width - 2*margin)/(game.possibleHands.length + 2);
var gameContainerHeight = (height - 2*margin)/(game.possibleHands[0].length);
var rounds = svg.selectAll('.gameContainer').data(game.possibleHands);
rounds.enter()
.append('g')
.attr({
'transform': function(d,i){ return 'translate(' + i*gameContainerWidth + ',0)'; },
'class': 'gameContainer',
'opacity': 0
})
.selectAll('.play').data(function(d){return d;}).enter()
.append('rect')
.attr('class', function(d){ return 'play ' + d;})
.attr('height', gameContainerHeight)
.attr('width', 0)
.attr('stroke', 'none')
.attr('fill', function(d,i){
if (d === 'rock') return '#665A88';
if (d === 'paper') return '#79C1BE';
return '#D5434D';
})
.attr('x', function(d,i){ return gameContainerWidth; })
.attr('y', function(d,i){ return i*gameContainerHeight; })
var totalAnimationTime = 1000;
var groupTime = totalAnimationTime/game.possibleHands.length;
rounds
.transition().duration(0).delay(function(d,i){return i*groupTime;})
.attr('opacity', 1)
.selectAll('.play')
.transition().duration(0).delay(function(d,i){return groupTime / 3 * i;})
.attr('width', gameContainerWidth)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment