vodofrede/erdtree
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

removed build planner

Browse Source
This commit is contained in:
Frederik Palmø 2022-06-03 13:34:19 +02:00
parent dc58742aac
commit b73a061f1e
7 changed files with 2 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/armor.html
View File

@ -31,7 +31,6 @@
<h3><a href="/class.html">Starting Class</a></h3>
<h3><a href="/armor.html" class="current">Armor Optimizer</a></h3>
<h3><a href="/weapons.html">Weapon Finder</a></h3>
<h3><a href="/planner.html">Build Planner</a></h3>
</nav>
<header>
<h1>Armor Optimizer</h1>

1
src/class.html
View File

@ -31,7 +31,6 @@
<h3><a href="/class.html" class="current">Starting Class</a></h3>
<h3><a href="/armor.html">Armor Optimizer</a></h3>
<h3><a href="/weapons.html">Weapon Finder</a></h3>
<h3><a href="/planner.html">Build Planner</a></h3>
</nav>
<header>
<h1>Class Optimizer</h1>

10
src/index.html
View File

@ -27,7 +27,6 @@
<h3><a href="/class.html">Starting Class</a></h3>
<h3><a href="/armor.html">Armor Optimizer</a></h3>
<h3><a href="/weapons.html">Weapon Finder</a></h3>
<h3><a href="/planner.html">Build Planner</a></h3>
</nav>
<header>
<h1>Create, view and optimize builds for Elden Ring.</h1>
@ -58,14 +57,6 @@
</span>
</article>
</a>
<a href="/planner.html">
<article>
<h2>Build Planner (in progress)</h2>
<span>
<p>Create a new build.</p>
</span>
</article>
</a>
<div>
<h3>News</h3>
<ul>
@ -78,7 +69,6 @@
website.
</p>
</div>
<div></div>
</div>
</main>
<footer>

278
src/planner.html
View File

@ -1,278 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<!-- metadata -->
<meta charset="utf-8" />
<meta name="language" content="english" />
<meta http-equiv="content-language" content="en-us" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style/main.css" />
<!-- title and description -->
<title>Build Planner - Erdtree</title>
<link rel="icon" type="image/x-icon " href="/resource/favicon.ico" />
<meta name="description" content="Build Planner for Elden Ring - With import and export" />
<meta name="author" content="vodofrede" />
<meta property="og:title" content="Build Planner - Erdtree" />
<meta property="og:description" content="Build Planner for Elden Ring - With import and export" />
<meta property="og:url" content="https://erdtree.palmoe.dk/planner" />
<!-- scripts -->
<script src="script/planner.js"></script>
</head>
<body onload="init()">
<nav>
<h3><a href="/">Home</a></h3>
<h3><a href="/class.html">Starting Class</a></h3>
<h3><a href="/armor.html">Armor Optimizer</a></h3>
<h3><a href="/weapons.html">Weapon Finder</a></h3>
<h3><a href="/planner.html" class="current">Build Planner</a></h3>
</nav>
<header>
<h1>Build Planner</h1>
</header>
<main>
<div class="app">
<!-- Class -->
<article style="flex-basis: 20%; max-width: 320px">
<div>
<b>Character</b>
<a href="/class.html">Optimize</a>
</div>
<hr />
<div>
<b>Name</b>
<input id="name" onchange="update()" />
</div>
<div>
<label for="class"><b>Starting Class</b></label>
<div>
<select id="class" onchange="update()">
<option id="wretch" selected>Wretch</option>
<option id="vagabond">Vagabond</option>
<option id="warrior">Warrior</option>
<option id="hero">Hero</option>
<option id="bandit">Bandit</option>
<option id="astrologer">Astrologer</option>
<option id="prophet">Prophet</option>
<option id="samurai">Samurai</option>
<option id="prisoner">Prisoner</option>
<option id="confessor">Confessor</option>
</select>
</div>
</div>
<div>
<label><b>Level</b></label>
<span>
<input type="number" id="final-level" disabled />
</span>
</div>
<div>
<label for="vigor">Vigor</label>
<span>
<input type="number" id="vigor" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<div>
<label for="mind">Mind</label>
<span>
<input type="number" id="mind" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<div>
<label for="endurance">Endurance</label>
<span>
<input type="number" id="endurance" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<div>
<label for="strength">Strength</label>
<span>
<input type="number" id="strength" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<div>
<label for="dexterity">Dexterity</label>
<span>
<input type="number" id="dexterity" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<div>
<label for="intelligence">Intelligence</label>
<span>
<input type="number" id="intelligence" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<div>
<label for="faith">Faith</label>
<span>
<input type="number" id="faith" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<div>
<label for="arcane">Arcane</label>
<span>
<input type="number" id="arcane" name="final" min="0" max="99" onchange="update()" />
</span>
</div>
<hr />
<b>Import/Export</b>
<div>
<input type="file" id="import" />
<button>Export</button>
</div>
</article>
<!-- equipment -->
<article style="flex-basis: 20%; max-width: 450px">
<b>Equipment</b>
<hr />
<b>Weapons & Shields</b>
<template id="picker">
<div class="popup">
<input type="image" src="/resource/icon/standard.jpg" height="20px" />
</div>
</template>
<div>
<div>
<span>
<select id="lh1" name="weapon" onchange="update()"></select>
</span>
<span>
<img
id="lh1-img"
src="/resource/icon/standard.jpg"
alt="Infusion the for first weapon in the left hand"
width="20px"
/>
<select id="lh1-infusion" name="infusion"></select>
</span>
</div>
<div>
<span>
<select id="rh1" name="weapon" onchange="update()"></select>
</span>
<span>
<select id="rh1-infusion" name="infusion"></select>
<img
id="rh1-img"
src="/resource/icon/standard.jpg"
alt="Infusion the for first weapon in the right hand"
width="20px"
/>
</span>
</div>
</div>
<div>
<div>
<span>
<select id="lh2" name="weapon" onchange="update()"></select>
</span>
<span>
<img
id="lh2-img"
src="/resource/icon/standard.jpg"
alt="Infusion the for second weapon in the left hand"
width="20px"
/>
<select id="lh2-infusion" name="infusion"></select>
</span>
</div>
<div>
<span>
<select id="rh2" name="weapon" onchange="update()"></select>
</span>
<span>
<select id="rh2-infusion" name="infusion"></select>
<img
id="rh2-img"
src="/resource/icon/standard.jpg"
alt="Infusion for the second weapon in the right hand"
width="20px"
/>
</span>
</div>
</div>
<div>
<div>
<span>
<select id="lh3" name="weapon" onchange="update()"></select>
</span>
<span>
<img
id="lh3-img"
src="/resource/icon/standard.jpg"
alt="Infusion for the third weapon in the left hand"
width="20px"
/>
<select id="lh3-infusion" name="infusion"></select>
</span>
</div>
<div>
<span>
<select id="rh3" name="weapon" onchange="update()"></select>
</span>
<span>
<select id="rh3-infusion" name="infusion"></select>
<img
id="rh3-img"
src="/resource/icon/standard.jpg"
alt="Infusion for the third weapon in the right hand"
width="20px"
/>
</span>
</div>
</div>
<hr />
<b>Armor</b>
<div>
<label>Helmet</label>
<select id="helmet" name="armor" onchange="update()"></select>
</div>
<div>
<label>Chestpiece</label>
<select id="chestpiece" name="armor" onchange="update()"></select>
</div>
<div>
<label>Gauntlets</label>
<select id="gauntlets" name="armor" onchange="update()"></select>
</div>
<div>
<label>Leggings</label>
<select id="leggings" name="armor" onchange="update()"></select>
</div>
<hr />
<li><b>Talismans</b></li>
<div>
<label>Talisman #1</label>
<select id="talisman-1" name="talisman" onchange="update()"></select>
</div>
<div>
<label>Talisman #2</label>
<select id="talisman-2" name="talisman" onchange="update()"></select>
</div>
<div>
<label>Talisman #3</label>
<select id="talisman-3" name="talisman" onchange="update()"></select>
</div>
<div>
<label>Talisman #4</label>
<select id="talisman-4" name="talisman" onchange="update()"></select>
</div>
<hr />
<li><b>Spells</b></li>
</article>
</div>
<div>
<h2 style="text-align: center">Explanation & Usage</h2>
<p>This page is under development, don't expect everything to work perfectly.</p>
</div>
</main>
<footer>
<h5>
Erdtree Planner (<a href="https://git.palmoe.dk/vodofrede/erdtree"
>available under BSD-3-Clause license</a
>)
</h5>
<h5>© 2022 vodofrede</h5>
</footer>
</body>
</html>

130
src/script/planner.js
View File

@ -1,130 +0,0 @@
let HELMETS;
let CHESTPIECES;
let GAUNTLETS;
let LEGGINGS;
let WEAPONS;
let TALISMANS;
let EQUIPMENT;
let CLASSES;
let INFUSIONS;
let startingClass = "wretch";
let popupActive = false;
let populate = (select, items) => items.forEach(item => select.options.add(new Option(item.name, item.id)));
let selected = select => select.options[select.selectedIndex];
async function init() {
HELMETS = await fetch("/data/helmets.json").then(response => response.json());
CHESTPIECES = await fetch("/data/chestpieces.json").then(response => response.json());
GAUNTLETS = await fetch("/data/gauntlets.json").then(response => response.json());
LEGGINGS = await fetch("/data/leggings.json").then(response => response.json());
TALISMANS = await fetch("/data/talismans.json").then(response => response.json());
WEAPONS = await fetch("/data/weapons.json").then(response => response.json());
EQUIPMENT = { ...HELMETS, ...CHESTPIECES, ...GAUNTLETS, ...LEGGINGS, ...TALISMANS, ...WEAPONS };
CLASSES = await fetch("/data/classes.json").then(response => response.json());
INFUSIONS = await fetch("/data/infusions.json").then(response => response.json());
// populate selects
[...document.getElementsByName("weapon")].forEach(select => {
populate(select, Object.values(WEAPONS));
});
populate(document.getElementById("helmet"), Object.values(HELMETS));
populate(document.getElementById("chestpiece"), Object.values(CHESTPIECES));
populate(document.getElementById("gauntlets"), Object.values(GAUNTLETS));
populate(document.getElementById("leggings"), Object.values(LEGGINGS));
[...document.getElementsByName("talisman")].forEach(select => {
populate(select, Object.values(TALISMANS));
});
// override ctrl/cmd+s
document.addEventListener("keydown", event => {
if (!(event.isComposing || event.code === "229")) {
if ((event.ctrlKey || event.metaKey) && event.key == "s") {
event.preventDefault();
exportBuild();
}
}
});
update();
}
function update() {
// get current chosen starting class
let classSelect = document.getElementById("class");
let currentClass = CLASSES.find(c => c.id == classSelect.options[classSelect.selectedIndex].id);
// item stats
let itemStats = [...document.getElementsByName("armor"), ...document.getElementsByName("talisman")].reduce(
(stats, select) => {
let item = EQUIPMENT[select.options[select.selectedIndex].value];
return stats.map((stat, i) => (item.stats != undefined ? stat + item.stats[i] : stat));
},
[0, 0, 0, 0, 0, 0, 0, 0],
);
if (currentClass != startingClass) {
// reset stats if other class was chosen
[...document.getElementsByName("final")].forEach((el, i) => {
el.value = Math.min(currentClass.stats[i] + itemStats[i], 99);
});
startingClass = currentClass;
} else {
// clamp stat ranges
[...document.getElementsByName("final")].forEach((el, i) => {
el.value = Math.min(Math.max(currentClass.stats[i] + itemStats[i], el.value), 99);
});
}
// show only available infusions for each weapon
let weapons = [...document.getElementsByName("weapon")]
.map(sl => sl.options[sl.selectedIndex].value)
.map(id => WEAPONS[id]);
let infusions = [...document.getElementsByName("infusion")];
infusions
.map((inf, i) => [weapons[i], inf])
.forEach(([weapon, infusionSelect]) => {
infusionSelect.length = 0;
Object.keys(weapon.infusions).forEach(infusionId => {
let infusion = INFUSIONS[infusionId];
infusionSelect.options.add(new Option(infusion.name, infusion.id));
});
});
// update infusion icons
[...document.getElementsByName("infusion")].forEach(select => {});
// calculate total level
// document.getElementById("final-level").value = currentClass.level + additional.reduce((sum, n) => sum + n);
}
function importBuild(buildString) {}
function exportBuild() {
let classSelect = document.getElementById("class");
let itemStats = [...document.getElementsByName("armor"), ...document.getElementsByName("talisman")].reduce(
(stats, select) => {
let item = EQUIPMENT[selected(select).value];
return stats.map((stat, i) => (item.stats != undefined ? stat + item.stats[i] : stat));
},
[0, 0, 0, 0, 0, 0, 0, 0],
);
console.log(itemStats);
let build = {
name: document.getElementById("name").value,
class: classSelect.options[classSelect.selectedIndex].value,
stats: [...document.getElementsByName("final")].map((stat, i) => stat.value - itemStats[i]),
weapons: [...document.getElementsByName("weapon")].map(selected).map(w => w.value),
infusions: [...document.getElementsByName("infusion")].map(selected).map(i => i.value),
armor: [...document.getElementsByName("armor")].map(selected).map(a => a.value),
talismans: [...document.getElementsByName("talisman")].map(selected).map(t => t.value),
};
let file = new Blob([JSON.stringify(build, null, 4)], { type: "text/plain" });
let link = document.createElement("a");
link.href = URL.createObjectURL(file);
link.download = "build-" + (build.name || build.class.toLowerCase()) + ".json";
link.click();
}

4
src/style/main.css
View File

@ -258,7 +258,7 @@ select option {
}
.cards * {
flex-basis: 40%;
flex-basis: 30%;
}
.cards article {
@ -267,7 +267,7 @@ select option {
text-align: center;
flex-basis: 40%;
flex-basis: 20%;
padding: 0.8rem 0rem 0.9rem 0rem;
border: 2px solid var(--font-color);

1
src/weapons.html
View File

@ -31,7 +31,6 @@
<h3><a href="/class.html">Starting Class</a></h3>
<h3><a href="/armor.html">Armor Optimizer</a></h3>
<h3><a href="/weapons.html" class="current">Weapon Finder</a></h3>
<h3><a href="/planner.html">Build Planner</a></h3>
</nav>
<header>
<h1>Weapon Finder</h1>