From 40ff7f5be70ef594ee1988e79ccc9b6e546c8c57 Mon Sep 17 00:00:00 2001
From: Florian Weber <f.weber@solarlux.com>
Date: Thu, 20 Mar 2025 15:59:38 +0100
Subject: [PATCH] Refactor character profile component for dynamic ID handling
 and improve data fetching logic

---
 _includes/character-profile.html | 20 ++++++++++----------
 _pages/characters.md             | 11 +++++------
 _pages/players-guide.md          |  2 +-
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/_includes/character-profile.html b/_includes/character-profile.html
index 1683a4e..3514896 100644
--- a/_includes/character-profile.html
+++ b/_includes/character-profile.html
@@ -2,12 +2,12 @@
   {% if include.image %}
   <img class="responsive-img" src="{{ include.image | relative_url }}" alt="Character Picture">
   {% endif %}
-  <p><span class="cyberpunk-font">Name:</span>&nbsp;&nbsp;<span id="name"></span></p>
-  <p><span class="cyberpunk-font">Handle:</span>&nbsp;&nbsp;<span id="streetname"></span></p>
-  <p><span class="cyberpunk-font">Role:</span>&nbsp;&nbsp;<span id="role"></span></p>
-  <p><span class="cyberpunk-font">Age:</span>&nbsp;&nbsp;<span id="age"></span></p>
+  <p><span class="cyberpunk-font">Name:</span>&nbsp;&nbsp;<span id="name-{{ include.id }}"></span></p>
+  <p><span class="cyberpunk-font">Handle:</span>&nbsp;&nbsp;<span id="streetname-{{ include.id }}"></span></p>
+  <p><span class="cyberpunk-font">Role:</span>&nbsp;&nbsp;<span id="role-{{ include.id }}"></span></p>
+  <p><span class="cyberpunk-font">Age:</span>&nbsp;&nbsp;<span id="age-{{ include.id }}"></span></p>
   {% if include.page %}
-  <button class="cyber-button bg-cyan ac-yellow fg-dark" onclick="window.location.href='{{ include.page | relative_url }}'">
+  <button class="cyber-button bg-purple fg-white" onclick="window.location.href='{{ include.page | relative_url }}'">
     Screamsheet
     <span class="glitchtext">teehsmaercS</span>
     <span class="tag">NETR</span>
@@ -15,13 +15,13 @@
   {% endif %}
 </div>
 <script>
-  fetch("{{ include.datasource | relative_url }}")
+  fetch("{{ '/assets/game-data/characters/' + include.id | relative_url }}")
     .then(response => response.json())
     .then(character => {
-      document.getElementById('name').innerText = character.name;
-      document.getElementById('streetname').innerText = character.handle;
-      document.getElementById('age').innerText = character.age;
+      document.getElementById('name-{{ include.id }}').innerText = character.name;
+      document.getElementById('streetname-{{ include.id }}').innerText = character.handle;
+      document.getElementById('age-{{ include.id }}').innerText = character.age;
       const mainRole = character.roles.find(role => role.main);
-      document.getElementById('role').innerText = mainRole.name + " Rang: " + mainRole.rank;
+      document.getElementById('role-{{ include.id }}').innerText = mainRole.name + " Rang: " + mainRole.rank;
     });
 </script>
diff --git a/_pages/characters.md b/_pages/characters.md
index c51d38c..4569364 100644
--- a/_pages/characters.md
+++ b/_pages/characters.md
@@ -3,15 +3,14 @@ layout: page
 title: Charaktere
 permalink: /characters/
 icon: account_circle
-weigth: 3
+weight: 3
 ---
 
 <div class="row" style="column-gap: 5px;">
-  <div class="col s12 m6">
-    {% include character-profile.html page="/characters/chase" image="/assets/img/Netrunner.png" datasource="/assets/game-data/characters/chase.json" bg_color="bg-red" fg_color="fg-dark" %}
+  <div class="col s12 l6">
+    {% include character-profile.html id="chase" page="/characters/chase" image="/assets/img/Netrunner.png" bg_color="bg-red" fg_color="fg-dark" %}
   </div>
-  <div class="col s12 m6">
-    {% include character-profile.html page="/characters/crash" image="/assets/img/Tech.png" datasource="/assets/game-data/characters/carver.json" bg_color="bg-red" fg_color="fg-purple" %}
+  <div class="col s12 l6">
+    {% include character-profile.html id="carver" page="/characters/crash" image="/assets/img/Tech.png" bg_color="bg-red" fg_color="fg-purple" %}
   </div>
 </div>
-
diff --git a/_pages/players-guide.md b/_pages/players-guide.md
index 38ecad7..92fc2c0 100644
--- a/_pages/players-guide.md
+++ b/_pages/players-guide.md
@@ -3,7 +3,7 @@ layout: page
 title: Spielerguide
 permalink: /players-guide/
 icon: description
-weigth: 2
+weight: 2
 ---
 
 TBD