112 lines
No EOL
3.5 KiB
JavaScript
112 lines
No EOL
3.5 KiB
JavaScript
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_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_block('Moeilijkheid', 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)
|
|
}
|
|
|
|
|
|
console.log(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);
|
|
|
|
} |