Fire JS Bin - Brackets

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

var $, LS, PAPER;
if (localStorage) {
  LS = localStorage
} else {
  LS = {}
}(function () {
  var i;
  if (typeof $ !== 'object') {
    $ = {}
  }
  $.f = function () {
    return {
      init: function (a) {
        document.body.innerHTML = '<div class="links"><a href="javascript:$.f.open();">Options</a></div><div id="prefs" class="poff"><a href="javascript:$.f.close();">(x)</a><br><br><input type="radio" name="d" value="2">4 Player<br><input type="radio" name="d" value="3">8 Player<br><input type="radio" name="d" value="4">16 Player<br><input type="radio" name="d" value="5">32 Player<br><br><a href="javascript:$.f.print();">Print</a></div><div id="mycanvasDIV"></div><canvas id="mycanvas"></canvas>';
        $.a = {
          d: 3,
          res: 2.5,
          canvasDIV: $.f.$('mycanvasDIV'),
          canvas: $.f.$('mycanvas'),
          winW: window.innerWidth - 42,
          winH: window.innerheight - 42,
          edit: 1,
          options: 1
        };
        if (LS.P) {
          $.P = JSON.parse(LS.P)
        } else {
          $.P = [''];
          LS.P = JSON.stringify($.P)
        }
        if (LS.options) {
          $.a.options = LS.options
        }
        if (LS.depth) {
          $.a.d = LS.depth
        }
        if ($.a.canvas.getContext) {
          PAPER = $.a.canvas.getContext('2d')
        }
        $.f.DRAW();
        $.f.observe(window, 'resize', $.f.resize);
        var Q;
        Q = document.getElementsByName('d');
        for (var i = 0; i < Q.length; i = i + 1) {
          if (Q[i].value == $.a.d) {
            Q[i].checked = true
          }
          $.f.observe(Q[i], 'click', $.f.changeDepth)
        }
        $.f.save()
      },
      resize: function (a) {
        $.a.res = 1;
        $.f.DRAW()
      },
      close: function () {
        $.a.options = 0;
        $.a.edit = 0;
        $.f.DRAW()
      },
      open: function () {
        $.a.options = 1;
        $.a.edit = 1;
        $.f.DRAW()
      },
      changeDepth: function () {
        $.a.d = this.value;
        $.f.save();
        $.f.DRAW()
      },
      print: function () {
        $.a.res = 4;
        $.a.edit = 0;
        $.f.DRAW($.a.print);
        window.print();
        $.a.edit = 1;
        $.f.DRAW()
      },
      $: function (e) {
        if (typeof e == 'string') {
          e = document.getElementById(e)
        }
        return e
      },
      save: function () {
        LS.depth = $.a.d;
        LS.options = $.a.options
      },
      savePlayers: function (e) {
        var a;
        a = this.innerHTML;
        a = a.replace(/(<([^>]+)>)/ig, "");
        a = a.replace(/ /g, " ");
        $.P[this.player] = a;
        LS.P = JSON.stringify($.P)
      },
      prepForMatches: function (b, c) {
        var a = $.f.getLineNum;
        var d = a();
        var e = a();
        var f = a();
        var g = a();
        $.T.colsLoser[b].push(e);
        $.T.colsWinner[b].push(d);
        $.T.colsConsolation[b].push(f);
        $.T.colsConsolation[b].push(g);
        return {
          winnerLine: d,
          loserLine: e,
          topLine: f,
          bottomLine: g
        }
      },
      divit: function (c, d, f, g, h, l) {
        var a, m, w, tm, bm, y, n, x0, x1, cl, em, z, fontSize, winnerLine, loserLine, topLine, bottomLine, j, e;
        e = '';
        fontSize = $.f.fontSize(c, d, f);
        em = fontSize / 10;
        w = c / ((3 * f) - 1);
        m = (2 * em) + g + ((h - g) / 2);
        tm = (2 * em) + g + ((m - g) / 2);
        bm = (2 * em) + m + ((h - m) / 2);
        n = (d / Math.pow(2, f)) / 2;
        y = (l - 1) * n;
        x0 = 2 * (c / 3) - 2 * w * l - (w / 3);
        x1 = 2 * (c / 3) + 1 * w * l - (w / 3);
        cl = 'black';
        if (f == 5) {
          j = j * 1.5
        } else {
          j = w - 4 * em
        }
        if (l * 1 !== 0) {
          if (l == f) {
            z = 20 * em * (4.5 - f)
          } else {
            z = 0
          }
          a = $.f.prepForMatches(l, '');
          $.f.drawline('green', x1 - w, m, x1, m);
          $.f.drawline('green', x1 - w, tm, x1 - w, bm);
          $.f.writetext(10 * em, x1 - w + 2 * em, m - 2 * em, '', a.winnerLine, j);
          if (l !== f) {
            $.f.drawline('red', x0, m + y, x0 + w, m + y);
            $.f.drawline('red', x0 + w, tm + y, x0 + w, bm + y - z);
            $.f.writetext(10 * em, x0 + 2 * em, m + y - 2 * em, '', a.loserLine, j);
            if ($.a.edit == 1 && l == 1) {} else {
              $.f.drawline('blue', x0 + w, tm + y, x0 + 2 * w, tm + y);
              $.f.drawline('blue', x0 + w, bm + y - z, x0 + 2 * w, bm + y - z)
            }
            $.f.writetext(10 * em, x0 + w + 2 * em, tm + y - 2 * em, '', a.topLine, j);
            $.f.writetext(10 * em, x0 + w + 2 * em, bm + y - z - 2 * em, '', a.bottomLine, j);
            if (l != 1) {
              $.f.drawline('purple', x0 + 2 * w, tm + y - n, x0 + 2 * w, bm + y - n);
              $.f.writetext(10 * em, x1 - 1.5 * w - 10 * em, m - 2 * em, 'tee', 'T' + a.winnerLine + 'D' + l, e);
              $.f.writetext(8 * em, x0 + w + 2 * em, bm + y - z + 8 * em, 'From', 'F' + a.bottomLine, e)
            }
          } else {
            $.f.drawline('purple', x0 + 2 * w, tm + y - n, x0 + 2 * w, bm + y - n);
            $.f.drawline('red', x0 + w, m + y, x0 + 2 * w, m + y);
            $.f.writetext(10 * em, x0 + w + 2 * em, m + y - 2 * em, '', a.loserLine, j)
          }
          $.f.divit(c, d, f, g, m, l - 1);
          $.f.divit(c, d, f, m, h, l - 1);
          if (l == f) {
            var o = $.f.getLineNum();
            var p = $.f.getLineNum();
            $.f.writetext(8 * em, x1 - w + 2 * em, m + 8 * em, '1st', '', e);
            $.f.writetext(8 * em, x0 + w + 2 * em, m + y + 8 * em, '3rd', '', e);
            $.f.drawline('black', x1 - w + 5 * em, m + 30 * em, x1, m + 30 * em);
            $.f.writetext(10 * em, x1 - w + 2 * em, m - 2 * em + 30 * em, '', o, e);
            $.f.writetext(8 * em, x1 - w + 2 * em, m - 2 * em + 40 * em, '2nd', '', e);
            $.f.drawline('black', x0 + w, m + y + 30 * em, x0 + 2 * w - 5 * em, m + y + 30 * em);
            $.f.writetext(10 * em, x0 + w + 2 * em, m + y - 2 * em + 30 * em, '', p, e);
            $.f.writetext(8 * em, x0 + w + 2 * em, m + y - 2 * em + 40 * em, '4th', '');
            var C = $.T.colsConsolation;
            var W = $.T.colsWinner;
            var L = $.T.colsLoser;
            var M = $.T.match;
            var r = 1;
            for (var i = 1; i < f; i = i + 1) {
              for (j = 1; j < C[i].length; j = j + 2) {
                topLine = C[i][j];
                bottomLine = C[i][j + 1];
                if (i == 1) {
                  winnerLine = W[i][(j + 1) / 2];
                  loserLine = L[i][(j + 1) / 2]
                } else {
                  winnerLine = L[i][(j + 1) / 2];
                  loserLine = 'x'
                }
                M[topLine] = $.f.MATCH('Consolation', topLine, bottomLine, winnerLine, loserLine, r);
                r = r + 1;
                M[bottomLine] = M[topLine]
              }
              for (j = 1; j < W[i].length; j = j + 2) {
                topLine = W[i][j];
                bottomLine = W[i][j + 1];
                winnerLine = W[i + 1][(j + 1) / 2];
                if (i == f - 1) {
                  loserLine = $.T.lines - 2
                } else {
                  var s = (C[i + 1].length - 1) / 2;
                  var t = ((j + 1) / 2) + (s / 2);
                  if (t > s) {
                    t = t - s
                  }
                  loserLine = C[i + 1][2 * t]
                }
                M[topLine] = $.f.MATCH('Winner', topLine, bottomLine, winnerLine, loserLine, r);
                r = r + 1;
                M[bottomLine] = M[topLine]
              }
              for (j = 1; j < L[i].length; j = j + 2) {
                topLine = L[i][j];
                bottomLine = L[i][j + 1];
                if (i == f - 1) {
                  winnerLine = L[i + 1][j];
                  loserLine = $.T.lines - 1
                } else {
                  winnerLine = C[i + 1][j];
                  loserLine = 'x'
                }
                M[topLine] = $.f.MATCH('Loser', topLine, bottomLine, winnerLine, loserLine, r);
                r = r + 1;
                M[bottomLine] = M[topLine]
              }
            }
            $.a.matchCount = r;
            for (i = 1; i < $.T.colsConsolation[1].length; i = i + 1) {
              var u = $.T.colsConsolation[1][i];
              var v = $.f.$('line' + u);
              v.player = i;
              if ($.a.edit * 1 === 1 && $.T.match[u].matchcount <= Math.pow(2, f - 1)) {
                v.contentEditable = true;
                v.className = "editable"
              } else {
                v.contentEditable = false;
                v.className = "players"
              }
            }
            $.f.writetext(10, 0, 0, '', 'x');
            $.f.$('linex').player = 0;
            var q = document.getElementsByClassName('tees');
            for (i = 0; i < q.length; i = i + 1) {
              a = q[i].id.split('D');
              var b = a[0].split('T');
              l = a[1];
              winnerLine = b[1];
              var k = '';
              for (j = 1; j < $.T.colsWinner[l].length; j = j + 1) {
                if ($.T.colsWinner[l][j] == winnerLine) {
                  k = j
                }
              }
              k = (2 * k) - 1;
              topLine = $.T.colsWinner[l - 1][k];
              q[i].id = 'tee' + topLine;
              q[i].innerHTML = String.fromCharCode(65 + i);
              var x = $.T.match[topLine].loseTo;
              $.f.$('lineF' + x).innerHTML = 'From ' + String.fromCharCode(65 + i)
            }
          }
        }
      },
      populate: function () {
        var a;
        for (var i = 1; i <= $.T.lines; i = i + 1) {
          a = $.f.$('line' + i);
          if (a && a.player * 1 !== 0) {
            if ($.a.edit * 1 === 1 && $.T.match[i] && $.T.match[i].matchcount <= Math.pow(2, $.a.d)) {
              a.innerHTML = $.f.name(a.player);
              $.f.observe(a, 'keyup', $.f.savePlayers);
              $.f.observe(a, 'blur', $.f.doneEdit);
              $.f.observe(a, 'touchstart', $.f.savePlayers)
            } else if ($.a.edit * 1 === 1) {
              a.className = "invisible";
              a.innerHTML = ''
            } else {
              a.innerHTML = $.f.name(a.player);
              $.f.observe(a, 'click', $.f.advance);
              $.f.observe(a, 'mousedown', $.f.pd)
            }
          } else {
            if (a) {
              a.innerHTML = ''
            }
          }
        }
      },
      doneEdit: function (e) {
        $.P = JSON.parse(LS.P);
        this.innerHTML = $.P[this.player] + '';
        if (this.saveWidth) {
          this.style.width = this.saveWidth + 'px'
        }
        if (this.saveHeight) {
          this.style.height = this.saveHeight + 'px'
        }
      },
      advance: function (e) {
        $.f.pd(e);
        var a = this;
        var b = a.id.substr(4, a.id.length - 4);
        var M = $.T.match[b];
        var T = $.f.$('line' + M.top);
        var B = $.f.$('line' + M.bottom);
        if (M.winner * 1 === 0) {
          if (T.player * 1 !== 0 && B.player * 1 !== 0) {
            $.f.advanceline(a)
          } else {
            $.f.unadvanceline(a)
          }
        } else {
          $.f.unadvanceline(a)
        }
        $.f.saveResults($.a.d);
        $.f.populate()
      },
      advanceline: function (a) {
        var b = a.id.substr(4, a.id.length - 4);
        var M = $.T.match[b];
        var W = $.f.$('line' + M.winTo);
        var L = $.f.$('line' + M.loseTo);
        var T = $.f.$('line' + M.top);
        var B = $.f.$('line' + M.bottom);
        var c;
        var d;
        var e;
        if (M.top == b) {
          c = 1;
          d = T;
          e = B
        } else {
          c = 2;
          d = B;
          e = T
        }
        M.winner = c;
        W.player = d.player;
        L.player = e.player
      },
      unadvanceline: function (a) {
        var b = a.id.substr(4, a.id.length - 4);
        var M = $.T.match[b];
        var W = $.f.$('line' + M.winTo);
        var L = $.f.$('line' + M.loseTo);
        var T = $.f.$('line' + M.top);
        var B = $.f.$('line' + M.bottom);
        M.winner = 0;
        W.player = 0;
        L.player = 0;
        T.className = 'players';
        B.className = 'players'
      },
      pd: function (e) {
        if (e.preventDefault) {
          e.preventDefault()
        }
        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation()
        }
        return false
      },
      name: function (i) {
        if ($.P[i]) {
          i = $.P[i]
        } else {
          if ($.a.edit == 1) {
            i = ''
          } else {
            i = '-bye-'
          }
        }
        return i
      },
      loadResults: function (a) {
        var b = LS['results' + a];
        for (var k = 1; k <= b.length; k = k + 1) {
          for (var i = 1; i < $.T.lines; i = i + 1) {
            if (typeof $.T.match[i] === 'object') {
              if ($.T.match[i].matchcount == k && $.T.match[i].top == i) {
                $.T.match[i].winner = 1 * b.substr(k - 1, 1);
                var M = $.T.match[i];
                if (M.winner * 1 === 1) {
                  $.f.advanceline($.f.$('line' + M.top))
                }
                if (M.winner * 1 === 2) {
                  $.f.advanceline($.f.$('line' + M.bottom))
                }
              }
            }
          }
        }
      },
      saveResults: function (a) {
        var b = '';
        var j = 0;
        var k = 0;
        for (k = 1; k < $.a.matchCount; k = k + 1) {
          for (var i = 1; i < $.T.lines; i = i + 1) {
            if (typeof $.T.match[i] === 'object') {
              if ($.T.match[i].matchcount == k && $.T.match[i].top == i) {
                b = b + '' + $.T.match[i].winner
              }
              j = j + 1;
              if (j > 30) {
                j = 0;
                b = b + ''
              }
            }
          }
        }
        LS['results' + a] = b
      },
      MATCH: function (a, t, b, w, l, d) {
        return {
          id: t + '_' + b,
          top: t,
          bottom: b,
          winTo: w,
          loseTo: l,
          kind: a,
          winner: 0,
          matchcount: d
        }
      },
      DRAW: function (a) {
        if (window.orientation) {
          $.a.winW = 640;
          $.a.winH = 960
        } else {
          $.a.winW = window.innerWidth - 42;
          $.a.winH = window.innerHeight - 42
        }
        $.a.canvasDIV.style.width = $.a.winW + 'px';
        $.a.canvasDIV.style.height = $.a.winH + 'px';
        $.a.canvas.style.width = $.a.winW + 'px';
        $.a.canvas.style.height = $.a.winH + 'px';
        $.a.canvas.width = $.a.winW * $.a.res;
        $.a.canvas.height = $.a.winH * $.a.res;
        var W = $.a.winW * $.a.res;
        var H = $.a.winH * $.a.res;
        var D = $.a.d;
        if ($.a.options * 1 === 0) {
          $.f.$('prefs').className = 'poff'
        } else {
          $.f.$('prefs').className = 'pon'
        }
        if ($.a.edit == 1) {
          document.body.className = "be"
        } else {
          document.body.className = "bp"
        }
        $.T = {
          lines: 1,
          matches: 1,
          match: [],
          wins: [],
          colsWinner: {},
          colsLoser: {},
          colsConsolation: {}
        };
        for (var i = 0; i <= 8; i = i + 1) {
          $.T.colsWinner[i] = [''];
          $.T.colsLoser[i] = [''];
          $.T.colsConsolation[i] = ['']
        }
        if ($.a.canvas.getContext) {
          $.a.canvasDIV.innerHTML = '';
          PAPER.clearRect(0, 0, W, H);
          $.f.divit(W, H - $.f.fontSize(W, H, D), D, 0, H - $.f.fontSize(W, H, D), D);
          if (LS['results' + D]) {
            $.f.loadResults(D)
          } else {
            $.f.saveResults(D)
          }
          $.f.populate()
        } else {}
      },
      fontSize: function (W, H, D) {
        return (W + H) / (100 + D * 5)
      },
      drawline: function (q, x, y, h, v) {
        x = Math.floor(x);
        y = Math.floor(y);
        h = Math.floor(h);
        v = Math.floor(v);
        PAPER.beginPath();
        PAPER.moveTo(x, y);
        PAPER.lineTo(h, v);
        PAPER.closePath();
        PAPER.stroke()
      },
      writetext: function (f, x, y, t, a, b) {
        if (typeof t === 'undefined') {
          t = ''
        }
        var w;
        var c;
        if (a == '') {
          if (t != '') {
            if (PAPER.fillText) {
              PAPER.font = f + 'px Times New Roman';
              PAPER.fillText(t, x, y)
            }
          }
        } else {
          c = $.f.$('line' + a);
          if (c) {} else {
            x = x / $.a.res;
            y = y / $.a.res;
            f = f / $.a.res;
            b = b / $.a.res;
            w = document.createElement('DIV');
            w.style.position = 'absolute';
            if ($.a.options * 1 === 1) {
              w.style.zIndex = 1000
            } else {
              w.style.zIndex = 100000
            }
            w.style.top = (y - f) + 'px';
            w.style.left = x + 'px';
            w.style.fontSize = f + 'px';
            w.style.overflow = 'hidden';
            w.id = 'line' + a;
            w.style.height = (f * 1.2) + 'px';
            w.saveHeight = f * 1.2;
            if (b > 0) {
              w.style.width = b + 'px';
              w.saveWidth = b
            }
            w.innerHTML = '(' + a + ')' + t;
            $.a.canvasDIV.appendChild(w);
            var d = a.toString().substr(0, 1);
            if (d == 'T') {
              w.className = 'tees';
              w.innerHTML = a
            } else if (d == 'F') {
              w.className = 'froms';
              w.innerHTML = a
            } else {
              if ($.a.edit * 1 === 1) {
                w.className = 'invisible'
              } else {
                w.className = 'players'
              }
            }
            w.player = 0
          }
        }
      },
      getLineNum: function (t) {
        $.T.lines = $.T.lines + 1;
        return ($.T.lines - 1)
      },
      observe: function (a, b, c) {
        if (!(a['observing' + b])) {
          if (a.attachEvent) {
            a['e' + b + c] = c;
            a[b + c] = function () {
              a['e' + b + c](window.event)
            };
            a.attachEvent('on' + b, a[b + c])
          } else {
            a.addEventListener(b, c, false)
          }
          a['observing' + b] = true
        }
      },
      noop: {}
    }
  }();
  $.f.observe(window, 'load', $.f.init)
})();

* html { overflow:hidden; }
.be { background-color:#444; }
.bp { background-color:#fff; }
body, p, table, td { font:10px Tahoma; }
a { text-decoration:none; color:#000; }
.links { position:absolute; top:3px; left:3px; }
.players:hover { background-color:#ddd; cursor:pointer; }
.editable:hover { cursor:auto; }
.editable { border:none; border-bottom:1px solid #000; background-color:#fff; width:150px; }
.invisible { display:none; }
.players { color:#000; }
#mycanvasDIV, #mycanvas { position:absolute; width:960px; height:640px; top:20px; left:20px; overflow:hidden; }
#linex { display:none; }
#prefs { z-index:10001; position:absolute; width:200px; top:15px; left:20px; padding:10px; background-color:#bbb; border:2px solid #555; -moz-border-radius:10px; border-radius:10px; }
.pon, .poff { -webkit-transition:opacity 1s linear; }
.pon { opacity:1; }
.poff { opacity:0; }
fieldset { width:180px; }
.i { width:100%; }

@media print {
  body { background-color:#ffffff;   }
  #mycanvasDIV { border:1px dashed #ffffff;   }
  .links, #prefs { display: none;   }
}

Pop out