boardgame_site_v2/static/javascript/boardgame.js

document.body.onload=loadGame()

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 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)

    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);

}