Armory-embeds NPM

armory-embeds

Guild Wars 2 Armory is arming the GW2 community with powered up embeds for items, skills, and more.

Want something more low level? Want to integrate directly with your React app instead of this high level abstraction? Check out the armory-ui-components library.

Usage

First add the embeds to your html:

<body>
  <div data-armory-embed="skills" data-armory-ids="5507,5508,5510,5515"></div>
</body>

Then add the embed script after them:

<script async src="https://unpkg.com/armory-embeds@^0.x.x/armory-embeds.js"></script>

When the document has fully loaded the embeds will then be loaded.

Note the semvar range. When breaking changes are introduced, this will be incremented by one every time. For example from @^0.x.x to @^1.x.x.

Supplementary Libraries

armory-embeds-chat-codes - parses an ingame chat code to armory embed markup.

Options

Global Settings

Entirely optional.

Create an object on the document object named GW2A_EMBED_OPTIONS. See below for an example. Make sure the assign this config before declaring the gw2a script.

prop	type	required	description
lang	string	no	The language the embeds will be loaded in. Supported values are: en, fr, de, es, zh, ru
persistToLocalStorage	boolean	no	Turns data persistence on or off. Default to true.
forceCacheClearOnNextRun	string	no	Forces data cache to be cleared. Use wisely. Use a unique key every time you want to clear the cache.

document.GW2A_EMBED_OPTIONS = {
  lang: 'en',
  persistToLocalStorage: true,
  forceCacheClearOnNextRun: '1',
};

Styles

Each embed has a class that you can target, each class follows the pattern .gw2a-{EMBED_NAME}-embed.

.gw2a-character-embed {}
.gw2a-skills-embed {}
.gw2a-items-embed {}
.gw2a-amulets-embed {}
.gw2a-traits-embed {}
.gw2a-specializations-embed {}

Embeds

Skills

<div
  data-armory-embed="skills"
  data-armory-ids="5507,5508,5510,5515">
</div>

<div
  data-armory-embed="skills"
  data-armory-ids="5508,332211,5510,-1"
  data-armory-size="40"
  data-armory-blank-text="This can be replaced with any text!"
>
</div>

attribute	value	required	description
data-armory-embed	skills	yes
data-armory-ids	numbers delimited by commas	yes	The skill ids you want to load. If you pass `-1` you will load an empty box instead of the skill.
data-armory-size	number	no	The size of each skill in the embed.
data-armory-blank-text	string	no	When loading an skill of id `-1` you can override the tooltip text to be whatever you want.
data-armory-inline-text	string	no	Optional inline text that will be displayed to the right of the icon. You can pass in `wiki` to use a gw2 wiki URL, or pass in any other text that will be used as the link.

Items

<div
  data-armory-embed="items"
  data-armory-blank-text="Some other text can go here!"
  data-armory-size="60"
  data-armory-ids="24836,-1,74412,46774,39620,1379"
  data-armory-1379-upgrades="24615,24815"
  data-armory-1379-upgrade-count="{\"24815\": 3}"
  data-armory-1379-infusions="49426,49426"
>
</div>

<div
  data-armory-embed="items"
  data-armory-ids="77482"
  data-armory-77482-stat="656"
>
</div>

attribute	value	required	description
data-armory-embed	items	yes
data-armory-ids	numbers delimited by commas	yes	The item ids you want to load. If you pass `-1` you will load an empty box instead of the item.
data-armory-size	number	no	The size of each item in the embed.
data-armory-blank-text	string	no	When loading an item of id `-1` you can override the tooltip text to be whatever you want.
data-armory-{ITEM_ID}-stat	number	no	Loads the item with the stat of choice.
data-armory-{ITEM_ID}-skin	number	no	Loads the item with the skin of choice.
data-armory-{ITEM_ID}-upgrades	number	no	Loads the item with the upgrades of choice.
data-armory-{ITEM_ID}-infusions	number	no	Loads the item with the infusions of choice.
data-armory-{ITEM_ID}-upgrade-count	stringified `{ [number]: number }`	no	Sets the upgrade counts.
data-armory-inline-text	string	no	Optional inline text that will be displayed to the right of the icon. You can pass in `wiki` to use a gw2 wiki URL, `gw2spidy` to use a gw2spidy URL, or pass in any other text that will be used as the link.

Specializations

<div
  data-armory-embed="specializations"
  data-armory-ids="3,332211"
  data-armory-3-traits="1761,1774,1749"
>
</div>

attribute	value	required	description
data-armory-embed	specializations	yes
data-armory-ids	numbers delimited by commas	yes	The specialization ids you want to load.
data-armory-{SPEC_ID}-traits	numbers delimited by commas	no	Traits you want to select for the specialization. Entirely optional, you can select any combination.

Traits

<div
  data-armory-embed="traits"
  data-armory-ids="820,-1,1694"
  data-armory-blank-text="This could be anything you want!"
>
</div>

attribute	value	required	description
data-armory-embed	traits	yes
data-armory-ids	numbers delimited by commas	yes	The trait ids you want to load. If you pass `-1` you will load an empty box instead of the trait.
data-armory-size	number	no	The size of each trait in the embed.
data-armory-blank-text	string	no	When loading an trait of id `-1` you can override the tooltip text to be whatever you want.
data-armory-inline-text	string	no	Optional inline text that will be displayed to the right of the icon. You can pass in `wiki` to use a gw2 wiki URL, or pass in any other text that will be used as the link.

Amulets

<div
  data-armory-embed="amulets"
  data-armory-ids="332211,-1"
  data-armory-size="30"
  data-armory-blank-text="This is a blank space!"
>
</div>

attribute	value	required	description
data-armory-embed	amulets	yes
data-armory-ids	numbers delimited by commas	yes	The amulet ids you want to load. If you pass `-1` you will load an empty box instead of the amulet.
data-armory-size	number	no	The size of each amulet in the embed.
data-armory-blank-text	string	no	When loading an amulet of id `-1` you can override the tooltip text to be whatever you want.
data-armory-inline-text	string	no	Optional inline text that will be displayed to the right of the icon. You can pass in `wiki` to use a gw2 wiki URL, or pass in any other text that will be used as the link.

Finding IDs

Unfortunately you can't pass the embeds the item/skill etc names. You have to pass the specific ids.

Item IDs

Item IDs are easy enough, go look at https://www.gw2spidy.com.

Skill/Trait/Specialization IDs

Best bet is to look at the GW2 Wiki, for example: https://wiki.guildwars2.com/wiki/Virtue_of_Justice.

Who Is Using armory-embeds?

Don't see your site? Add it in a Pull Request!

Troubleshooting

Hit @itsmadou up on twitter, or post an issue if you think something is a bug.

Local Development

Getting started

git clone git@github.com:madou/armory-embeds.git
cd armory-embeds
yarn install
npm run tdd # Run tests in watch mode
npm start # Run react storybook for local development