Scythe Randomizer 2

by lukerichison

HTML

<header>SCYTHE</header>
<section id="options"class="visible">
  <input type="checkbox" name="noIndustrialRusviets" id="noIndustrialRusviets" checked><label for="noIndustrialRusviets">Don't allow Rusviet to use the Industrial player mat (strongly recommended by the designer)</label><br/>
  <input type="checkbox" name="invadersFromAfar" id="invadersFromAfar"><label for="invadersFromAfar">Inclued the materials from Invaders From Afar </label><br/>
  <input type="button" name="optionsDone" value="next &rarr;" onclick="optionsDone()">
</section>
<section id="players" class="hidden">
  <ol>
    <li><input type="text" name="player0"></li>
  </ol>
  <input type="button" name="addPlayer" value="+" onclick="addPlayer()">
  <input type="button" name="removePlayer" value="-" onclick="removePlayer()"><br/>
  <input type="button" name="playersDone" value="&rarr;" onclick="playersDone()">
</section>
<section id="exclusions" class="hidden">
  <ul>

  </ul>
  <input type="button" name="addExclusion" value="+" onclick="addExclusion()">
  <input type="button" name="removeExclusion" value="-" onclick="removeExclusion()">
  <input type="button" name="exclusionsDone" value="&rarr;" onclick="exclusionsDone()">
</section>
<section id="results" class="hidden">
  <ul>
  
  </ul>
</section>

CSS

html {
}
body {
  background-color: #d5dae2;
  min-height: 100%;
}
header {
  position: fixed;
  background-color: #66190a;
  color: white;
  padding: 2em 0;
  border: 5px solid #efbe7f;
  text-align: center;
  z-index:5;
  box-sizing: content-box;
  top: 0;
  left: 0;
  right: 0;
}
section {
  position: absolute;
  left: 5em;
  right: 5em;
  padding-top: 6em;
  background-color: white;
  border: 3px solid #634439;
  border-radius: 4px;
  transition: all 2s ease 0s;
}
section.visible {
  top: 0;
  bottom: 5em;
  z-index: 2;
}
section.hidden {
  top: -200%;
  bottom: 200%;
  z-index: 1;
}

JavaScript

var playerCount = 0;
var exclusionCount = 0;
var players = [];
var factions = [];
var mats = [];
var baseFactions = ["Polania Republic", "Saxony Empire", "Crimean Khanate", "Nordic Kingdom", "Rusviet Union"];
var invadersFactions = ["Clan Albion", "Togawa Shogunate"];
var baseMats = ["1 Industrial", "2 Engineering", "3 Patriotic", "4 Mechanical", "5 Agricultural"];
var invadersMats = ["2a Militant", "3a Innovative"];
Array.prototype.push.apply(factions, baseFactions);
Array.prototype.push.apply(mats, baseMats);
var noIndustrialRusviets = true;

var playersOL = document.getElementById("players").getElementsByTagName("ol")[0];
var exclusionsUL = document.getElementById("exclusions").getElementsByTagName("ul")[0];
var resultsUL = document.getElementById("results").getElementsByTagName("ul")[0];

function optionsDone() {
	var invadersFromAfar = document.getElementById("invadersFromAfar");
  if (invadersFromAfar.checked == true) {
  	Array.prototype.push.apply(factions, invadersFactions);
  	Array.prototype.push.apply(mats, invadersMats);
  } else {
  	factions.splice(baseFactions.length, invadersFactions.length);
  	mats.splice(baseMats.length, invadersMats.length);
  }
	noIndustrialRusviets = document.getElementById("noIndustrialRusviets").checked;
  document.getElementById("options").className = "hidden";
  document.getElementById("players").className = "visible";
}

function addPlayer() {
  if (playerCount < 6) {
    ++playerCount;
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("name", "player" + playerCount);
    var listItem = document.createElement("li");
    listItem.appendChild(input);
    playersOL.appendChild(listItem);
  }
}
function removePlayer() {
	if (playerCount > 0) {
    var listItem = playersOL.getElementsByTagName("li")[playerCount];
    playersOL.removeChild(listItem);
    --playerCount;
  }
}
function playersDone() {
	var playerInputs = playersOL.getElementsByTagName("input");
 ...