View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
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 = '
Options
(x)
4 Player
8 Player
16 Player
32 Player
Print
'; $.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) })();
Brackets
* 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
Help
About
×
×