<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<canvas id="canvas"></canvas>
<p>The best of the best- <a href="http://jsfiddle.net/cvoll/8x39Lxw3/27/">http://jsfiddle.net/cvoll/8x39Lxw3/27/</a></p>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<canvas id="canvas"></canvas>
<div class="region">
<h2 class="region-name">South Region</h2>
<section class="round">
<article class="game">
<div class="team team-winner team-florida" data-team="florida">
<span class="team-seed">1</span>
<span class="team-name">Florida</span>
<span class="team-score">67</span>
</div>
<div class="team team-loser team-ua-ms-mary" data-team="ua-ms-mary">
<span class="team-seed">16</span>
<span class="team-name">UA / MS Mary</span>
<span class="team-score">55</span>
</div>
</article>
<article class="game">
<div class="team team-loser team-colorado" data-team="colorado">
<span class="team-seed">8</span>
<span class="team-name">Colorado</span>
<span class="team-score">48</span>
</div>
<div class="team team-winner team-pitt" data-team="pitt">
<span class="team-seed">9</span>
<span class="team-name">Pitt</span>
<span class="team-score">77</span>
</div>
</article>
<article class="game">
<div class="team team-winner team-ucla" data-team="ucla">
<span class="team-seed">4</span>
<span class="team-name">UCLA</span>
<span class="team-score">76</span>
</div>
<div class="team team-loser team-tulsa" data-team="tulsa">
<span class="team-seed">13</span>
<span class="team-name">Tulsa</span>
<span class="team-score">59</span>
</div>
</article>
<article class="game">
<div class="team team-loser team-vcu" data-team="vcu">
<span class="team-seed">5</span>
<span class="team-name">VCU</span>
<span class="team-score">75</span>
</div>
<div class="team team-winner team-stephen-f-austin" data-team="stephen-f-austin">
<span class="team-seed">12</span>
<span class="team-name">Stephen F. Austin</span>
<span class="team-score">77</span>
</div>
</article>
<article class="game">
<div class="team team-winner team-kansas" data-team="kansas">
<span class="team-seed">2</span>
<span class="team-name">Kansas</span>
<span class="team-score">80</span>
</div>
<div class="team team-loser team-eastern-kentucky" data-team="eastern-kentucky">
<span class="team-seed">15</span>
<span class="team-name">Eastern Kentucky</span>
<span class="team-score">69</span>
</div>
</article>
<article class="game">
<div class="team team-loser team-new-mexico" data-team="new-mexico">
<span class="team-seed">7</span>
<span class="team-name">New Mexico</span>
<span class="team-score">53</span>
</div>
<div class="team team-winner team-stanford" data-team="stanford">
<span class="team-seed">10</span>
<span class="team-name">Stanford</span>
<span class="team-score">58</span>
</div>
</article>
<article class="game">
<div class="team team-winner team-syracuse" data-team="syracuse">
<span class="team-seed">3</span>
<span class="team-name">Syracuse</span>
<span class="team-score">77</span>
</div>
<div class="team team-loser team-western-mich" data-team="western-mich">
<span class="team-seed">14</span>
<span class="team-name">Western Mich.</span>
<span class="team-score">53</span>
</div>
</article>
<article class="game">
<div class="team team-winner team-dayton" data-team="dayton">
<span class="team-seed">11</span>
<span class="team-name">Dayton</span>
<span class="team-score">60</span>
</div>
<div class="team team-loser team-ohio-st" data-team="ohio-st">
<span class="team-seed">6</span>
<span class="team-name">Ohio St</span>
<span class="team-score">59</span>
</div>
</article>
</section>
<section class="round">
<article class="game">
<div class="team team-winner team-florida" data-team="florida">
<span class="team-seed">1</span>
<span class="team-name">Florida</span>
<span class="team-score">61</span>
</div>
<div class="team team-loser team-pitt" data-team="pitt">
<span class="team-seed">9</span>
<span class="team-name">Pitt</span>
<span class="team-score">45</span>
</div>
</article>
<article class="game">
<div class="team team-winner team-ucla" data-team="ucla">
<span class="team-seed">4</span>
<span class="team-name">UCLA</span>
<span class="team-score">77</span>
</div>
<div class="team team-loser team-stephen-f-austin" data-team="stephen-f-austin">
<span class="team-seed">12</span>
<span class="team-name">Stephen F. Austin</span>
<span class="team-score">60</span>
</div>
</article>
<article class="game">
<div class="team team-loser team-kansas" data-team="kansas">
<span class="team-seed">2</span>
<span class="team-name">Kansas</span>
<span class="team-score">57</span>
</div>
<div class="team team-winner team-stanford" data-team="stanford">
<span class="team-seed">10</span>
<span class="team-name">Stanford</span>
<span class="team-score">60</span>
</div>
</article>
<article class="game">
<div class="team team-loser team-syracuse" data-team="syracuse">
<span class="team-seed">3</span>
<span class="team-name">Syracuse</span>
<span class="team-score">53</span>
</div>
<div class="team team-winner team-dayton" data-team="dayton">
<span class="team-seed">11</span>
<span class="team-name">Dayton</span>
<span class="team-score">55</span>
</div>
</article>
</section>
<section class="round round-collapse">
<article class="game">
<div class="team team-winner team-florida" data-team="florida">
<span class="team-seed">1</span>
<span class="team-name">Florida</span>
<span class="team-score">79</span>
</div>
<div class="team team-loser team-ucla" data-team="ucla">
<span class="team-seed">4</span>
<span class="team-name">UCLA</span>
<span class="team-score">68</span>
</div>
</article>
<article class="game">
<div class="team team-loser team-stanford" data-team="stanford">
<span class="team-seed">10</span>
<span class="team-name">Stanford</span>
<span class="team-score">72</span>
</div>
<div class="team team-winner team-dayton" data-team="dayton">
<span class="team-seed">11</span>
<span class="team-name">Dayton</span>
<span class="team-score">82</span>
</div>
</article>
</section>
<section class="round round-collapse">
<article class="game">
<div class="team team-winner team-florida" data-team="florida">
<span class="team-seed">1</span>
<span class="team-name">Florida</span>
<span class="team-score">62</span>
</div>
<div class="team team-loser team-dayton" data-team="dayton">
<span class="team-seed">11</span>
<span class="team-name">Dayton</span>
<span class="team-score">52</span>
</div>
</article>
</section>
</div>
<hr />
<hr />
<div class="region">
<h2 class="region-name">South Region</h2>
<section class="round">
<article class="game">
<div class="team team-florida" data-team="florida">
<span class="team-seed">1</span>
<span class="team-name">Florida</span>
<span class="team-score"></span>
</div>
<div class="team team-ua-ms-mary" data-team="ua-ms-mary">
<span class="team-seed">16</span>
<span class="team-name">UA / MS Mary</span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team team-colorado" data-team="colorado">
<span class="team-seed">8</span>
<span class="team-name">Colorado</span>
<span class="team-score"></span>
</div>
<div class="team team-pitt" data-team="pitt">
<span class="team-seed">9</span>
<span class="team-name">Pitt</span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team team-ucla" data-team="ucla">
<span class="team-seed">4</span>
<span class="team-name">UCLA</span>
<span class="team-score"></span>
</div>
<div class="team team-tulsa" data-team="tulsa">
<span class="team-seed">13</span>
<span class="team-name">Tulsa</span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team team-vcu" data-team="vcu">
<span class="team-seed">5</span>
<span class="team-name">VCU</span>
<span class="team-score"></span>
</div>
<div class="team team-stephen-f-austin" data-team="stephen-f-austin">
<span class="team-seed">12</span>
<span class="team-name">Stephen F. Austin</span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team team-kansas" data-team="kansas">
<span class="team-seed">2</span>
<span class="team-name">Kansas</span>
<span class="team-score"></span>
</div>
<div class="team team-eastern-kentucky" data-team="eastern-kentucky">
<span class="team-seed">15</span>
<span class="team-name">Eastern Kentucky</span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team team-new-mexico" data-team="new-mexico">
<span class="team-seed">7</span>
<span class="team-name">New Mexico</span>
<span class="team-score"></span>
</div>
<div class="team team-stanford" data-team="stanford">
<span class="team-seed">10</span>
<span class="team-name">Stanford</span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team team-syracuse" data-team="syracuse">
<span class="team-seed">3</span>
<span class="team-name">Syracuse</span>
<span class="team-score"></span>
</div>
<div class="team team-western-mich" data-team="western-mich">
<span class="team-seed">14</span>
<span class="team-name">Western Mich.</span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team team-ohio-st" data-team="ohio-st">
<span class="team-seed">6</span>
<span class="team-name">Ohio St</span>
<span class="team-score"></span>
</div>
<div class="team team-dayton" data-team="dayton">
<span class="team-seed">11</span>
<span class="team-name">Dayton</span>
<span class="team-score"></span>
</div>
</article>
</section>
<section class="round">
<article class="game">
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
</article>
</section>
<section class="round round-collapse">
<article class="game">
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
</article>
<article class="game">
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
</article>
</section>
<section class="round round-collapse">
<article class="game">
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
<div class="team" data-team="">
<span class="team-seed"></span>
<span class="team-name"></span>
<span class="team-score"></span>
</div>
</article>
</section>
</div>
body {
background: #F2F2F2;
margin: 0;
}
* {
box-sizing: border-box;
}
body, html {
height: 100%;
width: 100%;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
.region {
height: 100%;
position: relative;
z-index: 1;
}
.region .region-name {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
line-height: 0;
margin: -18px 0 0;
padding: 0;
font: 600 30px proxima-nova, proxima-nova-1, proxima-nova-2, "Proxima Nova", arial, helvetica, sans-serif;
}
.round {
font: 300 15px proxima-nova, proxima-nova-1, proxima-nova-2, "Proxima Nova", arial, helvetica, sans-serif;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
padding: 0 20px;
float: left;
width: 33.3333333333%;
position: relative;
z-index: 2;
pointer-events: none;
}
.round.round-collapse {
margin-left: -16.666666666%;
}
.round .game {
background: #FFF;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 80px;
pointer-events: auto;
}
.round .game .team {
display: flex;
align-items: center;
flex: 1 1 40px;
cursor: pointer;
border-left: 10px solid #DDD;
transition: .2s;
/* keep this for smoother transitions: */
box-shadow: inset 0 40px 0 rgba(255, 255, 255, 0);
}
.round .game .team .team-seed {
font-size: 10px;
color: #999;
flex: 0 1 30px;
text-align: center;
transition: .2s;
}
.round .game .team .team-name {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.round .game .team .team-score {
font-weight: 600;
flex: 0 1 30px;
}
.round .game .team .team-score:empty {
display: none;
}
.round .game .team.team-hover {
background: #CFC59A;
color: #FFF !important;
box-shadow: inset 0 40px 0 rgba(255, 255, 255, 0.2);
}
.round .game .team.team-hover .team-seed {
color: #FFF;
}
.round .game .team:active {
box-shadow: inset 0 40px 0 rgba(255, 255, 255, 0);
}
.round .game .team.team-loser {
background: #F7F7F7;
color: #BBB;
}
.region-right .round {
float: right;
}
.region-right .round.round-collapse {
margin-left: 0;
margin-right: -16.666666666%;
}
.region-right .round .team {
border-left: 0;
border-right: 10px solid #DDD;
flex-direction: row-reverse;
text-align: right;
}
.round .game .team-florida {
border-color: #0020A5;
}
.round .game .team-ua-ms-mary {
border-color: #908458;
}
.round .game .team-colorado {
border-color: #090907;
}
.round .game .team-pitt {
border-color: #CFC59A;
}
.round .game .team-ucla {
border-color: #0073CF;
}
.round .game .team-tulsa {
border-color: #064A99;
}
.round .game .team-vcu {
border-color: #000000;
}
.round .game .team-stephen-f-austin {
border-color: #330066;
}
.round .game .team-kansas {
border-color: #0018A8;
}
.round .game .team-eastern-kentucky {
border-color: #760018;
}
.round .game .team-new-mexico {
border-color: #CC003D;
}
.round .game .team-stanford {
border-color: #8C1515;
}
.round .game .team-syracuse {
border-color: #FF5113;
}
.round .game .team-western-mich {
border-color: #62390E;
}
.round .game .team-ohio-st {
border-color: #AD0F20;
}
.round .game .team-dayton {
border-color: #C40023;
}
var Tournament = function() {
var defaults = {
width: 3,
color: '#BBB',
radius: 15,
regionSelector: '.region'
};
return {
init: function(options) {
this.options = $.extend(defaults, options);
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.bindEvents();
this.render();
},
bindEvents: function() {
$(window).on('resize', this.render.bind(this));
$('.team').on({
mouseenter: function(e) {
$('.team-' + $(this).attr('data-team'))
.addClass('team-hover')
.css('background', $(this).css('border-left-color'));
},
mouseleave: function(e) {
$('.team-' + $(this).attr('data-team'))
.removeClass('team-hover')
.css('background', '');
}
});
},
render: function() {
var w = $(document).width();
var h = $(document).height();
this.canvas.width = w * 2; // retina
this.canvas.height = h * 2; // retina
this.canvas.style.width = w + 'px';
this.canvas.style.height = h + 'px';
this.ctx.clearRect( 0, 0, this.canvas.width, this.canvas.height );
this.ctx.scale(2, 2); // retina
var that = this;
$(this.options.regionSelector).each(function() {
var rightAlign = $(this).hasClass('region-right');
$(this).find('.round').each(function(round) {
var $nextGames = $(this).next('.round').find('.game');
if (!$nextGames.length) return;
$(this).find('.game').each(function(i) {
var $winner = $(this).find('.team-winner'),
$nextGame = $nextGames.eq( Math.floor(i/2) ),
color = $winner.length ? $winner.css('border-left-color') : that.options.color,
width = $winner.length ? that.options.width : 0.5,
calcFn = rightAlign ? that.calcLeft : that.calcRight,
start = calcFn( $winner.length ? $winner : $(this) );
if (round == 0) {
// s-curve
var endNode = $nextGame;
if ($winner.length) {
endNode = $nextGame.find('.team-' + $winner.attr('data-team'));
}
calcFn = rightAlign ? that.calcRight : that.calcLeft;
var end = calcFn(endNode);
var radiusAdjust = Math.min(that.options.radius, Math.abs(start.y - end.y)/2);
that.drawSCurve(start, end, color, width, that.options.radius, radiusAdjust);
} else {
// single curve for collapsed columns
var end = that.calcCenter($nextGame);
that.drawCurve(start, end, 'horizontal', color, width, that.options.radius);
}
}); // /game
}); // /round
}); // /region
},
// Calculate center points
// +-----+
// | x
// +-----+
calcRight: function ($object) {
return {
x: $object.offset().left + $object.outerWidth(),
y: $object.offset().top + $object.outerHeight() / 2
};
},
// +-----+
// x |
// +-----+
calcLeft: function ($object) {
return {
x: $object.offset().left,
y: $object.offset().top + $object.outerHeight() / 2
};
},
// +-----+
// | x |
// +-----+
calcCenter: function ($object) {
return {
x: $object.offset().left + $object.outerWidth() / 2,
y: $object.offset().top + $object.outerHeight() / 2
};
},
drawLine: function (start, end) {
this.ctx.moveTo( start.x, start.y );
this.ctx.lineTo( end.x, end.y );
},
// one curve
drawCurve: function (start, end, orientation, color, width, radius, radius2) {
if (!radius2) radius2 = radius;
this.ctx.beginPath();
if (orientation == 'horizontal') {
var anchor = { x: end.x, y: start.y };
} else {
var anchor = { x: start.x, y: end.y };
}
// calculate the point a certain distance along the line
var m1 = this.lineDistanceFromEnd(start, anchor, radius);
var m2 = this.lineDistanceFromEnd(end, anchor, radius2);
this.drawLine(start, m1);
this.ctx.bezierCurveTo(m1.x, m1.y, anchor.x, anchor.y, m2.x, m2.y);
this.drawLine(m2, end);
this.ctx.strokeStyle = color;
this.ctx.lineWidth = width;
this.ctx.lineCap = 'square';
this.ctx.stroke();
this.ctx.closePath();
},
// two curves
drawSCurve: function (start, end, color, width, radius, radius2) {
var midpoint = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
if (!radius2) radius2 = radius;
this.drawCurve(start, midpoint, 'horizontal', color, width, radius, radius2);
this.drawCurve(midpoint, end, 'vertical', color, width, radius2, radius);
},
lineDistanceFromEnd: function (start, end, d) {
var x = end.x, y = end.y;
if (end.x - start.x < 0) x += d; // left
if (end.x - start.x > 0) x -= d; // right
if (end.y - start.y < 0) y += d; // up
if (end.y - start.y > 0) y -= d; // down
return { x: x, y: y };
}
};
};
var tournament = new Tournament();
tournament.init();
