mirror of
https://github.com/Kvan7/Exiled-Exchange-2.git
synced 2026-09-25 22:25:58 +00:00
feat: relate items
This commit is contained in:
Alexander Drozdov
@@ -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 () {
|
||||
|
||||
@@ -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>
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user