[CB] Tournament Brackets

[Wormopolis]

Browser tested: IE and FF
placement: Global or board footer

This code caused me a lot of headaches, but it was worth it. Lets you create tournament brackets right inside a post using an easy editor. some CSS included to style how the tables look.

There are plans for furture revisions to this code, but it should work well for you. supports up to 128 contestants.. but keep in mind larger brackets take longer to compile.

code:

<style type="text/css">
table.tourneytable {border: 2px solid #FF0000;  background-color: #FFFFFF;  color: #000000}
table.tourneytable td {background-color: #FFFFFF;  color: #000000}
</style>

<script type="text/javascript">
<!--
//  Tournament Bracket - v1.01
//  By Wormopolis - www.wormocodes.com
//  do not repost - keep header intact
//  Do not edit without authors permission

function getArray(n) {
//  create nxn matrix
arry=new Array(n*2-1);  //2^1=3  2^2=7  2^3=15
for (ai=0; ai<(n*2+1); ai++) arry[ai]=new Array(n*2-1);
return arry;
}

function displayTournyBracket(str) {
// str=input string
// [[title={tier1 names sep by comma}+{tier2 names...}+...]]
var title=str.split('=')[0].split('[[')[1];
var tiers=str.split('=')[1].split(']]')[0].split('+');
for (ti=0; ti<tiers.length; ti++) tiers[ti]=tiers[ti].split('{')[1].split('}')[0].split(',');
// tiers[0] contains max entries
var ents=tiers[0].length;
var workspace=getArray(ents);
var tc=0;
while (tc<tiers.length) {
var space=Math.pow(2,tc+1);  //2 4 8 16
var topspace=Math.pow(2,tc)-1;  //0 1 3 7
var colspace=tc*2;  //0 2 4 6
for (ec=0; ec<tiers[tc].length; ec++) {
 workspace[topspace+(ec*space)][colspace] = tiers[tc][ec];
 if (tiers[tc].length>1) {
   var toggleLine=(ec%2==0);  // true or false
   var lh=Math.pow(2,tc)*20;
   var lmod=(ec%2)*(Math.pow(2,tc)-1);  // 0  1  3  7
   workspace[topspace+(ec*space)-lmod][colspace+1]=(toggleLine ? '<img src="http://i197./aa250/WORMOPOLIS/downright.gif" style="position:relative; top:10px; height: '+ lh +'px; width: 50px">' : '<img src="http://i197./aa250/WORMOPOLIS/upright.gif" style="position:relative; bottom:10px; height: '+ lh +'px; width: 50px">');
   var dmod=(((ec%2) * -2) + 1);   //+1 or -1
   var dmod2=((ec+1)%2);  //1 or 0
   for (dd=0; dd<(Math.pow(2,tc)-1); dd++)  workspace[topspace+(ec*space)+(dd*dmod+dmod2)][colspace+1]='%del';  //1 2 3  or 0 -1 -2
 }
}
tc++
}
var tblcols=(Math.log(workspace.length-1)/Math.log(2))*2+1;  //2=3  4=5  8=7  16=9
var stuff='<table class="tourneytable" cellspacing="0"><tr><td align="center" colspan='+(tblcols)+'><b>'+title+'</b></td></tr>';
for (aa=0; aa<workspace.length-1; aa++) {
stuff+='<tr>';
for (bb=0; bb<tblcols; bb++) {
if (workspace[aa][bb] && workspace[aa][bb]=='%del') {
} else {
var rs=(workspace[aa][bb] && workspace[aa][bb].match(/height: (\d+)px/)  ? RegExp.$1/20 : 1);
stuff+='<td height="20" rowSpan="'+rs+'">'+(workspace[aa][bb]!=undefined ? (workspace[aa][bb]=='' ? '________' : workspace[aa][bb]) : '') +'</td>';
}
}
stuff+='</tr>';
}
stuff+='</table>';
return stuff;
}

function modifyTournyBracket(str, brckid) {
// str=input string,  brckid=bracket link to modify
// [[title={tier1 names sep by comma}+{tier2 names...}+...]]
var title=str.split('=')[0].split('[[')[1];
var tiers=str.split('=')[1].split(']]')[0].split('+');
for (ti=0; ti<tiers.length; ti++) tiers[ti]=tiers[ti].split('{')[1].split('}')[0].split(',');
// tiers[0] contains max entries
var ents=tiers[0].length;
var workspace=getArray(ents);
var tc=0;
while (tc<tiers.length) {
var space=Math.pow(2,tc+1);  //2 4 8 16
var topspace=Math.pow(2,tc)-1;  //0 1 3 7
var colspace=tc*2;  //0 2 4 6
for (ec=0; ec<tiers[tc].length; ec++) {
 workspace[topspace+(ec*space)][colspace] = '<input id="tier:'+(tc+1)+'-'+(ec+1)+'" value="'+tiers[tc][ec]+'">';
 if (tiers[tc].length>1) {
   var toggleLine=(ec%2==0);  // true or false
   var lh=Math.pow(2,tc)*20;
   var lmod=(ec%2)*(Math.pow(2,tc)-1);  // 0  1  3  7
   workspace[topspace+(ec*space)-lmod][colspace+1]=(toggleLine ? '<img src="http://i197./aa250/WORMOPOLIS/downright.gif" style="position:relative; top:10px; height: '+ lh +'px; width: 50px">' : '<img src="http://i197./aa250/WORMOPOLIS/upright.gif" style="position:relative; bottom:10px; height: '+ lh +'px; width: 50px">');
   var dmod=(((ec%2) * -2) + 1);   //+1 or -1
   var dmod2=((ec+1)%2);  //1 or 0
   for (dd=0; dd<(Math.pow(2,tc)-1); dd++)  workspace[topspace+(ec*space)+(dd*dmod+dmod2)][colspace+1]='%del';  //1 2 3  or 0 -1 -2
 }
}
tc++
}
var tblcols=(Math.log(workspace.length-1)/Math.log(2))*2+1;  //2=3  4=5  8=7  16=9
var stuff='<table class="tourneytable" cellspacing="0"><tr><td align="center" colspan='+(tblcols)+'><input id="modTBTable" value="'+title+'"><input type="hidden" id="tierstore" value="'+(Math.log(workspace.length-1)/Math.log(2))+'"></td></tr>';
for (aa=0; aa<workspace.length-1; aa++) {
stuff+='<tr>';
for (bb=0; bb<tblcols; bb++) {
if (workspace[aa][bb] && workspace[aa][bb]=='%del') {
} else {
var rs=(workspace[aa][bb] && workspace[aa][bb].match(/height: (\d+)px/)  ? RegExp.$1/20 : 1);
stuff+='<td height="20" rowSpan="'+rs+'">'+(workspace[aa][bb]!=undefined ? (workspace[aa][bb]=='' ? '________' : workspace[aa][bb]) : '') +'</td>';
}
}
stuff+='</tr>';
}
stuff+='<tr><td align="center" colspan='+(tblcols)+'><input type="button" value="Modify" onclick="modifyTBlist(\''+brckid+'\')"><input type="button" value="Delete" onclick="deleteBracket(\''+brckid+'\')"><input type="button" value="Cancel" onclick="document.getElementById(\'TBcreateTable\').style.display=\'none\'"></td></tr></table>';
 if (!document.getElementById('TBcreateTable')) {
   var nwdv=document.createElement('div');  nwdv.id='TBcreateTable';  nwdv.className='tourneytable';
   with (nwdv.style) {
     backgroundColor="000000";
     color="FFFFFF";
     border="#0044FF 2px solid";
     textAlign="center";
     display="none";
   }
    document.body.appendChild(nwdv);
 }
 var tbs=document.getElementById('TBcreateTable');
 tbs.innerHTML=stuff;
 tbs.style.position="absolute";
 tbs.style.left=100;
 tbs.style.top=document.body.scrollTop+200;
 tbs.style.display='';
}




function createTournyBracket(bsize) {
var workspace=getArray(bsize);
var tc=0, tmpsize=bsize;;
while (tc<(Math.log(bsize*2)/Math.log(2))) {
var space=Math.pow(2,tc+1);  //2 4 8 16
var topspace=Math.pow(2,tc)-1;  //0 1 3 7
var colspace=tc*2;  //0 2 4 6
for (ec=0; ec<tmpsize; ec++) {
 workspace[topspace+(ec*space)][colspace] = '<input style="width:100px" id="tier:'+(tc+1)+'-'+(ec+1)+'">';
 if (tmpsize>1) {
   var toggleLine=(ec%2==0);  // true or false
   var lh=Math.pow(2,tc)*30;
   var lmod=(ec%2)*(Math.pow(2,tc)-1);  // 0  1  3  7
   workspace[topspace+(ec*space)-lmod][colspace+1]=(toggleLine ? '<img src="http://i197./aa250/WORMOPOLIS/downright.gif" style="position:relative; top:10px; height: '+ lh +'px; width: 50px">' : '<img src="http://i197./aa250/WORMOPOLIS/upright.gif" style="position:relative; bottom:10px; height: '+ lh +'px; width: 50px">');
   var dmod=(((ec%2) * -2) + 1);   //+1 or -1
   var dmod2=((ec+1)%2);  //1 or 0
   for (dd=0; dd<(Math.pow(2,tc)-1); dd++)  workspace[topspace+(ec*space)+(dd*dmod+dmod2)][colspace+1]='%del';  //1 2 3  or 0 -1 -2
 }
}
tc++;
tmpsize/=2;
}  //2=2  4=3  8=4
var tblcols=(Math.log(workspace.length-1)/Math.log(2))*2+1;  //2=3  4=5  8=7  16=9
var stuff='<table class="tourneytable" cellspacing="0"><tr><td align="center" colspan='+(tblcols)+'>TITLE: <input size="50" id="newTBTitle"><input type="hidden" id="tierstore" value="'+(Math.log(workspace.length-1)/Math.log(2))+'"></td></tr>';

for (aa=0; aa<workspace.length-1; aa++) {
stuff+='<tr>';
for (bb=0; bb<(tblcols); bb++) {
var progcalc=(aa*(workspace.length-1))/(workspace.length-1)+1;
 document.getElementById('TBprogBar').width=progcalc+'%';
if (workspace[aa][bb] && workspace[aa][bb]=='%del') {
} else {
var rs=(workspace[aa][bb] && workspace[aa][bb].match(/height: (\d+)px/)  ? RegExp.$1/30 : 1);
stuff+='<td height="20" style="width: 50px"  rowSpan="'+rs+'">'+(workspace[aa][bb]!=undefined ? (workspace[aa][bb]=='' ? '________' : workspace[aa][bb]) : '') +'</td>';
}
}
stuff+='</tr>';
}
stuff+='<tr><td align="center" colspan='+(tblcols)+'><input type="button" value="Submit" onclick="addTBtoList()"><input type="button" value="Cancel" onclick="document.getElementById(\'TBcreateTable\').style.display=\'none\'"></td></tr></table>';
 if (!document.getElementById('TBcreateTable')) {
   var nwdv=document.createElement('div');  nwdv.id='TBcreateTable';  nwdv.className='tourneytable';
   with (nwdv.style) {
     backgroundColor="000000";
     color="FFFFFF";
     border="#0044FF 2px solid";
     textAlign="center";
     display="none";
   }
    document.body.appendChild(nwdv);
 }
 var tbs=document.getElementById('TBcreateTable');
 tbs.innerHTML=stuff;
 tbs.style.position="absolute";
 tbs.style.left=100;
 tbs.style.top=document.body.scrollTop+200;
 tbs.style.display='';
 document.getElementById('TBsizedrop').style.display='none';

}

var bracketCount=0;

function deleteBracket(victimid) {
 document.getElementById('TBcreateTable').style.display='none';
 var finalSpot=document.getElementById('TBbracketList');
 for (lnks=finalSpot.getElementsByTagName('a'), v=0; v<lnks.length; v++) {
   if (lnks[v].id==victimid) {
     if (lnks[v].nextSibling) lnks[v].parentNode.removeChild(lnks[v].nextSibling);  //remove br
     lnks[v].parentNode.removeChild(lnks[v]);  //remove link
   }
 }
}

function addTBtoList() {
 var srcTable=document.getElementById('TBcreateTable');
 var srcTitle=document.getElementById('newTBTitle');
 var srcTiers=document.getElementById('tierstore').value;
 var nwTiersArray=new Array(parseInt(srcTiers));
 document.getElementById('TBcreateTable').style.display='none';
 for (imps=srcTable.getElementsByTagName('input'), worm=0; worm<imps.length; worm++) {
   if (imps[worm].id.match(/tier:(\d)\-(\d+)/)) {
     tmpt=RegExp.$1;
     tmpval=imps[worm].value;
     nwTiersArray[tmpt-1]=(nwTiersArray[tmpt-1]==undefined ? '' : nwTiersArray[tmpt-1]+',')+tmpval;
   }
 }
   var nwstrng='[Tourney:[['+srcTitle.value+'=';
   for (worm2=0; worm2<nwTiersArray.length; worm2++) nwstrng+='{'+nwTiersArray[worm2]+'}'+(worm2==nwTiersArray.length-1 ? '' : '+');
   nwstrng+=']]/Tourney]'
   var finalSpot=document.getElementById('TBbracketList');
   var nwlnk=document.createElement('a');
   nwlnk.saveData=nwstrng;
   nwlnk.id='bracket'+bracketCount++;
   nwlnk.href='javascript:  modifyTournyBracket("'+nwstrng+'","'+nwlnk.id+'");';
   nwlnk.innerHTML=srcTitle.value+ ' ('+srcTiers+' tiers)';
   finalSpot.appendChild(document.createElement('br'));
   finalSpot.appendChild(nwlnk);
}

function modifyTBlist(brckid) {
 var srcTable=document.getElementById('TBcreateTable');
 var srcTitle=document.getElementById('modTBTable');
 var srcTiers=document.getElementById('tierstore').value;
 var nwTiersArray=new Array(parseInt(srcTiers));
 document.getElementById('TBcreateTable').style.display='none';
 for (imps=srcTable.getElementsByTagName('input'), worm=0; worm<imps.length; worm++) {
   if (imps[worm].id.match(/tier:(\d)\-(\d+)/)) {
     tmpt=RegExp.$1;
     tmpval=imps[worm].value;
     nwTiersArray[tmpt-1]=(nwTiersArray[tmpt-1]==undefined ? '' : nwTiersArray[tmpt-1]+',')+tmpval;
   }
 }
   var nwstrng='[Tourney:[['+srcTitle.value+'=';
   for (worm2=0; worm2<nwTiersArray.length; worm2++) nwstrng+='{'+nwTiersArray[worm2]+'}'+(worm2==nwTiersArray.length-1 ? '' : '+');
   nwstrng+=']]/Tourney]'
   var finalSpot=document.getElementById('TBbracketList');
   var curlnk=document.getElementById(brckid);
   curlnk.saveData=nwstrng;
   curlnk.href='javascript:  modifyTournyBracket("'+nwstrng+'","'+curlnk.id+'");';
   curlnk.innerHTML=srcTitle.value+ ' ('+srcTiers+' tiers)';
}


function showTBform1() {
 if (!document.getElementById('TBsizedrop')) {
   var nwdv=document.createElement('div');  nwdv.id='TBsizedrop';
   with (nwdv.style) {
     backgroundColor="000000";
     color="FFFFFF";
     border="#0044FF 2px solid";
     textAlign="center";
     display="none";
     width="200";
     height="100";
   }
   nwdv.appendChild(document.createTextNode("Select number of participants"));
   nwdv.appendChild(document.createElement('br'));
   var sizedrop=document.createElement('select');  sizedrop.id='TBsizecheck';
   for (si=1; si<8; si++) {
     tmp=document.createElement('option');
     tmp.value=tmp.innerHTML=Math.pow(2,si);
     sizedrop.appendChild(tmp)
   }
   nwdv.appendChild(sizedrop);
   nwdv.appendChild(document.createElement('br'));
   nwdv.appendChild(document.createElement('br'));
   var subbtn=document.createElement('input');
   subbtn.value="Submit"; subbtn.type="button";  subbtn.onclick=function(){ createTournyBracket(document.getElementById('TBsizecheck').value);}
   nwdv.appendChild(subbtn);
   nwdv.appendChild(document.createElement('br'));
   nwdv.appendChild(document.createElement('br'));
   var progdiv=nwdv.appendChild(document.createElement('div'));
   progdiv.style.width='90%';  progdiv.align='left';
   var progtbl=document.createElement('table');
   progtbl.width='1%';  progtbl.style.height='10px'; progtbl.style.backgroundColor='00FF00';
   progtbl.insertRow(0);  progtbl.rows[0].insertCell(0);  progtbl.id='TBprogBar';
   progdiv.appendChild(progtbl);
   nwdv.appendChild(progdiv);
   document.body.appendChild(nwdv);
 }
 var tbs=document.getElementById('TBsizedrop');
 tbs.style.position="absolute";
 tbs.style.left=document.body.clientWidth/2 - 100;
 tbs.style.top=document.body.scrollTop+200;
 tbs.style.display='';
}

function insertTournyBracketToPost() {
//append any created brackets to post
 var finalSpot=document.getElementById('TBbracketList');
 for (brcks=finalSpot.getElementsByTagName('a'), brk=0; brk<brcks.length; brk++) {
   document.postForm.message.value+=brcks[brk].saveData;
 }
}


if (document.postForm) {
// code for adding button to tray
var pmsg=document.postForm.message;
var nwrw=pmsg.parentNode.parentNode.parentNode.previousSibling.cloneNode(true);
nwrw.firstChild.firstChild.innerHTML="Tournament Brackets:";
nwrw.firstChild.nextSibling.id='TBbracketList';
nwrw.firstChild.nextSibling.firstChild.innerHTML='<input type="button" value="NEW" onclick="showTBform1()"><br>';
pmsg.parentNode.parentNode.parentNode.parentNode.insertBefore(nwrw, pmsg.parentNode.parentNode.parentNode);

//add event handler to submit
 if (document.addEventListener) {
   document.postForm.addEventListener('submit',insertTournyBracketToPost, false);
 } else {
   document.postForm.attachEvent('onsubmit',insertTournyBracketToPost);
 }

// check for existing brackets in post message and convert to links
var tmptxt=document.postForm.message.value;
while (tmptxt.match(/\[Tourney:(.*?)\/Tourney\]/)) {
 var tmpbrck=RegExp.$1;
 tmptxt=tmptxt.replace(/\[Tourney:(.*?)\/Tourney\]/,'');
 var tmptitle=tmpbrck.split('=')[0].split('[[')[1];
 var tmpbrckstuff=tmpbrck.split('=')[1].split(']]')[0];
 var tiercount=tmpbrckstuff.split('+').length;
 var nwstrng='[Tourney:[['+tmptitle+'='+tmpbrckstuff+']]/Tourney]'
 var finalSpot=document.getElementById('TBbracketList');
 var nwlnk=document.createElement('a');
 nwlnk.saveData=nwstrng;
 nwlnk.id='bracket'+bracketCount++;
 nwlnk.href='javascript:  modifyTournyBracket("'+nwstrng+'","'+nwlnk.id+'");';
 nwlnk.innerHTML=tmptitle+ ' ('+tiercount+' tiers)';
 finalSpot.appendChild(document.createElement('br'));
 finalSpot.appendChild(nwlnk);
}
document.postForm.message.value=tmptxt;
}

// code for displaying tables
for (var tds=document.getElementsByTagName('td'), ww=0; ww<tds.length; ww++) {
if (tds[ww].width=='80%' && tds[ww].className.match(/windowbg/) && tds[ww].innerHTML.match(/\[Tourney:(.*?)\/Tourney\]/)) {
var Tstuff=RegExp.$1;
var Ttable=displayTournyBracket(Tstuff);
tds[ww].innerHTML=tds[ww].innerHTML.replace(/\[Tourney:(.*?)\/Tourney\]/,Ttable);
ww--;
}
}


// -->
</script>


Preview: www.wormocodes.com/index.cgi?board=graphreqaswell&action=display&thread=760