From febd7024f24b219380c12608e2312f1858a66ce5 Mon Sep 17 00:00:00 2001
From: ferricles <ferricles@gmail.com>
Date: Wed, 20 Jan 2021 09:10:27 -0800
Subject: [PATCH] added tooltips in crafter

---
 crafter.html | 10 ++++------
 crafter.js   |  3 +++
 display.js   | 11 +++++++++--
 narrow.css   |  3 +++
 styles.css   | 21 +++++++++++++++++++++
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/crafter.html b/crafter.html
index 3718241..8dad7ee 100644
--- a/crafter.html
+++ b/crafter.html
@@ -125,12 +125,12 @@
                     </tr>
                 </table>
             </div>
-            <div class = "recipe hide-container-block" style = "display:none">
+            <div class = "recipe center hide-container-block" style = "display:none">
                 <div class = "recipe-stats">
                     <div class = "center" id = "recipe-stats"></div>
                 </div>
             </div>
-            <div class = "crafted hide-container-block" style = "display:none">
+            <div class = "crafted center hide-container-block" style = "display:none">
                 <div class = "craft-stats">
                     <div class = "center" id = "craft-stats"></div>
                 </div>
@@ -140,10 +140,8 @@
             <div class = "craft-warnings">
                 <div class = "center" id = "craft-warnings"></div>
             </div>
-            <p>
-            </p>
-            <p>
-            </p>
+            <p></p>
+            <p></p>
             <div class="ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
                 <p class="center title hide-container-block" style = "display:block">
                     Ingredients
diff --git a/crafter.js b/crafter.js
index 5e37420..11abb84 100644
--- a/crafter.js
+++ b/crafter.js
@@ -130,6 +130,9 @@ function calculateCraft() {
     
     //Display Recipe Stats
     displayRecipeStats(player_craft, "recipe-stats");
+    for(let i = 0; i < 6; i++) {
+        displayExpandedIngredient(player_craft["ingreds"][i],"tooltip-" + i);
+    }
     //Display Craft Stats
     displayCraftStats(player_craft, "craft-stats");
     //Display Ingredients' Stats
diff --git a/display.js b/display.js
index 2fe65bb..6deb984 100644
--- a/display.js
+++ b/display.js
@@ -802,7 +802,7 @@ function displayRecipeStats(craft, parent_id) {
 
     let ingredTable = document.createElement("table");
     ingredTable.classList.add("itemtable");
-    ingredTable.style.tableLayout = "fixed";
+    ingredTable.classList.add("ingredTable");
     for (let i = 0; i < 3; i++) {
         let row = document.createElement("tr");
         for (let j = 0; j < 2; j++) {
@@ -811,6 +811,7 @@ function displayRecipeStats(craft, parent_id) {
             cell.style.width = "50%";
             cell.classList.add("center");
             cell.classList.add("box");
+            cell.classList.add("tooltip");
             let b = document.createElement("b");
             b.textContent = ingredName;
             b.classList.add("space");
@@ -825,10 +826,16 @@ function displayRecipeStats(craft, parent_id) {
             cell.appendChild(b);
             cell.appendChild(eff);
             row.appendChild(cell);
+
+            let tooltip = document.createElement("div");
+            tooltip.classList.add("tooltiptext");
+            tooltip.classList.add("center");
+            tooltip.id = "tooltip-" + (2*i + j);
+            console.log(tooltip.id);
+            cell.appendChild(tooltip);
         }
         ingredTable.appendChild(row);
     }
-
     elem.appendChild(ldiv);
     elem.appendChild(ingredTable);
 }
diff --git a/narrow.css b/narrow.css
index 6cc7a34..75c835b 100644
--- a/narrow.css
+++ b/narrow.css
@@ -17,6 +17,9 @@
 
 }
 
+.ingredTable {
+    table-layout: "fixed";
+}
 .build, .spells .misc {
     padding: 2%;
     display: grid;
diff --git a/styles.css b/styles.css
index 581aa8e..9689a40 100644
--- a/styles.css
+++ b/styles.css
@@ -387,3 +387,24 @@ button.toggleOn:hover {
     color: #ff0;
     background: #775;
 }
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    color: #aaa;
+    background: #1e2224;
+    width: min(200%, 75vw);
+    text-align: center;
+    border: 5px solid #BCBCBC;
+    border-radius: 10px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+  }
+  .recipe {
+      z-index: 1;
+  }
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+  }
\ No newline at end of file