From ea3dc82728c3554d34ec99c7eadc0583c08f3c2c Mon Sep 17 00:00:00 2001
From: vodofrede <frederik@palmoe.dk>
Date: Sat, 19 Mar 2022 19:22:28 +0100
Subject: [PATCH] class optimizer mvp

---
 src/data/classes.json   | 144 ++++++++++++++++++++
 src/index.html          |   4 +
 src/optimizer.html      | 288 +++++++++++++++++++++++++++++++++++-----
 src/script/optimizer.js |  90 ++++++++++++-
 src/style/main.css      |  43 ++++--
 5 files changed, 525 insertions(+), 44 deletions(-)
 create mode 100644 src/data/classes.json

diff --git a/src/data/classes.json b/src/data/classes.json
new file mode 100644
index 0000000..e1372f7
--- /dev/null
+++ b/src/data/classes.json
@@ -0,0 +1,144 @@
+{
+    "classes": [
+        {
+            "name": "Wretch",
+            "level": 1,
+            "stats": [
+                10,
+                10,
+                10,
+                10,
+                10,
+                10,
+                10,
+                10
+            ]
+        },
+        {
+            "name": "Vagabond",
+            "level": 9,
+            "stats": [
+                15,
+                10,
+                11,
+                14,
+                13,
+                9,
+                9,
+                7
+            ]
+        },
+        {
+            "name": "Warrior",
+            "level": 8,
+            "stats": [
+                11,
+                12,
+                11,
+                10,
+                16,
+                10,
+                8,
+                9
+            ]
+        },
+        {
+            "name": "Hero",
+            "level": 7,
+            "stats": [
+                14,
+                9,
+                12,
+                16,
+                9,
+                7,
+                8,
+                11
+            ]
+        },
+        {
+            "name": "Bandit",
+            "level": 5,
+            "stats": [
+                10,
+                11,
+                10,
+                9,
+                13,
+                9,
+                8,
+                14
+            ]
+        },
+        {
+            "name": "Astrologer",
+            "level": 6,
+            "stats": [
+                9,
+                15,
+                9,
+                8,
+                12,
+                16,
+                7,
+                9
+            ]
+        },
+        {
+            "name": "Prophet",
+            "level": 7,
+            "stats": [
+                10,
+                14,
+                8,
+                11,
+                10,
+                7,
+                16,
+                10
+            ]
+        },
+        {
+            "name": "Samurai",
+            "level": 9,
+            "stats": [
+                12,
+                11,
+                13,
+                12,
+                15,
+                9,
+                8,
+                8
+            ]
+        },
+        {
+            "name": "Prisoner",
+            "level": 9,
+            "stats": [
+                11,
+                12,
+                11,
+                11,
+                14,
+                14,
+                6,
+                9
+            ]
+        },
+        {
+            "name": "Confessor",
+            "level": 10,
+            "stats": [
+                10,
+                13,
+                10,
+                12,
+                12,
+                9,
+                14,
+                9
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index b7460ea..d92d87c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -75,6 +75,10 @@
                 </a>
             </article>
         </div>
+        <h3>Credits</h3>
+        <p>
+            This page was heavily inspired by the awesome <a href="https://mugenmonkey.com">MugenMonkey</a> website.
+        </p>
     </main>
 
     <footer>
diff --git a/src/optimizer.html b/src/optimizer.html
index 2410f56..5f63f94 100644
--- a/src/optimizer.html
+++ b/src/optimizer.html
@@ -8,11 +8,13 @@
 
     <link rel="stylesheet" href="style/main.css">
 
-    <title></title>
+    <title>Erdtree - Class Optimizer</title>
     <meta name="description" content="">
+
+    <script src="/script/optimizer.js"></script>
 </head>
 
-<body>
+<body onload="update();">
     <nav>
         <h1><a href="/index.html">Elden Ring Build Planner</a></h1>
         <ul>
@@ -27,69 +29,291 @@
 
     <main>
         <div class="app">
-            <script src="script/"></script>
-            <!-- input fields -->
-            <ul>
-                <!-- <li>
-                    <pre>Base</pre>
-                    <pre>Total</pre>
-                </li> -->
+            <ul id="class-options">
                 <li>
-                    <label><b>Level</b></label>
-                    <input type="number" disabled>
-                    <input type="number" name="total-level" disabled>
+                    <label><b>Class</b></label>
+                    <input id="best-class" type="text" disabled>
                 </li>
+
+                <hr>
+
+                <li><b>Options</b></li>
+
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+                <li name="option">
+                    <div></div>
+                    <div></div>
+                </li>
+            </ul>
+
+            <ul>
+                <li>
+                    <label>
+                        <b>Level</b>
+                    </label>
+                    <div>
+                        <input class="stat" type="text" id="class-level" oninput="update()" disabled>
+                        <input class="stat" type="text" id="total-level" oninput="update()" disabled>
+                        <input class="stat" type="text" id="virtual-level" oninput="update()" disabled>
+                    </div>
+                </li>
+
+                <hr>
+
                 <li>
                     <label>Vigor</label>
-                    <input type="number" disabled>
-                    <input type="number" name="vigor" min=0 max=99>
+                    <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="virtual-stat" class="stat" type="text" id="virtual-vigor" oninput="update()"
+                            disabled>
+                    </div>
                 </li>
                 <li>
                     <label>Mind</label>
-                    <input type="number" disabled>
+                    <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="virtual-stat" class="stat" type="text" id="virtual-mind" oninput="update()"
+                            disabled>
+                    </div>
                 </li>
                 <li>
                     <label>Endurance</label>
-                    <input type="number" disabled>
+                    <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="virtual-stat" class="stat" type="text" id="virtal-endurance" oninput="update()"
+                            disabled>
+                    </div>
                 </li>
                 <li>
                     <label>Strength</label>
-                    <input type="number" disabled>
+                    <div>
+                        <input name="class-stat" class="stat" type="text" id="class-strength" oninput="update()"
+                            disabled>
+                        <input name="desired-stat" class="stat" type="number" id="strength" oninput="update()" min=0
+                            max=99>
+                        <input name="virtual-stat" class="stat" type="text" id="virtual-strength" oninput="update()"
+                            disabled>
+                    </div>
                 </li>
                 <li>
                     <label>Dexterity</label>
-                    <input type="number" disabled>
+                    <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>
+                    </div>
                 </li>
                 <li>
                     <label>Intelligence</label>
-                    <input type="number" disabled>
+                    <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>
+                    </div>
                 </li>
                 <li>
                     <label>Faith</label>
-                    <input type="number" disabled>
+                    <div>
+                        <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()"
+                            disabled>
+                    </div>
                 </li>
                 <li>
                     <label>Arcane</label>
-                    <input type="number" disabled>
+                    <div>
+                        <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()"
+                            disabled>
+                    </div>
+                </li>
+                <li>
+                    <button onclick="clearDesired()">Clear All</button>
                 </li>
             </ul>
+
             <ul>
-                <li></li>
-                <li></li>
-                <li><input type="number" name="mind" min=0 max=99></li>
-                <li><input type="number" name="endurance" min=0 max=99></li>
-                <li><input type="number" name="strength" min=0 max=99></li>
-                <li><input type="number" name="dexterity" min=0 max=99></li>
-                <li><input type="number" name="intelligence" min=0 max=99></li>
-                <li><input type="number" name="faith" min=0 max=99></li>
-                <li><input type="number" name="arcane" min=0 max=99></li>
+                <li>
+                    <b>Talismans</b>
+                </li>
+
+                <hr>
+
+                <li>
+                    <div>
+                        <input type="checkbox" id="radagon-soreseal" oninput="talisman()" name="talisman">
+                        <label for="radagon-soreseal">Radagon's Soreseal</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="checkbox" id="marika-soreseal" oninput="talisman()" name="talisman">
+                        <label for="marika-soreseal">Marika's Soreseal</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="checkbox" id="dexterity-talisman" oninput="talisman()" name="talisman">
+                        <label for="dexterity-talisman">Prosthesis-Wearer Heirloom</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="checkbox" id="intelligence-talisman" oninput="talisman()" name="talisman">
+                        <label for="intelligence-talisman">Stargazer Heirloom</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="checkbox" id="strength-talisman" oninput="talisman()" name="talisman">
+                        <label for="strength-talisman">Starscourge Heirloom</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="checkbox" id="faith-talisman" oninput="talisman()" name="talisman">
+                        <label for="faith-talisman">Two Fingers Heirloom</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="checkbox" id="millicent" oninput="talisman()" name="talisman">
+                        <label for="millicent">Millicent's Prosthesis</label>
+                    </div>
+                </li>
+            </ul>
+
+            <ul>
+                <li>
+                    <b>Helms</b>
+                </li>
+
+                <hr>
+
+                <li>
+                    <div>
+                        <input type="radio" id="albinauric" oninput="update()" name="helm">
+                        <label for="albinauric">Albinauric Mask</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="crimson" oninput="update()" name="helm">
+                        <label for="crimson">Crimson Hood</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="navy" oninput="update()" name="helm">
+                        <label for="navy">Navy Hood</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="haligtree" oninput="update()" name="helm">
+                        <label for="haligtree">Haligtree Helm</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="mask-of-confidence" oninput="update()" name="helm">
+                        <label for="mask-of-confidence">Mask of Confidence</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="imp-cat" oninput="update()" name="helm">
+                        <label for="imp-cat">Imp Head (Cat)</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="imp-corpse" oninput="update()" name="helm">
+                        <label for="imp-corpse">Imp Head (Corpse)</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="imp-elder" oninput="update()" name="helm">
+                        <label for="imp-elder">Imp Head (Elder)</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="imp-fanged" oninput="update()" name="helm">
+                        <label for="imp-fanged">Imp Head (Fanged)</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="imp-long-tongued" oninput="update()" name="helm">
+                        <label for="imp-long-tongued">Imp Head (Long-Tongued)</label>
+                    </div>
+                </li>
+                <li>
+                    <div>
+                        <input type="radio" id="imp-wolf" oninput="update()" name="helm">
+                        <label for="imp-wolf">Imp Head (Wolf)</label>
+                    </div>
+                </li>
             </ul>
         </div>
     </main>
 
     <footer>
-
+        <h5>Erdtree Planner (available under BSD-3-Clause license)</h5>
     </footer>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/script/optimizer.js b/src/script/optimizer.js
index e9630a2..fb6f62d 100644
--- a/src/script/optimizer.js
+++ b/src/script/optimizer.js
@@ -1,3 +1,91 @@
-"use strict";
+const CLASSES = fetch("/data/classes.json")
+    .then(response => response.json())
+    .then(data => data.classes)
+    .catch(error => console.log(error));
 
+async function update() {
+    // get inputted stats
+    let desired = [...document.getElementsByName("desired-stat")].map(
+        elem => {
+            elem.value = Math.min(Math.max(elem.value, 0), 99) || null;
+            return parseInt(elem.value) || 0;
+        }
+    )
 
+    let virtual = virtualStats();
+
+    // calculate best class
+    let sorted = sortClasses(await CLASSES, desired);
+    let best = sorted[0];
+
+    // update document
+    document.getElementsByName("option").forEach((elem, i) => {
+        let [name, level] = elem.children;
+        name.innerHTML = sorted[i].name;
+        level.innerHTML = "lvl. " + sorted[i].total;
+    })
+    document.getElementById("best-class").value = best.name;
+
+    document.getElementById("class-level").value = best.level;
+    document.getElementById("total-level").value = best.total;
+    document.getElementById("virtual-level").value = best.total;
+
+    document.getElementsByName("class-stat").forEach((elem, i) => elem.value = best.stats[i]);
+
+    document.getElementsByName("virtual-stat").forEach((elem, i) => {
+        elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + virtual[i]);
+        // elem.style.color = IS_RADAGON[i] && virtual[i] ? "firebrick" : !IS_RADAGON[i] && virtual[i] ? "royalblue" : "unset";
+    });
+}
+
+function statDelta(classStats, desiredStats) {
+    return classStats
+        .map((e, i) => { return e < desiredStats[i] ? desiredStats[i] - e : 0 })
+        .reduce((total, n) => total + n);
+}
+
+function sortClasses(classes, desiredStats) {
+    let deltas = classes.map(c => {
+        c.total = c.level + statDelta(c.stats, desiredStats);
+        return c;
+    });
+    deltas.sort((a, b) => { return a.total - b.total; });
+    return deltas;
+}
+
+function virtualStats() {
+    let [
+        radagon, marika, dexterityTalisman, intelligenceTalisman, strengthTalisman, faithTalisman, millicent
+    ] = [...document.getElementsByName("talisman")].map(elem => { return elem.checked });
+
+    return [
+        radagon ? 5 : 0,
+        marika ? 5 : 0,
+        radagon ? 5 : 0,
+        (radagon ? 5 : 0) + (strengthTalisman ? 5 : 0),
+        (radagon ? 5 : 0) + (dexterityTalisman ? 5 : 0) + (millicent ? 5 : 0),
+        (marika ? 5 : 0) + (intelligenceTalisman ? 5 : 0),
+        (marika ? 5 : 0) + (faithTalisman ? 5 : 0),
+        marika ? 5 : 0,
+    ]
+}
+
+function talisman() {
+    console.log("talisman()");
+
+    let talismans = [...document.getElementsByName("talisman")]
+
+    if (talismans.filter(checkbox => { return checkbox.checked }).length >= 4) {
+        talismans.forEach(checkbox => { checkbox.disabled = !checkbox.checked });
+    } else {
+        talismans.forEach(checkbox => { checkbox.disabled = false });
+    }
+
+    update();
+}
+
+function clearDesired() {
+    document.getElementsByName("desired-stat").forEach(elem => { elem.value = null });
+    document.getElementsByName("talisman").forEach(elem => { elem.checked = false });
+    update();
+}
\ No newline at end of file
diff --git a/src/style/main.css b/src/style/main.css
index 68d7379..54d9e96 100644
--- a/src/style/main.css
+++ b/src/style/main.css
@@ -44,6 +44,10 @@ body {
     height: 100vh;
 }
 
+header {
+    text-align: center;
+}
+
 main {
     display: flex;
     flex-direction: column;
@@ -117,7 +121,8 @@ a:hover {
     color: #144f5a;
 }
 a:visited {
-    color: #982c61;
+    /* color: #982c61; */
+    color: #1d7484;
     border-bottom: 2px solid #4a4a4a;
 }
 
@@ -165,31 +170,47 @@ li {
 /* apps */
 .app {
     display: flex;
-    flex-direction: row;
-    justify-content: stretch;
+    flex-flow: row wrap;
+    justify-content: center;
 
     padding: 15px;
     border: 1px solid grey;
     border-radius: 5px;
+    min-width: 320px;
 
     background-color: #f8f8ff;
 }
 
 .app ul {
+    border: 1px solid grey;
+    border-radius: 5px;
+    margin: 10px;
+    padding: 10px;
+
+    min-width: 220px;
+
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-}
-
-.app ul li * {
-    width: 200px;
+    justify-content: top;
+    align-items: stretch;
 }
 
 .app li {
-    height: 20px;
+    display: flex;
+    justify-content: space-between;
+    text-align: right;
+
+    width: 100%;
     list-style: none;
 }
 
-.app ul input {
-    width: 40px;
+.app ul .stat {
+    margin-left: 10px;
+    max-width: 40px;
+    align-self: flex-end;
+}
+
+.app hr {
+    margin-top: 2px;
+    margin-bottom: 4px;
 }