cpred/_includes/character-profile.html

28 lines
1.5 KiB
HTML

<div class="cyber-tile cyber-tile-big {{ include.bg_color }} {{ include.fg_color }} {{ include.class }}" style="min-height: auto;">
{% 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-{{ 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-purple fg-white" onclick="window.location.href='{{ include.page | relative_url }}'">
Screamsheet
<span class="glitchtext">teehsmaercS</span>
<span class="tag">NETR</span>
</button>
{% endif %}
</div>
<script>
fetch("{{ '/assets/game-data/characters/' | append: include.id | append: '.json' | relative_url }}")
.then(response => response.json())
.then(character => {
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-{{ include.id }}').innerText = mainRole.name + " Rang: " + mainRole.rank;
});
</script>