elo.html

   1 <html>
   2 <head>
   3 <title>Elo</title>
   4 </head>
   5 <body>
   6 <div id="elo-content"></div>
   7 <script type="text/javascript">
   8
   9 function unique(arr) {
  10                         var u = {}, a = [];
  11                         for (var i = 0, l = arr.length; i < l; ++i) {
  12                                 if (Object.prototype.hasOwnProperty.call(u, arr[i])) continue;
  13                                 a.push(arr[i]);
  14                                 u[arr[i]] = 1;
  15                         }
  16                         return a;
  17                 }
  18
  19                 var initScore = 1400;
  20                 var x10dif = 400;
  21                 var kFactor = 10;
  22
  23                 function EloPlayer() {
  24                         this.score = initScore;
  25                         this.numMatches = 0;
  26                 }
  27
  28                 function eloMatch(winner, looser, tie) {
  29                         winner.Update(looser, tie ? .5 : 1);
  30                         looser.Update(winner, tie ? .5 : 0);
  31                 }
  32
  33                 EloPlayer.prototype.Update = function (other, result) {
  34                         var expected = 1 / (1 + Math.pow(10, (this.score - other.score) / x10dif));
  35
  36                         var delta = kFactor * (result - expected);
  37                         this.score = Math.max(0, this.score + delta);
  38                         this.numMatches++;
  39                 }
  40
  41                 function Item(name) {
  42                         this.name = name;
  43                         this.elo = new EloPlayer();
  44                 }
  45
  46                 var collect = {};
  47                 var compare = {};
  48                 var display = {};
  49
  50                 function X(eltId) {
  51                         this.root = document.getElementById(eltId);
  52                         this.stage = collect;
  53                 }
  54
  55                 function div(elt) {
  56                         var e = document.createElement('div');
  57                         e.appendChild(elt);
  58                         return e;
  59                 }
  60
  61                 function Sequence(items) {
  62                         this.items = items;
  63                         this.current = 0;
  64                 }
  65
  66                 Sequence.prototype.next = function () {
  67                         if (this.current >= this.items.length) return null;
  68
  69                         return this.items[this.current++];
  70                 }
  71
  72                 function getPairs(items) {
  73                         var a = [];
  74
  75                         for (var i = 0; i < items.length; ++i) {
  76                                 for (var j = i + 1; j < items.length; ++j) {
  77                                         a.push([items[i], items[j]]);
  78                                 }
  79                         }
  80
  81                         return a;
  82                 }
  83
  84                 X.prototype.moveTo = function (stage, arg) {
  85                         switch (stage) {
  86                                 case collect:
  87                                         this.items = null;
  88                                         break;
  89                                 case compare:
  90                                         this.items = getItems(arg).map(function (s) { return new Item(s) });
  91                                         this.sequence = new Sequence(getPairs(this.items));
  92                                         break;
  93                                 case display:
  94                                         this.sequence = null;
  95                                         break;
  96                         }
  97
  98                         this.stage = stage;
  99                         this.render();
 100                 }
 101
 102                 function fac(n) {
 103                         return n <= 1 ? 1 : n * fac(n - 1);
 104                 }
 105
 106                 function numPairs(n) {
 107                         return fac(n) / (fac(n - 2) * 2);
 108                 }
 109
 110                 function getItems(text) {
 111                         return unique(text.split('\n').map(function (s) { return s.trim(); }).filter(function (s) { return s.length > 0 }));
 112                 }
 113
 114                 X.prototype.updateItemsList = function (text, elt, nfo) {
 115                         var lines = getItems(text);
 116                         elt.disabled = lines.length < 2;
 117
 118                         var n = numPairs(lines.length);
 119                         nfo.innerHTML = lines.length + ' items, ' + n + ' pairs';
 120                 }
 121
 122                 X.prototype.renderCollect = function () {
 123                         var self = this;
 124                         this.root.innerHTML = '';
 125                         var ta = document.createElement('textarea');
 126                         var ok = document.createElement('button');
 127                         var nfo = document.createElement('div');
 128
 129                         ta.placeholder = 'Enter pairs';
 130                         ta.rows = 10;
 131                         ta.addEventListener('keyup', function () { self.updateItemsList(ta.value, ok, nfo) });
 132
 133                         ok.appendChild(document.createTextNode('Done'));
 134                         ok.addEventListener('click', function () { self.moveTo(compare, ta.value); });
 135                         ok.disabled = true;
 136
 137                         var bottom = div(nfo);
 138                         bottom.appendChild(ok);
 139
 140                         this.root.appendChild(div(ta))
 141                         this.root.appendChild(bottom);
 142                 }
 143
 144                 function button(text, code) {
 145                         var b = document.createElement('button');
 146
 147                         b.appendChild(document.createTextNode(text));
 148                         b.addEventListener('click', code);
 149
 150                         return b;
 151                 }
 152
 153                 X.prototype.renderCompare = function () {
 154
 155                         var self = this;
 156                         this.root.innerHTML= '';
 157
 158                         var item = this.sequence.next();
 159
 160                         if (item == null) {
 161                                 this.moveTo(display);
 162                                 return;
 163                         }
 164
 165                         var a = item[0];
 166                         var b = item[1];
 167
 168                         if (Math.random() < .5) {
 169                                 var c = a;
 170                                 a = b;
 171                                 b = c;
 172                         }
 173
 174                         console.log(a, b);
 175
 176                         var left = button(a.name, function () { eloMatch(a.elo, b.elo, false); self.render() });
 177                         var tie = button('tie', function () { eloMatch(a.elo, b.elo, true); self.render() });
 178                         var right = button(b.name, function () { eloMatch(b.elo, a.elo, false); self.render() });
 179
 180                         this.root.appendChild(left);
 181                         this.root.appendChild(tie);
 182                         this.root.appendChild(right);
 183                         this.root.appendChild(div(document.createTextNode(this.sequence.current + '/' + this.sequence.items.length)));
 184                 }
 185
 186                 X.prototype.renderDisplay = function () {
 187                         var self = this;
 188                         this.root.innerHTML = '';
 189
 190                         var list = document.createElement('ol');
 191
 192                         this.items.sort(function (a, b) { return b.elo.score - a.elo.score });
 193
 194                         this.items.forEach(function (item, n) {
 195                                 var e = document.createElement('li');
 196                                 e.appendChild(document.createTextNode(item.name + '  ' + item.elo.score.toFixed(2)));
 197                                 list.appendChild(e);
 198                         });
 199
 200                         this.root.appendChild(list);
 201                         this.root.appendChild(button('Again', function(){self.moveTo(collect)}));
 202                 }
 203
 204                 X.prototype.render = function () {
 205
 206                         switch (this.stage) {
 207                                 case collect: this.renderCollect();
 208                                         break;
 209                                 case compare: this.renderCompare();
 210                                         break;
 211                                 case display: this.renderDisplay();
 212                                         break;
 213                                 }
 214
 215                 }
 216
 217
 218
 219                 var v = new X('elo-content');
 220                 v.render();
 221
 222 </script>
 223 </body>
 224 </html>