Work on phone
|
@ -1,7 +1,9 @@
|
||||||
Damage calculator checking: https://its0x7.cf/build/
|
|
||||||
|
|
||||||
Theme and overall inspiration: Wynndata (Dukio)
|
Theme and overall inspiration: Wynndata (Dukio)
|
||||||
- https://wynndata.tk
|
- https://wynndata.tk
|
||||||
|
|
||||||
|
The game, of course
|
||||||
|
- wynncraft.com
|
||||||
|
|
||||||
Additional Contributors:
|
Additional Contributors:
|
||||||
- QuantumNep (Layout code/layout ideas)
|
- QuantumNep (Layout code/layout ideas)
|
||||||
|
- Atlas Inc discord (feedback, ideas, etc)
|
||||||
|
|
88
index.html
|
@ -6,6 +6,8 @@
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="wide.css"/>
|
||||||
|
<link rel="stylesheet" media="screen and (max-width: 1099px)" href="narrow.css"/>
|
||||||
<link rel="icon" href="favicon.png">
|
<link rel="icon" href="favicon.png">
|
||||||
<link rel="manifest" href="manifest.json">
|
<link rel="manifest" href="manifest.json">
|
||||||
<title>Wynn Clientside</title>
|
<title>Wynn Clientside</title>
|
||||||
|
@ -15,7 +17,7 @@
|
||||||
Wynn build calculator
|
Wynn build calculator
|
||||||
</div>
|
</div>
|
||||||
<div class="summary">
|
<div class="summary">
|
||||||
<div class="equipment" style="grid-column:1;grid-row:1">
|
<div class="equipment" style="grid-column:1/span 2;grid-row:1">
|
||||||
<div style="grid-column:1/span 2;grid-row:1">
|
<div style="grid-column:1/span 2;grid-row:1">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -29,63 +31,63 @@
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="helmet-choice">Helmet:</label>
|
<label for="helmet-choice">Helmet:</label>
|
||||||
<input list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
|
<input class="iteminput" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
|
||||||
<datalist id="helmet-items">
|
<datalist id="helmet-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label id="helmet-slots" for="helmet-powder">X slots</label>
|
<label id="helmet-slots" for="helmet-powder">X slots</label>
|
||||||
<input type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/>
|
<input class="iteminput" type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="chestplate-choice">Chestplate:</label>
|
<label for="chestplate-choice">Chestplate:</label>
|
||||||
<input list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" />
|
<input class="iteminput" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate" />
|
||||||
<datalist id="chestplate-items">
|
<datalist id="chestplate-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label id="chestplate-slots" for="chestplate-powder">X slots</label>
|
<label id="chestplate-slots" for="chestplate-powder">X slots</label>
|
||||||
<input type="text" id="chestplate-powder" name="chestplate-powder" />
|
<input class="iteminput" type="text" id="chestplate-powder" name="chestplate-powder" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="leggings-choice">Leggings:</label>
|
<label for="leggings-choice">Leggings:</label>
|
||||||
<input list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" />
|
<input class="iteminput" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings" />
|
||||||
<datalist id="leggings-items">
|
<datalist id="leggings-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label id="leggings-slots" for="leggings-powder">X slots</label>
|
<label id="leggings-slots" for="leggings-powder">X slots</label>
|
||||||
<input type="text" id="leggings-powder" name="leggings-powder" />
|
<input class="iteminput" type="text" id="leggings-powder" name="leggings-powder" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="boots-choice">Boots:</label>
|
<label for="boots-choice">Boots:</label>
|
||||||
<input list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" />
|
<input class="iteminput" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots" />
|
||||||
<datalist id="boots-items">
|
<datalist id="boots-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label id="boots-slots" for="boots-powder">X slots</label>
|
<label id="boots-slots" for="boots-powder">X slots</label>
|
||||||
<input type="text" id="boots-powder" name="boots-powder" />
|
<input class="iteminput" type="text" id="boots-powder" name="boots-powder" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<br>
|
<br>
|
||||||
<label for="weapon-choice">Weapon:</label>
|
<label for="weapon-choice">Weapon:</label>
|
||||||
<input list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value=""/>
|
<input class="iteminput" list="weapon-items" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value=""/>
|
||||||
<datalist id="weapon-items">
|
<datalist id="weapon-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<br>
|
<br>
|
||||||
<label id="weapon-slots" for="weapon-powder">X slots</label>
|
<label id="weapon-slots" for="weapon-powder">X slots</label>
|
||||||
<input type="text" id="weapon-powder" name="weapon-powder" />
|
<input class="iteminput" type="text" id="weapon-powder" name="weapon-powder" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
@ -100,7 +102,7 @@
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="ring1-choice">Ring 1:</label>
|
<label for="ring1-choice">Ring 1:</label>
|
||||||
<input list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/>
|
<input class="iteminput" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1"/>
|
||||||
<datalist id="ring1-items">
|
<datalist id="ring1-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
|
@ -108,7 +110,7 @@
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="ring2-choice">Ring 2:</label>
|
<label for="ring2-choice">Ring 2:</label>
|
||||||
<input list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" />
|
<input class="iteminput" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2" />
|
||||||
<datalist id="ring2-items">
|
<datalist id="ring2-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
|
@ -116,7 +118,7 @@
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="bracelet-choice">Bracelet:</label>
|
<label for="bracelet-choice">Bracelet:</label>
|
||||||
<input list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" />
|
<input class="iteminput" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet" />
|
||||||
<datalist id="bracelet-items">
|
<datalist id="bracelet-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
|
@ -124,7 +126,7 @@
|
||||||
<tr>
|
<tr>
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<label for="necklace-choice">Necklace:</label>
|
<label for="necklace-choice">Necklace:</label>
|
||||||
<input list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
|
<input class="iteminput" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
|
||||||
<datalist id="necklace-items">
|
<datalist id="necklace-items">
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</td>
|
||||||
|
@ -133,7 +135,7 @@
|
||||||
<td class="left">
|
<td class="left">
|
||||||
<br/>
|
<br/>
|
||||||
<label for="level-choice">Level:</label>
|
<label for="level-choice">Level:</label>
|
||||||
<input id="level-choice" name="level-choice" placeholder="106" value=""/>
|
<input class="iteminput" id="level-choice" name="level-choice" placeholder="106" value=""/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
@ -144,7 +146,7 @@
|
||||||
<td>
|
<td>
|
||||||
<br/>
|
<br/>
|
||||||
<button class = "button" id = "calc-button" onclick = "calculateBuild()">
|
<button class = "button" id = "calc-button" onclick = "calculateBuild()">
|
||||||
Update Items (Resets stats)
|
Update Items
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
@ -159,6 +161,12 @@
|
||||||
Copy Short
|
Copy Short
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
|
<td>
|
||||||
|
<br/>
|
||||||
|
<button class = "button" id = "share-button" onclick = "shareBuild()">
|
||||||
|
Copy For Sharing
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -169,13 +177,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center" style="grid-column:2">
|
<div class="build-overall-container">
|
||||||
<div class = "center build-overall" id = "build-overall">
|
<div class = "center build-overall" id = "build-overall">
|
||||||
<br/>
|
<br/>
|
||||||
<div class = "center" id = "build-overall-stats"></div>
|
<div class = "center" id = "build-overall-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center" style="grid-column:3;">
|
<div class="spell-info-container">
|
||||||
<div class="spell-info">
|
<div class="spell-info">
|
||||||
<div class="center" id="build-melee-statsAvg">melee</div>
|
<div class="center" id="build-melee-statsAvg">melee</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -200,7 +208,7 @@
|
||||||
<div class="center" style="grid-column:1;grid-row:1">
|
<div class="center" style="grid-column:1;grid-row:1">
|
||||||
<div>
|
<div>
|
||||||
<label for="str-skp" class="skpLabel">Strength:</label>
|
<label for="str-skp" class="skpLabel">Strength:</label>
|
||||||
<input type="number" id="str-skp" name="str-skp" value="0" class="skpInput"/>
|
<input class="skp-input" type="number" id="str-skp" name="str-skp" value="0" class="skpInput"/>
|
||||||
</div>
|
</div>
|
||||||
<div id="str-skp-assign">
|
<div id="str-skp-assign">
|
||||||
Manually Assigned: 0
|
Manually Assigned: 0
|
||||||
|
@ -214,7 +222,7 @@
|
||||||
<div class="center" style="grid-column:2;grid-row:1">
|
<div class="center" style="grid-column:2;grid-row:1">
|
||||||
<div>
|
<div>
|
||||||
<label for="dex-skp" class="skpLabel">Dexterity:</label>
|
<label for="dex-skp" class="skpLabel">Dexterity:</label>
|
||||||
<input type="number" id="dex-skp" name="dex-skp" value="0" class="skpInput"/>
|
<input class="skp-input" type="number" id="dex-skp" name="dex-skp" value="0" class="skpInput"/>
|
||||||
</div>
|
</div>
|
||||||
<div id="dex-skp-assign">
|
<div id="dex-skp-assign">
|
||||||
Manually Assigned: 0
|
Manually Assigned: 0
|
||||||
|
@ -228,7 +236,7 @@
|
||||||
<div class="center" style="grid-column:3;grid-row:1">
|
<div class="center" style="grid-column:3;grid-row:1">
|
||||||
<div>
|
<div>
|
||||||
<label for="int-skp" class="skpLabel">Intelligence:</label>
|
<label for="int-skp" class="skpLabel">Intelligence:</label>
|
||||||
<input type="number" id="int-skp" name="int-skp" value="0" class="skpInput"/>
|
<input class="skp-input" type="number" id="int-skp" name="int-skp" value="0" class="skpInput"/>
|
||||||
</div>
|
</div>
|
||||||
<div id="int-skp-assign">
|
<div id="int-skp-assign">
|
||||||
Manually Assigned: 0
|
Manually Assigned: 0
|
||||||
|
@ -242,7 +250,7 @@
|
||||||
<div class="center" style="grid-column:4;grid-row:1">
|
<div class="center" style="grid-column:4;grid-row:1">
|
||||||
<div>
|
<div>
|
||||||
<label for="def-skp" class="skpLabel">Defense:</label>
|
<label for="def-skp" class="skpLabel">Defense:</label>
|
||||||
<input type="number" id="def-skp" name="def-skp" value="0" class="skpInput"/>
|
<input class="skp-input" type="number" id="def-skp" name="def-skp" value="0" class="skpInput"/>
|
||||||
</div>
|
</div>
|
||||||
<div id="def-skp-assign">
|
<div id="def-skp-assign">
|
||||||
Manually Assigned: 0
|
Manually Assigned: 0
|
||||||
|
@ -256,7 +264,7 @@
|
||||||
<div class="center" style="grid-column:5;grid-row:1">
|
<div class="center" style="grid-column:5;grid-row:1">
|
||||||
<div>
|
<div>
|
||||||
<label for="agi-skp" class="skpLabel">Agility:</label>
|
<label for="agi-skp" class="skpLabel">Agility:</label>
|
||||||
<input type="number" id="agi-skp" name="agi-skp" value="0" class="skpInput"/>
|
<input class="skp-input" type="number" id="agi-skp" name="agi-skp" value="0" class="skpInput"/>
|
||||||
</div>
|
</div>
|
||||||
<div id="agi-skp-assign">
|
<div id="agi-skp-assign">
|
||||||
Manually Assigned: 0
|
Manually Assigned: 0
|
||||||
|
@ -274,54 +282,54 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class = "build">
|
<div class = "build">
|
||||||
<div class = "center build-helmet" id = "build-helmet" style = "grid-column:1;grid-row:1">
|
<div class = "center build-helmet" id = "build-helmet" style = "grid-item-1">
|
||||||
<div class = "center" id = "build-helmet-stats"></div>
|
<div class = "center" id = "build-helmet-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-chestplate" id = "build-chestplate" style = "grid-column:2;grid-row:1">
|
<div class = "center build-chestplate" id = "build-chestplate" style = "grid-item-2">
|
||||||
<div class = "center" id = "build-chestplate-stats"></div>
|
<div class = "center" id = "build-chestplate-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-leggings" id = "build-leggings" style = "grid-column:3;grid-row:1">
|
<div class = "center build-leggings" id = "build-leggings" style = "grid-item-3">
|
||||||
<div class = "center" id = "build-leggings-stats"></div>
|
<div class = "center" id = "build-leggings-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-boots" id = "build-boots" style = "grid-column:4;grid-row:1">
|
<div class = "center build-boots" id = "build-boots" style = "grid-item-4">
|
||||||
<div class = "center" id = "build-boots-stats"></div>
|
<div class = "center" id = "build-boots-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-ring1" id = "build-ring1" style = "grid-column:1;grid-row:2">
|
<div class = "center build-ring1" id = "build-ring1" style = "grid-item-5">
|
||||||
<div class = "center" id = "build-ring1-stats"></div>
|
<div class = "center" id = "build-ring1-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-ring2" id = "build-ring2" style = "grid-column:2;grid-row:2">
|
<div class = "center build-ring2" id = "build-ring2" style = "grid-item-6">
|
||||||
<div class = "center" id = "build-ring2-stats"></div>
|
<div class = "center" id = "build-ring2-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-leggings" id = "build-bracelet" style = "grid-column:3;grid-row:2">
|
<div class = "center build-leggings" id = "build-bracelet" style = "grid-item-7">
|
||||||
<div class = "center" id = "build-bracelet-stats"></div>
|
<div class = "center" id = "build-bracelet-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-boots" id = "build-necklace" style = "grid-column:4;grid-row:2">
|
<div class = "center build-boots" id = "build-necklace" style = "grid-item-8">
|
||||||
<div class = "center" id = "build-necklace-stats"></div>
|
<div class = "center" id = "build-necklace-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-weapon" id = "build-weapon" style = "grid-column:1;grid-row:3">
|
<div class = "center build-weapon" id = "build-weapon" style = "grid-item-9">
|
||||||
<div class = "center" id = "build-weapon-stats"></div>
|
<div class = "center" id = "build-weapon-stats"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-order" id = "build-order" style = "grid-column:2;grid-row:3">
|
<div class = "center build-order" id = "build-order" style = "grid-item-10">
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-melee-stats" id = "build-melee-stats" style = "grid-column:3;grid-row:3">
|
<div class = "center build-melee-stats" id = "build-melee-stats" style = "grid-item-11">
|
||||||
</div>
|
</div>
|
||||||
<div class = "center build-defense-stats" id = "build-defense-stats" style = "grid-column:4;grid-row:3">
|
<div class = "center build-defense-stats" id = "build-defense-stats" style = "grid-item-12">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "spells">
|
<div class = "spells">
|
||||||
<div class = "center spell-info" id = "spell0" style = "grid-column:1;grid-row:1">
|
<div class = "center spell-info" id = "spell0" style = "grid-item-1">
|
||||||
<!--div class = "center" id = "spell0-name">Spell 1</div-->
|
<!--div class = "center" id = "spell0-name">Spell 1</div-->
|
||||||
<div class = "center" id = "spell0-info">Spell 1</div>
|
<div class = "center" id = "spell0-info">Spell 1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center spell-info" id = "spell1" style = "grid-column:2;grid-row:1">
|
<div class = "center spell-info" id = "spell1" style = "grid-item-2">
|
||||||
<!--div class = "center" id = "spell1-name">Spell 2</div-->
|
<!--div class = "center" id = "spell1-name">Spell 2</div-->
|
||||||
<div class = "center" id = "spell1-info">Spell 2</div>
|
<div class = "center" id = "spell1-info">Spell 2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center spell-info" id = "spell2" style = "grid-column:3;grid-row:1">
|
<div class = "center spell-info" id = "spell2" style = "grid-item-3">
|
||||||
<!--div class = "center" id = "spell2-name">Spell 3</div-->
|
<!--div class = "center" id = "spell2-name">Spell 3</div-->
|
||||||
<div class = "center" id = "spell2-info">Spell 3</div>
|
<div class = "center" id = "spell2-info">Spell 3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "center spell-info" id = "spell3" style = "grid-column:4;grid-row:1">
|
<div class = "center spell-info" id = "spell3" style = "grid-item-4">
|
||||||
<!--div class = "center" id = "spell3-name">Spell 4</div-->
|
<!--div class = "center" id = "spell3-name">Spell 4</div-->
|
||||||
<div class = "center" id = "spell3-info">Spell 4</div>
|
<div class = "center" id = "spell3-info">Spell 4</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
19
styles.css
|
@ -16,14 +16,6 @@ th, td {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary {
|
|
||||||
padding: 2% 4% 4%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 2.5fr 1fr 1fr;
|
|
||||||
gap: 5px;
|
|
||||||
grid-auto-rows: minmax(60px, auto);
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
div {
|
||||||
padding: 0%;
|
padding: 0%;
|
||||||
}
|
}
|
||||||
|
@ -43,6 +35,7 @@ div {
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
grid-auto-rows: minmax(60px, auto);
|
grid-auto-rows: minmax(60px, auto);
|
||||||
}
|
}
|
||||||
|
|
||||||
.equipment, .skillpoints, .center, .header, .all, .nocolor{
|
.equipment, .skillpoints, .center, .header, .all, .nocolor{
|
||||||
background: #121516;
|
background: #121516;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
|
@ -77,16 +70,6 @@ a.link{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.build, .spells, .misc {
|
|
||||||
padding: 2%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
grid-auto-rows: minmax(60px, auto);
|
|
||||||
width: 94%;
|
|
||||||
background: #121516;
|
|
||||||
}
|
|
||||||
|
|
||||||
.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info {
|
.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order, .build-overall, .build-melee-stats, .build-defense-stats, .spell-info, .set-info {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
background: #121516;
|
background: #121516;
|
||||||
|
|
25
test.js
|
@ -234,13 +234,13 @@ function init() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
populateFromURL();
|
decodeBuild(url_tag);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Populate fields based on url, and calculate build.
|
* Populate fields based on url, and calculate build.
|
||||||
*/
|
*/
|
||||||
function populateFromURL() {
|
function decodeBuild(url_tag) {
|
||||||
if (url_tag) {
|
if (url_tag) {
|
||||||
let equipment = [null, null, null, null, null, null, null, null, null];
|
let equipment = [null, null, null, null, null, null, null, null, null];
|
||||||
let powdering = ["", "", "", "", ""];
|
let powdering = ["", "", "", "", ""];
|
||||||
|
@ -557,7 +557,28 @@ function calculateBuildStats() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function copyBuild() {
|
function copyBuild() {
|
||||||
|
if (player_build) {
|
||||||
|
copyTextToClipboard(url_base+location.hash);
|
||||||
|
document.getElementById("copy-button").textContent = "Copied!";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function shareBuild() {
|
||||||
|
if (player_build) {
|
||||||
|
let text = url_base+location.hash+"\n"+
|
||||||
|
"WynnBuilder build:\n"+
|
||||||
|
player_build.helmet.get("displayName")+"\n"+
|
||||||
|
player_build.chestplate.get("displayName")+"\n"+
|
||||||
|
player_build.leggings.get("displayName")+"\n"+
|
||||||
|
player_build.boots.get("displayName")+"\n"+
|
||||||
|
player_build.ring1.get("displayName")+"\n"+
|
||||||
|
player_build.ring2.get("displayName")+"\n"+
|
||||||
|
player_build.bracelet.get("displayName")+"\n"+
|
||||||
|
player_build.necklace.get("displayName")+"\n"+
|
||||||
|
player_build.weapon.get("displayName");
|
||||||
|
copyTextToClipboard(text);
|
||||||
|
document.getElementById("share-button").textContent = "Copied!";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function resetFields(){
|
function resetFields(){
|
||||||
|
|
BIN
textures/items/bow/bow--default1.png
Normal file
After Width: | Height: | Size: 1 KiB |
BIN
textures/items/bow/bow--default2.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
textures/items/dagger/dagger--default1.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
textures/items/dagger/dagger--default2.png
Normal file
After Width: | Height: | Size: 1 KiB |
BIN
textures/items/relik/relik--default1.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
textures/items/relik/relik--default2.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
textures/items/spear/spear--default1.png
Normal file
After Width: | Height: | Size: 869 B |
BIN
textures/items/spear/spear--default2.png
Normal file
After Width: | Height: | Size: 865 B |
BIN
textures/items/wand/wand--default1.png
Normal file
After Width: | Height: | Size: 727 B |
BIN
textures/items/wand/wand--default2.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
textures/powder/dye_powder_cyan.png
Executable file
After Width: | Height: | Size: 548 B |
BIN
textures/powder/dye_powder_gray.png
Executable file
After Width: | Height: | Size: 485 B |
BIN
textures/powder/dye_powder_green.png
Executable file
After Width: | Height: | Size: 530 B |
BIN
textures/powder/dye_powder_light_blue.png
Executable file
After Width: | Height: | Size: 486 B |
BIN
textures/powder/dye_powder_lime.png
Executable file
After Width: | Height: | Size: 481 B |
BIN
textures/powder/dye_powder_orange.png
Executable file
After Width: | Height: | Size: 523 B |
BIN
textures/powder/dye_powder_pink.png
Executable file
After Width: | Height: | Size: 486 B |
BIN
textures/powder/dye_powder_red.png
Executable file
After Width: | Height: | Size: 1.7 KiB |
BIN
textures/powder/dye_powder_silver.png
Executable file
After Width: | Height: | Size: 541 B |
BIN
textures/powder/dye_powder_yellow.png
Executable file
After Width: | Height: | Size: 462 B |