---
layout: page
---

<div class="row">
  {% if page.image %}
  <div class="col s6 m4 l1 responsive-img">
    <img class="responsive-img" src="{{ page.image | relative_url }}" alt="Picture of {{ page.title }}" />
  </div>
  {% endif %}
  <div class="bg-dark fg-yellow cyber-tile col {% if page.image %}s12 m8 l11{% else %}s12 m12 l12{% endif %}">
    <p class="character-details">
      <strong class="cyberpunk-font-og character-details-title">Straßenname:</strong>
      <span id="streetname" class="oxanium-font character-details-value"></span>
    </p>
    <p class="character-details">
      <strong class="cyberpunk-font-og character-details-title">Alter:</strong>
      <span id="age" class="oxanium-font character-details-value"></span>
    </p>
    <p class="character-details">
      <strong class="cyberpunk-font-og character-details-title">Rolle:</strong>
      <span id="role" class="oxanium-font character-details-value"></span>
    </p>
    <p class="character-details">
      <strong class="cyberpunk-font-og character-details-title">Rollenfähigkeit:</strong>
      <span id="role-ability" class="oxanium-font character-details-value"></span>
    </p>
    <p class="character-details">
      <strong class="cyberpunk-font-og character-details-title">Unterkunft:</strong>
      <span id="housing" class="oxanium-font character-details-value tooltipped" data-position="bottom" style="cursor: pointer;"></span>
      <span style="background-color: white; color: blue; font-size: .64em; display: flex; align-items: flex-start; height: fit-content; align-self: flex-start; border-radius: 50%; padding: 0px 4px; ">i</span>
    </p>
    <p class="character-details">
      <strong class="cyberpunk-font-og character-details-title">Lebensstil:</strong>
      <span id="lifestyle" class="oxanium-font character-details-value tooltipped" data-position="bottom" style="cursor: pointer;"></span>
      <span style="background-color: white; color: blue; font-size: .64em; display: flex; align-items: flex-start; height: fit-content; align-self: flex-start; border-radius: 50%; padding: 0px 4px; ">i</span>
    </p>
    <p class="character-details">
      <strong class="cyberpunk-font-og character-details-title">Lebenskosten:</strong>
      <span id="costs" class="oxanium-font character-details-value"></span>
    </p>
  </div>
</div>
{{ content }}

<script>
  let char, housing, lifestyle;
  fetch("{{ page.datasource | relative_url }}")
    .then(response => response.json())
    .then(character => {
      char = character;
      return fetch("{{ '/assets/game-data/housings.json' | relative_url }}");
    }).then(response => response.json())
    .then(housings => {
      housing = housings[char.housing.type];
      return fetch("{{ '/assets/game-data/lifestyles.json' | relative_url }}");
    }).then(response => response.json())
    .then(lifestyles => {
      lifestyle = lifestyles[char.lifestyle];
      document.getElementById('streetname').innerText = char.handle;
      document.getElementById('age').innerText = char.age;
      const mainRole = char.roles.find(role => role.main);
      document.getElementById('role').innerText = mainRole.name + " Rang: " + mainRole.rank;
      document.getElementById('housing').innerText = char.housing.type;
      if (housing.description)
        document.getElementById('housing').setAttribute("data-tooltip", housing.description);
      
      document.getElementById('lifestyle').innerText = char.lifestyle;
      if (housing.description)
        document.getElementById('lifestyle').setAttribute("data-tooltip", lifestyle.description);

      let costs = lifestyle.cost;
      if (!char.housing.owned) {
        costs += housing.rent;
      }
      document.getElementById('costs').innerText = costs + " ed";
    });
</script>