From 1623b422b2042f6acb0fd405462e86aea98e81e7 Mon Sep 17 00:00:00 2001 From: b Date: Thu, 7 Jan 2021 19:02:12 -0600 Subject: [PATCH] Better UI, wynndata styling --- display.js | 148 +++++++++++++++++++++++++++++++++++++---------------- index.html | 6 ++- styles.css | 88 +++++++++++++++++++++++++++---- 3 files changed, 186 insertions(+), 56 deletions(-) diff --git a/display.js b/display.js index 29167ce..ba3bdae 100644 --- a/display.js +++ b/display.js @@ -44,6 +44,7 @@ function expandItem(item){ function displayExpandedItem(item, parent_id){ // Commands to "script" the creation of nice formatting. // #commands create a new element. + // !elemental is some janky hack for elemental damage. // normals just display a thing. let display_commands = [ "#cdiv", @@ -51,14 +52,18 @@ function displayExpandedItem(item, parent_id){ "#ldiv", "atkSpd", "#ldiv", - "nDam", "eDam", "tDam", "wDam", "tDam", "aDam"] - let rest_TMP = [ - "lvl", - "classReq", - "strReq", "dexReq", "intReq", "defReq","agiReq", "hp", + "!elemental", + "nDam", "eDam", "tDam", "wDam", "tDam", "aDam", "eDef", "tDef", "wDef", "fDef", "aDef", + "!elemental", + "#ldiv", + "classReq", + "lvl", + "strReq", "dexReq", "intReq", "defReq","agiReq", + "#ldiv", "str", "dex", "int", "agi", "def", + "#table", "hpBonus", "hprRaw", "hprPct", "sdRaw", "sdPct", @@ -70,8 +75,10 @@ function displayExpandedItem(item, parent_id){ "exploding", "spd", "atkTier", + "!elemental", "eDamPct", "tDamPct", "wDamPct", "fDamPct", "aDamPct", "eDefPct", "tDefPct", "wDefPct", "fDefPct", "aDefPct", + "!elemental", "spPct1", "spRaw1", "spPct2", "spRaw2", "spPct3", "spRaw3", "spPct4", "spRaw4", "rainbowRaw", "sprint", "sprintReg", @@ -80,20 +87,38 @@ function displayExpandedItem(item, parent_id){ "spRegen", "eSteal", "gXp", "gSpd", + "#ldiv", "slots", "set", "quest", "restrict"]; - let idPrefixes = {"displayName": "", "lvl":"Combat Level Min: ", "classReq":"Class Req: ","strReq":"Strength Min: ","dexReq":"Dexterity Min: ","intReq":"Intelligence Min: ","defReq":"Defense Min: ","agiReq":"Agility Min: ", "nDam":"Neutral Damage: ", "eDam":"Earth Damage: ", "tDam":"Thunder Damage: ", "wDam":"Water Damage: ", "fDam":"Fire Damage: ", "aDam":"Air Damage: ", "atkSpd":"Attack Speed: ", "hp":"Health: ", "eDef":"Earth Defense: ", "tDef":"Thunder Defense: ", "wDef":"Water Defense: ", "fDef":"Fire Defense: ", "aDef":"Air Defense: ", "str":"Strength: ", "dex":"Dexterity: ", "int":"Intelligence: ", "def":"Defense: ","agi":"Agility: ", "hpBonus":"Health Bonus: ", "hprRaw":"Health Regen Raw: ", "hprPct":"Health Regen %: ", "sdRaw":"Raw Spell Damage: ", "sdPct":"Spell Damage %: ", "mdRaw":"Main Attack Neutral Damage: ", "mdPct":"Main Attack Damage %: ", "mr":"Mana Regen: ", "ms":"Mana Steal: ", "ref":"Reflection: ", "ls":"Life Steal: ", "poison":"Poison: ", "thorns":"Thorns: ", "exploding":"Expoding: ", "spd":"Walk Speed Bonus: ", "atkTier":"Attack Speed Bonus: ", "eDamPct":"Earth Damage %: ", "tDamPct":"Thunder Damage %: ", "wDamPct":"Water Damage %: ", "fDamPct":"Fire Damage %: ", "aDamPct":"Air Damage %: ", "eDefPct":"Earth Defense %: ", "tDefPct":"Thunder Defense %: ", "wDefPct":"Water Defense %: ", "fDefPct":"Fire Defense %: ", "aDefPct":"Air Defense %: ", "spPct1":"1st Spell Cost %: ", "spRaw1":"1st Spell Cost Raw: ", "spPct2":"2nd Spell Cost %: ", "spRaw2":"2nd Spell Cost Raw: ", "spPct3":"3rd Spell Cost %: ", "spRaw3":"3rd Spell Cost Raw: ", "spPct4":"4th Spell Cost %: ", "spRaw4":"4th Spell Cost Raw: ", "rainbowRaw":"Rainbow Spell Damage Raw: ", "sprint":"Sprint Bonus: ", "sprintReg":"Sprint Regen Bonus: ", "jh":"Jump Height: ", "xpb":"Combat XP Bonus: ", "lb":"Loot Bonus: ", "lq":"Loot Quality: ", "spRegen":"Soul Point Regen: ", "eSteal":"Stealing: ", "gXp":"Gathering XP Bonus: ", "gSpd":"Gathering Speed Bonus: ", "slots":"Powder Slots: ", "set":"This item belongs to the ", "quest":"This item is from the quest
", "restrict":""}; + let idPrefixes = {"displayName": "", "lvl":"Combat Level Min: ", "classReq":"Class Req: ","strReq":"Strength Min: ","dexReq":"Dexterity Min: ","intReq":"Intelligence Min: ","defReq":"Defense Min: ","agiReq":"Agility Min: ", "nDam":"Neutral Damage: ", "eDam":"Earth Damage: ", "tDam":"Thunder Damage: ", "wDam":"Water Damage: ", "fDam":"Fire Damage: ", "aDam":"Air Damage: ", "atkSpd":"Attack Speed: ", "hp":"Health: ", "eDef":"Earth Defense: ", "tDef":"Thunder Defense: ", "wDef":"Water Defense: ", "fDef":"Fire Defense: ", "aDef":"Air Defense: ", "str":"Strength: ", "dex":"Dexterity: ", "int":"Intelligence: ", "def":"Defense: ","agi":"Agility: ", "hpBonus":"Health Bonus: ", "hprRaw":"Health Regen Raw: ", "hprPct":"Health Regen %: ", "sdRaw":"Raw Spell Damage: ", "sdPct":"Spell Damage %: ", "mdRaw":"Main Attack Neutral Damage: ", "mdPct":"Main Attack Damage %: ", "mr":"Mana Regen: ", "ms":"Mana Steal: ", "ref":"Reflection: ", "ls":"Life Steal: ", "poison":"Poison: ", "thorns":"Thorns: ", "exploding":"Expoding: ", "spd":"Walk Speed Bonus: ", "atkTier":"Attack Speed Bonus: ", "eDamPct":"Earth Damage %: ", "tDamPct":"Thunder Damage %: ", "wDamPct":"Water Damage %: ", "fDamPct":"Fire Damage %: ", "aDamPct":"Air Damage %: ", "eDefPct":"Earth Defense %: ", "tDefPct":"Thunder Defense %: ", "wDefPct":"Water Defense %: ", "fDefPct":"Fire Defense %: ", "aDefPct":"Air Defense %: ", "spPct1":"1st Spell Cost %: ", "spRaw1":"1st Spell Cost Raw: ", "spPct2":"2nd Spell Cost %: ", "spRaw2":"2nd Spell Cost Raw: ", "spPct3":"3rd Spell Cost %: ", "spRaw3":"3rd Spell Cost Raw: ", "spPct4":"4th Spell Cost %: ", "spRaw4":"4th Spell Cost Raw: ", "rainbowRaw":"Rainbow Spell Damage Raw: ", "sprint":"Sprint Bonus: ", "sprintReg":"Sprint Regen Bonus: ", "jh":"Jump Height: ", "xpb":"Combat XP Bonus: ", "lb":"Loot Bonus: ", "lq":"Loot Quality: ", "spRegen":"Soul Point Regen: ", "eSteal":"Stealing: ", "gXp":"Gathering XP Bonus: ", "gSpd":"Gathering Speed Bonus: ", "slots":"Powder Slots: ", "set":"This item belongs to the ", "quest":"This item is from the quest: ", "restrict":""}; let idSuffixes = {"displayName": "", "lvl":"", "classReq":"","strReq":"","dexReq":"","intReq":"","defReq":"","agiReq":"", "nDam":"", "eDam":"", "tDam":"", "wDam":"", "fDam":"", "aDam":"", "atkSpd":"", "hp":"", "eDef":"", "tDef":"", "wDef":"", "fDef":"", "aDef":"", "str":"", "dex":"", "int":"", "def":"","agi":"", "hpBonus":"", "hprRaw":"", "hprPct":"%", "sdRaw":"", "sdPct":"%", "mdRaw":"", "mdPct":"%", "mr":"/4s", "ms":"/4s", "ref":"%", "ls":"/4s", "poison":"/3s", "thorns":"%", "exploding":"%", "spd":"%", "atkTier":" tier", "eDamPct":"%", "tDamPct":"%", "wDamPct":"%", "fDamPct":"%", "aDamPct":"%", "eDefPct":"%", "tDefPct":"%", "wDefPct":"%", "fDefPct":"%", "aDefPct":"%", "spPct1":"%", "spRaw1":"", "spPct2":"%", "spRaw2":"", "spPct3":"%", "spRaw3":"", "spPct4":"%", "spRaw4":"", "rainbowRaw":"", "sprint":"%", "sprintReg":"%", "jh":"", "xpb":"%", "lb":"%", "lq":"%", "spRegen":"%", "eSteal":"%", "gXp":"%", "gSpd":"%", "slots":"", "set":" set.", "quest":".", "restrict":""}; + function apply_elemental_format(p_elem, id, suffix) { + suffix = (typeof suffix !== 'undefined') ? suffix : ""; + // THIS IS SO JANK BUT IM TOO LAZY TO FIX IT TODO + let parts = idPrefixes[id].split(/ (.*)/); + let element_prefix = parts[0]; + let desc = parts[1]; + let i_elem = document.createElement('b'); + i_elem.classList.add(element_prefix); + i_elem.textContent = element_prefix; + p_elem.appendChild(i_elem); + + let i_elem2 = document.createElement('b'); + i_elem2.textContent = " " + desc + suffix; + p_elem.appendChild(i_elem2); + } + // Clear the parent div. setHTML(parent_id, ""); let parent_div = document.getElementById(parent_id); let active_elem; - + let fix_id = item.has("fixID") && item.get("fixID"); + let elemental_format = false; for (const command of display_commands) { if (command.charAt(0) === "#") { if (command === "#cdiv") { @@ -104,49 +129,84 @@ function displayExpandedItem(item, parent_id){ active_elem = document.createElement('div'); active_elem.classList.add('itemleft'); } + else if (command === "#table") { + active_elem = document.createElement('table'); + active_elem.classList.add('itemtable'); + } parent_div.appendChild(active_elem); } + else if (command.charAt(0) === "!") { + // TODO: This is sooo incredibly janky..... + if (command === "!elemental") { + elemental_format = !elemental_format; + } + } else { let id = command; - console.log(id); - let new_elem; if(nonRolledIDs.includes(id) && item.get(id)){//nonRolledID & non-0/non-null/non-und ID - new_elem = document.createElement('p'); - new_elem.textContent = idPrefixes[id].concat(item.get(id), idSuffixes[id]); - } -// if(rolledIDs.includes(id)&& item.get("minRolls").get(id) && item.get("maxRolls").get(id) ){//rolled ID & non-0/non-null/non-und ID -// itemString = itemString.concat(idPrefixes[id]); -// itemString = itemString.concat(item.get("minRolls").get(id), idSuffixes[id],"
"); -// }//Just don't do anything if else - if (new_elem) { - active_elem.appendChild(new_elem); + let p_elem = document.createElement('p'); + p_elem.classList.add('itemp'); + if (elemental_format) { + apply_elemental_format(p_elem, id, item.get(id)); + } + else { + p_elem.textContent = idPrefixes[id].concat(item.get(id), idSuffixes[id]); + } + active_elem.appendChild(p_elem); } + else if(rolledIDs.includes(id)&& item.get("minRolls").get(id)){ // && item.get("maxRolls").get(id) ){//rolled ID & non-0/non-null/non-und ID + let row = document.createElement('tr'); + let style = "positive"; + if (item.get("minRolls").get(id) < 0) { + style = "negative"; + } + if (fix_id) { + let desc_elem = document.createElement('td'); + desc_elem.classList.add('left'); + if (elemental_format) { + apply_elemental_format(desc_elem, id); + } + else { + desc_elem.textContent = idPrefixes[id]; + } + row.appendChild(desc_elem); + + let value_elem = document.createElement('td'); + value_elem.classList.add('right'); + value_elem.classList.add(style); + value_elem.textContent = item.get("minRolls").get(id) + idSuffixes[id]; + row.appendChild(value_elem); + } + else { + let min_elem = document.createElement('td'); + min_elem.classList.add('left'); + min_elem.classList.add(style); + min_elem.textContent = item.get("minRolls").get(id) + idSuffixes[id]; + row.appendChild(min_elem); + + let desc_elem = document.createElement('td'); + desc_elem.classList.add('center'); + if (elemental_format) { + apply_elemental_format(desc_elem, id); + } + else { + desc_elem.textContent = idPrefixes[id]; + } + row.appendChild(desc_elem); + + let max_elem = document.createElement('td'); + max_elem.classList.add('right'); + max_elem.classList.add(style); + max_elem.textContent = item.get("maxRolls").get(id) + idSuffixes[id]; + row.appendChild(max_elem); + } + active_elem.appendChild(row); + }//Just don't do anything if else } } - - -// if(item.has("fixID") && item.get("fixID")){//fixed IDs -// for(i = 0; i < ids.length; i++){ //iterate the ids -// if(nonRolledIDs.includes(ids[i]) && item.get(ids[i])){//nonRolledID & non-0/non-null/non-und ID -// itemString = itemString.concat(idPrefixes[ids[i]]); -// itemString = itemString.concat(item.get(ids[i]), idSuffixes[ids[i]],"
"); -// } -// if(rolledIDs.includes(ids[i])&& item.get("minRolls").get(ids[i]) && item.get("maxRolls").get(ids[i]) ){//rolled ID & non-0/non-null/non-und ID -// itemString = itemString.concat(idPrefixes[ids[i]]); -// itemString = itemString.concat(item.get("minRolls").get(ids[i]), idSuffixes[ids[i]],"
"); -// }//Just don't do anything if else -// } -// }else{//non-fixed IDs -// for(i = 0; i < ids.length; i++){ //iterate the ids -// if(nonRolledIDs.includes(ids[i]) && item.get(ids[i])){//nonRolledID & non-0/non-null/non-und ID -// itemString = itemString.concat(idPrefixes[ids[i]]); -// itemString = itemString.concat(item.get(ids[i]), idSuffixes[ids[i]],"
"); -// } -// if(rolledIDs.includes(ids[i])&& item.get("minRolls").get(ids[i]) && item.get("maxRolls").get(ids[i]) ){//rolled ID & non-0/non-null/non-und ID -// itemString = itemString.concat(idPrefixes[ids[i]]); -// itemString = itemString.concat(item.get("minRolls").get(ids[i]), idSuffixes[ids[i]], " -> ", idRound(item.get("maxRolls").get(ids[i])),idSuffixes[ids[i]],"
"); -// }//Just don't do anything if else -// } -// } -// itemString = itemString.concat("
",item.get("tier")," ", item.get("type")); + let item_desc_elem = document.createElement('p'); + item_desc_elem.classList.add('itemp'); + item_desc_elem.classList.add('left'); + item_desc_elem.textContent = item.get("tier")+" "+item.get("type"); + parent_div.append(item_desc_elem); } diff --git a/index.html b/index.html index c25bdfe..6796755 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,16 @@ + + + + Wynn Clientside - + diff --git a/styles.css b/styles.css index 9870d9d..a90bffb 100644 --- a/styles.css +++ b/styles.css @@ -3,6 +3,11 @@ text-align: center; } +.all { + font-family: 'Nunito',sans-serif; + font-weight: 700; +} + .equipment { padding: 4%; display: grid; @@ -23,6 +28,30 @@ text-align: center; } +.right { + text-align: right; +} + +.left { + text-align: left; +} + +.build{ + padding: 1%; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + grid-auto-rows: minmax(60px, auto); + width: 98%; +} +.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order { + color: #aaa; + background: #110110; + border: 2px solid black; + border-radius: 3px; + width: 100%; +} + .itemcenter { text-align: center; margin-bottom: 16px; @@ -33,16 +62,53 @@ margin-bottom: 16px; } -.build{ - padding: 1%; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 10px; - grid-auto-rows: minmax(60px, auto); - width: 90vw; +.itemtable { + margin: 2px 2%; + width: 96%; + margin-bottom: 16px; } -.build-helmet, .build-chestplate, .build-leggings, .build-boots, .build-ring1, .build-ring2, .build-bracelet, .build-necklace, .build-weapon, .build-order { - border: 2px solid black; - border-radius: 3px; - width: 20vw; + +.itemp { + margin: 2px 2%; + padding: 0; +} + +.positive { + color: #5f5; + /*text-shadow: 2px 2px 0 #153f15;*/ +} + +.negative { + color: #f55; + /*text-shadow: 2px 2px 0 #1f1515;*/ +} + +.Earth { + color: #0a0; + /*text-shadow: 2px 2px 0 #002a00;*/ +} + +.Thunder { + color: #ff5; + /*text-shadow: 2px 2px 0 #3f3f15;*/ +} + +.Water { + color: #5ff; + /*text-shadow: 2px 2px 0 #153f3f;*/ +} + +.Fire { + color: #f55; + /*text-shadow: 2px 2px 0 #1f1515;*/ +} + +.Air { + color: #fff; + /*text-shadow: 2px 2px 0 #3f3f3f;*/ +} + +.Neutral { + color: #fa0; + /*text-shadow: 2px 2px 0 #2a2a00;*/ }