KartRandomization/index.html at master · maxgoncharov/KartRandomization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Kart Assignment Randomizer</title>
</head>

<style>
  html {
    font-size: 14px;
    font-family: arial,sans-serif;
  }
  button {
    width: 100px;
    height: 50px;
  }
  ol {
    width: 75%;
  }
  textarea {
    font-size: 14px;
    font-family: arial,sans-serif;
    width: 200px;
    height: 400px;
    white-space: pre-wrap;
    overflow: auto;
    float: left;
    display: inline-block;
  }

  .names {
    padding-top: 4px;
  }

  table th {
    text-align: left;
  }

</style>

<script>
  function rand(min, maxplus1) {
    return Math.floor(Math.random() * (+maxplus1 - +min)) + +min;
  }

  function ensureRandom() {
    var nIterations = 2000;
    var nBuckets = 10;
    console.assert(nIterations/nBuckets >= 2*nBuckets);

    var buckets = new Array(nBuckets);
    for(var i=0; i<buckets.length; ++i) {
      buckets[i] = 0;
    }

    // This should produce a mostly uniform distribution
    for(var i=0; i<nIterations; ++i) {
      ++buckets[rand(0, buckets.length)];
    }

    console.log("Randomization Test Results:");
    for(var i=0; i<buckets.length; ++i) {
      console.log("  Rand[" + i + "]: " + buckets[i]);
    }

    var RAND_FACTOR = 1.5;
    for(var i=0; i<buckets.length; ++i) {
      if(buckets[i] > RAND_FACTOR*nIterations/buckets.length ||
              buckets[i] < nIterations/buckets.length/RAND_FACTOR) {
        console.warn("Bucket " + i + " fails test!");
        alert("Randomization test failed!");
        return;
      }
    }
  }

  function validateSource(array) {
    if(array.length == 1) {
      if(array[0].length == 0)
        alert('Kart list is empty.');
      else
        alert('Cannot randomize only 1 kart without a duplicate for race sesion.');
      return false;
    }

    var set = new Set(array);
    if(set.size != array.length) {
      alert('Duplicate kart!');
      return false;
    }

    return true;
  }

  function chooseRandomElement(array) {
    var candidateString = '';

    for(var i=0; i<array.length; ++i) {
      candidateString += array[i];
      if(i < array.length-1)
        candidateString += ',';
    }

    var randIdx = rand(0, array.length);

    console.log("Chose " + array[randIdx] + " from candidates: " + candidateString);
    return array[randIdx];
  }

  function escapeHtml(text) {
    var map = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };

    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
  }

  var namesRendered = false;
  function renderNames() {
    if(namesRendered){ //blocks ability to change name after first randomization
      return;
    }

    var teamnames = document.getElementById("teamnames").value;
    teamnames = teamnames.replace(/(\r\n|\n|\r)$/gm, ''); // Remove empty lines if present
    teamnames = escapeHtml(teamnames);
    teamnames = teamnames.replace(/ /g, "&nbsp;");
    teamnames = teamnames.replace(/\n/g, "<br/>");

    var namesTds = document.getElementsByClassName("names");
    for (const td of namesTds) {
      td.innerHTML = teamnames;
    }

    namesRendered = true;
  }

  function randomize(src, dst) {
    var x = document.getElementById(src).value;
    x = x.replace(/(\r\n|\n|\r)$/gm, ''); // Remove empty lines if present

    var lines = x.split('\n');
    if(!validateSource(lines)) return;

    renderNames();

    var randomizedSet = new Set(); // Insertion order is maintained
    if(dst == 'qual') { // Blindly randomize
      // Make "re-randomizing" multiple times to achieve a desired kart assignment
      // just a little bit more inconvenient by requiring a page reload (which
      // requires filling out the form(s) again).
      document.getElementById('rand_qual').disabled = true;

      console.log("Randomizing for qualification");
      var srcSet = new Set(lines);
      for(var i=0; i < lines.length; ++i) {
        var chosen = chooseRandomElement(Array.from(srcSet));
        srcSet.delete(chosen);
        randomizedSet.add(chosen);
      }
    } else { // Race kart cannot be duplicate of qualification kart
      // Make "re-randomizing" multiple times to achieve a desired kart assignment
      // just a little bit more inconvenient by requiring a page reload (which
      // requires filling out the form(s) again).
      document.getElementById('rand_race').disabled = true;

      console.log("Randomizing for race");
      var candidates = new Set(lines);

      for(var i=0; i < lines.length-2; ++i) {
        candidates.delete(lines[i]);

        var chosen = chooseRandomElement(Array.from(candidates));
        randomizedSet.add(chosen);
        candidates.delete(chosen);

        if(!randomizedSet.has(lines[i])) { // Possibly from a previous selection
          candidates.add(lines[i]);
        }
      }

      // Assign the last two based on no-reuse constraint
      candidates = Array.from(candidates);
      if(candidates[0] == lines[lines.length-2]) {
        randomizedSet.add(candidates[1]);
        randomizedSet.add(candidates[0]);
      } else {
        randomizedSet.add(candidates[0]);
        randomizedSet.add(candidates[1]);
      }
    }


    document.getElementById(dst).innerHTML = '';
    document.getElementById('race').innerHTML = '';
    randomized = Array.from(randomizedSet);
    for(var i=0; i<randomized.length; ++i) {
      document.getElementById(dst).innerHTML += randomized[i];
      if(i<randomized.length-1)
        document.getElementById(dst).innerHTML += '\n';
    }
  }
</script>


<body onload="ensureRandom()">
<h1>Kart Assignment Randomizer</h1>
The Kart Assignment Randomizer provides kart number assignments for each racer. The kart assignment for the race will be different than the assignment for qualification.
<p>Directions:</p>
<ol>
  <li>Add the available kart numbers to the form labeled "Pool of Karts". Order does not matter. There should be one kart number per line, and each line should contain a unique kart number. It's ok to have more karts than teams; just ignore the bottommost assignments after randomization.</li><br>
  <li>Optionally add team or racer names to the form labeled "Team Name". This allows you to keep track of which team/individiual corresponds to which line number in the subsequent forms.</li><br>
  <li>Press the first "Randomize" button to get kart assignments for quailfication. Each line will contain a randomly chosen kart from the pool.</li><br>
  <li>Press the second "Randomize" button to get kart assignments for the race. The karts will be randomized again, but no team will be assigned the same kart from qualification.</li>
</ol>
<br><br>
<table>
  <tr>
    <th>Pool of Karts</th>
    <th>Team Name (optional)</th>
    <th></th>
    <th></th>
    <th>Qualification</th>
    <th></th>
    <th></th>
    <th>Race</th>
  </tr>
  <tr>
    <td>
      <textarea id="pool"></textarea>
    </td>
    <td>
      <textarea id="teamnames"></textarea>
    </td>
    <td>
      <button id="rand_qual" onclick="randomize('pool', 'qual')">Randomize -></button>
    </td>
    <td valign="top" align="right" class="names">
    </td>
    <td>
      <textarea id="qual" readonly="true"></textarea>
    </td>
    <td>
      <button id="rand_race" onclick="randomize('qual', 'race')">Randomize -></button>
    </td>
    <td valign="top" align="right" class="names">
    </td>
    <td>
      <textarea id="race" readonly="true"></textarea>
    </td>
  </tr>
</table>
<br><br>

<small>Right click on any of the whitespace on the page and select "View Page Source" to view the randomization code.</small>
</body>
</html>