Horadric Helper Project

Posted on About project, Horadric Helper

>> Horadric Helper on GitHub <<

Table Of Contents

1. About project 4. Code examples
2. Items and passives 5. Applications
3. Display settings

About project

This is a beta release of Horadric Helper – a JavaScript library that allows you to display items and passives from Path of Exile using simple HTML tags. Similar functionality exists on the official Path of Exile forums, but it is a bit limited and you can use it only for existing items. With this library instead of loading from PoE’s database we can load items and passives ourselves by providing their Configuration Objects or by getting data from the game or PoB.

In future releases I plan to add more ARPG games – starting with Diablo series (PoE was first in line so I can use to write about my dumb builds).

In this article I just want to show-off what you can do with this library. If you want to read full documentation or contribute go to project’s GitHub page. If you find any bugs or have issues with getting it to work on your website – let me know.

Items and passives

Horadric Helper adds custom HTML tags – <poe-item> and <poe-passive> – which can be used alongside other, standard HTML tags.

Sections

Items

Using <poe-item> tag we can display Equipment, Flasks, Currency, Gems and Maps. (Hover over icons to see tooltips)

Equipment we can display includes Weapons, Armor, Jeweler, Jewels and even Trinkets.

Passives

We can use <poe-passive> tag to display nodes from player’s Passive Tree. There are Basic, Notable, Keystone and Mastery passives (including Ascendancy nodes).

We can also use <poe-passive> tag to display nodes from Atlas Passive Tree. That includes Basic, Notable and Keystone nodes.

Getting items and passives data

  • Custom items and passives can be created using Configuration Objects.
  • Item’s data can be copied straight from the game by hovering over items and pressing CTRL+C. You can use that data to create that item’s config.
  • Item’s data can also be copied from www.pathofexile.com/trade and used it in the same way as with data from the game.
  • Items exported from Path of Buliding can also be used – to copy item’s data to clipboard navigate to “Items” tab, select item you want to copy and press CTRL+C. (Do not copy item’s data from “Edit Item” popup – it is incomplete and won’t work).

Display settings

Tag’s display behavior can be modified using HTML attributes (also know as properties or just props).

Sections

Display modes

There are 3 display modes: text, icon and showcase.

Text mode

Simple text display set with as-text prop. By default it will display item’s or passive’s name, but it can be changed using label-text prop.

OR 

<poe-item reference="Carrion Roar" as-text></poe-item>
 OR
<poe-item reference="Carrion Roar" as-text label-text="Teh Shiny Claw"></poe-item>

Icon mode

This mode shows an icon with a label underneath. It is set with as-icon prop.

  • Like with text mode label’s text can be changed with label-text prop.
  • This mode will only work if you have provided image URL in the Configuration Object for given item or passive.
  • Icon’s size can be set with icon-size prop. 

<poe-item reference="Carrion Roar" as-icon icon-size="sm"></poe-item>
<poe-item reference="Carrion Roar" as-icon icon-size="md"></poe-item>
<poe-item reference="Carrion Roar" as-icon icon-size="lg"></poe-item>
<poe-item reference="Carrion Roar" as-icon icon-size="xlg"></poe-item>
<poe-item reference="Carrion Roar" as-icon icon-size="auto" label-text="Teh Shiny Claw"></poe-item>

Showcase mode

This mode simply shows item’s or passive’s tooltip and is set with as-showcase prop. There is no hover interaction in this mode.


<poe-item reference="Carrion Roar" as-showcase></poe-item>

Icons

Icons can be displayed by providing iconUrl in Configuration Object and icon-inside or icon-outside prop.

  • This also applies to as-icon mode.
  • Icon’s size can be set with icon-size prop – there are 5 icon sizes: sm, md, lg, xlg and auto.
  • auto size tries to pick appropriate image dimensions based on type of object being displayed.

Icon inside


<poe-item reference="Carrion Roar" as-showcase icon-size="lg" icon-inside hide-sections="properties"></poe-item>

Icon outside


<poe-item reference="Carrion Roar" as-showcase icon-size="lg" icon-outside hide-sections="properties"></poe-item>

Icon sizes

There are 5 icon sizes: sm, md, lg, xlg and auto.


<poe-item reference="Carrion Roar" as-showcase icon-inside icon-size="sm" hide-sections="modifiers;implicits;properties;"></poe-item>
<poe-item reference="Carrion Roar" as-showcase icon-inside icon-size="md" hide-sections="modifiers;implicits;properties;"></poe-item>
<poe-item reference="Carrion Roar" as-showcase icon-inside icon-size="lg" hide-sections="modifiers;implicits;properties;"></poe-item>
<poe-item reference="Carrion Roar" as-showcase icon-inside icon-size="xlg" hide-sections="modifiers;implicits;properties;"></poe-item>
<poe-item reference="Carrion Roar" as-showcase icon-inside icon-size="auto" hide-sections="modifiers;implicits;properties;"></poe-item>

Where to get icons

  • Best place to get icons is official PoE images server – web.poecdn.com/images. Sadly there is no search function so it can be hard to figure out the exact URL for an image that we may want. Best way to solve this I have found so far is to use poedb.tw to search for an item or passive and copy it’s image URL.
  • There are also icons on PoE Wiki, but I would strongly discourage using them as they can be slow to fetch.
  • Once you get icons that you need you can self-host them for best performance.

Sockets

Displaying sockets

If item contains sockets data you can display them with props show-sockets and show-sockets-in-showcase.
There are 6 types of sockets available – Red, Blue, Green, White, Abyss and Delve. 


<poe-item reference="New Glorious Plate" show-sockets show-sockets-in-showcase icon-size="lg" as-icon></poe-item>

Socketing items

Socketing items is a bit more complicated – to place an item into a socket you need to assign that item to specific socket slot using Configuration Object.
In the game you can socket only gems, jewels and fossils, but with this library you can socket pretty much any item.


<!-- Html --->
<poe-item reference="Fortify Shield" show-sockets show-sockets-in-showcase icon-size="lg" as-icon></poe-item>



// Configuration Object
{
  "reference": "Fortify Shield",
  "extensions": {
    "socketReferences": {
      "1": "Shield Charge",
      "2": "Fortify Support",
      "3": "Increased Duration Support",
    }
  },
  "data": `...`
}

Stacks

If item contains stacks data you can show stacks above item’s icon on in the label.

OR 

<poe-item reference="Exalted Orb" as-icon icon-size="md" show-stacks></poe-item>
 OR
<poe-item reference="Exalted Orb" as-text show-stacks-in-label></poe-item>

Hiding and dimming sections

Sections can be hidden or greyed-out by passing hide-sections or dim-sections props. You can choose to target entire sections or specific lines. List of all sections is here.

Hiding sections


<poe-item reference="Carrion Roar" as-showcase hide-sections="modifiers:1,3,5;"></poe-item>
<poe-item reference="Carrion Roar" as-showcase hide-sections="implicits;properties;item-level;"></poe-item>

Dimming sections


<poe-item reference="Carrion Roar" as-showcase dim-sections="implicits;properties;item-level;"></poe-item>
<poe-item reference="Carrion Roar" as-showcase dim-sections="modifiers:1,3,5;"></poe-item>

Code examples

Live code examples on CodePen.io

You can play around with them – add props, change config objects, etc.

  • Item created with Config Object – with modified label text and medium icon – link
  • Item created with data from the game – as showcase, with icon inside and with item level hidden – link
  • Item created with data from Path of Building (PoB) – with sockets – link
  • Currency item with stacks displayed – link
  • Passive node created with Config Object – as text, with icon outside – link
  • Item with flavour text – link
  • Dang yo – link

Applications

Here are a few ideas on how to use various combinations of display settings.

Sections

Embedding in text

When in text mode tags can be used as a part of normal sentences. This can help readers look-up items and passives instantly without having to go to the wiki.

This is a paragraph form my guide:

“ gives us “Unaffected by Curses” status. This means that we will still get cursed and proc , but those curses will have no effect on us.„

Showing priorities

In this example – ascendance notables priority.

Synergies

Synergies between items and passives can get rather complex. Showing them on a simple diagram can help – especially for new players and visual learners (like me). To increase clarity we can show-off most important sections of items and passives by hiding and dimming less relevant parts.

In this example – popular items combo for totem-based builds that utilizes self-cursing.