Yarninator/boardgame_site_v2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added winrate over time to single boardgame pages

Browse source
This commit is contained in:
Yarne Coppens 2025-02-12 20:26:04 +01:00
parent 979870f41d
commit 33998097a7
2 changed files with 95 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
static/javascript/boardgame.js
View file

@ -1,5 +1,7 @@
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')
@ -56,36 +58,9 @@ async function create_game_block(requested_game){
$('#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)
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);
@ -140,5 +115,95 @@ async function loadGame() {
};
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 = []
for (const [playername, color] of Object.entries(important_player_name_colors)){
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)
}

3
templates/boardgame.jinja
View file

@ -16,8 +16,9 @@
<div class="col-sm-3" id="info_block">
<h1>Info</h1>
</div>
<div class="col-sm-3">
<div class="col-sm-6">
<canvas id="playercount_votes_chart"></canvas>
<canvas id="player_winrate_chart"></canvas>
</div>
</div>