Skip to content

Commit

Permalink
Re-wrote the bracket picker JS per cmadden's example. Added a 'click …
Browse files Browse the repository at this point in the history 
…all' link above each round to make testing easier. Still need to figure out how to clear subsequent picks when a previous pick changes.
  • Loading branch information
@taylorkearns
taylorkearns committed Nov 28, 2010
1 parent 1765705 commit 61c4e8c
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 117 deletions.
22 changes: 15 additions & 7 deletions index.php
View file
Expand Up @@ -9,14 +9,15 @@
<title>ncaa bracket 2011</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="">
<style type="text/css">
body { font-size: 62.5%; }
div.round { float: left; width: 200px; }
div.round { float: left; width: 100px; height: 600px; overflow: auto; margin-right: 30px; }
div.champion {float: right; margin-right: 30px; }
div.matchup { margin-bottom: 10px; }
form label { display: block; }
form label { display: block; padding: 2px; margin-bottom: 2px; border: 1px solid #ccc; background: #eee; width: 40px; }
form label:hover { background: #ccc; }
h2 { font-size: 1.2em; }
</style>
Expand All @@ -29,6 +30,7 @@
<div class="round">
<h2>Round One</h2>
<br /><a href="#" class="click-all">Click all</a>
<!-- Left side of bracket -->
<div class="rd1 matchup">
<label for="rd1-matchup1-team1">KU</label><input type="hidden" id="rd1-matchup1-team1" value="ku" />
Expand Down Expand Up @@ -163,6 +165,7 @@
<div class="round">
<h2>Round Two</h2>
<br /><a href="#" class="click-all">Click all</a>
<!-- Left side of bracket -->
<div class="rd2 matchup">
<label for="rd2-matchup1-team1"></label><input type="hidden" id="rd2-matchup1-team1" value="" />
Expand Down Expand Up @@ -233,6 +236,7 @@
<div class="round">
<h2>Sweet Sixteen</h2>
<br /><a href="#" class="click-all">Click all</a>
<!-- Left side of bracket -->
<div class="sweet16 matchup">
<label for="sweet16-matchup1-team1"></label><input type="hidden" id="sweet16-matchup1-team1" value="" />
Expand Down Expand Up @@ -271,6 +275,7 @@
<div class="round">
<h2>Elite Eight</h2>
<br /><a href="#" class="click-all">Click all</a>
<!-- left side of bracket -->
<div class="elite8 matchup">
<label for="elite8-matchup1-team1"></label><input type="hidden" id="elite8-matchup1-team1" value="" />
Expand All @@ -293,6 +298,7 @@
<div class="round">
<h2>Final Four</h2>
<br /><a href="#" class="click-all">Click all</a>
<!-- Left side of bracket -->
<div class="final4 matchup">
<label for="final4-matchup1-team1"></label><input type="hidden" id="final4-matchup1-team1" value="" />
Expand All @@ -307,23 +313,25 @@
<div class="round">
<h2>Championship</h2>
<br /><a href="#" class="click-all">Click all</a>
<div class="championship matchup">
<label for="championship-team1"></label><input type="hidden" id="championship-team1" value="" />
<label for="championship-team2"></label><input type="hidden" id="championship-team2" value="" />
<label for="championship-matchup1-team1"></label><input type="hidden" id="championship-matchup1-team1" value="" />
<label for="championship-matchup1-team2"></label><input type="hidden" id="championship-matchup1-team2" value="" />
</div>
</div><!-- End .round -->
<div class="champion">
<h2>Champion</h2>
<label for="champion"></label><input type="hidden" id="champion" value="" />
<br /><a href="#" class="click-all">Click all</a>
<label for="champion-matchup1-team1"></label><input type="hidden" id="champion-matchup1-team1" value="" />
</div><!-- End .round -->
</form>
</section><!-- End #bracket -->
<!-- scripts -->
<script src="/js/core.js"></script>
<script src="js/core.js"></script>
</body>
</html>
194 changes: 84 additions & 110 deletions js/core.js
View file
@@ -1,125 +1,99 @@
var rounds = ['rd1', 'rd2', 'sweet16', 'elite8', 'final4', 'championship', 'champion'];



function getTargetFromId(id)
{
var parts = id.split('-');
var round = parts[0];
var matchup = parseInt(parts[1].replace('matchup', ''));
var team = parseInt(parts[2].replace('team', ''));

var next_round = getNextRound(round);
var next_matchup = getNextMatchup(matchup);
var next_team = getNextTeam(matchup);

var selector = '#'+next_round+'-matchup'+next_matchup+'-team'+next_team;

return $(selector);
}



function getNextRound(round)
{
for(i = 0; i < rounds.length; i++)
{
if(rounds[i] != rounds.length - 1)
{
if(rounds[i] == round) { return rounds[i+1]; }
}
else { return null; }
}
return null;
}



function getNextMatchup(matchup)
{
return matchup % 2 == 0 ? matchup / 2 : (matchup + 1) / 2;
}



function getNextTeam(matchup)
{
return (matchup % 2 == 0) ? 2 : 1;
}



/* ==================================================================== */
// ON READY
/* ==================================================================== */
$(document).ready(function()
{

/* ******************************************************************** */
// Bracket picks controls
/* ******************************************************************** */
/* ==================================================================== */
// BRACKET PICKS CONTROLS
/* ==================================================================== */

// If an input label (team name) is clicked..
$('div.matchup label').click(function()
{
var selected_team_name = $(this).text();
var selected_input = $(this).next('input[type="hidden"]');
var selected_val = selected_input.val();
var target_input;
var target_label;
// Determine the target input
if(selected_input.attr('id').indexOf('rd1') != -1)
{
// Round one
if(selected_input.attr('id').indexOf('matchup1-') != -1) { target_input = $('#rd2-matchup1-team1'); }
else if(selected_input.attr('id').indexOf('matchup2-') != -1) { target_input = $('#rd2-matchup1-team2'); }
else if(selected_input.attr('id').indexOf('matchup3-') != -1) { target_input = $('#rd2-matchup2-team1'); }
else if(selected_input.attr('id').indexOf('matchup4-') != -1) { target_input = $('#rd2-matchup2-team2'); }
else if(selected_input.attr('id').indexOf('matchup5-') != -1) { target_input = $('#rd2-matchup3-team1'); }
else if(selected_input.attr('id').indexOf('matchup6-') != -1) { target_input = $('#rd2-matchup3-team2'); }
else if(selected_input.attr('id').indexOf('matchup7-') != -1) { target_input = $('#rd2-matchup4-team1'); }
else if(selected_input.attr('id').indexOf('matchup8-') != -1) { target_input = $('#rd2-matchup4-team2'); }
else if(selected_input.attr('id').indexOf('matchup9-') != -1) { target_input = $('#rd2-matchup5-team1'); }
else if(selected_input.attr('id').indexOf('matchup10-') != -1) { target_input = $('#rd2-matchup5-team2'); }
else if(selected_input.attr('id').indexOf('matchup11-') != -1) { target_input = $('#rd2-matchup6-team1'); }
else if(selected_input.attr('id').indexOf('matchup12-') != -1) { target_input = $('#rd2-matchup6-team2'); }
else if(selected_input.attr('id').indexOf('matchup13-') != -1) { target_input = $('#rd2-matchup7-team1'); }
else if(selected_input.attr('id').indexOf('matchup14-') != -1) { target_input = $('#rd2-matchup7-team2'); }
else if(selected_input.attr('id').indexOf('matchup15-') != -1) { target_input = $('#rd2-matchup8-team1'); }
else if(selected_input.attr('id').indexOf('matchup16-') != -1) { target_input = $('#rd2-matchup8-team2'); }
else if(selected_input.attr('id').indexOf('matchup17-') != -1) { target_input = $('#rd2-matchup9-team1'); }
else if(selected_input.attr('id').indexOf('matchup18-') != -1) { target_input = $('#rd2-matchup9-team2'); }
else if(selected_input.attr('id').indexOf('matchup19-') != -1) { target_input = $('#rd2-matchup10-team1'); }
else if(selected_input.attr('id').indexOf('matchup20-') != -1) { target_input = $('#rd2-matchup10-team2'); }
else if(selected_input.attr('id').indexOf('matchup21-') != -1) { target_input = $('#rd2-matchup11-team1'); }
else if(selected_input.attr('id').indexOf('matchup22-') != -1) { target_input = $('#rd2-matchup11-team2'); }
else if(selected_input.attr('id').indexOf('matchup23-') != -1) { target_input = $('#rd2-matchup12-team1'); }
else if(selected_input.attr('id').indexOf('matchup24-') != -1) { target_input = $('#rd2-matchup12-team2'); }
else if(selected_input.attr('id').indexOf('matchup25-') != -1) { target_input = $('#rd2-matchup13-team1'); }
else if(selected_input.attr('id').indexOf('matchup26-') != -1) { target_input = $('#rd2-matchup13-team2'); }
else if(selected_input.attr('id').indexOf('matchup27-') != -1) { target_input = $('#rd2-matchup14-team1'); }
else if(selected_input.attr('id').indexOf('matchup28-') != -1) { target_input = $('#rd2-matchup14-team2'); }
else if(selected_input.attr('id').indexOf('matchup29-') != -1) { target_input = $('#rd2-matchup15-team1'); }
else if(selected_input.attr('id').indexOf('matchup30-') != -1) { target_input = $('#rd2-matchup15-team2'); }
else if(selected_input.attr('id').indexOf('matchup31-') != -1) { target_input = $('#rd2-matchup16-team1'); }
else if(selected_input.attr('id').indexOf('matchup32-') != -1) { target_input = $('#rd2-matchup16-team2'); }
}
else if(selected_input.attr('id').indexOf('rd2') != -1)
{
// Round two
if(selected_input.attr('id').indexOf('matchup1-') != -1) { target_input = $('#sweet16-matchup1-team1'); }
else if(selected_input.attr('id').indexOf('matchup2-') != -1) { target_input = $('#sweet16-matchup1-team2'); }
else if(selected_input.attr('id').indexOf('matchup3-') != -1) { target_input = $('#sweet16-matchup2-team1'); }
else if(selected_input.attr('id').indexOf('matchup4-') != -1) { target_input = $('#sweet16-matchup2-team2'); }
else if(selected_input.attr('id').indexOf('matchup5-') != -1) { target_input = $('#sweet16-matchup3-team1'); }
else if(selected_input.attr('id').indexOf('matchup6-') != -1) { target_input = $('#sweet16-matchup3-team2'); }
else if(selected_input.attr('id').indexOf('matchup7-') != -1) { target_input = $('#sweet16-matchup4-team1'); }
else if(selected_input.attr('id').indexOf('matchup8-') != -1) { target_input = $('#sweet16-matchup4-team2'); }
else if(selected_input.attr('id').indexOf('matchup9-') != -1) { target_input = $('#sweet16-matchup5-team1'); }
else if(selected_input.attr('id').indexOf('matchup10-') != -1) { target_input = $('#sweet16-matchup5-team2'); }
else if(selected_input.attr('id').indexOf('matchup11-') != -1) { target_input = $('#sweet16-matchup6-team1'); }
else if(selected_input.attr('id').indexOf('matchup12-') != -1) { target_input = $('#sweet16-matchup6-team2'); }
else if(selected_input.attr('id').indexOf('matchup13-') != -1) { target_input = $('#sweet16-matchup7-team1'); }
else if(selected_input.attr('id').indexOf('matchup14-') != -1) { target_input = $('#sweet16-matchup7-team2'); }
else if(selected_input.attr('id').indexOf('matchup15-') != -1) { target_input = $('#sweet16-matchup8-team1'); }
else if(selected_input.attr('id').indexOf('matchup16-') != -1) { target_input = $('#sweet16-matchup8-team2'); }
}
else if(selected_input.attr('id').indexOf('sweet16') != -1)
{
// Sweet Sixteen
if(selected_input.attr('id').indexOf('matchup1-') != -1) { target_input = $('#elite8-matchup1-team1'); }
else if(selected_input.attr('id').indexOf('matchup2-') != -1) { target_input = $('#elite8-matchup1-team2'); }
else if(selected_input.attr('id').indexOf('matchup3-') != -1) { target_input = $('#elite8-matchup2-team1'); }
else if(selected_input.attr('id').indexOf('matchup4-') != -1) { target_input = $('#elite8-matchup2-team2'); }
else if(selected_input.attr('id').indexOf('matchup5-') != -1) { target_input = $('#elite8-matchup3-team1'); }
else if(selected_input.attr('id').indexOf('matchup6-') != -1) { target_input = $('#elite8-matchup3-team2'); }
else if(selected_input.attr('id').indexOf('matchup7-') != -1) { target_input = $('#elite8-matchup4-team1'); }
else if(selected_input.attr('id').indexOf('matchup8-') != -1) { target_input = $('#elite8-matchup4-team2'); }
}
else if(selected_input.attr('id').indexOf('elite8') != -1)
{
// Elite Eight
if(selected_input.attr('id').indexOf('matchup1-') != -1) { target_input = $('#final4-matchup1-team1'); }
else if(selected_input.attr('id').indexOf('matchup2-') != -1) { target_input = $('#final4-matchup1-team2'); }
else if(selected_input.attr('id').indexOf('matchup3-') != -1) { target_input = $('#final4-matchup2-team1'); }
else if(selected_input.attr('id').indexOf('matchup4-') != -1) { target_input = $('#final4-matchup2-team2'); }
}
else if(selected_input.attr('id').indexOf('final4') != -1)
{
// Final Four
if(selected_input.attr('id').indexOf('matchup1-') != -1) { target_input = $('#championship-team1'); }
else if(selected_input.attr('id').indexOf('matchup2-') != -1) { target_input = $('#championship-team2'); }
}
else if(selected_input.attr('id').indexOf('championship-') != -1)
{
// Championship
target_input = $('#champion');
}

// Set the value of the target input and target label to the value of the selected input and selected label.
// If a previous selection changes after a subsequent round has been set, capture the target value and label and
// clear them from all subsequent rounds.
target_label = target_input.prev('label');
/*
if(target_input.val() != '' && target_label != '')
{
var prev_target_val = target_input.val();
var prev_target_label = target_label;
$('input[value=prev_target_val]').not(target_input).attr('value', '');
$('label:contains(prev_target_label)').not(target_label).text('');
}
*/
var target_input = getTargetFromId(selected_input.attr('id'));
var target_label = target_input.prev('label');

// Set the values
target_input.attr('value', selected_val);
target_label.text(selected_team_name);

});

/* ******************************************************************** */
// END BRACKET PICKS CONTROLS

}); // end document.ready
});

// END ON READY



/* ==================================================================== */
// FOR TESTING PURPOSES ONLY
/* ==================================================================== */
$(function()
{
$('a.click-all').click(function()
{
$(this).parent().find('label:even').click();
});
});



// FOR TESTING PURPOSES ONLY


0 comments on commit 61c4e8c

Please sign in to comment.