fixed helms and used templates

This commit is contained in:
Frederik Palmø 2022-03-20 14:39:06 +01:00
parent 9ea6766c57
commit 3a2c14e000
7 changed files with 267 additions and 388 deletions

View File

@ -1,144 +1,54 @@
{ {
"classes": [ "classes": [
{
"name": "Wretch",
"level": 1,
"stats": [
10,
10,
10,
10,
10,
10,
10,
10
]
},
{ {
"name": "Vagabond", "name": "Vagabond",
"level": 9, "level": 9,
"stats": [ "stats": [15, 10, 11, 14, 13, 9, 9, 7]
15,
10,
11,
14,
13,
9,
9,
7
]
}, },
{ {
"name": "Warrior", "name": "Warrior",
"level": 8, "level": 8,
"stats": [ "stats": [11, 12, 11, 10, 16, 10, 8, 9]
11,
12,
11,
10,
16,
10,
8,
9
]
}, },
{ {
"name": "Hero", "name": "Hero",
"level": 7, "level": 7,
"stats": [ "stats": [14, 9, 12, 16, 9, 7, 8, 11]
14,
9,
12,
16,
9,
7,
8,
11
]
}, },
{ {
"name": "Bandit", "name": "Bandit",
"level": 5, "level": 5,
"stats": [ "stats": [10, 11, 10, 9, 13, 9, 8, 14]
10,
11,
10,
9,
13,
9,
8,
14
]
}, },
{ {
"name": "Astrologer", "name": "Astrologer",
"level": 6, "level": 6,
"stats": [ "stats": [9, 15, 9, 8, 12, 16, 7, 9]
9,
15,
9,
8,
12,
16,
7,
9
]
}, },
{ {
"name": "Prophet", "name": "Prophet",
"level": 7, "level": 7,
"stats": [ "stats": [10, 14, 8, 11, 10, 7, 16, 10]
10,
14,
8,
11,
10,
7,
16,
10
]
}, },
{ {
"name": "Samurai", "name": "Samurai",
"level": 9, "level": 9,
"stats": [ "stats": [12, 11, 13, 12, 15, 9, 8, 8]
12,
11,
13,
12,
15,
9,
8,
8
]
}, },
{ {
"name": "Prisoner", "name": "Prisoner",
"level": 9, "level": 9,
"stats": [ "stats": [11, 12, 11, 11, 14, 14, 6, 9]
11,
12,
11,
11,
14,
14,
6,
9
]
}, },
{ {
"name": "Confessor", "name": "Confessor",
"level": 10, "level": 10,
"stats": [ "stats": [10, 13, 10, 12, 12, 9, 14, 9]
10, },
13, {
10, "name": "Wretch",
12, "level": 1,
12, "stats": [10, 10, 10, 10, 10, 10, 10, 10]
9,
14,
9
]
} }
] ]
} }

136
src/data/equipment.json Normal file
View File

@ -0,0 +1,136 @@
{
"helms": [
{
"id": "albinauric-mask",
"name": "Albinauric Mask",
"weight": 3.8,
"stats": [0, 0, 0, 0, 0, 0, 0, 4]
},
{
"id": "crimson-hood",
"name": "Crimson Hood",
"weight": 1.7,
"stats": [1, 0, 0, 0, 0, 0, 0, 0]
},
{
"id": "navy-hood",
"name": "Navy Hood",
"weight": 1.7,
"stats": [0, 1, 0, 0, 0, 0, 0, 0]
},
{
"id": "haligtree-helm",
"name": "Haligtree Helm",
"weight": 4.0,
"stats": [0, 0, 0, 0, 0, 0, 1, 0]
},
{
"id": "haligtree-knight-helm",
"name": "Haligtree Knight Helm",
"weight": 5.1,
"stats": [0, 0, 0, 0, 0, 0, 2, 0]
},
{
"id": "hierodas-glintstone-crown",
"name": "Hierodas Glintstone Crown",
"weight": 3,
"stats": [0, 0, 2, 0, 0, 2, 0, 0]
},
{
"id": "mask-of-confidence",
"name": "Mask of Confidence",
"weight": 3.6,
"stats": [0, 0, 0, 0, 0, 0, 0, 3]
},
{
"id": "queens-crescent-crown",
"name": "Queen's Crescent Crown",
"weight": 2.2,
"stats": [0, 0, 0, 0, 0, 3, 0, 0]
},
{
"id": "karolos-glintstone-crown",
"name": "Karolos Glintstone Crown",
"weight": 5.1,
"stats": [0, 0, 0, 0, 0, 3, 0, 0]
},
{
"id": "olivinus-glintstone-crown",
"name": "Olivinus Glintstone Crown",
"weight": 5.1,
"stats": [0, 0, 0, 0, 0, 3, 0, 0]
},
{
"id": "twinsage-glintstone-crown",
"name": "Twinsage Glintstone Crown",
"weight": 5.1,
"stats": [0, 0, 0, 0, 0, 6, 0, 0]
},
{
"id": "witchs-glintstone-crown",
"name": "Witch's Glintstone Crown",
"weight": 5.1,
"stats": [0, 0, 0, 0, 0, 3, 0, 3]
},
{
"id": "haima-glintstone-crown",
"name": "Haima Glintstone Crown",
"weight": 2.7,
"stats": [0, 0, 0, 2, 0, 2, 0, 0]
},
{
"id": "omensmirk-mask",
"name": "Omensmirk Mask",
"weight": 3,
"stats": [0, 0, 0, 2, 0, 0, 0, 0]
},
{
"id": "silver-tear-mask",
"name": "Silver Tear Mask",
"weight": 4.6,
"stats": [0, 0, 0, 0, 0, 0, 0, 8]
},
{
"id": "imp-head-cat",
"name": "Imp Head (Cat)",
"weight": 8.1,
"stats": [0, 0, 0, 0, 0, 2, 0, 0]
},
{
"id": "imp-head-corpse",
"name": "Imp Head (Corpse)",
"weight": 8.1,
"stats": [0, 0, 0, 0, 0, 0, 2, 0]
},
{
"id": "imp-head-elder",
"name": "Imp Head (Elder)",
"weight": 8.1,
"stats": [0, 0, 0, 0, 0, 0, 0, 2]
},
{
"id": "imp-head-fanged",
"name": "Imp Head (Fanged)",
"weight": 8.1,
"stats": [0, 0, 0, 2, 0, 0, 0, 0]
},
{
"id": "imp-head-long-tongued",
"name": "Imp Head (Long-Tongued)",
"weight": 8.1,
"stats": [0, 0, 0, 0, 2, 0, 0, 0]
},
{
"id": "imp-head-wolf",
"name": "Imp Head (Wolf)",
"weight": 8.1,
"stats": [0, 0, 2, 0, 0, 0, 0, 0]
},
{
"id": "okina-mask",
"name": "Okina Mask",
"weight": 3.6,
"stats": [0, 0, 0, 0, 3, 0, 0, 0]
}
]
}

View File

@ -4,110 +4,47 @@
"id": "radagons-soreseal", "id": "radagons-soreseal",
"name": "Radagon's Soreseal", "name": "Radagon's Soreseal",
"weight": 0.8, "weight": 0.8,
"stats": [ "stats": [5, 0, 5, 5, 5, 0, 0, 0]
5,
0,
5,
5,
5,
0,
0,
0
]
}, },
{ {
"id": "marikas-soreseal", "id": "marikas-soreseal",
"name": "Marika's Soreseal", "name": "Marika's Soreseal",
"weight": 0.8, "weight": 0.8,
"stats": [ "stats": [0, 5, 0, 0, 0, 5, 5, 5]
0,
5,
0,
0,
0,
5,
5,
5
]
}, },
{ {
"id": "prosthesis-wearer-heirloom", "id": "prosthesis-wearer-heirloom",
"name": "Prosthesis-Wearer Heirloom", "name": "Prosthesis-Wearer Heirloom",
"weight": 0.8, "weight": 0.8,
"stats": [ "stats": [0, 0, 0, 0, 5, 0, 0, 0]
0,
0,
0,
0,
5,
0,
0,
0
]
}, },
{ {
"id": "stargazer-heirloom", "id": "stargazer-heirloom",
"name": "Stargazer Heirloom", "name": "Stargazer Heirloom",
"weight": 0.8, "weight": 0.8,
"stats": [ "stats": [0, 0, 0, 0, 0, 5, 0, 0]
0,
0,
0,
0,
0,
5,
0,
0
]
}, },
{ {
"id": "starscourge-heirloom", "id": "starscourge-heirloom",
"name": "Starscourge Heirloom", "name": "Starscourge Heirloom",
"weight": 0.8, "weight": 0.8,
"stats": [ "stats": [0, 0, 0, 5, 0, 0, 0, 0]
0,
0,
0,
5,
0,
0,
0,
0
]
}, },
{ {
"id": "two-fingers-heirloom", "id": "two-fingers-heirloom",
"name": "Two Fingers Heirloom", "name": "Two Fingers Heirloom",
"weight": 0.8, "weight": 0.8,
"stats": [ "stats": [0, 0, 0, 0, 0, 0, 5, 0]
0,
0,
0,
0,
0,
0,
5,
0
]
}, },
{ {
"id": "millicents-prosthesis", "id": "millicents-prosthesis",
"name": "Millicent's Prosthesis", "name": "Millicent's Prosthesis",
"weight": 0.8, "weight": 0.8,
"stats": [ "stats": [0, 0, 0, 0, 5, 0, 0, 0]
0,
0,
0,
0,
5,
0,
0,
0
]
}, },
{ {
"name": "Arrow's Reach Talisman", "name": "Arrow's Reach Talisman",
"weight": 0.7 "weight": 0.7
} }
] ]
} }

View File

@ -11,11 +11,10 @@
<title>Erdtree - Class Optimizer</title> <title>Erdtree - Class Optimizer</title>
<meta name="description" content=""> <meta name="description" content="">
<script src="/script/common.js"></script>
<script src="/script/optimizer.js"></script> <script src="/script/optimizer.js"></script>
</head> </head>
<body onload="update();"> <body onload="init();">
<nav> <nav>
<h1><a href="/index.html">Elden Ring Build Planner</a></h1> <h1><a href="/index.html">Elden Ring Build Planner</a></h1>
<ul> <ul>
@ -197,218 +196,51 @@
<!-- talismans --> <!-- talismans -->
<article> <article>
<ul> <ul id="talismans">
<li> <li>
<b>Talismans</b> <b>Talismans</b>
</li> </li>
<hr> <hr>
<li> <template id="talisman">
<div> <li>
<input class="talisman" type="checkbox" id="radagons-soreseal" oninput="talisman()" <div>
name="equipment"> <input type="checkbox" class="talisman" id="" name="equipment" onclick="update()">
<label for="radagons-soreseal">Radagon's Soreseal</label> <label for="">Placeholder</label>
</div> </div>
<aside>+5 vig., end., str., dex.</aside> <aside></aside>
</li> </li>
<li> </template>
<div>
<input class="talisman" type="checkbox" id="marikas-soreseal" oninput="talisman()"
name="equipment">
<label for="marikas-soreseal">Marika's Soreseal</label>
</div>
<aside>+5 mnd., int., fth., arc.</aside>
</li>
<li>
<div>
<input class="talisman" type="checkbox" id="prosthesis-wearer-heirloom" oninput="talisman()"
name="equipment">
<label for="prosthesis-wearer-heirloom">Prosthesis-Wearer Heirloom</label>
</div>
<aside>+5 dex.</aside>
</li>
<li>
<div>
<input class="talisman" type="checkbox" id="stargazer-heirloom" oninput="talisman()"
name="equipment">
<label for="stargazer-heirloom">Stargazer Heirloom</label>
</div>
<aside>+5 int.</aside>
</li>
<li>
<div>
<input class="talisman" type="checkbox" id="starscourge-heirloom" oninput="talisman()"
name="equipment">
<label for="starscourge-heirloom">Starscourge Heirloom</label>
</div>
<aside>+5 str.</aside>
</li>
<li>
<div>
<input class="talisman" type="checkbox" id="two-fingers-heirloom" oninput="talisman()"
name="equipment">
<label for="two-fingers-heirloom">Two Fingers Heirloom</label>
</div>
<aside>+5 fth.</aside>
</li>
<li>
<div>
<input class="talisman" type="checkbox" id="millicents-prosthesis" oninput="talisman()"
name="equipment">
<label for="millicents-prosthesis">Millicent's Prosthesis</label>
</div>
<aside>+5 arc.</aside>
</li>
</ul> </ul>
</article> </article>
<!-- equipment --> <!-- helms -->
<article> <article>
<ul> <ul id="helms">
<li> <li>
<b>Equipment (not currently functional)</b> <b>Helms</b>
</li> </li>
<hr> <hr>
<!-- helms -->
<li> <li>
<details> <div>
<summary>Helms</summary> <input type="radio" name="equipment" id="helmNone" onclick="update()" checked>
<ul> <label for="">None</label>
<li> </div>
<div> <aside></aside>
<input type="radio" id="none" oninput="update()" name="helm">
<label for="none">None</label>
</div>
</li>
<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-helm" oninput="update()" name="helm">
<label for="haligtree-helm">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="queen" oninput="update()" name="helm">
<label for="queen">Queen's Crescent Crown</label>
</div>
</li>
<li>
<div>
<input type="radio" id="silver-tear" oninput="update()" name="helm">
<label for="silver-tear">Silver Tear Mask</label>
</div>
</li>
<li>
<div>
<input type="radio" id="twinsage-crown" oninput="update()" name="helm">
<label for="twinsage-crown">Twinsage Glintstone Crown</label>
</div>
</li>
<li>
<div>
<input type="radio" id="okina-mask" oninput="update()" name="helm">
<label for="okina-mask">Okina Mask</label>
</div>
</li>
<li>
<div>
<input type="radio" id="haima" oninput="update()" name="helm">
<label for="haima">Haima Glintstone Crown</label>
</div>
</li>
<li>
<div>
<input type="radio" id="haligtree-knight-helm" oninput="update()" name="helm">
<label for="haligtree-knight-helm">Haligtree Knight Helm</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>
</details>
</li> </li>
<!-- chest armor--> <template id="helm">
<li> <li>
<details> <div>
<summary>Chest Armor</summary> <input type="radio" id="" name="equipment" onclick="update()">
</details> <label for="">Placeholder</label>
</li> </div>
<aside></aside>
<!-- gauntlets--> </li>
<li> </template>
<details>
<summary>Gauntlets</summary>
</details>
</li>
<!-- leg armor -->
<li>
<details>
<summary>Leg Armor</summary>
</details>
</li>
</ul> </ul>
</article> </article>
</div> </div>

View File

@ -1,3 +0,0 @@
function nameToId(name) {
return name.toLowerCase().replace(" ", "-");
}

View File

@ -8,6 +8,46 @@ const TALISMANS = fetch("/data/talismans.json")
.then(data => data.talismans) .then(data => data.talismans)
.catch(error => console.log(error)); .catch(error => console.log(error));
const HELMS = fetch("data/equipment.json")
.then(response => response.json())
.then(data => data.helms)
.catch(error => console.log(error));
const STAT_SHORT_NAMES = [
"vig.",
"mnd.",
"end.",
"str.",
"dex.",
"int.",
"fth.",
"arc."
]
async function init() {
// load and show helms
let helms = await HELMS;
helms = helms.filter(helm => helm.stats != null && helm.stats != undefined);
let helmTemplate = document.getElementById("helm");
let helmList = document.getElementById("helms");
helms.forEach(helm => {
cloneTemplate(helmTemplate, helmList, helm);
});
// load and show talismans
let talismans = await TALISMANS;
talismans = talismans.filter(talisman => talisman.stats != null && talisman.stats != undefined);
let talismanTemplate = document.getElementById("talisman");
let talismanList = document.getElementById("talismans");
talismans.forEach(talisman => {
cloneTemplate(talismanTemplate, talismanList, talisman);
});
update();
}
async function update() { async function update() {
// get inputted stats // get inputted stats
let desired = [...document.getElementsByName("desired-stat")].map( let desired = [...document.getElementsByName("desired-stat")].map(
@ -17,7 +57,7 @@ async function update() {
} }
) )
let items = itemStats(await TALISMANS); let items = itemStats((await TALISMANS).concat(await HELMS));
// calculate best class // calculate best class
let sorted = sortClasses(await CLASSES, desired); let sorted = sortClasses(await CLASSES, desired);
@ -41,6 +81,15 @@ async function update() {
elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + items[i]); elem.value = ((desired[i] > best.stats[i] ? desired[i] : best.stats[i]) + items[i]);
// elem.style.color = IS_RADAGON[i] && virtual[i] ? "firebrick" : !IS_RADAGON[i] && virtual[i] ? "royalblue" : "unset"; // elem.style.color = IS_RADAGON[i] && virtual[i] ? "firebrick" : !IS_RADAGON[i] && virtual[i] ? "royalblue" : "unset";
}); });
// update talismans
let talismans = [...document.getElementsByClassName("talisman")]
if (talismans.filter(checkbox => checkbox.checked).length >= 4) {
talismans.forEach(checkbox => checkbox.disabled = !checkbox.checked);
} else {
talismans.forEach(checkbox => checkbox.disabled = false);
}
} }
function statDelta(classStats, desiredStats) { function statDelta(classStats, desiredStats) {
@ -67,20 +116,34 @@ function itemStats(relevantItems) {
return relevant.reduce((total, item) => total.map((stat, i) => stat += item.stats[i]), [0, 0, 0, 0, 0, 0, 0, 0]); return relevant.reduce((total, item) => total.map((stat, i) => stat += item.stats[i]), [0, 0, 0, 0, 0, 0, 0, 0]);
} }
function talisman() { function clearAll() {
let talismans = [...document.getElementsByClassName("talisman")] document.getElementsByName("desired-stat").forEach(elem => { elem.value = null });
[...document.getElementsByName("equipment")].forEach(elem => { elem.checked = false });
if (talismans.filter(checkbox => checkbox.checked).length >= 4) { document.getElementById("helmNone").checked = true;
talismans.forEach(checkbox => checkbox.disabled = !checkbox.checked);
} else {
talismans.forEach(checkbox => checkbox.disabled = false);
}
update(); update();
} }
function clearAll() { function statsDescription(stats) {
document.getElementsByName("desired-stat").forEach(elem => { elem.value = null }); return stats.reduce((total, stat, i) => {
[...document.getElementsByClassName("talisman")].forEach(elem => { elem.checked = false }); return stat ? (total + " +" + stat + " " + STAT_SHORT_NAMES[i]) : total;
update(); }, "");
}
function cloneTemplate(template, destination, item) {
let clone = template.content.cloneNode(true);
let li = clone.children[0]
let div = li.children[0];
let inputElement = div.children[0];
let labelElement = div.children[1]
inputElement.id = item.id;
labelElement.for = item.id;
labelElement.innerHTML = item.name;
let aside = li.children[1];
aside.innerHTML = statsDescription(item.stats);
destination.appendChild(clone);
} }

View File

@ -269,6 +269,10 @@ button {
list-style: none; list-style: none;
} }
.app li * {
flex-grow: 50%;
}
.app .stat { .app .stat {
text-align: center; text-align: center;
-webkit-appearance: none; -webkit-appearance: none;