344 lines
16 KiB
HTML
344 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html scroll-behavior="smooth">
|
|
<head>
|
|
<!-- nunito font, copying wynndata -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="icon" href="favicon.png">
|
|
<link rel="manifest" href="manifest.json">
|
|
<title>Wynn Clientside</title>
|
|
</head>
|
|
<body class="all">
|
|
<div class="header" id="header">
|
|
Wynn build calculator
|
|
</div>
|
|
<div class="center" id="header2">
|
|
<p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with Atlas Inc (JavaScript required to function, nothing works without js)</p>
|
|
<p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
|
|
</div>
|
|
<div class="center" id="credits">
|
|
<a href="credits.txt" class="link">Additional credits</a>
|
|
</div>
|
|
<div class="equipment">
|
|
<div class="left" style="grid-column:1/span 2;grid-row:1">
|
|
<table>
|
|
<tr>
|
|
<th class="right">
|
|
<label>Equipments</label>
|
|
</th>
|
|
<th>
|
|
<label>Powdering</label>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="helmet-choice">Helmet:</label>
|
|
<input list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
|
|
<datalist id="helmet-items">
|
|
</datalist>
|
|
</td>
|
|
<td>
|
|
<div id="helmet-slots">
|
|
X slots
|
|
</div>
|
|
<div>
|
|
<input type="text" id="helmet-powder" name="helmet-powder"/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="chestplate-choice">Chestplate:</label>
|
|
<input list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" />
|
|
<datalist id="chestplate-items">
|
|
</datalist>
|
|
</td>
|
|
<td>
|
|
<div id="chestplate-slots">
|
|
X slots
|
|
</div>
|
|
<div>
|
|
<input type="text" id="chestplate-powder" name="chestplate-powder" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="leggings-choice">Leggings:</label>
|
|
<input list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" />
|
|
<datalist id="leggings-items">
|
|
</datalist>
|
|
</td>
|
|
<td>
|
|
<div id="leggings-slots">
|
|
X slots
|
|
</div>
|
|
<div>
|
|
<input type="text" id="leggings-powder" name="leggings-powder" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="boots-choice">Boots:</label>
|
|
<input list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" />
|
|
<datalist id="boots-items">
|
|
</datalist>
|
|
</td>
|
|
<td>
|
|
<div id="boots-slots">
|
|
X slots
|
|
</div>
|
|
<div style="grid-column:1;grid-row:4">
|
|
<input type="text" id="boots-powder" name="boots-powder"/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="ring1-choice">Ring 1:</label>
|
|
<input list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/>
|
|
<datalist id="ring1-items">
|
|
</datalist>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="ring2-choice">Ring 2:</label>
|
|
<input list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" />
|
|
<datalist id="ring2-items">
|
|
</datalist>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="bracelet-choice">Bracelet:</label>
|
|
<input list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" />
|
|
<datalist id="bracelet-items">
|
|
</datalist>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="necklace-choice">Necklace:</label>
|
|
<input list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
|
|
<datalist id="necklace-items">
|
|
</datalist>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="right">
|
|
<br/>
|
|
<label for="weapon-choice">Weapon:</label>
|
|
<input list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value=""/>
|
|
<datalist id="weapon-items">
|
|
</datalist>
|
|
</td>
|
|
<td>
|
|
<div id="weapon-slots">
|
|
X slots
|
|
</div>
|
|
<div>
|
|
<input type="text" id="weapon-powder" name="weapon-powder" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<br/>
|
|
<button class = "button" id = "calc-button" onclick = "calculateBuild()">
|
|
Update Items (Resets stats)
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<br/>
|
|
<button class = "reset" id = "reset-button" onclick = "resetFields()">
|
|
Reset
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="center" style="grid-column:3;grid-row:1">
|
|
<div class = "center build-overall" id = "build-overall">
|
|
<p class="itemcenter">Overall Build Stats:<p>
|
|
<div class = "center" id = "build-overall-stats"></div>
|
|
</div>
|
|
</div>
|
|
<div class="center" style="grid-column:4;">
|
|
<div class="spell-info" style="grid-row:1;">
|
|
<div class="center" id="build-melee-statsAvg">melee</div>
|
|
</div>
|
|
<div class="spell-info" style="grid-row:1;">
|
|
<div class="center" id="spell0-infoAvg">spell1</div>
|
|
</div>
|
|
<div class="spell-info" style="grid-row:2">
|
|
<div class="center" id="spell1-infoAvg">spell2</div>
|
|
</div>
|
|
<div class="spell-info" style="grid-row:3">
|
|
<div class="center" id="spell2-infoAvg">spell3</div>
|
|
</div>
|
|
<div class="spell-info" style="grid-row:4">
|
|
<div class="center" id="spell3-infoAvg">spell4</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center" id="summary-box">
|
|
Summary:
|
|
</div>
|
|
<div class="skillpoints">
|
|
<div class="center" style="grid-column:1;grid-row:1">
|
|
<div>
|
|
<label for="str-skp" class="skpLabel">Strength:</label>
|
|
<input type="number" id="str-skp" name="str-skp" value="0" class="skpInput"/>
|
|
</div>
|
|
<div id="str-skp-assign">
|
|
Manually Assigned: 0
|
|
</div>
|
|
<div id="str-skp-base">
|
|
Original Value: 0
|
|
</div>
|
|
<div id ="str-skp-pct">
|
|
</div>
|
|
</div>
|
|
<div class="center" style="grid-column:2;grid-row:1">
|
|
<div>
|
|
<label for="dex-skp" class="skpLabel">Dexterity:</label>
|
|
<input type="number" id="dex-skp" name="dex-skp" value="0" class="skpInput"/>
|
|
</div>
|
|
<div id="dex-skp-assign">
|
|
Manually Assigned: 0
|
|
</div>
|
|
<div id="dex-skp-base">
|
|
Original Value: 0
|
|
</div>
|
|
<div id ="dex-skp-pct">
|
|
</div>
|
|
</div>
|
|
<div class="center" style="grid-column:3;grid-row:1">
|
|
<div>
|
|
<label for="int-skp" class="skpLabel">Intelligence:</label>
|
|
<input type="number" id="int-skp" name="int-skp" value="0" class="skpInput"/>
|
|
</div>
|
|
<div id="int-skp-assign">
|
|
Manually Assigned: 0
|
|
</div>
|
|
<div id="int-skp-base">
|
|
Original Value: 0
|
|
</div>
|
|
<div id ="int-skp-pct">
|
|
</div>
|
|
</div>
|
|
<div class="center" style="grid-column:4;grid-row:1">
|
|
<div>
|
|
<label for="def-skp" class="skpLabel">Defense:</label>
|
|
<input type="number" id="def-skp" name="def-skp" value="0" class="skpInput"/>
|
|
</div>
|
|
<div id="def-skp-assign">
|
|
Manually Assigned: 0
|
|
</div>
|
|
<div id="def-skp-base">
|
|
Original Value: 0
|
|
</div>
|
|
<div id ="def-skp-pct">
|
|
</div>
|
|
</div>
|
|
<div class="center" style="grid-column:5;grid-row:1">
|
|
<div>
|
|
<label for="agi-skp" class="skpLabel">Agility:</label>
|
|
<input type="number" id="agi-skp" name="agi-skp" value="0" class="skpInput"/>
|
|
</div>
|
|
<div id="agi-skp-assign">
|
|
Manually Assigned: 0
|
|
</div>
|
|
<div id="agi-skp-base">
|
|
Original Value: 0
|
|
</div>
|
|
<div id ="agi-skp-pct">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<button class = "button" id = "update-button" onclick = "updateStats()">
|
|
Update Stats
|
|
</button>
|
|
</div>
|
|
<div class = "build">
|
|
<div class = "center build-helmet" id = "build-helmet" style = "grid-column:1;grid-row:1">
|
|
<div class = "center" id = "build-helmet-stats"></div>
|
|
</div>
|
|
<div class = "center build-chestplate" id = "build-chestplate" style = "grid-column:2;grid-row:1">
|
|
<div class = "center" id = "build-chestplate-stats"></div>
|
|
</div>
|
|
<div class = "center build-leggings" id = "build-leggings" style = "grid-column:3;grid-row:1">
|
|
<div class = "center" id = "build-leggings-stats"></div>
|
|
</div>
|
|
<div class = "center build-boots" id = "build-boots" style = "grid-column:4;grid-row:1">
|
|
<div class = "center" id = "build-boots-stats"></div>
|
|
</div>
|
|
<div class = "center build-ring1" id = "build-ring1" style = "grid-column:1;grid-row:2">
|
|
<div class = "center" id = "build-ring1-stats"></div>
|
|
</div>
|
|
<div class = "center build-ring2" id = "build-ring2" style = "grid-column:2;grid-row:2">
|
|
<div class = "center" id = "build-ring2-stats"></div>
|
|
</div>
|
|
<div class = "center build-leggings" id = "build-bracelet" style = "grid-column:3;grid-row:2">
|
|
<div class = "center" id = "build-bracelet-stats"></div>
|
|
</div>
|
|
<div class = "center build-boots" id = "build-necklace" style = "grid-column:4;grid-row:2">
|
|
<div class = "center" id = "build-necklace-stats"></div>
|
|
</div>
|
|
<div class = "center build-weapon" id = "build-weapon" style = "grid-column:1;grid-row:3">
|
|
<div class = "center" id = "build-weapon-stats"></div>
|
|
</div>
|
|
<div class = "center build-order" id = "build-order" style = "grid-column:2;grid-row:3">
|
|
</div>
|
|
<div class = "center build-melee-stats" id = "build-melee-stats" style = "grid-column:3;grid-row:3">
|
|
</div>
|
|
<div class = "center build-defense-stats" id = "build-defense-stats" style = "grid-column:4;grid-row:3">
|
|
</div>
|
|
</div>
|
|
<div class = "spells">
|
|
<div class = "center spell-info" id = "spell0" style = "grid-column:1;grid-row:1">
|
|
<!--div class = "center" id = "spell0-name">Spell 1</div-->
|
|
<div class = "center" id = "spell0-info">Spell 1</div>
|
|
</div>
|
|
<div class = "center spell-info" id = "spell1" style = "grid-column:2;grid-row:1">
|
|
<!--div class = "center" id = "spell1-name">Spell 2</div-->
|
|
<div class = "center" id = "spell1-info">Spell 2</div>
|
|
</div>
|
|
<div class = "center spell-info" id = "spell2" style = "grid-column:3;grid-row:1">
|
|
<!--div class = "center" id = "spell2-name">Spell 3</div-->
|
|
<div class = "center" id = "spell2-info">Spell 3</div>
|
|
</div>
|
|
<div class = "center spell-info" id = "spell3" style = "grid-column:4;grid-row:1">
|
|
<!--div class = "center" id = "spell3-name">Spell 4</div-->
|
|
<div class = "center" id = "spell3-info">Spell 4</div>
|
|
</div>
|
|
</div>
|
|
<div class="misc">
|
|
<div class = "center set-info" id = "set-info-div" style = "grid-column:1;grid-row:1">
|
|
<div class = "center" id = "set-info">Set info</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="utils.js"></script>
|
|
<script type="text/javascript" src="skillpoints.js"></script>
|
|
<script type="text/javascript" src="damage_calc.js"></script>
|
|
<script type="text/javascript" src="display.js"></script>
|
|
<script type="text/javascript" src="build.js"></script>
|
|
<script type="text/javascript" src="load.js"></script>
|
|
<script type="text/javascript" src="test.js"></script>
|
|
</body>
|
|
</html>
|