Merge branch 'dev' of https://github.com/hppeng-wynn/hppeng-wynn.github.io into dev

clean.json

@@ -1,5 +1,83 @@
 {
   "items": [
+    {
+      "name": "Demon Tide (1.20)",
+      "tier": "Legendary",
+      "type": "leggings",
+      "set": null,
+      "quest": null,
+      "poison": 0,
+      "spellCost3Pct": -25,
+      "spellCost2Pct": -20,
+      "spellCost1Pct": -30,
+      "spellCost4Pct": -30,
+      "thorns": 0,
+      "sprint": 0,
+      "category": "armor",
+      "slots": 2,
+      "drop": "NORMAL",
+      "hp": 2625,
+      "fDef": 65,
+      "wDef": -200,
+      "aDef": 0,
+      "tDef": 65,
+      "eDef": 0,
+      "lvl": 87,
+      "classReq": null,
+      "strReq": 0,
+      "dexReq": 65,
+      "intReq": 0,
+      "agiReq": 0,
+      "defReq": 45,
+      "hprPct": 0,
+      "mr": 0,
+      "sdPct": -45,
+      "mdPct": -40,
+      "ls": 0,
+      "ms": 0,
+      "xpb": 0,
+      "lb": 0,
+      "ref": 0,
+      "str": 0,
+      "dex": 0,
+      "int": 10,
+      "agi": 0,
+      "def": 0,
+      "expd": 0,
+      "spd": 0,
+      "atkTier": 0,
+      "hpBonus": 0,
+      "spRegen": 0,
+      "eSteal": 0,
+      "hprRaw": 0,
+      "sdRaw": 0,
+      "mdRaw": 0,
+      "fDamPct": 10,
+      "wDamPct": 20,
+      "aDamPct": 0,
+      "tDamPct": 10,
+      "eDamPct": 0,
+      "fDefPct": 0,
+      "wDefPct": 0,
+      "aDefPct": 0,
+      "tDefPct": 0,
+      "eDefPct": 0,
+      "spPct1": -30,
+      "spRaw1": 0,
+      "spPct2": -20,
+      "spRaw2": 0,
+      "spPct3": -25,
+      "spRaw3": 0,
+      "spPct4": -30,
+      "spRaw4": 0,
+      "rainbowRaw": 0,
+      "sprintReg": 0,
+      "jh": 0,
+      "lq": 0,
+      "gXp": 0,
+      "gSpd": 0,
+      "id": 10010
+    },
     {
       "name": "Dondasch",
       "tier": "Legendary",
@@ -277209,4 +277287,4 @@
       ]
     }
   }
-}
+}

credits.txt

@@ -1,7 +1,9 @@
-Damage calculator checking: https://its0x7.cf/build/
-
 Theme and overall inspiration: Wynndata (Dukio)
     - https://wynndata.tk
 
+The game, of course
+    - wynncraft.com
+
 Additional Contributors:
  - QuantumNep (Layout code/layout ideas)
+ - Atlas Inc discord (feedback, ideas, etc)

damage_calc.js

@@ -81,10 +81,17 @@ function calculateSpellDamage(stats, spellConversions, rawModifier, pctModifier,
         totalDamCrit[0] += damages_results[i][2];
         totalDamCrit[1] += damages_results[i][3];
     }
+    if (melee) {
+        totalDamNorm[0] += Math.max(rawModifier, -damages_results[0][0]);
+        totalDamNorm[1] += Math.max(rawModifier, -damages_results[0][1]);
+        totalDamCrit[0] += Math.max(rawModifier, -damages_results[0][2]);
+        totalDamCrit[1] += Math.max(rawModifier, -damages_results[0][3]);
+    }
     damages_results[0][0] += rawModifier;
     damages_results[0][1] += rawModifier;
     damages_results[0][2] += rawModifier;
     damages_results[0][3] += rawModifier;
+
     if (totalDamNorm[0] < 0) totalDamNorm[0] = 0;
     if (totalDamNorm[1] < 0) totalDamNorm[1] = 0;
     if (totalDamCrit[0] < 0) totalDamCrit[0] = 0;
@@ -95,9 +102,9 @@ function calculateSpellDamage(stats, spellConversions, rawModifier, pctModifier,
 const spell_table = {
     "wand": [
         { title: "Heal", cost: 6, parts: [
-                { subtitle: "First Pulse", type: "heal", strength: 0.2 },
-                { subtitle: "Second and Third Pulses", type: "heal", strength: 0.05 },
-                { subtitle: "Total Heal", type: "heal", strength: 0.3, summary: true }
+                { subtitle: "First Pulse", type: "heal", strength: 0.12 },
+                { subtitle: "Second and Third Pulses", type: "heal", strength: 0.06 },
+                { subtitle: "Total Heal", type: "heal", strength: 0.24, summary: true }
             ] },
         { title: "Teleport", cost: 4, parts: [
                 { subtitle: "Total Damage", type: "damage", multiplier: 100, conversion: [60, 0, 40, 0, 0, 0], summary: true },

display.js

@@ -118,6 +118,7 @@ function displaySetBonuses(build, parent_id) {
                 mock_item.set(id, bonus[id]);
             }
         }
+        mock_item.set("powders", []);
         displayExpandedItem(mock_item, set_elem.id);
     }
 }
@@ -661,6 +662,7 @@ function displayMeleeDamage(parent_elem, overallparent_elem, meleeStats){
     //overall average DPS
     let overallaverageDamage = document.createElement("p");
     overallaverageDamage.classList.add("itemp");
+    console.log(stats);
     overallaverageDamage.textContent = "Average DPS: " + stats[10];
     overallparent_elem.append(overallaverageDamage);
     overallparent_elem.append(document.createElement("br"));

index.html

@@ -6,6 +6,8 @@
         <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
 
         <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="manifest" href="manifest.json">
         <title>Wynn Clientside</title>
@@ -15,7 +17,7 @@
             Wynn build calculator
         </div>
         <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">
                     <table>
                         <tr>
@@ -29,63 +31,63 @@
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
                             <td class="left">
                                 <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>
                         </tr>
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
                             <td class="left">
                                 <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>
                         </tr>
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
                             <td class="left">
                                 <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>
                         </tr>
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
                             <td class="left">
                                 <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>
                         </tr>
                         <tr>
                             <td class="left">
                                 <br>
                                 <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>
                             </td>
                             <td class="left">
                                 <br>
                                 <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>
                         </tr>
                     </table>
@@ -100,7 +102,7 @@
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
@@ -108,7 +110,7 @@
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
@@ -116,7 +118,7 @@
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
@@ -124,7 +126,7 @@
                         <tr>
                             <td class="left">
                                 <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>
                             </td>
@@ -133,7 +135,7 @@
                             <td class="left">
                                 <br/>
                                 <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>
                         </tr>
                     </table>
@@ -144,15 +146,27 @@
                             <td>
                                 <br/>
                                 <button class = "button" id = "calc-button" onclick = "calculateBuild()">
-                                Update Items (Resets stats)
+                                Update Items
                                 </button>
                             </td>
-                            <td class="right">
+                            <td>
                                 <br/>
                                 <button class = "button" id = "reset-button" onclick = "resetFields()">
                                 Reset
                                 </button>
                             </td>
+                            <td>
+                                <br/>
+                                <button class = "button" id = "copy-button" onclick = "copyBuild()">
+                                Copy Short
+                                </button>
+                            </td>
+                            <td>
+                                <br/>
+                                <button class = "button" id = "share-button" onclick = "shareBuild()">
+                                Copy For Sharing
+                                </button>
+                            </td>
                         </tr>
                     </table>
                 </div>
@@ -163,13 +177,13 @@
                     </div>
                 </div>
             </div>
-            <div class="center" style="grid-column:2">
+            <div class="build-overall-container">
                 <div class = "center build-overall" id = "build-overall">
                     <br/>
                     <div class = "center" id = "build-overall-stats"></div>
                 </div>
             </div>
-            <div class="center" style="grid-column:3;">
+            <div class="spell-info-container">
                 <div class="spell-info">
                     <div class="center" id="build-melee-statsAvg">melee</div>
                 </div>
@@ -194,7 +208,7 @@
             <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"/>
+                    <input class="skp-input" type="number" id="str-skp" name="str-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="str-skp-assign">
                     Manually Assigned: 0
@@ -208,7 +222,7 @@
             <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"/>
+                    <input class="skp-input" type="number" id="dex-skp" name="dex-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="dex-skp-assign">
                     Manually Assigned: 0
@@ -222,7 +236,7 @@
             <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"/>
+                    <input class="skp-input" type="number" id="int-skp" name="int-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="int-skp-assign">
                     Manually Assigned: 0
@@ -236,7 +250,7 @@
             <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"/>
+                    <input class="skp-input" type="number" id="def-skp" name="def-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="def-skp-assign">
                     Manually Assigned: 0
@@ -250,7 +264,7 @@
             <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"/>
+                    <input class="skp-input" type="number" id="agi-skp" name="agi-skp" value="0" class="skpInput"/>
                 </div>
                 <div id="agi-skp-assign">
                     Manually Assigned: 0
@@ -268,54 +282,54 @@
             </button>
         </div>
         <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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>
-            <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 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 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 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-info">Spell 1</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-info">Spell 2</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-info">Spell 3</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-info">Spell 4</div>
             </div>

load.js

@@ -1,4 +1,4 @@
-const DB_VERSION = 12;
+const DB_VERSION = 13;
 // @See https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/video-store/index.js
 
 let db;

narrow.css

@@ -0,0 +1,35 @@
+.build-overall-container {
+    grid-column: 1;
+    grid-row: 2;
+}
+.spell-info-container {
+    grid-column: 2;
+    grid-row: 2;
+}
+.summary {
+    padding: 2% 4% 4%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5px;
+    grid-auto-rows: minmax(60px, auto);
+}
+
+.build, .spells .misc {
+    padding: 2%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    grid-auto-rows: minmax(60px, auto);
+    width: 94%;
+    background: #121516;
+}
+
+.iteminput {
+    width: 25vw;
+    height: 10vw;
+    max-height: 50px;
+}
+
+.skp-input {
+
+}

styles.css

@@ -16,14 +16,6 @@ th, td {
     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 {
     padding: 0%;
 }
@@ -43,6 +35,7 @@ div {
     gap: 5px;
     grid-auto-rows: minmax(60px, auto);
 }
+
 .equipment, .skillpoints, .center, .header, .all, .nocolor{
     background: #121516;
     color: #aaa;
@@ -77,16 +70,6 @@ a.link{
     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 {
     color: #aaa;
     background: #121516;

test.js

@@ -11,9 +11,9 @@ console.log(url_tag);
  * END testing section
  */
 
-const BUILD_VERSION = "5.4";
+const BUILD_VERSION = "6.3";
 
-document.getElementById("header").textContent = "Wynn build calculator "+BUILD_VERSION+" (db version "+DB_VERSION+")";
+document.getElementById("header").textContent = "WynnBuilder version "+BUILD_VERSION+" (db version "+DB_VERSION+")";
 
 let player_build;
 // Set up item lists for quick access later.
@@ -234,13 +234,13 @@ function init() {
         }
     });
 
-    populateFromURL();
+    decodeBuild(url_tag);
 }
 
 /*
  * Populate fields based on url, and calculate build.
  */
-function populateFromURL() {
+function decodeBuild(url_tag) {
     if (url_tag) {
         let equipment = [null, null, null, null, null, null, null, null, null];
         let powdering = ["", "", "", "", ""];
@@ -556,6 +556,31 @@ function calculateBuildStats() {
     location.hash = encodeBuild();
 }
 
+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(){
     for (let i in powderInputs) {
         setValue(powderInputs[i], "");

textures/items/relik/relik--generic3.png

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html style="height:100%">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title> 404 Not Found
+</title></head>
+<body style="color: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;">
+<div style="height:auto; min-height:100%; "> <div style="text-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;">
+<h1 style="margin:0; font-size:150px; line-height:150px; font-weight:bold;">404</h1>
+<h2 style="margin-top:20px;font-size: 30px;">Not Found
+</h2>
+<p>The resource requested could not be found on this server!</p>
+</div></div><div style="color:#f0f0f0; font-size:12px;margin:auto;padding:0px 30px 0px 30px;position:relative;clear:both;height:100px;margin-top:-101px;background-color:#474747;border-top: 1px solid rgba(0,0,0,0.15);box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;">
+<br>Proudly powered by <a style="color:#fff;" href="http://www.litespeedtech.com/error-page">LiteSpeed Web Server</a><p>Please be advised that LiteSpeed Technologies Inc. is not a web hosting company and, as such, has no control over content found on this site.</p></div></body></html>

textures/items/relik/relik--water1.png

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html style="height:100%">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title> 404 Not Found
+</title></head>
+<body style="color: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;">
+<div style="height:auto; min-height:100%; "> <div style="text-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;">
+<h1 style="margin:0; font-size:150px; line-height:150px; font-weight:bold;">404</h1>
+<h2 style="margin-top:20px;font-size: 30px;">Not Found
+</h2>
+<p>The resource requested could not be found on this server!</p>
+</div></div><div style="color:#f0f0f0; font-size:12px;margin:auto;padding:0px 30px 0px 30px;position:relative;clear:both;height:100px;margin-top:-101px;background-color:#474747;border-top: 1px solid rgba(0,0,0,0.15);box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;">
+<br>Proudly powered by <a style="color:#fff;" href="http://www.litespeedtech.com/error-page">LiteSpeed Web Server</a><p>Please be advised that LiteSpeed Technologies Inc. is not a web hosting company and, as such, has no control over content found on this site.</p></div></body></html>

textures/items/relik/relik--water2.png

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html style="height:100%">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title> 404 Not Found
+</title></head>
+<body style="color: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;">
+<div style="height:auto; min-height:100%; "> <div style="text-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;">
+<h1 style="margin:0; font-size:150px; line-height:150px; font-weight:bold;">404</h1>
+<h2 style="margin-top:20px;font-size: 30px;">Not Found
+</h2>
+<p>The resource requested could not be found on this server!</p>
+</div></div><div style="color:#f0f0f0; font-size:12px;margin:auto;padding:0px 30px 0px 30px;position:relative;clear:both;height:100px;margin-top:-101px;background-color:#474747;border-top: 1px solid rgba(0,0,0,0.15);box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;">
+<br>Proudly powered by <a style="color:#fff;" href="http://www.litespeedtech.com/error-page">LiteSpeed Web Server</a><p>Please be advised that LiteSpeed Technologies Inc. is not a web hosting company and, as such, has no control over content found on this site.</p></div></body></html>

textures/items/relik/relik--water3.png

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html style="height:100%">
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title> 404 Not Found
+</title></head>
+<body style="color: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;">
+<div style="height:auto; min-height:100%; "> <div style="text-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;">
+<h1 style="margin:0; font-size:150px; line-height:150px; font-weight:bold;">404</h1>
+<h2 style="margin-top:20px;font-size: 30px;">Not Found
+</h2>
+<p>The resource requested could not be found on this server!</p>
+</div></div><div style="color:#f0f0f0; font-size:12px;margin:auto;padding:0px 30px 0px 30px;position:relative;clear:both;height:100px;margin-top:-101px;background-color:#474747;border-top: 1px solid rgba(0,0,0,0.15);box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;">
+<br>Proudly powered by <a style="color:#fff;" href="http://www.litespeedtech.com/error-page">LiteSpeed Web Server</a><p>Please be advised that LiteSpeed Technologies Inc. is not a web hosting company and, as such, has no control over content found on this site.</p></div></body></html>