refactored optimizer to use article

This commit is contained in:
Frederik Palmø 2022-03-19 20:05:50 +01:00
parent bfed4fa021
commit 0cc9889f42
3 changed files with 318 additions and 282 deletions

View File

@ -27,7 +27,7 @@
<main>
<div class="cards">
<article class="card">
<article>
<a href="/planner.html">
<h3>Build Planner</h3>
<br>
@ -35,7 +35,7 @@
</a>
</article>
<article class="card">
<article>
<a href="/optimizer.html">
<h3>Class Optimizer</h3>
<br>
@ -43,7 +43,7 @@
</a>
</article>
<article class="card">
<article>
<a href="/attack.html">
<h3>Attack Rating Calculator</h3>
<br>
@ -51,7 +51,7 @@
</a>
</article>
<article class="card">
<article>
<a href="/censor.html">
<h3>Censor Checker</h3>
<br>
@ -59,7 +59,7 @@
</a>
</article>
<article class="card">
<article>
<a href="/armor.html">
<h3>Armor Optimizer</h3>
<br>
@ -67,7 +67,7 @@
</a>
</article>
<article class="card">
<article>
<a href="/finder.html">
<h3>Weapon Finder</h3>
<br>

View File

@ -29,7 +29,9 @@
<main>
<div class="app">
<ul id="class-options">
<!-- class options -->
<article id="class-options">
<ul>
<li>
<label><b>Class</b></label>
<input id="best-class" type="text" disabled>
@ -80,7 +82,10 @@
<div></div>
</li>
</ul>
</article>
<!-- stats -->
<article>
<ul>
<li>
<label>
@ -98,9 +103,10 @@
<li>
<label>Vigor</label>
<div>
<input name="class-stat" class="stat" type="text" id="class-vigor" oninput="update()" disabled>
<input name="desired-stat" class="stat" type="number" id="vigor" oninput="update()" min=0 max=99
maxLength=2>
<input name="class-stat" class="stat" type="text" id="class-vigor" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="vigor" oninput="update()" min=0
max=99 maxLength=2>
<input name="virtual-stat" class="stat" type="text" id="virtual-vigor" oninput="update()"
disabled>
</div>
@ -108,8 +114,10 @@
<li>
<label>Mind</label>
<div>
<input name="class-stat" class="stat" type="text" id="class-mind" oninput="update()" disabled>
<input name="desired-stat" class="stat" type="number" id="mind" oninput="update()" min=0 max=99>
<input name="class-stat" class="stat" type="text" id="class-mind" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="mind" oninput="update()" min=0
max=99>
<input name="virtual-stat" class="stat" type="text" id="virtual-mind" oninput="update()"
disabled>
</div>
@ -119,8 +127,8 @@
<div>
<input name="class-stat" class="stat" type="text" id="class-endurance" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="endurance" oninput="update()" min=0
max=99>
<input name="desired-stat" class="stat" type="number" id="endurance" oninput="update()"
min=0 max=99>
<input name="virtual-stat" class="stat" type="text" id="virtal-endurance" oninput="update()"
disabled>
</div>
@ -141,10 +149,10 @@
<div>
<input name="class-stat" class="stat" type="text" id="class-dexterity" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="dexterity" oninput="update()" min=0
max=99>
<input name="virtual-stat" class="stat" type="text" id="virtual-dexterity" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="dexterity" oninput="update()"
min=0 max=99>
<input name="virtual-stat" class="stat" type="text" id="virtual-dexterity"
oninput="update()" disabled>
</div>
</li>
<li>
@ -152,16 +160,17 @@
<div>
<input name="class-stat" class="stat" type="text" id="class-intelligence" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="intelligence" oninput="update()" min=0
max=99>
<input name="virtual-stat" class="stat" type="text" id="virtual-intelligence" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="intelligence" oninput="update()"
min=0 max=99>
<input name="virtual-stat" class="stat" type="text" id="virtual-intelligence"
oninput="update()" disabled>
</div>
</li>
<li>
<label>Faith</label>
<div>
<input name="class-stat" class="stat" type="text" id="class-faith" oninput="update()" disabled>
<input name="class-stat" class="stat" type="text" id="class-faith" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="faith" oninput="update()" min=0
max=99>
<input name="virtual-stat" class="stat" type="text" id="virtual-faith" oninput="update()"
@ -171,7 +180,8 @@
<li>
<label>Arcane</label>
<div>
<input name="class-stat" class="stat" type="text" id="class-arcane" oninput="update()" disabled>
<input name="class-stat" class="stat" type="text" id="class-arcane" oninput="update()"
disabled>
<input name="desired-stat" class="stat" type="number" id="arcane" oninput="update()" min=0
max=99>
<input name="virtual-stat" class="stat" type="text" id="virtual-arcane" oninput="update()"
@ -182,7 +192,10 @@
<button onclick="clearDesired()">Clear All</button>
</li>
</ul>
</article>
<!-- talismans -->
<article>
<ul>
<li>
<b>Talismans</b>
@ -233,14 +246,18 @@
</div>
</li>
</ul>
</article>
<ul>
<!-- equipment -->
<article>
<li>
<b>Helms</b>
<b>Equipment</b>
</li>
<hr>
<details>
<summary>Helms</summary>
<li>
<div>
<input type="radio" id="albinauric" oninput="update()" name="helm">
@ -307,7 +324,20 @@
<label for="imp-wolf">Imp Head (Wolf)</label>
</div>
</li>
</ul>
</details>
<details>
<summary>Chest Armor</summary>
</details>
<details>
<summary>Gauntlets</summary>
</details>
<details>
<summary>Leg Armor</summary>
</details>
</article>
</div>
<h3>Softcaps</h3>
@ -404,7 +434,9 @@
</main>
<footer>
<h5>Erdtree Planner (available under BSD-3-Clause license)</h5>
<h5>Erdtree Planner (<a href="https://git.palmoe.dk/vodofrede/erdtree">available under BSD-3-Clause license</a>)
</h5>
<h5>Copyright 2022 vodofrede</h5>
</footer>
</body>

View File

@ -173,7 +173,7 @@ tbody:first-child {
gap: 10px;
}
.card {
.cards article {
/* flex-grow: 0.45; */
/* flex-basis: 0px; */
text-align: center;
@ -188,7 +188,7 @@ tbody:first-child {
background-color: #f8f8ff;
}
.card * {
.card article * {
display: inline-block;
text-align: center;
}
@ -207,7 +207,7 @@ tbody:first-child {
background-color: #f8f8ff;
}
.app ul {
.app article {
border: 1px solid grey;
border-radius: 5px;
margin: 10px;
@ -221,6 +221,10 @@ tbody:first-child {
align-items: stretch;
}
.app ul {
padding: 0;
}
.app li {
display: flex;
justify-content: space-between;
@ -230,7 +234,7 @@ tbody:first-child {
list-style: none;
}
.app ul .stat {
.app .stat {
margin-left: 10px;
max-width: 40px;
align-self: flex-end;