Fotballtabell

Hva

Tema er å lese og forstå kode og gjøre noen små endringer

Vi skal se litt på hvordan vi kan framstille en dynamisk tabell som viser hvordan poengfordelingen er runde for runde.

Settingen er slik at jeg har til rådighet en rekke filer med fotballsesonger beskrevet som JSON-data. Du kan se et eksempel her Eliteserien2016.json. Oppgaven er slik at du trener ikke bekymre deg for dataformatet.

Jeg har forsøkt å planlegge dette prosjektet og dekomponere det slik at det skal være greit å endre. Oppgaven er formulert i forhold til dette. Løsningen slik den er nå kan du se på denne siden:
test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/fotballtabell/test.html

Løsningen er basert på følgende komponenter:

En webside, test.html, som inneholder en slider som vi kommunisere med i sketchen
Hovedprogrammet, sketch.js, henter data, setter opp datastrukturen og drar igang tegningen
Det er definert en klasse, sesong, som er beskrevet i sesong.js. Denne har som oppgave å plukke data fra JSON og presentere funksjoner som kan brukes av tegnefunksjonen. sesong har som en av sine variable en liste med klubber.
Det er definert en klasse, klubb, som er beskrevet i klubb.js. Denne har som oppgave å holde på status for en klubb avhengig av hvor mange runder som er spilt.
Det er definert en tegnefunksjon tegnSesongBobler(), som er plassert i egen fil, tegningB.js. det denne som tegner boblene avhegig av status (antall runder spilt)

Du kan kopiere denne løsningen fra denne zipfile fotballtabell.zip
Den inneholder en kjørbar versjon med data.

Ellers finner du koden her:

/*
Setter opp en skisse som er motoren i framstillingen
*/
var resultater;    // datakilde
var sesongen;        // aktuell sesong
var runde;            // aktuell runde
var obj; // det vi laster opp fra fil
// Dette gjøres før noe annet skjer
function preload() {
    // setter oppsesongen så snart data er lastet
    obj=loadJSON("data/Eliteserien2016.json",preparerData)
}

function preparerData(){
    // set opp en sesong
    sesongen=new sesong(obj);
    //oppdater lagstatus etter alle rundene
    sesongen.oppDater(sesongen.getAntallRunder());
    // sett maxpoeng (hjelper oss å tegne)
    sesongen.setMaxPoeng();
    // overskriften
    overskrift=sesongen.getLiga()+" "+sesongen.getAar();
    runde=0;
    //oppdater slider, max og value
    var slider=document.getElementById("runden")
    slider.max=sesongen.getAntallRunder();
    slider.value=runde;
}
function setup(){
    var canvas = createCanvas(800,500);
    canvas.parent('canvasHere');
    runde=0;
    document.getElementById("runden").value=runde;
};
function draw(){
    background(255);
    push();    
        fill(0);
        textAlign(CENTER,TOP);
        textSize(20);
        text(overskrift+"    -   runde: "+runde,width/2,2);
    pop();
    runde=document.getElementById("runden").value;
    if(runde > sesongen.getAntallRunder()){
        runde=sesongen.getAntallRunder();
    }        
    sesongen.oppDater(runde);
    tegnSesongBobler(sesongen,runde);
}

/*
 en sesong for en liga basert på resultater (matches)
 inklusive  enliste av lagnavn (teams)
 */
function sesong(JsonRes){
    this.aar=JsonRes.year;
    this.serie=JsonRes.liga;    
    this.kampListe=JsonRes.matches;
    this.maksPoeng=0;
    // legger til lag i denne sesongen
    this.klubbListe=new Array();
    for(var ix=0;ix <JsonRes.teams.length;ix++){
        this.klubbListe[ix]=new klubb( JsonRes.teams[ix]);
    }
    //----------- funksjoner--------
    // regner ut maks poeng 
    this.setMaxPoeng=function(){
        for(var i=0;i < this.klubbListe.length;i++){
            this.maksPoeng=Math.max(this.maksPoeng,this.klubbListe[i].getPoeng());
        }
        //og sorterer lagene
        this.klubbListe.sort(
            // compare:
            function(a,b){
                return b.getPoeng()-a.getPoeng();
            }
        )
    }
    // opdaterer status til en bestemt runde
    this.oppDater=function(runde){
        var r=Math.min(runde,this.getAntallRunder());
        // nullstill
        for(var i=0;i < this.klubbListe.length;i++){
                this.klubbListe[i].resetPoeng();
        }        
        // fordel poeng t.o.m. denne runden
        for(var j=0; j < this.kampListe.length; j++){
            var kamp=this.kampListe[j];
            if( kamp.round <=r ){
                for(var i=0;i < this.klubbListe.length;i++){
                this.klubbListe[i].oppdaterPoeng(kamp);
                }
            }
        }
    }
    // hvor mange runder er det i denne sesongen
    this.getAntallRunder=function(){        
        return int(this.kampListe[this.kampListe.length-1].round);
    }
    // årstallet
    this.getAar=function(){
        var y1=this.kampListe[0].date.split(".")[0];
        var y2=this.kampListe[this.kampListe.length-1].date.split(".")[0];
        if(y1==y2)
            return y1;
        else
            return y1+"/"+y2;
    }
    // liganavnet
    this.getLiga=function(){
        return this.serie;
    }
    // antall klubber
    this.getAntallKlubber=function(){
        return this.klubbListe.length;
    }
    // finn et lag
    this.getLag=function(i){
        return this.klubbListe[i];
    }
    // hva er maks poeng noe lag har fått denne sesongen
    this.getMaksPoeng=function(){
        return this.maksPoeng;
    }
}

// ett lag med navn og akkumulerte poeng
function klubb(klubbObj){
    this.navn=klubbObj.name;
    this.poeng=0;
    this.getNavn=function(){return this.navn}
    //-----------  funksjoner ---------
    // shekker en kamp og ser om dette laget er med
    this.oppdaterPoeng=function(kamp){
        if(kamp.hteam == this.navn){
            if(kamp.hscore > kamp.ascore)
                this.poeng+=3;
            else if (kamp.hscore == kamp.ascore)
                this.poeng+=1;
        }
        else if(kamp.ateam == this.navn){
            if(kamp.hscore < kamp.ascore)
                this.poeng+=3;
            else if (kamp.hscore == kamp.ascore)
                this.poeng+=1;
        }
    }
    // antall poen nå
    this.getPoeng=function(){
        return this.poeng;
    }
    // tilbake til start
    this.resetPoeng=function(){
        this.poeng=0;
    }
    // hva heter laget
    this.getNavn=function(){
        return this.navn;
    }
}

/* 
Tegn en et boblediagram for en runde i en sesong
*/
function tegnSesongBobler(sesongen,runde){
    // marginer for å lette tegningen
    var marginB=60;
    var marginL=10;
    var marginR=70;
    var marginT=30;
    // x-aksen
    line(0,height-marginB,width,height-marginB);
    // feltet der boblene skal være
    push();
        fill(200,255,255);
        noStroke();
        rect(0,marginT,width,height-marginB-marginT);
    pop();
    // avstand mellom lagene ( diameter i boblene)
    var step=(width-marginL-marginR)/sesongen.getAntallKlubber();
    
    push();
    // flytt origo ned til venstre i det fargede feltet
    translate(marginL,height-marginB);
    // så tegner vi klubber bortover
    for(var i=0; i< sesongen.getAntallKlubber();i++){
        push();
            // vandrer mot venstre 
            translate(i*step+step/2,0);
            // hvor høyt skal vi 
            var v=map(sesongen.getLag(i).getPoeng(),
                        0,sesongen.getMaksPoeng(),
                        0,height-marginB-marginT-step);
            // så vi går klare av x-aksen 
            v+=step/2;
            // ballong med sn"snor2 
            line(0,0,0,-v);
            fill(255);
            ellipse(0,-v,step,step);
            
            // marker laget med navn 
            textAlign(CENTER,CENTER);
            fill(0);
            text(sesongen.getLag(i).getPoeng(),0,-v);
            textAlign(LEFT,TOP);
            rotate(PI/8);
            text(sesongen.getLag(i).getNavn(),0,5);
        pop();
    }
    pop();
}

<!DOCTYPE html>
<html>
  <head>
    <title>fotball</title>
    <meta charset="UTF-8"/>
    <script src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
     <script src="klubb.js"> </script>
     <script src="tegningB.js"> </script> 
     <script src="sesong.js"> </script>
     <script src="sketch.js"> </script>
  </head>
  <body>
  <div id="canvasHere">
  
  </div>
  <div>
    <!--max-verdi endres når sketchen har lastet data -->
     Runde:<input style="width:750px" type="range" id="runden" 
           value="0"  step="1" min="0" max="40" />
  </div>
</body>
</html>

Oppgaverforslag

Endre uttegningen

Oppgaven her er altså sette seg inn i løsningen og endre boblefunksjonen, eller legge til, en funksjon som tegner et histogram. Altså: skriv om løsningen slik at vi tegner et vanlig søylediagram i stedet for boblene.