144 lines
No EOL
4.4 KiB
JavaScript
144 lines
No EOL
4.4 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_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);
|
|
|
|
} |