This is an example showing how to use the Guild Wars 2 API to create a simple dye gallery using Ruby on Rails.
The first step is to generate a “Dye” model with the attributes of “content” as “text” and “color” also as “text”. This will enable the data gathered from the API to be organized for use in the gallery.
rails g model Dye content:text color:text
Next we want to add the Guild Wars 2 API gem to our gemfile.
Make sure to run “bundle install” after adding the gem.
Heading to the seeds.rb file of our database we put the following code:
GW2::Misc.colors.each do |dyes|
name = dyes['name']
color_list = dyes['metal']['rgb']
color = color_list.to_s + ", " + color_list.to_s + ", " + color_list.to_s
Dye.create!(:content => name, :color => color)
Dye.delete_all simply deletes the dyes so that we load a fresh database each time.
The next line calls the API specifying the section Misc>colors.
Then for each ‘color’ it finds the ‘name’ and sets it to the variable ‘name’, it finds the RGB color combination and sets it to the variable ‘color_list’. After that it converts each component of the RGB color array to a string which will then be fed into the css in our gallery view.
Last, each dye is created with name assigned to ‘:content’, and color assigned to ‘:color’.
In the index page of our dyes view we have the following:
<% @dyes.each do |dye| %>
<div align="center" class="dye">
<p class="content"><%= dye.content %></p>
<div class="thumb" style="background-color: rgb(<%= dye.color %>);"></div>
<% end %>
For each dye we create a div that displays the name of the dye color and a thumbnail div that is filled with the color itself using the RGB color we setup earlier.
As far as styling goes here are the critical parts:
To display the dyes and sort them we create a “Dyes Controller” with an index method.
@dyes = Dye.order("content ASC")
The final product looks like this: