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

Added weight bar to game info page

Browse source
This commit is contained in:
Yarne Coppens 2025-02-12 14:20:22 +01:00
parent dd575259b6
commit 979870f41d
1 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
static/javascript/boardgame.js
View file

@ -13,6 +13,39 @@ async function create_info_block(block_title, block_value){
} }
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){ async function create_game_block(requested_game){
$('#boardgame_image').attr('src', requested_game.image_url) $('#boardgame_image').attr('src', requested_game.image_url)
@ -34,7 +67,7 @@ async function loadGame() {
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('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_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.designers.length > 1 ? 'Designers' : 'Designer', requested_game.designers.map(designer => designer.name).join(' - '))
@ -48,9 +81,8 @@ async function loadGame() {
create_info_block('Datum gekocht', acquisition_date) create_info_block('Datum gekocht', acquisition_date)
} }
console.log(requested_game) create_info_block('Aantal keer gespeeld', requested_game.plays.length)
const playercount_votes_chart = $('#playercount_votes_chart') const playercount_votes_chart = $('#playercount_votes_chart')