|
|
Post by Wormopolis on Sept 4, 2010 22:09:09 GMT -8
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.4
// By Wormopolis - www.wormocodes.com
// do not repost - keep header intact
// Do not edit without authors permission
// GLOBAL HEADER SECTION
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=unescape(str.split('=')[1].split(']]')[0].replace(/\s/g,'')).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
if (tiers[tc][ec]!='') workspace[topspace+(ec*space)-lmod][colspace+1]=(toggleLine ? '<img src="http://i197.photobucket.com/albums/aa250/WORMOPOLIS/downright.gif" style="position:relative; top:10px; height: '+ lh +'px; width: 50px">' : '<img src="http://i197.photobucket.com/albums/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+'" align="center">'+(workspace[aa][bb]!=undefined ? workspace[aa][bb] : '') +'</td>';
}
}
stuff+='</tr>';
}
stuff+='</table>';
return stuff;
}
function swapBrackets(t1,s1,t2,s2) {
if (t1!=t2) alert("Brackets can only be swapped from the same tier.");
else {
var tmphold=document.getElementById('tier:'+t1+'-'+s1).value;
document.getElementById('tier:'+t1+'-'+s1).value=document.getElementById('tier:'+t2+'-'+s2).value;
document.getElementById('tier:'+t2+'-'+s2).value=tmphold;
for (tt=t1-1; tt>0; tt--) {
var gg=Math.pow(2,(t1-tt));
for (zz=1; zz<=gg; zz++) {
var y1=(s1-1)*gg + zz;
var y2=(s2-1)*gg + zz;
tmphold=document.getElementById('tier:'+tt+'-'+y1).value;
document.getElementById('tier:'+tt+'-'+y1).value=document.getElementById('tier:'+tt+'-'+y2).value;
document.getElementById('tier:'+tt+'-'+y2).value=tmphold;
}
}
}
}
var swapMode=false;
var swapVictim1,swapVictim2;
function swapCheck(obj) {
if (!swapMode) return;
if (!swapVictim1) {
obj.style.border="#FF0000 1px solid";
swapVictim1=obj.id;
} else if (obj.id!=swapVictim1) {
obj.style.border="#FF0000 1px solid";
swapVictim2=obj.id;
if (confirm('Swap these 2 sub-brackets?')) {
tmpv1=swapVictim1.split('tier:')[1].split('-');
tmpv2=swapVictim2.split('tier:')[1].split('-');
swapBrackets(tmpv1[0],tmpv1[1],tmpv2[0],tmpv2[1]);
}
document.getElementById(swapVictim1).style.border=document.getElementById(swapVictim2).style.border='';
swapVictim1=swapVictim2='';
swapMode=false;
}
}
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]+'" onclick="swapCheck(this);">';
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.photobucket.com/albums/aa250/WORMOPOLIS/downright.gif" style="position:relative; top:10px; height: '+ lh +'px; width: 50px">' : '<img src="http://i197.photobucket.com/albums/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))+'"><input type="button" value="Swap Brackets" onclick="if (swapMode==true) {alert(\'Cancelling swap\'); swapMode=false; if (swapVictim1) document.getElementById(swapVictim1).style.border=\'\'; swapVictim1=\'\'; this.value=\'Swap Brackets\';} else { alert(\'Click 2 sub-brackets in the same tier to swap\'); swapMode=true; this.value=\'Cancel Swap\';}"></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.photobucket.com/albums/aa250/WORMOPOLIS/downright.gif" style="position:relative; top:10px; height: '+ lh +'px; width: 50px">' : '<img src="http://i197.photobucket.com/albums/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';
}
function bracketFunction(mode, param1, param2) {
//function modifyTournyBracket(str, brckid)
//function createTournyBracket(bsize)
//function displayTournyBracket(str)
// mode 0=create, 1=modify, 2=display
switch (mode) {
case 0:
break;
}
}
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+'=';
nwtmpstrng='';
for (worm2=0; worm2<nwTiersArray.length; worm2++) nwtmpstrng+='{'+nwTiersArray[worm2]+'}'+(worm2==nwTiersArray.length-1 ? '' : '+');
nwstrng+=escape(nwtmpstrng)+']]/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+'=';
nwtmpstrng='';
for (worm2=0; worm2<nwTiersArray.length; worm2++) nwtmpstrng+='{'+nwTiersArray[worm2]+'}'+(worm2==nwTiersArray.length-1 ? '' : '+');
nwstrng+=escape(nwtmpstrng)+']]/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;
}
}
// END GLOBAL HEADER SECTION
// -->
</script>
<script type="text/javascript">
<!--
// Tournament Bracket - v1.4
// By Wormopolis - www.wormocodes.com
// do not repost - keep header intact
// Do not edit without authors permission
// GLOBAL/BOARD FOOTER SECTION
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 |
|
|
|
Post by Wormopolis on Sept 11, 2010 18:18:08 GMT -8
version update 1.01: fixed a bug that was caused by me trying to use a UBBC keyword as a loop control... silly me.
|
|
|
|
Post by Wormopolis on Sept 19, 2011 23:36:18 GMT -8
version update 1.4: separated functions from postcheck so they can be used in HTML. branches now stay hidden unless name is in front of them.
|
|