Enhance character sheet layout and tooltips; add housing description to JSON data

_layouts/character-sheet.html

@@ -8,7 +8,7 @@ layout: page
     <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 %}s6 m8 l11{% else %}s12 m12 l12{% 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>
@@ -27,11 +27,13 @@ layout: page
     </p>
     <p class="character-details">
       <strong class="cyberpunk-font-og character-details-title">Unterkunft:</strong>
-      <span id="housing" class="oxanium-font character-details-value"></span>
+      <span id="housing" class="oxanium-font character-details-value tooltipped" data-position="bottom"></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"></span>
+      <span id="lifestyle" class="oxanium-font character-details-value tooltipped" data-position="bottom"></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>
@@ -42,14 +44,35 @@ layout: page
 {{ content }}
 
 <script>
+  let char, housing, lifestyle;
   fetch("{{ page.datasource | relative_url }}")
     .then(response => response.json())
     .then(character => {
-      document.getElementById('streetname').innerText = character.handle;
-      document.getElementById('age').innerText = character.age;
-      const mainRole = character.roles.find(role => role.main);
+      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 = character.housing.type;
-      document.getElementById('lifestyle').innerText = character.lifestyle;
+      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>

_layouts/default.html

@@ -11,6 +11,11 @@
   {% include footer.html %}
   <script src="{{ "/assets/js/materialize.min.js" | relative_url }}"></script>
   <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const elems = document.querySelectorAll('.tooltipped');
+      const instances = M.Tooltip.init(elems, {});
+    });
+
     document.addEventListener('DOMContentLoaded', function() {
       var sidenavElems = document.querySelectorAll('.sidenav');
       var sidenavInstances = M.Sidenav.init(sidenavElems, {});