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;
+      char = character;
-      document.getElementById('age').innerText = character.age;
+      return fetch("{{ '/assets/game-data/housings.json' | relative_url }}");
-      const mainRole = character.roles.find(role => role.main);
+    }).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('housing').innerText = char.housing.type;
-      document.getElementById('lifestyle').innerText = character.lifestyle;
+      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, {});

assets/game-data/housings.json

@@ -13,7 +13,8 @@
   },
   "Frachtcontainer": {
     "rent": 1000,
-    "price": 15000
+    "price": 15000,
+    "description": "Frachtcontainer stehen in den Randbezirken, in der Rückgewonnenen Stadtgrenze und in der Kriegszone. Du hast genügend Platz, um deine Sachen unterzubringen, ein Bett, auf dem du bequem schlafen kannst, einen Schreibtisch, Strom, einen Kühlschrank, eine Mikrowelle und ein Waschbecken, geschützt durch die Sicherheit eines starken Schlosses. In der Kriegszone bist du schon in Gefahre, wenn du nach draußen trittst, aber wenn du in den Randbezirken lebst, bist du deutlich sicherer. Toiletten, Duschen und Waschmaschine gibt es in den Einrichtungen, die du mit den anderen Bewohnern der anderen Frachtcontainer teilst, die neben deinem Container gestapelt sind. Wenn du ein Fahrzeug besitzt und hier wohnst, parkst du wahrscheinlich auf der Straße. Wenn du in einer Kriegszone lebst, wird es gelegentlich aufgebrochen. Wenn du dich für die Randbezirke entscheidest, ist es einigermaßen sicher."
   },
   "Atelierwohung": {
     "rent": 1500,