endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

added tooltips in crafter

Browse source
This commit is contained in:
ferricles 2021-01-20 09:10:27 -08:00
parent b41e182454
commit febd7024f2
5 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
crafter.html
View file

@ -125,12 +125,12 @@
</tr> </tr>
</table> </table>
</div> </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 = "recipe-stats">
<div class = "center" id = "recipe-stats"></div> <div class = "center" id = "recipe-stats"></div>
</div> </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 = "craft-stats">
<div class = "center" id = "craft-stats"></div> <div class = "center" id = "craft-stats"></div>
</div> </div>
@ -140,10 +140,8 @@
<div class = "craft-warnings"> <div class = "craft-warnings">
<div class = "center" id = "craft-warnings"></div> <div class = "center" id = "craft-warnings"></div>
</div> </div>
<p> <p></p>
</p> <p></p>
<p>
</p>
<div class="ingredients-container hide-container-grid" id = "ingreds" style = "display:none"> <div class="ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
<p class="center title hide-container-block" style = "display:block"> <p class="center title hide-container-block" style = "display:block">
Ingredients Ingredients

3
crafter.js
View file

@ -130,6 +130,9 @@ function calculateCraft() {
//Display Recipe Stats //Display Recipe Stats
displayRecipeStats(player_craft, "recipe-stats"); displayRecipeStats(player_craft, "recipe-stats");
for(let i = 0; i < 6; i++) {
displayExpandedIngredient(player_craft["ingreds"][i],"tooltip-" + i);
}
//Display Craft Stats //Display Craft Stats
displayCraftStats(player_craft, "craft-stats"); displayCraftStats(player_craft, "craft-stats");
//Display Ingredients' Stats //Display Ingredients' Stats

11
display.js
View file

@ -802,7 +802,7 @@ function displayRecipeStats(craft, parent_id) {
let ingredTable = document.createElement("table"); let ingredTable = document.createElement("table");
ingredTable.classList.add("itemtable"); ingredTable.classList.add("itemtable");
ingredTable.style.tableLayout = "fixed"; ingredTable.classList.add("ingredTable");
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
let row = document.createElement("tr"); let row = document.createElement("tr");
for (let j = 0; j < 2; j++) { for (let j = 0; j < 2; j++) {
@ -811,6 +811,7 @@ function displayRecipeStats(craft, parent_id) {
cell.style.width = "50%"; cell.style.width = "50%";
cell.classList.add("center"); cell.classList.add("center");
cell.classList.add("box"); cell.classList.add("box");
cell.classList.add("tooltip");
let b = document.createElement("b"); let b = document.createElement("b");
b.textContent = ingredName; b.textContent = ingredName;
b.classList.add("space"); b.classList.add("space");
@ -825,10 +826,16 @@ function displayRecipeStats(craft, parent_id) {
cell.appendChild(b); cell.appendChild(b);
cell.appendChild(eff); cell.appendChild(eff);
row.appendChild(cell); 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); ingredTable.appendChild(row);
} }
elem.appendChild(ldiv); elem.appendChild(ldiv);
elem.appendChild(ingredTable); elem.appendChild(ingredTable);
} }

3
narrow.css
View file

@ -17,6 +17,9 @@
} }
.ingredTable {
table-layout: "fixed";
}
.build, .spells .misc { .build, .spells .misc {
padding: 2%; padding: 2%;
display: grid; display: grid;

21
styles.css
View file

@ -387,3 +387,24 @@ button.toggleOn:hover {
color: #ff0; color: #ff0;
background: #775; 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;
}