boardgame_site_v2/static/javascript/boardgame.js

document.body.onload=loadGame()

const important_player_name_colors = {'Yarne':'black', 'Lore':'green', 'Lucas':'brown','Louize':'blue','Ruben':'purple', 'Ina':'orange', 'Matthias':'yellow','Kelly':'darkorange','Keanu':'darkblue'}

async function create_info_block(block_title, block_value){

    var title = document.createElement('h2')
    title.textContent = block_title

    var info_container = document.createElement('p')
    info_container.textContent = block_value

    $('#info_block').append(title)
    $('#info_block').append(info_container)

}

async function create_info_meter(meter_title, min, max, value){
    var title = document.createElement('h2')
    title.textContent = meter_title

    var meter_holder = document.createElement('div')
    meter_holder.classList.add('progress')

    var meter = document.createElement('div')
    meter.classList.add('progress-bar')
    meter.role = 'progressbar'
    meter.style = `width: ${(value/max) * 100}%`
    meter.setAttribute('aria-valuenow', value)
    meter.setAttribute('aria-valuemin', min)
    meter.setAttribute('aria-valuemax', max)

    if (value < max * 0.40){
        meter.classList.add('bg-success')
    }else if (value < max * 0.60){
        meter.classList.add('bg-warning')
    }else {
        meter.classList.add('bg-danger')
    }

    meter_holder.appendChild(meter)

    // meter.value = value
    // meter.min = min
    // meter.max = max

    $('#info_block').append(title)
    $('#info_block').append(meter_holder)
}

async function create_game_block(requested_game){
    $('#boardgame_image').attr('src', requested_game.image_url)

    $('#boardgame_name').text(requested_game.name)

    $('#boardgame_description').text(requested_game.description)

    $('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + requested_game.id)
}

async function create_playercount_vote_chart(requested_game){

    const playercount_votes_chart = $('#playercount_votes_chart')
    const playercountVotes = requested_game.playercount_votes

    const labels = playercountVotes.map(vote => vote.playercount);
    const bestData = playercountVotes.map(vote => vote.best);
    const recommendedData = playercountVotes.map(vote => vote.recommended);
    const notRecommendedData = playercountVotes.map(vote => vote.not_recommended);

    const data = {
        labels: labels,
        datasets: [
            {
                label: 'Not Recommended',
                data: notRecommendedData,
                backgroundColor: 'rgba(255, 99, 132, 0.6)',
            },
            {
                label: 'Recommended',
                data: recommendedData,
                backgroundColor: 'rgba(75, 192, 192, 0.6)',
            },
            {
                label: 'Best',
                data: bestData,
                backgroundColor: 'rgba(50, 205, 50, 0.6)',
            },
        ],
    };

    const config = {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Player Count Votes'
                }
            },
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true,
                }
            }
        },
    };

    new Chart(playercount_votes_chart, config);
}

async function create_player_winrate_chart(requested_game){
    const playercount_votes_chart = $('#player_winrate_chart')
    const playercountVotes = requested_game.playercount_votes

    // const labels = playercountVotes.map(vote => vote.playercount);
    // const bestData = playercountVotes.map(vote => vote.best);
    // const recommendedData = playercountVotes.map(vote => vote.recommended);
    // const notRecommendedData = playercountVotes.map(vote => vote.not_recommended);

    const data_url = api_url + `/statistics/winrate_over_time?day_step=30&boardgame_id=${requested_game.id}`
    const data_request = await makeRequest(data_url)

    let datasets = []

    let players_who_played_game = [];

    for (const play of requested_game.plays){
        for (const player of play.players){
            if (!players_who_played_game.includes(player.name)){
                players_who_played_game.push(player.name)
            }
        }
    }

    for (const [playername, color] of Object.entries(important_player_name_colors)){

        if (players_who_played_game.includes(playername)){
            let dataset = {
                label: playername,
                data: Object.values(data_request[playername].result),
                borderColor: color
              }
            
            datasets.push(dataset)
        }
    }


    const labels = Object.keys(data_request[Object.keys(data_request)[0]].result)

    const data = {
        labels: labels,
        datasets: datasets
    };

    const config = {
        type: 'line',
        data: data,
        options: {
            scales: {
              y: {
                beginAtZero: true,
                offset: true,
                ticks:{
                    format:{
                        style: 'percent'
                    }
                }
              },
              x: {
                offset: true
              },
            }
          },
    };

    new Chart(playercount_votes_chart, config);
}

async function loadGame() {
    let params = new URLSearchParams(document.location.search);
    let boardgame_id = params.get("id");

    var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
    var requested_game = await makeRequest(loadGameURL)
    
    create_game_block(requested_game)

    create_info_block('Spelers', requested_game.min_players != requested_game.max_players ? `${requested_game.min_players} - ${requested_game.max_players}` : requested_game.min_players)

    create_info_meter('Moeilijkheid', 1, 5, requested_game.weight)

    create_info_block(requested_game.designers.length > 1 ? 'Designers' : 'Designer', requested_game.designers.map(designer => designer.name).join(' - '))

    create_info_block(requested_game.artists.length > 1 ? 'Artiesten' : 'Artiest', requested_game.artists.map(artist => artist.name).join(' - '))

    if (requested_game.owned_info != null){
        let acquisition_date = new Date(requested_game.owned_info.acquisition_date)

        const date_formatter = new Intl.DateTimeFormat('nl-BE', { dateStyle: 'short' });
        acquisition_date = date_formatter.format(acquisition_date)

        create_info_block('Datum gekocht', acquisition_date)
    }

    create_info_block('Aantal keer gespeeld', requested_game.plays.length)

    create_playercount_vote_chart(requested_game)

    create_player_winrate_chart(requested_game)

}