Bracket algorithms

by lukerichison

HTML

<div data-region="1">
    <ul data-round="1">
        <li data-game="1">
            <div data-team="M1" draggable="true"></div>
            <div data-team="M16" draggable="true"></div>
        </li>
        <li data-game="8">
            <div data-team="M8" draggable="true"></div>
            <div data-team="M9" draggable="true"></div>
        </li>
        <li data-game="5">
            <div data-team="M5" draggable="true"></div>
            <div data-team="M12" draggable="true"></div>
        </li>
        <li data-game="4">
            <div data-team="M4" draggable="true"></div>
            <div data-team="M13" draggable="true"></div>
        </li>
        <li data-game="6">
            <div data-team="M6" draggable="true"></div>
            <div data-team="M11" draggable="true"></div>
        </li>
        <li data-game="3">
            <div data-team="M3" draggable="true"></div>
            <div data-team="M14" draggable="true"></div>
        </li>
        <li data-game="7">
            <div data-team="M7" draggable="true"></div>
            <div data-team="M10" draggable="true"></div>
        </li>
        <li data-game="2">
            <div data-team="M2" draggable="true"></div>
            <div data-team="M15" draggable="true"></div>
        </li>
    </ul>
    <ul data-round="2">
        <li data-game="1">
            <div data-team=""></div>
            <div data-team=""></div>
        </li>
        <li data-game="4">
            <div data-team=""></div>
            <div data-team=""></div>
        </li>
        <li data-game="3">
            <div data-team=""></div>
            <div data-team=""></div>
        </li>
        <li data-game="2">
            <div data-team=""></div>
            <div data-team=""></div>
        </li>
    </ul>
    <ul data-round="3">
        <li data-game="1">
            <div data-team=""></div>
            <div data-team=""></div>
        </li>
        <li data-game="2">
            <div data-team=""></div>
           ...

CSS

table{float:left;font-size:1em;margin-right:0.5em;}
table th{font-weight:bold;background:gray;}
table th:empty{background:black;}
table tr > *{border:1px solid black;text-align:right;width:1em;padding:0 0.125em;}
table thead tr > *, caption{text-align:center;}

JavaScript

var p = $("[data-region='1'] [data-round='1'] [data-game]").length;
var r = $("[data-region='1'] [data-round]").length;
for (var i = 1; i <= r; i++) { //round
    $("table thead th:nth-child("+(i+1)+")").text(i);
    for (var n = 1; n <= p*2; n++) { //game
        $("table tbody tr:nth-child("+n+") th").text(n);
        $("table#WAVE tbody tr:nth-child("+n+") td:nth-child("+(i+1)+")").text(Math.abs((n-1)%(p*2/Math.pow(2,i-1))+(Math.pow(-1, Math.ceil(n/(p*2/Math.pow(2,i)))+1)-1)/2*(p*2/Math.pow(2,i-1)-1))+1);
$("table#ELEMs tbody tr:nth-child("+n+") td:nth-child("+(i+1)+")").text((Math.pow(-1, Math.ceil(($("[data-round='1']").find("[data-team='M"+n+"']").closest("[data-game]").index()*2+$("[data-round='1']").find("[data-team='M"+n+"']").index()+1)/Math.pow(2,i-1)))+1)/2+1);
    }
}