Rock Paper Scissors (Animated)

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

forked from jonsadka's block: Rock Paper Scissors

<!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 + ')');

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js