scoreboard for dark forest lobby game

scoreboard.js

function print_score(players) {
    console.log(`total ${players.length}`);
    for (let player of players) {
        console.log(`${player.player}: ${player.score}`)
    }
}

function sort_players(m) {
    let a = Array.from(m);
    a.sort((a, b) => {
        return b[1] - a[1]
    });
    return a;
}


function create_head() {
    let row = document.createElement("tr");
    row.style.width = '100%';
    row.style.height = '26px';
    for (let i = 0; i < 3; i++) {
        let field = document.createElement("th");
        row.appendChild(field);
    }
    row.children[0].innerHTML = "place";
    row.children[1].innerHTML = "player";
    row.children[2].innerHTML = "score";

    //row.children[0].style.width = "100px";// no effect
    row.children[0].style.width = "40px";
    row.children[1].style.width = "146px";
    row.children[2].style.width = "80px";
    //row.children[2].innerHTML = "junk";
    return row;
}

function create_row() {
    let row = document.createElement("tr");
    row.style.width = '100%';
    row.style.height = '26px';
    let rank = document.createElement('td');
    rank.style.textAlign = "right";
    row.appendChild(rank);
    let user = document.createElement("td");
    //field1.style.width = "100px";// no effect
    user.style.maxWidth = "146px";
    user.style.overflow = "hidden";
    row.appendChild(user);
    let score = document.createElement("td");
    score.style.textAlign = "right";
    row.appendChild(score);
    return row;
}

class Plugin {
    constructor() {
        this.table = document.createElement("table");
        //this.table.style.width = '100%';
        this.table.style.maxHeight = '300px';
        this.table.style.display = 'block';
        this.table.style.borderSpacing = '8px 0';// take effect only when borderCollapse is `separate`
        this.table.style.borderCollapse = 'separate';
        this.table.style.overflow = "scroll";
        //this.table.style. tableLayout="fixed";
        // this.table.style.height = '26px';
        //this.table.style.textAlign = "right";
        this.table.appendChild(create_head());
        let n = df.getAllPlayers().length;
        for (let i = 0; i < n; i++) {
            this.table.appendChild(create_row());
        }
        this.n = n;
        this.scoreboard = new Map();

        this.refresh_button = document.createElement("button");
        this.refresh_button.style.width = "100%";
        this.refresh_button.style.height = '26px';
        this.refresh_button.innerText = "refresh";
        this.refresh_button.onclick = this.update_players;

        this.update_players();
    }

    update_table = () => {
        let players = sort_players(this.scoreboard);
        for (let i = this.n; i <= players.length; i++) {
            this.table.appendChild(create_row());
        }
        this.n = players.length;
        for (let i = 0; i < players.length; i++) {
            this.table.children[i + 1].children[0].innerHTML = `${i + 1}.`;// rank
            this.table.children[i + 1].children[2].innerHTML = players[i][1];//score
            let name = players[i][0];
            let p_data = df.players.get(name);
            if (p_data.twitter) {
                name = `<a href="https://twitter.com/${p_data.twitter}" >@${p_data.twitter}</a>`;
            }
            this.table.children[i + 1].children[1].innerHTML = name;
        }
        if (players.length >= 1) {
            this.table.children[1].style.color = 'rgb(255, 68, 183)';
        }
        if (players.length >= 2) {
            this.table.children[2].style.color = 'rgb(248, 183, 62)';
        }
        if (players.length >= 3) {
            this.table.children[3].style.color = 'rgb(248, 183, 62)';
        }
    }

    update_score = (players) => {
        if (!this.table) {
            return;
        }
        for (let player of players) {
            this.scoreboard.set(player.player.toLowerCase(), player.score.toNumber());
        }
        this.update_table();
    }

    update_players = async () => {

        this.refresh_button.innerText = "refreshing...";
        this.refresh_button.disabled = true;

        let player_numbers = await df.contractsAPI.contract.getNPlayers();
        player_numbers = player_numbers.toNumber();
        console.log("players", player_numbers);

        let counter = 0;

        const batch_size = 100;
        for (let i = 0; i < player_numbers; i += batch_size) {
            const end = i + batch_size < player_numbers ? i + batch_size : player_numbers;
            df.contractsAPI.contract.bulkGetPlayers(i, end).then(
                values => {
                    //players.push(...values);
                    //print_score(values);
                    this.update_score(values);
                    counter += values.length;
                    console.log("update score for player", counter);
                    this.refresh_button.innerText = `refreshing...${Math.floor(counter * 100 / player_numbers)}%`;
                    if (counter === player_numbers) {
                        this.refresh_button.innerText = "refresh";
                        this.refresh_button.disabled = false;
                    }
                }
            )
        }
    }

    /**
     * Called when plugin is launched with the "run" button.
     */
    async render(container) {
        container.style.width = '300px';
        container.appendChild(this.table);
        container.appendChild(this.refresh_button);
    }

    /**
     * Called when plugin modal is closed.
     */
    destroy() {
        this.table = null;
    }
}

/**
 * And don't forget to export it!
 */
export default Plugin;