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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | ; html-script: false ]<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!
