Enhance character profile integration with dynamic data fetching and role identification

_includes/character-profile.html

@@ -1,7 +1,18 @@
 <div class="cyber-tile cyber-tile-big {{ include.bg_color }} {{ include.fg_color }} {{ include.class }}" style="min-height: auto;">
-  <img src="{{ include.image | relative_url }}" alt="{{ include.name }} Picture">
+  {% if include.image %}<img src="{{ include.image | relative_url }}" alt="Character Picture">{% endif %}
-  <p><span class="cyberpunk-font">Name:</span> {{ include.name }}</p>
+  <p><span class="cyberpunk-font">Name:</span>&nbsp;&nbsp;<span id="name"></span></p>
-  <p><span class="cyberpunk-font">Handle:</span> {{ include.handle }}</p>
+  <p><span class="cyberpunk-font">Handle:</span>&nbsp;&nbsp;<span id="streetname"></span></p>
-  <p><span class="cyberpunk-font">Role:</span> {{ include.role }}</p>
+  <p><span class="cyberpunk-font">Role:</span>&nbsp;&nbsp;<span id="role"></span></p>
-  <p><span class="cyberpunk-font">Age:</span> {{ include.age }}</p>
+  <p><span class="cyberpunk-font">Age:</span>&nbsp;&nbsp;<span id="age"></span></p>
 </div>
+<script>
+  fetch("{{ include.datasource | 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;
+      const mainRole = character.roles.find(role => role.main);
+      document.getElementById('role').innerText = mainRole.name + " Rang: " + mainRole.rank;
+    });
+</script>

_layouts/character-sheet.html

@@ -47,7 +47,8 @@ layout: page
     .then(character => {
       document.getElementById('streetname').innerText = character.handle;
       document.getElementById('age').innerText = character.age;
-      document.getElementById('role').innerText = character.roles[0].name + " Rang: " + character.roles[0].rank;
+      const mainRole = character.roles.find(role => role.main);
+      document.getElementById('role').innerText = mainRole.name + " Rang: " + mainRole.rank;
       document.getElementById('housing').innerText = character.housing.type;
       document.getElementById('lifestyle').innerText = character.lifestyle;
     });

_pages/characters.md

@@ -8,10 +8,10 @@ weigth: 3
 
 <div class="row" style="column-gap: 5px;">
   <div class="col s12 m6">
-    {% include character-profile.html image="/assets/img/Netrunner.png" name="Chase Révolte" handle="-" role="Netrunner" age="23" bg_color="bg-red" fg_color="fg-dark" %}
+    {% include character-profile.html image="/assets/img/Netrunner.png" datasource="/assets/game-data/characters/chase.json" bg_color="bg-red" fg_color="fg-dark" %}
   </div>
   <div class="col s12 m6">
-    {% include character-profile.html image="/assets/img/Tech.png" name="Carver Wright" handle="Crash" role="Tech" age="45" bg_color="bg-red" fg_color="fg-purple" %}
+    {% include character-profile.html image="/assets/img/Tech.png" datasource="/assets/game-data/characters/carver.json" bg_color="bg-red" fg_color="fg-purple" %}
   </div>
 </div>
 

_pages/crash.md

@@ -0,0 +1,8 @@
+---
+layout: character-sheet
+title: Carver Wright
+permalink: /characters/crash
+image: /assets/img/Tech.png
+datasource: /assets/game-data/characters/carver.json
+nav: false
+---

assets/game-data/characters/carver.json

@@ -6,6 +6,7 @@
     {
       "name": "Tech",
       "rank": 4,
+      "main": true,
       "skills": []
     }
   ],

assets/game-data/characters/chase.json

@@ -1,8 +1,8 @@
 {
   "name": "Chase Révolte",
   "handle": null,
-  "age": 25,
+  "age": 23,
-  "roles": [{ "name": "Netrunner", "rank": 4 }],
+  "roles": [{ "name": "Netrunner", "rank": 4, "main": true }],
   "attributes": {
     "int": 6,
     "ref": 8,