From 7512ed62570f5368032b19bbab73a8a77b045ba0 Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Wed, 12 Feb 2025 13:30:27 +0100
Subject: [PATCH] Created info on individual board game pages

---
 static/javascript/boardgame.js | 35 +++++++++++++++++++++++++++++-----
 templates/boardgame.jinja      | 14 +++++++++++---
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/static/javascript/boardgame.js b/static/javascript/boardgame.js
index 5e6e8ab..81da31f 100644
--- a/static/javascript/boardgame.js
+++ b/static/javascript/boardgame.js
@@ -1,5 +1,28 @@
 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() {
     let params = new URLSearchParams(document.location.search);
     let boardgame_id = params.get("id");
@@ -7,15 +30,17 @@ async function loadGame() {
     var loadGameURL = api_url + '/boardgame?id=' + boardgame_id
     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')
 
diff --git a/templates/boardgame.jinja b/templates/boardgame.jinja
index 25c5875..c9ec1fc 100644
--- a/templates/boardgame.jinja
+++ b/templates/boardgame.jinja
@@ -3,7 +3,7 @@
 {% block body_block %}
 
      <div class="row">
-        <div class="col-sm-4">
+        <div class="col-sm-3">
             <div class="card">
                 <img id="boardgame_image">
                 <div class="card-body">
@@ -13,8 +13,16 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-4"><p id="boardgame_weight"></p></div>
-        <div class="col-sm-4">
+        <div class="col-sm-3" id="info_block">
+            <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>
         </div>
     </div>