From 979870f41d27bb72a23a6e4b69247a95f27f5035 Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Wed, 12 Feb 2025 14:20:22 +0100
Subject: [PATCH] Added weight bar to game info page

---
 static/javascript/boardgame.js | 38 +++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/static/javascript/boardgame.js b/static/javascript/boardgame.js
index a479944..fd06267 100644
--- a/static/javascript/boardgame.js
+++ b/static/javascript/boardgame.js
@@ -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){
     $('#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('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(' - '))
 
@@ -48,9 +81,8 @@ async function loadGame() {
 
         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')