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

Created info on individual board game pages

Browse source
This commit is contained in:
Yarne Coppens 2025-02-12 13:30:27 +01:00
parent 07ae0d8396
commit 7512ed6257
2 changed files with 41 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
static/javascript/boardgame.js
View file

@ -1,5 +1,28 @@
document.body.onload=loadGame() 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/' + boardgame_id)
}
async function loadGame() { async function loadGame() {
let params = new URLSearchParams(document.location.search); let params = new URLSearchParams(document.location.search);
let boardgame_id = params.get("id"); let boardgame_id = params.get("id");
@ -7,15 +30,17 @@ async function loadGame() {
var loadGameURL = api_url + '/boardgame?id=' + boardgame_id var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
var requested_game = await makeRequest(loadGameURL) var requested_game = await makeRequest(loadGameURL)
$('#boardgame_image').attr('src', requested_game.image_url) create_game_block(requested_game)
$('#boardgame_name').text(requested_game.name) create_info_block('Spelers', requested_game.min_players != requested_game.max_players ? `${requested_game.min_players} - ${requested_game.max_players}` : requested_game.min_players)
$('#boardgame_weight').text(requested_game.weight) create_info_block('Moeilijkheid', requested_game.weight)
$('#boardgame_description').text(requested_game.description) create_info_block(requested_game.designers.length > 1 ? 'Designers' : 'Designer', requested_game.designers.map(designer => designer.name).join(' - '))
$('#boardgame_link').attr('href', 'https://boardgamegeek.com/boardgame/' + boardgame_id) create_info_block(requested_game.artists.length > 1 ? 'Artiesten' : 'Artiest', requested_game.artists.map(artist => artist.name).join(' - '))
console.log(requested_game)
const playercount_votes_chart = $('#playercount_votes_chart') const playercount_votes_chart = $('#playercount_votes_chart')

14
templates/boardgame.jinja
View file

@ -3,7 +3,7 @@
{% block body_block %} {% block body_block %}
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-3">
<div class="card"> <div class="card">
<img id="boardgame_image"> <img id="boardgame_image">
<div class="card-body"> <div class="card-body">
@ -13,8 +13,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-4"><p id="boardgame_weight"></p></div> <div class="col-sm-3" id="info_block">
<div class="col-sm-4"> <h1>Info</h1>
{# <h2>Spelers</h2>
<p><span id="player_min_amount"></span> - <span id="player_max_amount"></span></p>
<h2>Moeilijkheid</h2>
<p><span id="boardgame_weight"></span></p> #}
</div>
<div class="col-sm-3">
<canvas id="playercount_votes_chart"></canvas> <canvas id="playercount_votes_chart"></canvas>
</div> </div>
</div> </div>