<!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: hppeng and ferricles (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">Additional credits</a> </div> <div class="equipment"> <div class="center" style="grid-column:1;grid-row:1"> <div> <label for="helmet-choice">Helmet:</label> <input list="helmet-items" id="helmet-choice" name="helmet-choice" value="No Helmet"/> <datalist id="helmet-items"> </datalist> </div> <div id="helmet-slots"> X slots </div> <div> <label for="helmet-powder">Powdering:</label> <input type="text" id="helmet-powder" name="helmet-powder"/> </div> </div> <div class="center" style="grid-column:2;grid-row:1"> <div> <label for="chestplate-choice">Chestplate:</label> <input list="chestplate-items" id="chestplate-choice" name="chestplate-choice" value="No Chestplate"/> <datalist id="chestplate-items"> </datalist> </div> <div id="chestplate-slots"> X slots </div> <div> <label for="chestplate-powder">Powdering:</label> <input type="text" id="chestplate-powder" name="chestplate-powder" /> </div> </div> <div class="center" style="grid-column:3;grid-row:1"> <div> <label for="leggings-choice">Leggings:</label> <input list="leggings-items" id="leggings-choice" name="leggings-choice" value="No Leggings"/> <datalist id="leggings-items"> </datalist> </div> <div id="leggings-slots"> X slots </div> <div> <label for="leggings-powder">Powdering:</label> <input type="text" id="leggings-powder" name="leggings-powder" /> </div> </div> <div class="center" style="grid-column:4;grid-row:1"> <div id="boots"> <label for="boots-choice">Boots:</label> <input list="boots-items" id="boots-choice" name="boots-choice" value="No Boots"/> <datalist id="boots-items"> </datalist> </div> <div id="boots-slots"> X slots </div> <div> <label for="boots-powder">Powdering:</label> <input type="text" id="boots-powder" name="boots-powder" /> </div> </div> <div class="center" style="grid-column:1;grid-row:2"> <label for="ring1-choice">Ring 1:</label> <input list="ring1-items" id="ring1-choice" name="ring1-choice" value="No Ring 1"/> <datalist id="ring1-items"> </datalist> </div> <div class="center" style="grid-column:2;grid-row:2"> <label for="ring2-choice">Ring 2:</label> <input list="ring2-items" id="ring2-choice" name="ring2-choice" value="No Ring 2"/> <datalist id="ring2-items"> </datalist> </div> <div class="center" style="grid-column:3;grid-row:2"> <label for="bracelet-choice">Bracelet:</label> <input list="bracelet-items" id="bracelet-choice" name="bracelet-choice" value="No Bracelet"/> <datalist id="bracelet-items"> </datalist> </div> <div class="center" style="grid-column:4;grid-row:2"> <label for="necklace-choice">Necklace:</label> <input list="necklace-items" id="necklace-choice" name="necklace-choice" value="No Necklace"/> <datalist id="necklace-items"> </datalist> </div> <div class="center" style="grid-column:1;grid-row:3"> <label for="weapon-choice">Weapon:</label><br> <input list="weapon-items" id="weapon-choice" name="weapon-choice" value=""/> <datalist id="weapon-items"> </datalist> </div> <div class="center" style="grid-column:2;grid-row:3"> <div id="weapon-slots"> X slots </div> <div> <label for="weapon-powder">Weapon powder:</label> <input type="text" id="weapon-powder" name="weapon-powder" /> </div> </div> <div class="center" style="grid-column:3;grid-row:3"> <button class = "button" id = "calc-button" onclick = "calculateBuild()"> Update Items (Resets stats) </button> </div> <div class="center" style="grid-column:4;grid-row:3"> <button class = "reset" id = "reset-button" onclick = "resetFields()"> Reset </button> </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" id = "build-melee-stats" style = "grid-column:3;grid-row:3"> </div> <div class = "center build-overall" id = "build-overall" style = "grid-column:4;grid-row:3"> <p class="itemcenter">Overall Build Stats:<p> <div class = "center" id = "build-overall-stats"></div> </div> <!--div class = "center" 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> <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>