TM randomizer

by lukerichison

HTML

<section id="options">
  <input type="checkbox" name="fireAndIce" id="fireAndIce"><label for="fireAndIce">Inclued the factions from Fire &amp; Ice</label><br/>
  <input type="button" value="Give me a faction" onclick="randomFaction()">
</section>
<section class="terrain" id="desert">
  <img class="front" src="http://digidiced.com/wp-content/uploads/2016/11/Fakirs.png" alt="" onclick="flip(this)">
  <img class="back"  src="http://digidiced.com/wp-content/uploads/2016/11/Nomads.png" alt="" onclick="flip(this)">
  <input type="button" value="Give me another faction" onclick="randomFaction()">
</section>
<section class="terrain" id="wasteland">
  <img class="front" src="http://digidiced.com/wp-content/uploads/2016/11/ChaosMagicians.png" alt="" onclick="flip(this)">
  <img class="back"  src="http://digidiced.com/wp-content/uploads/2016/11/Giants.png" alt="" onclick="flip(this)">
  <input type="button" value="Give me another faction" onclick="randomFaction()">
</section>
<section class="terrain" id="lakes">
  <input type="button" value="flip" onclick="flip(this)"/>
  <img class="front" src="http://digidiced.com/wp-content/uploads/2016/11/Swarmlings.png" alt="" onclick="flip(this)">
  <img class="back"  src="http://digidiced.com/wp-content/uploads/2016/11/Mermaids.png" alt="" onclick="flip(this)">
  <input type="button" value="Give me another faction" onclick="randomFaction()">
</section>
<section class="terrain" id="mountains">
  <img class="front" src="http://digidiced.com/wp-content/uploads/2016/11/Dwarves.png" alt="" onclick="flip(this)">
  <img class="back"  src="http://digidiced.com/wp-content/uploads/2016/11/Engineers.png" alt="" onclick="flip(this)">
  <input type="button" value="Give me another faction" onclick="randomFaction()">
</section>
<section class="terrain" id="plains">
  <img class="front" src="http://digidiced.com/wp-content/uploads/2016/11/Halflings.png" alt="" onclick="flip(this)">
  <img class="back" ...

CSS

body {
  background-color: #232323;
  color: white;
}
.terrain, 
#options.hidden {
  position: absolute;
  top: 0; left: -100%;
}
.terrain {
  opacity: 0;
  z-index: 0;
  width: 100%;
  transition: opacity 0.5s;
}
.terrain.chosen {
  left:0;
  opacity: 1;
}
.terrain input,
.terrain select,
.terrain label {
  display: block;
  margin: 0 auto;
}
.terrain label {
  text-align: center;
}
.front, .back {
  width: 48%;
  display: inline-block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.back {
  //transform:rotateY(180deg);
}
.heads .front { animation: frontFlip-heads 4s ease-out forwards;}
.tails .front { animation: frontFlip-tails 4s ease-out forwards;}
.heads .back { animation: backFlip-heads 4s ease-out forwards;}
.tails .back { animation: backFlip-tails 4s ease-out forwards;}
@keyframes frontFlip-heads { 5% {transform: translateX(50%) rotateY(90deg);} 100% {transform: translateX(50%) rotateY(3600deg);}}
@keyframes frontFlip-tails { 5% {transform: translateX(50%) rotateY(90deg);} 100% {transform: translateX(50%) rotateY(3780deg);}}
@keyframes backFlip-heads { 5% {transform: translateX(-50%) rotateY(90deg);} 5.001% {transform: translateX(-50%) rotateY(-90deg);} 100% {transform: translateX(-50%) rotateY(3420deg);}}
@keyframes backFlip-tails { 5% {transform: translateX(-50%) rotateY(90deg);} 5.001% {transform: translateX(-50%) rotateY(-90deg);} 100% {transform: translateX(-50%) rotateY(3600deg);}}

JavaScript

var baseTerrains = ["desert", "wasteland", "lakes", "mountains", "plains", "swamp", "forest"];
var expTerrains = ["volcanoes", "ice", "variable"];
var terrains = [];
var terrain;
var terrainColors = ["yellow", "red", "blue", "gray", "brown", "black", "green"]
var variableHomeTerrain = document.getElementById("variableHomeTerrain");
var playerCount = 0;

function randomFaction() {
	if (playerCount == 5){
  	alert("You've had enough! Refresh the page to start over.");
    return;
  } else if (playerCount == 0) {
  	document.getElementById("options").className += "hidden";
  	Array.prototype.push.apply(terrains, baseTerrains);
    if (document.getElementById("fireAndIce").checked == true) Array.prototype.push.apply(terrains, expTerrains);
  }
  else {
  	if (terrain.id == "variable") {
  		terrains.splice(terrains.indexOf(variableHomeTerrain.value), 1);
    }
    terrain.classList.remove("chosen");
  }
  playerCount ++;
	terrain = document.getElementById(terrains[Math.floor(Math.random() * terrains.length)]);
  terrains.splice(terrains.indexOf(terrain.id), 1);
  if (terrain.id == "variable") {
    for (var i=0; i < terrains.length; i++) {
    	if (baseTerrains.indexOf(terrains[i]) >= 0) {
        var option = document.createElement("option");
        option.setAttribute("value", terrains[i]);
        option.text= terrains[i] + " (" + terrainColors[baseTerrains.indexOf(terrains[i])] + ")";
        variableHomeTerrain.add(option);
      }
    }
  }
  terrain.className += " chosen";
}

function flip(el) {
	var x = ["heads", "tails"]
	var y = x[Math.round(Math.random())];
  el.parentElement.className += el.parentElement.className ? ' '+y : y;
}