Min Cup Ad-hoc drawing FE

by anup1986

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<table id="pyramid" class="table table-bordered">
    <tbody>
    </tbody>
</table>

CSS

table, tr, td{
    border: 1px solid #ccc;
}

td {
    width: 75px;
    height: 30px;
}

JavaScript

var Competitor = function(id, name) {
    this.id = id;
    this.name = name;
};

// Prova att ta bort eller lägga till tävlanden
var competitors = [
    new Competitor(1, "Pontus")
    , new Competitor(2, "Andreas")
    , new Competitor(3, "Arto")
    , new Competitor(4, "Mathias")
    , new Competitor(5, "Samir")
    , new Competitor(6, "Tomas")
    , new Competitor(7, "Benny")
    , new Competitor(8, "Armani")
    ];

$(document).ready(function() {

    Math.log = (function() {
        var log = Math.log;
        return function(n, base) {
            return log(n) / (base ? log(base) : 1);
        };
    })();

    /**
     * Randomize array element order in-place.
     * Using Fisher-Yates shuffle algorithm.
     */

    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }

    function calculateClosestMultipleOfTwo(numberOfCompetitors) {
        var currentMultiple = 2;
        while (currentMultiple < numberOfCompetitors) {
            currentMultiple *= 2;
        }
        return currentMultiple;
    }

    function calculateDepth(n) {
        return Math.log(n, 2);
    }



    var size = calculateClosestMultipleOfTwo(competitors.length);
    var depth = calculateDepth(size);

    var pyramid = $("#pyramid");
    var tbody = $("tbody", pyramid);
    // Add rows
    for (var i = 0; i < size; i++) {
        var tr = $("<tr>");
        tbody.append(tr);
    }

    // Add columns
    for (var j = 1; j <= depth + 1; j++) {
        var rowspan = Math.pow(2, j - 1);
        var rowsToInclude = $("tr:nth-child(" + rowspan + "n+1)", tbody);
        var td = $("<td>").attr("rowspan", rowspan);
        rowsToInclude.append(td);
    }

    // Shuffle
    competitors = shuffleArray(competitors);

    var binaryTreeNode = function(parent) {
       ...