From a1b44a61abebc44cafb6a278f1e1e91610a2d805 Mon Sep 17 00:00:00 2001
From: Florian <f.weber@flweber.me>
Date: Tue, 8 Apr 2025 13:05:29 +0200
Subject: [PATCH] Enhance character sheet layout and tooltips; add housing
 description to JSON data

---
 _layouts/character-sheet.html  | 39 +++++++++++++++++++++++++++-------
 _layouts/default.html          |  5 +++++
 assets/game-data/housings.json |  3 ++-
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/_layouts/character-sheet.html b/_layouts/character-sheet.html
index 6a2c090..8bf2b7f 100644
--- a/_layouts/character-sheet.html
+++ b/_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>
diff --git a/_layouts/default.html b/_layouts/default.html
index c04682d..e5a41ad 100644
--- a/_layouts/default.html
+++ b/_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, {});
diff --git a/assets/game-data/housings.json b/assets/game-data/housings.json
index 9886896..f133ca5 100644
--- a/assets/game-data/housings.json
+++ b/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,