PhoenixDivision/cpred
1
0
Fork 0
Code Issues 1 Pull Requests Actions Activity

Refactor character profile component for dynamic ID handling and improve data fetching logic
All checks were successful
Deploy Jekyll site to Pages / build (push) Successful in 5m5s
Details

Browse Source
This commit is contained in:
Florian Weber 2025-03-20 15:59:38 +01:00
parent 653b2d53e0
commit 40ff7f5be7
Signed by: f.weber
GPG Key ID: A1C85EB19014A2D3
3 changed files with 16 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
_includes/character-profile.html
View File

@ -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>

11
_pages/characters.md
View File

@ -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>

2
_pages/players-guide.md
View File

@ -3,7 +3,7 @@ layout: page
title: Spielerguide
permalink: /players-guide/
icon: description
weigth: 2
weight: 2
---
TBD