This commit is contained in:
Frederik Palmø 2022-03-25 14:40:03 +01:00
parent 164d34eefc
commit e915935cc8
5 changed files with 142 additions and 5 deletions

View File

@ -93,14 +93,14 @@
<li> <li>
<div> <div>
<input type="radio" id="sort-physical" name="sorting-order" onclick="update()"> <input type="radio" id="sort-physical" name="sorting-order" onclick="update()" checked>
<label for="sort-physical">Greatest Physical Negation</label> <label for="sort-physical">Greatest Physical Negation</label>
</div> </div>
</li> </li>
<li> <li>
<div> <div>
<input type="radio" id="sort-elemental" name="sorting-order" onclick="update()" checked> <input type="radio" id="sort-elemental" name="sorting-order" onclick="update()">
<label for="sort-elemental">Greatest Elemental Negation</label> <label for="sort-elemental">Greatest Elemental Negation</label>
</div> </div>
</li> </li>

View File

@ -1,50 +1,60 @@
[ [
{ {
"id": "vagabond",
"name": "Vagabond", "name": "Vagabond",
"level": 9, "level": 9,
"stats": [15, 10, 11, 14, 13, 9, 9, 7] "stats": [15, 10, 11, 14, 13, 9, 9, 7]
}, },
{ {
"id": "warrior",
"name": "Warrior", "name": "Warrior",
"level": 8, "level": 8,
"stats": [11, 12, 11, 10, 16, 10, 8, 9] "stats": [11, 12, 11, 10, 16, 10, 8, 9]
}, },
{ {
"id": "hero",
"name": "Hero", "name": "Hero",
"level": 7, "level": 7,
"stats": [14, 9, 12, 16, 9, 7, 8, 11] "stats": [14, 9, 12, 16, 9, 7, 8, 11]
}, },
{ {
"id": "bandit",
"name": "Bandit", "name": "Bandit",
"level": 5, "level": 5,
"stats": [10, 11, 10, 9, 13, 9, 8, 14] "stats": [10, 11, 10, 9, 13, 9, 8, 14]
}, },
{ {
"id": "astrologer",
"name": "Astrologer", "name": "Astrologer",
"level": 6, "level": 6,
"stats": [9, 15, 9, 8, 12, 16, 7, 9] "stats": [9, 15, 9, 8, 12, 16, 7, 9]
}, },
{ {
"id": "prophet",
"name": "Prophet", "name": "Prophet",
"level": 7, "level": 7,
"stats": [10, 14, 8, 11, 10, 7, 16, 10] "stats": [10, 14, 8, 11, 10, 7, 16, 10]
}, },
{ {
"id": "samurai",
"name": "Samurai", "name": "Samurai",
"level": 9, "level": 9,
"stats": [12, 11, 13, 12, 15, 9, 8, 8] "stats": [12, 11, 13, 12, 15, 9, 8, 8]
}, },
{ {
"id": "prisoner",
"name": "Prisoner", "name": "Prisoner",
"level": 9, "level": 9,
"stats": [11, 12, 11, 11, 14, 14, 6, 9] "stats": [11, 12, 11, 11, 14, 14, 6, 9]
}, },
{ {
"id": "confessor",
"name": "Confessor", "name": "Confessor",
"level": 10, "level": 10,
"stats": [10, 13, 10, 12, 12, 9, 14, 9] "stats": [10, 13, 10, 12, 12, 9, 14, 9]
}, },
{ {
"id": "wretch",
"name": "Wretch", "name": "Wretch",
"level": 1, "level": 1,
"stats": [10, 10, 10, 10, 10, 10, 10, 10] "stats": [10, 10, 10, 10, 10, 10, 10, 10]

View File

@ -28,7 +28,7 @@
<div class="cards"> <div class="cards">
<article> <article>
<a href="/planner.html"> <a href="/planner.html">
<h3>Build Planner (todo)</h3> <h3>Build Planner</h3>
<br> <br>
<p>Create a new build.</p> <p>Create a new build.</p>
</a> </a>

View File

@ -10,9 +10,11 @@
<title>Erdtree - Build Planner</title> <title>Erdtree - Build Planner</title>
<meta name="description" content=""> <meta name="description" content="">
<script src="script/planner.js"></script>
</head> </head>
<body> <body onload="init()">
<nav> <nav>
<h1><a href="/">Elden Ring Build Planner</a></h1> <h1><a href="/">Elden Ring Build Planner</a></h1>
<ul> <ul>
@ -21,14 +23,101 @@
</nav> </nav>
<header> <header>
<h1>Build Planner</h1>
</header> </header>
<main> <main>
<div class="app">
<!-- equipment -->
<article>
<ul>
<li>
<b>Equipment</b>
</li>
<hr>
<li><b>Weapons</b></li>
<hr>
<li><b>Armor</b></li>
<hr>
<li><b>Talismans</b></li>
<hr>
<li><b>Spells</b></li>
</ul>
</article>
<!-- stats -->
<article>
<ul>
<li><b>Statistics</b></li>
<hr>
<li>
<label for="class"><b>Starting Class</b></label>
<select id="class" onchange="update()"></select>
</li>
<li>
<label for="level"><b>Level</b></label>
<input type="text" id="level" class="stat" disabled>
</li>
<li><br></li>
<li>
<label for="vigor">Vigor</label>
<input type="text" id="vigor" class="stat" name="stat">
</li>
<li>
<label for="mind">Mind</label>
<input type="text" id="mind" class="stat" name="stat">
</li>
<li>
<label for="endurance">Endurance</label>
<input type="text" id="endurance" class="stat" name="stat">
</li>
<li>
<label for="strength">Strength</label>
<input type="text" id="strength" class="stat" name="stat">
</li>
<li>
<label for="dexterity">Dexterity</label>
<input type="text" id="dexterity" class="stat" name="stat">
</li>
<li>
<label for="intelligence">Intelligence</label>
<input type="text" id="intelligence" class="stat" name="stat">
</li>
<li>
<label for="faith">Faith</label>
<input type="text" id="faith" class="stat" name="stat">
</li>
<li>
<label for="arcane">Arcane</label>
<input type="text" id="arcane" class="stat" name="stat">
</li>
</ul>
</article>
<!-- misc. -->
<article>
<ul></ul>
</article>
</div>
</main> </main>
<footer> <footer>
<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> </footer>
</body> </body>

38
src/script/planner.js Normal file
View File

@ -0,0 +1,38 @@
const CLASSES = fetch("/data/classes.json")
.then(response => response.json())
.catch(error => console.log(error));
let startingClass;
async function init() {
await populate();
await update();
}
async function update() {
// get current starting class
let classSelect = document.getElementById("class");
let currentClass = (await CLASSES).find(c => c.id == classSelect.options[classSelect.selectedIndex].value);
let prevClass = { ...startingClass };
if (prevClass.id != currentClass) {
// update statistics
[...document.getElementsByName("stat")].forEach((stat, i) => {
stat.value = parseInt((stat.value || 0) == prevClass.stats[i] ? currentClass.stats[i] : stat.value);
});
document.getElementById("level").value = [...document.getElementsByName("stat")].reduce((total, stat) => total + parseInt(stat), 0) - 79;
}
startingClass = currentClass;
}
async function populate() {
let select = document.getElementById("class");
CLASSES.then(classes => {
classes.forEach(c => {
let option = new Option(c.name, c.id);
select.options.add(option);
});
select.selectedIndex = 0;
startingClass = classes[0];
});
}