WT GB Participant Picker

by gdarussian

HTML

<p>
    <h1>
        GB Participant Picker
        <span class="rightAligned">            
           <input type="button" id="btnSave" value="Save" 
                  title="Save the member data (Levels, #GBs) in the browser's local storage" />

        </span>
    </h1>
    <hr />
</p>
<!-- <p>
    Selection Set: <select id="selSets">
    </select>
</p> -->
<p>
    <table id="headerTable">
        <tr id="tiersRow">
        </tr>
        <tr id="numNeededRow">
        </tr>
    </table>
    <br />
    <input type="button" value="Fill Slots" id="btnFillSlots" />
</p>
<p>
    <table id="selectionTable">
        <tr>
            <th colspan="99">
                Selected
                <hr />
            </th>
        </tr>
    </table>
    <table id="totalsTable">
        <tr id="totalsRow">
        </tr>
    </table>
    <table id="inclusionTable">
        <tr>
            <th colspan="99">
                Included
                <hr />
            </th>
        </tr>
    </table>
    <table id="exclusionTable">
        <tr>
            <th colspan="99">
                Excluded
                <hr />
            </th>
        </tr>
    </table>
</p>
<p>
    <br />
    <hr />
    <label>Bulk Data Input</label><br />
    <textarea rows="5" cols="15" id="txtImport">
    </textarea><br />
    <input type="button" id="btnImport" value="Import" title="Import CSV data" />
    <input type="button" id="btnExport" value="Export" title="Export as CSV data" />
</p>

CSS

body { 
    margin: 1em; 
    font-size: 85%;
}

* {
    font-family:arial, helvetica, sans-serif;
    margin:0;
    padding:0;
}

a.memberName {
    cursor:pointer; 
}

p {
    font-size:1em;
    margin: 0 0 .8em 0;
}
.rightAligned {
    position:absolute;
    right: 55px;
}

.result {
    font-weight: bold;
    font-size: 100%;
}

table {
    margin: 1em 0 0 0;
}

html>body {
    font-size: 12px;
}
h1 {
    font-weight: bold;
    font-size: big;
    margin: 0 1em 1em 0;
}

label {
    display: inline-block; 
    width: 150px; 
}

select {
    margin: 5px;
}
th {
    font-weight: bold;
    padding-top: 10px;
    width: 120px;
}
td {
    padding: 1px 5px 0 0;
    width: 120px;
}


.button {
    width: 120px;
}

input {
    width: 65px;
}
.tierHeader {
    font-weight: bold;
    margin-right: 5px;
}
.sectionStart {
    border-style: solid;
    border-color: grey;
    border-width: 1px 0 0 0;
    padding: 8px 5px 0 0px;
}

a.closeX {
/*     position: absolute;
    right: 0px; top: 0px; width:20px; */
    background-color: #FFF; color: black;
    /*margin-top:-15px; margin-right:-15px; border-radius: 20px;*/
    cursor:pointer; z-index: -1;
    font-size:13px; 
}

JavaScript

// GB Randomizer

// TODO: edit tiers, save/load
// TODO: move leveled ppl up in their tier?

var MAX_LEVEL = 100;
var TOTAL_PARTICIPANTS = 50;
var DEBUG2 = false;
var INITIAL_INCLUSION_ROW = 1;
var INITIAL_EXCLUSION_ROW = 1;
var INITIAL_SELECTION_ROW = 1;
var UPDATE_NEEDED_ON_EXCLUDE = false;
var StaticID = 0;

var firstTier = 45; // first tier ends (exclusive) at this level
var levelsPerTier = 5; // each tier has this many levels
var finalTier = MAX_LEVEL; // last tier starts (inclusive) at this level
var tiers = new Array();

// if firstTier = 35, finalTier is 55, and step size is 10, the tiers are
// 1 - 34, 35 - 44, 45 - 54, 55 - max


var exclusionList = new Array();
var selectionList = new Array();
var RowType = {
    'Inclusion': 0,
    'Exclusion': 1,
    'Selection': 2
};
var nextRows = [
    INITIAL_INCLUSION_ROW,
    INITIAL_EXCLUSION_ROW,
    INITIAL_SELECTION_ROW
];

function Member(name, lvl, gbs)
{
    this.ID = StaticID++;
    this.Name = name;
    this.Level = lvl;
    this.GBs = gbs;
}
function MemberFromJSON(json)
{
    return new Member(json.Name, json.Level, json.GBs);
}
Member.prototype.Select = function()
{
    this.GBs++;
};
Member.prototype.Deselect = function()
{
    this.GBs--;
};
Member.prototype.LevelUp = function()
{
    this.Level++;
}
Member.prototype.ToString = function()
{
    return this.Name + ': ' + 'Level ' + this.Level + ', GBs: ' + this.GBs;
}

function Tier(lvl, index)
{
    this.Index = index;
    this.Level = lvl;
    this.Name = "Tier " + (index == 0 ? 1 : tiers[index - 1].Level) + " - " + (lvl - 1);
    this.nextRows = [
        INITIAL_INCLUSION_ROW,
        INITIAL_EXCLUSION_ROW,
        INITIAL_SELECTION_ROW
    ];
    this.Members = new Array();
    this.NumNeeded = 0;
}
Tier.prototype.ToString = function()
{
    return '(' + this.Index + ') ' + this.Name 
        + ': Need ' + this.NumNeeded
        + ', Has: ' + this.Members.length
        + ', Avail: ' + GetNumIncluded(this);
}

var members = [
    new...