ceneka-bot-battle/templates/index.html

{% extends "header.html" %} {% block content %}
<div class="card m-5">
    <div class="card-content is-size-2 has-text-centered">
        Zeus Leaderboard - CeneBotBattle
    </div>
</div>
<div class="columns m-5 is-gapless">
    <div class="column">
        <div class="card ">
            <div class="card-content" style="height: 1000px">
                <canvas id="le_graph" width="300" height="150" style="height: 100%;width:100%"></canvas>
            </div>
        </div>
    </div>
    <div class="column ml-5 is-one-third">
        <div class="card">
            <div class="card-content">
                <table class="table is-fullwidth is-size-4">
                    <thead>
                    <tr>
                        <th>Position</th>
                        <th>Name</th>
                        <th>Elo</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody id="leaderboard-body">
                    {% for row in data %}
                    <tr>
                        <td>{{ row['global_position'] }}</td>
                        <td>{{ row['name'] }}</td>
                        <td>{{ row['elo'] }}</td>
                        <td>{{ row['username'] }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>


            </div>
        </div>
    </div>
</div>


<script>

    async function fetchLeaderboardData() {
        try {
            const response = await fetch("/leaderboard");
            if (!response.ok) return;

            const data = await response.json();

            const tableBody = document.getElementById("leaderboard-body");

            tableBody.innerHTML = "";

            data.forEach((row) => {
                const tr = document.createElement("tr");
                tr.innerHTML = `
                    <td>${row.global_position}</td>
                    <td>${row.name}</td>
                    <td>${row.elo}</td>
                    <td><span class="tag is-large" style="background-color: ${row.color_ring}">${row.username}</span></td>
                `;
                tableBody.appendChild(tr);
            });
        } catch (error) {
            console.error("Failed to fetch leaderboard data:", error);
        }
    }

    function getX(width, margin, min_game, max_game, game) {
        return ((game - min_game) / (max_game - min_game) * (width - margin * 2)) + margin
    }

    function getY(height, margin, min_elo, max_elo, elo) {
        return (height - ((elo - min_elo) / (max_elo - min_elo) * (height - margin * 2))) - margin
    }

    async function draw_graph() {
        let canvas = document.getElementById('le_graph')
        let ctx = canvas.getContext("2d")

        try {
            let res = await fetch("/graph")
            let graph_data = await res.json()

            let bots = graph_data.bots

            resizeToParent(canvas)

            const width = canvas.width
            const height = canvas.height
            const margin = 20

            for (const [_, bot] of Object.entries(bots)) {
                console.log(bot)
                ctx.lineWidth = 4
                ctx.strokeStyle = bot.color_ring
                ctx.beginPath()
                ctx.moveTo(getX(width, margin, 0, graph_data.game, bot.x[0]), getY(height, margin, graph_data.min_elo, graph_data.max_elo, bot.y[0]))
                for (let i = 1; i < bot.x.length; i++) {
                    ctx.lineTo(getX(width, margin, 0, graph_data.game, bot.x[i]), getY(height, margin, graph_data.min_elo, graph_data.max_elo, bot.y[i]))
                }
                console.log("stroking")
                ctx.stroke()
            }
        } catch (err) {
            console.log("Failed to fetch graph data:", err)
        }
    }

    function resizeToParent(canvas) {
        /* https://stackoverflow.com/questions/70128894/how-to-force-a-canvas-size-to-real-size-of-a-window-in-pixels-disregarding-the */
        canvas.width = canvas.clientWidth * window.devicePixelRatio;
        canvas.height = canvas.clientHeight * window.devicePixelRatio;
    }

    // Poll the server every 5 seconds
    setInterval(fetchLeaderboardData, 5000);
    setInterval(draw_graph, 5000);

    // Initial load
    fetchLeaderboardData();
    draw_graph();
</script>

{% endblock %}