From 350b072e2f4afe0245aedbc0e5275d4fa3f7aa98 Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Mon, 2 Mar 2020 01:18:51 +0200
Subject: [PATCH] feat: relate items

---
 src/components/trends/PriceTrend.vue   |   3 +
 src/components/trends/RelatedItems.vue |  79 +++++++++++
 src/data/index.ts                      |  13 ++
 src/data/item-drop.json                | 178 +++++++++++++++++++++++++
 4 files changed, 273 insertions(+)
 create mode 100644 src/components/trends/RelatedItems.vue
 create mode 100644 src/data/item-drop.json

diff --git a/src/components/trends/PriceTrend.vue b/src/components/trends/PriceTrend.vue
index 57e68aab..cbee526f 100644
--- a/src/components/trends/PriceTrend.vue
+++ b/src/components/trends/PriceTrend.vue
@@ -1,6 +1,7 @@
 <template>
   <div v-if="trend" class="flex items-center pb-4">
     <div class="flex items-center justify-center flex-1">
+      <related-items :details-id="trend.detailsId" />
       <div v-if="isValuableBasetype" class="text-gray-400">Item base</div>
       <div v-else class="w-8 h-8 flex items-center justify-center">
         <img :src="trend.icon" :alt="item.name" class="max-w-full max-h-full">
@@ -37,6 +38,7 @@
 <script>
 import { Prices, displayRounding } from '../Prices'
 import { isValuableBasetype, getDetailsId } from './getDetailsId'
+import RelatedItems from './RelatedItems'
 
 export default {
   props: {
@@ -45,6 +47,7 @@ export default {
       required: true
     }
   },
+  components: { RelatedItems },
   filters: { displayRounding },
   computed: {
     icon () {
diff --git a/src/components/trends/RelatedItems.vue b/src/components/trends/RelatedItems.vue
new file mode 100644
index 00000000..f3139ea5
--- /dev/null
+++ b/src/components/trends/RelatedItems.vue
@@ -0,0 +1,79 @@
+<template>
+  <ui-popper v-if="result" tag-name="div" class="flex" :delayOnMouseOut="150">
+    <template slot="reference">
+      <button class="text-gray-500 py-2 px-4 flex items-baseline"><i class="fas fa-chevron-circle-down"></i></button>
+    </template>
+    <div class="popper text-sm font-fontin-small-caps">
+      <div class="flex bg-gray-800 text-gray-400 w-full">
+        <div class="flex-1 p-2">
+          <div v-for="item in result.related" :key="item.detailsId"
+            :class="{ 'bg-gray-700 -mx-1 px-1': item.detailsId === detailsId }" class="rounded">
+            <div class="flex items-center flex-1">
+              <div class="w-8 h-8 flex items-center justify-center">
+                <img :src="item.icon" :alt="item.name" class="max-w-full max-h-full">
+              </div>
+              <i class="fas fa-arrow-right text-gray-600 px-2"></i>
+              <span class="px-1 text-base whitespace-no-wrap">{{ price(item).val | displayRounding(true) }} {{ icon[price(item).curr].text }}</span>
+            </div>
+            <div class="text-left text-gray-600 truncate mb-1">{{ item.name }}</div>
+          </div>
+        </div>
+        <div class="flex-1 p-2">
+          <div v-for="item in result.items" :key="item.detailsId">
+            <div class="flex items-center flex-1">
+              <div class="w-8 h-8 flex items-center justify-center">
+                <img :src="item.icon" :alt="item.name" class="max-w-full max-h-full">
+              </div>
+              <i class="fas fa-arrow-right text-gray-600 px-2"></i>
+              <span class="px-1 text-base whitespace-no-wrap">{{ price(item).val | displayRounding(true) }} {{ icon[price(item).curr].text }}</span>
+            </div>
+            <div class="text-left text-gray-600 truncate mb-1">{{ item.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ui-popper>
+</template>
+
+<script>
+import { ITEM_DROP } from '@/data'
+import { Prices, displayRounding } from '../Prices'
+
+export default {
+  props: {
+    detailsId: {
+      type: String,
+      required: true
+    }
+  },
+  filters: { displayRounding },
+  computed: {
+    icon () {
+      return {
+        e: {
+          url: 'https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyAddModToRare.png?scale=1&w=1&h=1',
+          text: 'exa'
+        },
+        c: {
+          url: 'https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyRerollRare.png?scale=1&w=1&h=1',
+          text: 'chaos'
+        }
+      }
+    },
+    result () {
+      if (!ITEM_DROP.has(this.detailsId)) return null
+
+      const r = ITEM_DROP.get(this.detailsId)
+      return {
+        related: r.query.map(id => Prices.findByDetailsId(id)),
+        items: r.items.map(id => Prices.findByDetailsId(id))
+      }
+    }
+  },
+  methods: {
+    price (item) {
+      return Prices.autoCurrency(item.receive.chaosValue, 'c')
+    }
+  }
+}
+</script>
diff --git a/src/data/index.ts b/src/data/index.ts
index af7d2eee..0616381a 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -4,6 +4,7 @@ import mods from './mods.json'
 import baseTypes from './base-types.json'
 import uniques from './uniques.json'
 import tradeTags from './trade-tags.json'
+import itemDrop from './item-drop.json'
 import { ItemCategory } from '../components/parser'
 
 export interface StatMatcher {
@@ -73,3 +74,15 @@ export interface UniqueItem {
 }
 
 export const Uniques = new Map(uniques as Array<[string, UniqueItem]>)
+
+export interface DropEntry {
+  query: string[]
+  items: string[]
+}
+
+export const ITEM_DROP = new Map<string, DropEntry>()
+for (const entry of (itemDrop as DropEntry[])) {
+  for (const query of entry.query) {
+    ITEM_DROP.set(query, entry)
+  }
+}
diff --git a/src/data/item-drop.json b/src/data/item-drop.json
new file mode 100644
index 00000000..32f60603
--- /dev/null
+++ b/src/data/item-drop.json
@@ -0,0 +1,178 @@
+[
+  {
+    "query": [
+      "splinter-of-uul-netol",
+      "uul-netols-breachstone"
+    ],
+    "items": [
+      "blessing-of-uul-netol",
+      "the-infinite-pursuit-goliath-greaves",
+      "uul-netols-kiss-labrys",
+      "the-anticipation-ezomyte-tower-shield"
+    ]
+  },
+  {
+    "query": [
+      "splinter-of-xoph",
+      "xophs-breachstone"
+    ],
+    "items": [
+      "blessing-of-xoph",
+      "the-formless-flame-siege-helmet",
+      "xophs-heart-amber-amulet",
+      "xophs-inception-bone-bow",
+      "the-escape"
+    ]
+  },
+  {
+    "query": [
+      "splinter-of-tul",
+      "tuls-breachstone"
+    ],
+    "items": [
+      "blessing-of-tul",
+      "tulborn-spiraled-wand",
+      "the-halcyon-jade-amulet",
+      "the-snowblind-grace-coronal-leather",
+      "the-escape"
+    ]
+  },
+  {
+    "query": [
+      "splinter-of-esh",
+      "eshs-breachstone"
+    ],
+    "items": [
+      "blessing-of-esh",
+      "voice-of-the-storm-lapis-amulet",
+      "hand-of-thought-and-motion-blinder",
+      "eshs-mirror-thorium-spirit-shield",
+      "the-escape"
+    ]
+  },
+  {
+    "query": [
+      "splinter-of-chayula",
+      "chayulas-breachstone"
+    ],
+    "items": [
+      "blessing-of-chayula",
+      "skin-of-the-loyal-simple-robe-6l",
+      "severed-in-sleep-cutlass",
+      "the-blue-dream-cobalt-jewel",
+      "the-green-dream-viridian-jewel",
+      "the-red-dream-crimson-jewel"
+    ]
+  },
+  {
+    "query": [
+      "sacrifice-at-dawn",
+      "sacrifice-at-midnight",
+      "sacrifice-at-noon",
+      "sacrifice-at-dusk"
+    ],
+    "items": [
+      "atziris-promise-amethyst-flask",
+      "doryanis-catalyst-vaal-sceptre",
+      "mortal-ignorance",
+      "mortal-hope",
+      "mortal-rage",
+      "mortal-grief",
+      "alluring-bounty",
+      "the-ethereal"
+    ]
+  },
+  {
+    "query": [
+      "mortal-ignorance",
+      "mortal-hope",
+      "mortal-rage",
+      "mortal-grief"
+    ],
+    "items": [
+      "atziris-acuity-vaal-gauntlets",
+      "atziris-disfavour-vaal-axe",
+      "the-vertex-vaal-mask",
+      "atziris-splendour-es-sacrificial-garb",
+      "atziris-splendour-evasion-es-life-sacrificial-garb",
+      "alluring-bounty",
+      "house-of-mirrors"
+    ]
+  },
+  {
+    "query": [
+      "volkuurs-key",
+      "yriels-key",
+      "inyas-key",
+      "ebers-key"
+    ],
+    "items": [
+      "ebers-unification-hubris-circlet",
+      "inyas-epiphany-arcanist-slippers",
+      "yriels-fostering-poison-exquisite-leather",
+      "yriels-fostering-bleeding-exquisite-leather",
+      "yriels-fostering-maim-exquisite-leather",
+      "volkuurs-guidance-cold-zealot-gloves",
+      "volkuurs-guidance-fire-zealot-gloves",
+      "volkuurs-guidance-lightning-zealot-gloves"
+    ]
+  },
+  {
+    "query": [
+      "fragment-of-the-minotaur",
+      "fragment-of-the-chimera",
+      "fragment-of-the-phoenix",
+      "fragment-of-the-hydra"
+    ],
+    "items": [
+      "starforge-infernal-sword",
+      "dying-sun-ruby-flask",
+      "shapers-touch-crusader-gloves",
+      "solstice-vigil-onyx-amulet",
+      "voidwalker-murder-boots",
+      "fragment-of-knowledge",
+      "fragment-of-shape"
+    ]
+  },
+  {
+    "query": [
+      "fragment-of-eradication",
+      "fragment-of-enslavement",
+      "fragment-of-purification",
+      "fragment-of-constriction"
+    ],
+    "items": [
+      "blasphemers-grasp-assassins-mitts",
+      "cyclopean-coil-leather-belt",
+      "nebuloch-nightmare-mace",
+      "shimmeron-tornado-wand",
+      "hopeshredder-ranger-bow",
+      "watchers-eye-prismatic-jewel",
+      "impresence-cold-onyx-amulet",
+      "impresence-lightning-onyx-amulet",
+      "impresence-fire-onyx-amulet",
+      "impresence-chaos-onyx-amulet",
+      "impresence-physical-onyx-amulet",
+      "fragment-of-terror",
+      "fragment-of-emptiness"
+    ]
+  },
+  {
+    "query": [
+      "fragment-of-knowledge",
+      "fragment-of-shape",
+      "fragment-of-terror",
+      "fragment-of-emptiness"
+    ],
+    "items": [
+      "watchers-eye-prismatic-jewel",
+      "disintegrator-maelstrom-staff",
+      "voidfletcher-penetrating-arrow-quiver",
+      "mark-of-the-elder-steel-ring",
+      "mark-of-the-shaper-opal-ring",
+      "indigon-hubris-circlet",
+      "voidforge-infernal-sword",
+      "the-eternity-shroud-blood-raiment"
+    ]
+  }
+]
\ No newline at end of file