Funkoverse Strategy Game Setup Randomizer

by Ryan Allison

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
  <div id="divPage1">
    <div>
      Select modules to include
    </div>
    <div id="divModuleCheckboxList"></div>
    <br>
    <div>
      Categories to randomize
    </div>
    <div>
      <fieldset>
        Scenarios<br>
        <label for="scenYes">Pick from a random set</label>
        <input checked type="radio" name="randoScen" id="scenYes" value="true">
        <label for="scenNo">Pick from all available</label>
        <input type="radio" name="randoScen" id="scenNo" value="false">
        <br><br>
        Characters<br>
        <label for="charYes">Pick from a random set</label>
        <input checked type="radio" name="randoChar" id="charYes" value="true">
        <label for="charNo">Pick from all available</label>
        <input type="radio" name="randoChar" id="charNo" value="false">
        <br><br>
        Items<br>
        <label for="itemYes">Pick from a random set</label>
        <input checked type="radio" name="randoItem" id="itemYes" value="true">
        <label for="itemNo">Pick from all available</label>
        <input type="radio" name="randoItem" id="itemNo" value="false">
        <br>
      </fieldset>
    </div>
    <br>
    <div>
      Number of random options to choose from per category
    </div>
    <div>
      <fieldset>
        <label for="radio-1">1 (Choose for me)</label>
        <input checked type="radio" name="optionCount" id="radio-1" value=1>
        <label for="radio-2">2</label>
        <input type="radio" name="optionCount" id="radio-2" value=2>
        <label for="radio-3">3</label>
        <input type="radio" name="optionCount" id="radio-3" value=3>
      </fieldset>
    </div>
    <br>
    <div>
      How many:
    </div>
    <div>
      <fieldset>
        Teams
        <br>
        <label...

CSS

table {
  border-collapse: collapse;
  width:100%
}

td {
  border: solid 1px black;
  min-height: 10px;
}

.firstRow td {
  background-color: black;
  color:White;
  font-weight:bold;
}

JavaScript

var selectedModules = [];
var eligibleCharacters = [];
var eligibleItems = [];
var charactersRequired = 0;
var remainingEligibleCharacters = 0;
var teamCharacters = [
  [],
  [],
  [],
  []
];
var currentlySelectedChar = -1;
var totalSelectedCharacters = [];
var teamSelecting = 0;
var itemsRequired = 0;
var remainingEligibleItems = 0;
var teamItems = [
  [],
  [],
  [],
  []
];
var totalSelectedItems = [];
var totalEligibleScenarios = 0;
var selectedScenario = "";
var randoScenario = true;
var randoChar = true;
var randoItems = true;
var optionCount = 1;
var teamCount = 2;
var teamSize = 3;
var itemSize = 1
var page1 = $("#divPage1");
var page2 = $("#divPage2");
var page3 = $("#divPage3");
var page4 = $("#divPage4");
var reset = $("#divReset");
var pageSum = $("#divPageSummary");

$(document).ready(function() {
  CreateChkBoxList();
  InitRadios();
});

function CreateChkBoxList() {
  var sb = "<fieldset>";
  sb += "<input type='checkbox' id='chkSelectAll' name='chkSelectAll' value='selectAll'>";
  sb += "<label for='chkSelectAll'>Select All</label><br>";
  for (x = 0; x < modules.length; x++) {
    sb += `<input type='checkbox' class='chkModule' id='module${x}' name='module${x}' value='${x}'>`;
    sb += `<label for='module${x}'>${modules[x].title}</label><br>`;
  }
  sb += "</fieldset>";
  $("#divModuleCheckboxList").html(sb);
}

$("#lnkStart").click(function() {
  SetChoices();
  var valid = true;
  if (remainingEligibleCharacters < charactersRequired || remainingEligibleItems < itemsRequired || totalEligibleScenarios == 0) {
    alert("The selected modules do not contain enough Characters, Items, or Scenarios to play the game as configured.");
  } else {
    LoadPage2();
    reset.show();
  }
});

$("#lnkAheadTo3").click(function() {
  if (selectedScenario != "") {
    LoadPage3();
  } else {
    alert("Please select a scenario to continue.")
 ...