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

small grid rewrite of crafter

Browse source
This commit is contained in:
reschan 2022-07-11 10:16:15 +07:00
parent 7522fe4b5a
commit e6daf9fcbb
1 changed files with 218 additions and 226 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
crafter/index.html
View file

@ -31,32 +31,30 @@
<hr/>
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
</div>
<div class = "container py-5 vh-100 mx-0 mx-lg-auto">
<div class = "col">
<div class = "row g-3">
<div class = "col-lg-5 col-sm-12 text-center">
<div class = "row gx-5 mb-2">
<div class = "col-lg-6 col-sm-12">
<div id = "recipe-dropdown" class = "row h-100 dark-shadow dark-6 rounded">
<div class="container mt-5">
<div class="row">
<div class="col-5">
<!--crafter ui-->
<div class="row row-cols-2 gx-5 gy-2">
<div class="col" id="recipe-dropdown">
<div class="row dark-shadow dark-5 rounded">
<div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon">
<img id = "recipe-img" class = "img-fluid rounded Crafted-shadow" src = "../media/items/new/generic-potion.png">
</div>
<div class = "col px-0">
<div class = "row align-items-center">
<div class = "col ps-3">
<div class = "row row-cols-2 align-items-center">
<div class = "col-4 px-0">
<p class = "text-right mb-0 scaled-font fw-bold">Type:</p>
<p class = "mb-0 scaled-font fw-bold">Type:</p>
</div>
<div class = "col-7 px-0">
<div class = "col-8 px-0">
<input class="recipeinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="recipe-choices" id="recipe-choice" name="recipe-choice" placeholder="Potion"/>
<datalist id="recipe-choices">
</datalist>
</div>
</div>
<div class = "row align-items-center">
<div class = "col-4 px-0">
<p class = "text-right mb-0 scaled-font fw-bold">Lv:</p>
<p class = "mb-0 scaled-font fw-bold">Lv:</p>
</div>
<div class = "col-7 px-0">
<div class = "col-8 px-0">
<input class="levelinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="level-choices" id="level-choice" name="level-choice" placeholder="103-105" />
<datalist id="level-choices">
</datalist>
@ -65,24 +63,24 @@
</div>
</div>
</div>
<div class = "col-lg-6 col-sm-12">
<div id = "atkSpdChoices" class = "row h-100 dark-shadow dark-6 rounded">
<div class = "col py-2">
<div class = "row h-50 align-items-center">
<p class = "text-right mb-0 scaled-font fw-bold">Attack Speed</p>
<div class="col">
<div id = "atkSpdChoices" class = "row row-cols-1 dark-shadow dark-5 rounded">
<div class="col pt-1">
<p class = "text-center scaled-font fw-bold mb-1">Attack Speed</p>
</div>
<div class = "row h-50">
<div class = "col-4 pl-1">
<div class="col mb-2">
<div class="row justify-content-center">
<div class="col-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "slow-atk-button" onclick = "toggleAtkSpd('slow-atk-button')">
Slow
</button>
</div>
<div class = "col-4 px-0">
<div class="col-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "normal-atk-button" onclick = "toggleAtkSpd('normal-atk-button')">
Normal
</button>
</div>
<div class = "col-4 pr-1">
<div class="col-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
Fast
</button>
@ -91,12 +89,10 @@
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-2">
<div class = "col-lg-6 col-sm-12 justify-content-center">
<div class="col">
<div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
<div class = "col-6 px-0">
<p class = "mb-0 scaled-font fw-bold" id = "mat-1">Mat 1 Tier:</p>
<p class = "mb-0 scaled-font fw-bold text-center" id = "mat-1">Mat 1 Tier:</p>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-1" onclick = "toggleMaterial('mat-1-1')">1</button>
@ -109,10 +105,10 @@
</div>
</div>
</div>
<div class = "col-lg-6 col-sm-12 justify-content-center">
<div class="col">
<div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
<div class = "col-6 px-0">
<p class = "mb-0 scaled-font fw-bold" id = "mat-2">Mat 2 Tier:</p>
<p class = "mb-0 scaled-font fw-bold text-center" id = "mat-2">Mat 2 Tier:</p>
</div>
<div class = "col px-0">
<button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-1" onclick = "toggleMaterial('mat-2-1')">1</button>
@ -125,11 +121,9 @@
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-1">
<div class="col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<div class = "row dark-shadow dark-6 rounded align-items-center just">
<div class = "col-3 px-0 ps-2">
<p class = "mb-0 scaled-font fw-bold">Ing 1:</p>
</div>
<div class = "col-9 px-0">
@ -140,8 +134,8 @@
</div>
</div>
<div class="col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<div class = "row dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0 ps-2">
<p class = "mb-0 scaled-font fw-bold">Ing 2:</p>
</div>
<div class = "col-9 px-0">
@ -151,11 +145,9 @@
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-1">
<div class="col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<div class = "row dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0 ps-2">
<p class = "mb-0 scaled-font fw-bold">Ing 3:</p>
</div>
<div class = "col-9 px-0">
@ -166,8 +158,8 @@
</div>
</div>
<div class="col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<div class = "row dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0 ps-2">
<p class = "mb-0 scaled-font fw-bold">Ing 4:</p>
</div>
<div class = "col-9 px-0">
@ -177,11 +169,9 @@
</div>
</div>
</div>
</div>
<div class = "row gx-5 mb-1">
<div class="col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<div class = "row dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0 ps-2">
<p class = "mb-0 scaled-font fw-bold">Ing 5:</p>
</div>
<div class = "col-9 px-0">
@ -192,8 +182,8 @@
</div>
</div>
<div class="col">
<div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0">
<div class = "row dark-shadow dark-6 rounded align-items-center">
<div class = "col-3 px-0 ps-2">
<p class = "mb-0 scaled-font fw-bold">Ing 6:</p>
</div>
<div class = "col-9 px-0">
@ -204,31 +194,30 @@
</div>
</div>
</div>
<div class = "row rounded dark-shadow dark-6 py-2 gy-3">
<div class = "col-lg-2 col-sm-6">
<div class = "row rounded dark-shadow dark-6 mt-3 p-2 align-items-center justify-content-center">
<div class = "col-auto mx-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()">
Reset
</button>
</div>
<div class = "col-lg-3 col-sm-6">
<div class = "col-auto mx-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-hash-button" onclick = "copyRecipeHash()">
Copy Hash
</button>
</div>
<div class = "col-lg-4 col-sm-6">
<div class = "col-auto mx-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-button" onclick = "copyRecipe()">
Copy Short
</button>
</div>
<div class = "col-lg-3 col-sm-6">
<div class = "col-auto mx-auto">
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "share-button" onclick = "shareRecipe()">
Copy Long
</button>
</div>
</div>
</div>
<div class = "col-lg-4">
<div class="col-4">
<div class = "recipe hide-container-block px-3 col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" style = "display:none">
<div class = "row recipe-stats">
<div class = "col" id = "recipe-stats"></div>
@ -238,7 +227,7 @@
</div>
</div>
</div>
<div class = "col-lg-3">
<div class="col-3">
<div class = "crafted row hide-container-block" style = "display:none">
<div class = "craft-stats">
<div class = "col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" id = "craft-stats"></div>
@ -246,7 +235,7 @@
</div>
</div>
</div>
</div>
<div class="row">
<div class="col ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
<div class = "col-lg-6 col-sm-12 hide-container-grid" id = "ingreds">
<div class = "row mb-3">
@ -280,6 +269,8 @@
</div>
</div>
</div>
</div>
<div class="row my-2">
<div class="col dark-5 scaled-font">
<footer class="text-center">
<div id="header2">
@ -292,6 +283,7 @@
</footer>
</div>
</div>
</div>
<script type="text/javascript" src="../js/query.js"></script>
<script type="text/javascript" src="../js/query_2.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>