endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

Work on phone

Browse source
This commit is contained in:
b 2021-01-11 06:09:58 -06:00
parent 7a61782847
commit af802ed60b
24 changed files with 77 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
credits.txt
View file

@ -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
View file

@ -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
View file

@ -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
View file

@ -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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
textures/items/bow/bow--default2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
textures/items/dagger/dagger--default1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
textures/items/dagger/dagger--default2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

BIN
textures/items/relik/relik--default1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
textures/items/relik/relik--default2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
textures/items/spear/spear--default1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 869 B

BIN
textures/items/spear/spear--default2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 865 B

BIN
textures/items/wand/wand--default1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 727 B

BIN
textures/items/wand/wand--default2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
textures/powder/dye_powder_cyan.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 548 B

BIN
textures/powder/dye_powder_gray.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 485 B

BIN
textures/powder/dye_powder_green.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 530 B

BIN
textures/powder/dye_powder_light_blue.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 486 B

BIN
textures/powder/dye_powder_lime.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 481 B

BIN
textures/powder/dye_powder_orange.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 523 B

BIN
textures/powder/dye_powder_pink.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 486 B

BIN
textures/powder/dye_powder_red.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
textures/powder/dye_powder_silver.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 541 B

BIN
textures/powder/dye_powder_yellow.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 462 B