Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • FORUM
    • Reception
    • Supporto ed Aiuto
    • jQuery News
    • Non solo jQuery
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN

Un torneo sportivo con jQuery e jQueryUI

Pubblicato il 10 Luglio 20107 Marzo 2013 Categoria:
  • Tutorials dal web

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!

0 Condivisioni
Share
Tweet
Share
Pin

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (2816 download)
  • jquery-1.4.1.min.js (2611 download)
  • tinytips11.html (2490 download)
  • jquery-ui-1.8rc1.zip (2483 download)
  • jqueryformwizard-201.html (2452 download)
  • 1.0.0.zip (2431 download)
  • calendarPicker.html (2352 download)
  • jquery-1.4.2.min.js (2349 download)
  • jquerytools120.html (2319 download)
  • move-background.html (2318 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) grafici (2) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) news (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) testo (2) tooltip (6) tutorial (12) upload (3) utility (18) VELug (3) video (3) widget (3) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2021 jQuery Italia
Designed By ZeeTheme
Utilizziamo i cookie per garantire la migliore esperienza sul nostro sito. Se continui a utilizzare questo sito, acconsenti al loro utilizzo.OKPrivacy policy