Un torneo sportivo con jQuery e jQueryUI
Ottimo articolo di Raymond Camden che utilizza jQuery per visualizzare i successivi abbinamenti di un Torneo Sportivo composto da X coppie di squadre.
Per ogni partita è consentito selezionare il vincitore.
Quando il turno è completo, viene automaticamente generato il turno successivo con i vincitori del primo turno.
Alla fine dell’ultimo turno però non c’era modo né di sapere il vincitore finale né di passare le selezioni al server per l’elaborazione.
Gestire la logica di ‘fine torneo’ è stato piuttosto semplice (è la funzione checkComplete che gestisce il tutto), ma i dati non sono un semplice insieme di campi. Ogni turno consiste di un risultato, ed ogni risultato è un array di squadre.
Il grosso problema è che jQuery non include un modo nativo per serializzare i dati in modalità JSON: ed è per questo motivo che viene utilizzato il plugin jQuery JSON, che serve appunto per la serializzazione in formato JSON.
Il codice lato server in realtà non fa niente di così fantastico: prende solo l’ID della squadra vincente.
Questo il codice finale:
<html>
<head>
<style>
li { list-style-type: none; background: #F0F0F0; margin: 0; padding: 2; width: 200; }
.selected {
background: #F39814;
color: white;
}
</style>
<script src="/jquery/jquery.js"></script>
<script src="/jquery/jquery.json-1.3.js"></script>
<script>
var teams = [
{id:1, name:"Alphas"},
{id:2, name:"Betas"},
{id:3, name:"Cetas"},
{id:4, name:"Deltas"},
{id:5, name:"Epsilons"},
{id:6, name:"Foos"},
{id:7, name:"Goos"},
{id:8, name:"Heroes"}
]
//will store the games in each round
var rounds = []
var currentRound = 0
$(document).ready(function() {
//first round
rounds[currentRound] = []
//assign initial games
for(i=0;i < teams.length; i=i+2) {
var game = {}
game.team1 = teams[i]
if(teams[i+1] != null) game.team2 = teams[i+1]
rounds[0][rounds[0].length] = game
}
//draw the games
drawGames(currentRound)
})
function drawGames(roundIdx) {
var round = rounds[roundIdx]
var str = $("#gamedisplay").html()
str+='<div style="float:left" id="round_'+roundIdx+'">'
for(var i=0;i<round.length;i++) {
str+='<b>Game '+(i+1)+'</b><br/>'
str+= '<ol class="selectable" id="selectable_'+i+'">'
str+='<li id="team_'+round[i].team1.id+'">'+round[i].team1.name+'</li>'
str+='<li id="team_'+round[i].team2.id+'">'+round[i].team2.name+'</li>'
str+='</ol>'
}
str+='</div>'
$("#gamedisplay").html(str)
//Enable selectable for the teams
for(var i=0;i<round.length;i++) {
$("#selectable_"+i+" > li").click(function() {
$(this).toggleClass("selected").siblings().removeClass("selected")
checkComplete()
});
}
}
function checkComplete() {
//get all the games at this round
var round = rounds[currentRound]
var allGood = true
var winningTeams = []
for(var i=0;i<round.length;i++) {
//for each, if both aren't selected, allGood is false
var totalselected = $("#round_"+currentRound+" #selectable_"+i+" > li.selected").size()
if(totalselected != 1) {
allGood=false
break
} else {
//this is the id of selected team
var winningid = $("#round_"+currentRound+" #selectable_"+i+" > li.selected").attr("id")
//its in the form team_
var id = winningid.split("_")[1]
var winningname = $("#round_"+currentRound+" #selectable_"+i+" > li.selected").attr("innerHTML")
winningTeams[winningTeams.length] = {id:id,name:winningname}
round[i].winningTeam = id
}
}
if(allGood) {
//Before going on, see if we are on the last round. If winningTeams.length == 1, that means the end
if(winningTeams.length == 1) { wrapUp(); return; }
currentRound++
//first round
rounds[currentRound] = []
//assign new games
for(i=0;i < winningTeams.length; i=i+2) {
var game = {}
game.team1 = winningTeams[i]
if(winningTeams[i+1] != null) game.team2 = winningTeams[i+1]
rounds[currentRound][rounds[currentRound].length] = game
}
//draw the games
drawGames(currentRound)
}
}
function wrapUp() {
$("#saveData").fadeIn().click(function() {
var jdata = $.toJSON(rounds)
$.post('handleresult.cfm',{info:jdata},function(data) {
alert('Result from server: '+$.trim(data))
})
})
}
</script>
</head>
<body>
<div id="gamedisplay"></div>
<br clear="left">
<button id="saveData" style="display:none">Send Picks</button>
</body>
</html>Sicuramente vi è un margine di miglioramento: per questo l’autore richiede un feedback da tutti noi!
