Drawing System - Pyramid

by anup1986

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<div class="row">
        <div class="span6">
            <button class="btn btn-danger" data-bind="click: draw">
                Draw</button>
        </div>
    </div>
    <br />
    <div class="row">
        <div data-bind="foreach: rounds">
            <div class="span3">
                <table class="table table-bordered">
                    <tbody data-bind="foreach: matches">
                        <tr>
                            <td>
                                <div style="color: rgb(204,0,0);">
                                    <span data-bind="text: hong() == null ? '' : hong().name"></span>
                                    <br />
                                    <small data-bind="text: hong() == null ? '' : hong().club"></small>
                                </div>
                                <div style="color: rgb(0,0,204);">
                                    <span data-bind="text: chong() == null ? '' : chong().name"></span>
                                    <br />
                                    <small data-bind="text: chong() == null ? '' : chong().club"></small>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span6">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Round
                        </th>
                        <th>
                            Hong
                        </th>
                        <th>
                            Chong
                        </th>
                        <th>
               ...

CSS

/*!
 * Bootstrap v2.2.0
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
.google-maps img {
  max-width: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
 ...

JavaScript

$(document).ready(function() {

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

    function calculateClosestMultipleOfTwo(n) {
        var result = 2;
        while (result < n) {
            result *= 2;
        }
        return result;
    }

    var Competitor = function(name) {
        this.name = name;
        this.club = "Taekwon-Do ITF";
    };

    /* Test data */
    var numberOfCompetitors = 8;

    var competitors = [];
    for (var i = 0; i < numberOfCompetitors; i++) {
        competitors.push(new Competitor("Competitior" + i));
    }

    /* Utility functions */

    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;
    }

    var Match = function(round, index, hong, chong) {
        var self = this;
        self.round = round;
        self.index = index;

        self.hong = ko.observable(hong);
        self.chong = ko.observable(chong);
        self.result = ko.observable();
        self.isLocked = ko.observable(false);

        self.assignmentWeight = ko.computed(function() {
            var weight = 0;
            if (self.hong() != null) weight += 1;
            if (self.chong() != null) weight += 1;
            return weight;
        }, self);

        self.setResult = function(value) {
            self.result(value);
            self.isLocked(true);
        };

        self.canSetResult = function() {
            return self.assignmentWeight() != 0;
        };

    };

    var Round = function(category, index, numberOfMatches) {
        var self = this;
        self.category = category;
        self.index = index;

        self.numberOfMatches = numberOfMatches;
        self.matches = ko.observableArray();

    ...