WynnAtlas v0

items-narrow.css

@@ -1,7 +1,21 @@
 .items {
+    grid-column: 1;
     padding: 0%;
     display: grid;
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(auto-fill, 1fr);
     width: 100%;
     gap: 5px;
 }
+
+.itemsearch {
+    padding: 0%;
+    display: grid;
+    grid-template-columns: 1fr;
+    width: 100%;
+    gap: 5px;
+    grid-template-rows: masonry;
+}
+
+.search {
+    grid-column: 1;
+}

items-wide.css

@@ -1,8 +1,24 @@
 .items {
+    grid-column: 2;
     padding: 0%;
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     width: 100%;
     gap: 5px;
     grid-template-rows: masonry;
 }
+
+.itemsearch {
+    padding: 0%;
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+    width: 100%;
+    gap: 5px;
+}
+
+.search {
+    grid-column: 1;
+    position: sticky;
+    margin-bottom: auto;
+    top: 10px;
+}

items.html

@@ -47,9 +47,30 @@
         </div>
         <br>
         <br>
-        <br>
+        <div class="itemsearch">
-        <br>
+            <div class="search">
-        <div class="center items" id="main">
+                <div class="center" id="credits">
+                    <a href="translations.txt" class="link">CLICK FOR ID mapping</a>
+                </div>
+                <p>Basic Dumb JSON search</p>
+                <p>Query types:</p>
+                <p>name, type, category, stat</p>
+                <textarea name="query-json" id="query-json" cols="25" rows="25" tabindex="1">
+[
+  {
+    "queryType": "name",
+    "value": ""
+  }
+]
+                </textarea>
+                <br>
+                <button class = "button" id = "search-button" onclick = "doItemSearch()" tabindex="2">
+                Search Items
+                </button>
+                <p id="summary">hello</p>
+            </div>
+            <div class="center items" id="main">
+            </div>
         </div>
         <script type="text/javascript" src="/utils.js"></script>
         <script type="text/javascript" src="/build_utils.js"></script>

items.js

@@ -15,13 +15,28 @@ function displayItems(items_copy) {
     }
 }
 
+function doItemSearch() {
+    window.scrollTo(0, 0);
+    let input_json = document.getElementById("query-json").value;
+    let input = JSON.parse(input_json);
+    let items_copy = items.slice();
+    document.getElementById("main").textContent = "";
+    for (const _query of input) {
+        const query = queryTypeMap.get(_query.queryType)(_query.value);
+        items_copy = applyQuery(items_copy, query);
+    }
+    document.getElementById("summary").textContent = items_copy.length + " results."
+    displayItems(items_copy);
+}
+
 function init() {
+    return;
     let items_copy = items.slice();
     //let query = new NameQuery("Bob's");
-    let query1 = new IdQuery("poison");
+    let query1 = new IdQuery("sdRaw");
     items_copy = applyQuery(items_copy, query1);
 
-    let query2 = new TypeQuery("boots");
+    let query2 = new TypeQuery("helmet");
     items_copy = applyQuery(items_copy, query2);
 
     displayItems(items_copy);

query.js

@@ -1,25 +1,21 @@
+let queryTypeMap = new Map();
 
 class NameQuery {
-    constructor(string) {
+    constructor(string) { this.queryString = string.toLowerCase(); }
-        this.queryString = string;
-    }
 
     filter(item) {
         if (item.remapID === undefined) {
-            return (item.displayName.includes(this.queryString));
+            return (item.displayName.toLowerCase().includes(this.queryString));
         }
         return false;
     }
 
-    compare(a, b) {
+    compare(a, b) { return a < b; }
-        return a < b;
-    }
 }
+queryTypeMap.set("name", function(s) { return new NameQuery(s); } );
 
 class TypeQuery {
-    constructor(type) {
+    constructor(type) { this.type = type; }
-        this.type = type;
-    }
 
     filter(item) {
         if (item.remapID === undefined) {
@@ -28,10 +24,23 @@ class TypeQuery {
         return false;
     }
 
-    compare(a, b) {
+    compare(a, b) { return a < b; }
-        return a < b;
-    }
 }
+queryTypeMap.set("type", function(s) { return new TypeQuery(s); } );
+
+class CategoryQuery {
+    constructor(category) { this.category = category; }
+
+    filter(item) {
+        if (item.remapID === undefined) {
+            return (item.category === this.category);
+        }
+        return false;
+    }
+
+    compare(a, b) { return a < b; }
+}
+queryTypeMap.set("category", function(s) { return new CategoryQuery(s); } );
 
 class IdQuery {
     constructor(id) {
@@ -45,3 +54,4 @@ class IdQuery {
         return (this.id in item) && (item[this.id]);
     }
 }
+queryTypeMap.set("stat", function(s) { return new IdQuery(s); } );

translations.txt

@@ -0,0 +1,88 @@
+Mapping from API name to shortened names
+
+"name": "name",
+"displayName": "displayName",
+"tier": "tier",
+"set": "set",
+"sockets": "slots",
+"type": "type",
+"dropType": "drop",
+"quest": "quest",
+"restrictions": "restrict",
+"damage": "nDam",
+"fireDamage": "fDam",
+"waterDamage": "wDam",
+"airDamage": "aDam",
+"thunderDamage": "tDam",
+"earthDamage": "eDam",
+"attackSpeed": "atkSpd",
+"health": "hp",
+"fireDefense": "fDef",
+"waterDefense": "wDef",
+"airDefense": "aDef",
+"thunderDefense": "tDef",
+"earthDefense": "eDef",
+"level": "lvl",
+"classRequirement": "classReq",
+"strength": "strReq",
+"dexterity": "dexReq",
+"intelligence": "intReq",
+"agility": "agiReq",
+"defense": "defReq",
+"healthRegen": "hprPct",
+"manaRegen": "mr",
+"spellDamage": "sdPct",
+"damageBonus": "mdPct",
+"lifeSteal": "ls",
+"manaSteal": "ms",
+"xpBonus": "xpb",
+"lootBonus": "lb",
+"reflection": "ref",
+"strengthPoints": "str",
+"dexterityPoints": "dex",
+"intelligencePoints": "int",
+"agilityPoints": "agi",
+"defensePoints": "def",
+"thorns": "thorns",
+"exploding": "expd",
+"speed": "spd",
+"attackSpeedBonus": "atkTier",
+"poison": "poison",
+"healthBonus": "hpBonus",
+"soulPoints": "spRegen",
+"emeraldStealing": "eSteal",
+"healthRegenRaw": "hprRaw",
+"spellDamageRaw": "sdRaw",
+"damageBonusRaw": "mdRaw",
+"bonusFireDamage": "fDamPct",
+"bonusWaterDamage": "wDamPct",
+"bonusAirDamage": "aDamPct",
+"bonusThunderDamage": "tDamPct",
+"bonusEarthDamage": "eDamPct",
+"bonusFireDefense": "fDefPct",
+"bonusWaterDefense": "wDefPct",
+"bonusAirDefense": "aDefPct",
+"bonusThunderDefense": "tDefPct",
+"bonusEarthDefense": "eDefPct",
+"accessoryType": "type",
+"identified": "fixID",
+"skin": "skin",
+"category": "category",
+
+"spellCostPct1": "spPct1",
+"spellCostRaw1": "spRaw1",
+"spellCostPct2": "spPct2",
+"spellCostRaw2": "spRaw2",
+"spellCostPct3": "spPct3",
+"spellCostRaw3": "spRaw3",
+"spellCostPct4": "spPct4",
+"spellCostRaw4": "spRaw4",
+
+"rainbowSpellDamageRaw": "rainbowRaw",
+"sprint": "sprint",
+"sprintRegen": "sprintReg",
+"jumpHeight": "jh",
+"lootQuality": "lq",
+
+"gatherXpBonus": "gXp",
+"gatherSpeed": "gSpd",

wide.css

@@ -15,7 +15,7 @@
 }
 .sticky-box {
     position: sticky;
-    top: 0;
+    top: 10px;
 }
 .summary {
     padding: 2% 2% 0%;