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:
|
Dye.delete_all GW2::Misc.colors.each do |dyes| name = dyes[1]['name'] color_list = dyes[1]['metal']['rgb'] color = color_list[0].to_s + ", " + color_list[1].to_s + ", " + color_list[2].to_s Dye.create!(:content => name, :color => color) end |
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:
|
<div class="dyes"> <div class="container"> <% @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> </div> <% end %> </div> </div> |
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:
|
.dye { background-color: #fff; font-weight: 300; padding: 16px; margin-bottom: 0; float: left; width: 9%; } .thumb { border-radius: 15px; height:100px; width:100px; } |
To display the dyes and sort them we create a “Dyes Controller” with an index method.
|
def index @dyes = Dye.order("content ASC") end |
The final product looks like this:
