Chainreact/data/scripts/leaderboard.js

class Leaderboard{

    constructor(){
        
    }

    get pos(){
        return createVector(game.pos.x, 0);
    }

    get width(){
        return game.size;
    }

    get height(){
        let h = 0;
        if (this.bars[0])
            h = this.bars[0].marginY;
        this.bars.forEach(b => h += b.height + b.marginY);
        return h;
    }

    setBarsFromPlayers(players){
        this.bars = [];
        players.forEach(p => this.bars.push(new Bar(p)));
    }

    display(){
        this.bars.forEach(b => b.display());
    }

}

class Bar{

    constructor(player){
        this.id = player.id;
    }

    get marginX(){
        return game.size / game.winCount;
    }
    get marginY(){
        return height * 0.005;
    }

    get pos(){
        let lb = game.leaderboard;
        let x = lb.pos.x + this.marginX;
        let y = lb.pos.y + this.marginY + lb.bars.findIndex(b => b.id === this.id) * (this.height + this.marginY);
        return createVector(x, y);
    }

    get height(){
        return 40;
    }

    get width(){
        return game.leaderboard.width - this.marginX * 2;
    }

    display(){
        let count = game.winCount;
        let imageSize = Math.min(this.height, this.width / count * 0.85);
        let y = this.pos.y + this.height / 2;

        let filled = game.fields.filter(f => f.ownerId === this.id).length;
        for (let i = 0; i < count; i++){
            let x = i * this.width / count + this.width / count / 2 + this.pos.x;
            image(gemBorderImage, x, y, imageSize, imageSize);
        }
        for (let i = 0; i < filled; i++){
            let x = i * this.width / count + this.width / count / 2 + this.pos.x;
            image(gemContentGraphics[game.playerHues[this.id]], x, y, imageSize, imageSize);
        }
    }

}