put ruby code into html string? Sinatra, Ruby

Question

I'm using Sinatra. I have a deck: in main.rb

session[:deck] = []
suit  = ['Clubs', 'Spades', 'Hearts', 'Diamonds']
values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'Jack', 'Queen','King', 'Ace']
session[:deck] = suit.product(values).shuffle!

In my game.erb I want to display the images associated with each of these arrays. I have all the images in my public/images/cards. In the game.erb I can get any card to display statically like so:

Here are your cards: <img src="/images/cards/clubs_10.jpg" height="120" width="120">

Is there a way I can do something like:

<img src='/images/cards/session[:deck].first_session[:deck].last.jpg' height="120" width="120>

I want to make a helper method, but I can't seem to get started.

Answer 1

You can create a method in your helpers:

def display_image(card)

"<img src='/images/cards/#{card[0]}_#{card[1]}.jpg' height='100' width='100'>"
end

Then you would call your method like so:

<%= display_image(card) %>

Answer 2

The definition of which card image applies to a particular card needs to be done in the controller, not in the view. I'd structure things differently:

SUITS  = %w[Clubs Spades Hearts Diamonds]
VALUES = %w[2 3 4 5 6 7 8 9 10 Jack Queen King Ace]
CARDS = SUITS.product(VALUES) 
IMAGES = Hash[ CARDS.map{ |suit, value| [[suit, value], File.join('/images/cards', suit, "#{ value }.jpg") ] } ] 
session = {deck:[]}
session[:deck] = CARDS.shuffle

Here's what is defined at this point:

CARDS
# => [["Clubs", "2"], ["Clubs", "3"], ["Clubs", "4"], ["Clubs", "5"], ["Clubs", "6"], ["Clubs", "7"], ["Clubs", "8"], ["Clubs", "9"], ["Clubs", "10"], ["Clubs", "Jack"], ["Clubs", "Queen"], ["Clubs", "King"], ["Clubs", "Ace"], ["Spades", "2"], ["Spades", "3"], ["Spades", "4"], ["Spades", "5"], ["Spades", "6"], ["Spades", "7"], ["Spades", "8"], ["Spades", "9"], ["Spades", "10"], ["Spades", "Jack"], ["Spades", "Queen"], ["Spades", "King"], ["Spades", "Ace"], ["Hearts", "2"], ["Hearts", "3"]...

IMAGES
# => {["Clubs", "2"]=>"/images/cards/Clubs/2.jpg", ["Clubs", "3"]=>"/images/cards/Clubs/3.jpg", ["Clubs", "4"]=>"/images/cards/Clubs/4.jpg", ["Clubs", "5"]=>"/images/cards/Clubs/5.jpg", ["Clubs", "6"]=>"/images/cards/Clubs/6.jpg", ["Clubs", "7"]=>"/images/cards/Clubs/7.jpg", ["Clubs", "8"]=>"/images/cards/Clubs/8.jpg", ["Clubs", "9"]=>"/images/cards/Clubs/9.jpg", ["Clubs", "10"]=>"/images/cards/Clubs/10.jpg", ["Clubs", "Jack"]=>"/images/cards/Clubs/Jack.jpg", ["Clubs", "Queen"]=>"/images/...

session
# => {:deck=>[["Hearts", "10"], ["Hearts", "King"], ["Hearts", "2"], ["Hearts", "Jack"], ["Spades", "5"], ["Spades", "Queen"], ["Clubs", "Jack"], ["Spades", "King"], ["Spades", "Ace"], ["Hearts", "5"], ["Hearts", "Queen"], ["Clubs", "9"], ["Clubs", "3"], ["Diamonds", "3"], ["Clubs", "4"], ["Diamonds", "King"], ["Clubs", "8"], ["Hearts", "4"], ["Spades", "2"], ["Clubs", "5"], ["Clubs", "7"], ["Diamonds", "8"], ["Clubs", "2"], ["Hearts", "Ace"], ["Clubs", "King"], ["Spades", "10"], ["Diamon...

In your view, you can easily figure out which image to present for a particular card by looking up the card in the IMAGES hash:

session[:deck].each do |card|
  puts IMAGES[card]
end

# >> /images/cards/Hearts/10.jpg
# >> /images/cards/Hearts/King.jpg
# >> /images/cards/Hearts/2.jpg
# >> /images/cards/Hearts/Jack.jpg
# >> /images/cards/Spades/5.jpg
# >> /images/cards/Spades/Queen.jpg
# >> /images/cards/Clubs/Jack.jpg
# >> /images/cards/Spades/King.jpg
# >> /images/cards/Spades/Ace.jpg
# >> /images/cards/Hearts/5.jpg
# >> /images/cards/Hearts/Queen.jpg
# >> /images/cards/Clubs/9.jpg
# >> /images/cards/Clubs/3.jpg
# >> /images/cards/Diamonds/3.jpg
# >> /images/cards/Clubs/4.jpg
# >> /images/cards/Diamonds/King.jpg
# >> /images/cards/Clubs/8.jpg
# >> /images/cards/Hearts/4.jpg
# >> /images/cards/Spades/2.jpg
# >> /images/cards/Clubs/5.jpg
# >> /images/cards/Clubs/7.jpg
# >> /images/cards/Diamonds/8.jpg
# >> /images/cards/Clubs/2.jpg
# >> /images/cards/Hearts/Ace.jpg
# >> /images/cards/Clubs/King.jpg
# >> /images/cards/Spades/10.jpg
# >> /images/cards/Diamonds/4.jpg
# >> /images/cards/Spades/9.jpg
# >> /images/cards/Spades/7.jpg
# >> /images/cards/Spades/8.jpg
# >> /images/cards/Clubs/10.jpg
# >> /images/cards/Hearts/8.jpg
# >> /images/cards/Diamonds/Jack.jpg
# >> /images/cards/Diamonds/6.jpg
# >> /images/cards/Hearts/7.jpg
# >> /images/cards/Hearts/9.jpg
# >> /images/cards/Hearts/6.jpg
# >> /images/cards/Diamonds/Ace.jpg
# >> /images/cards/Hearts/3.jpg
# >> /images/cards/Diamonds/Queen.jpg
# >> /images/cards/Diamonds/10.jpg
# >> /images/cards/Spades/4.jpg
# >> /images/cards/Spades/6.jpg
# >> /images/cards/Clubs/Queen.jpg
# >> /images/cards/Diamonds/7.jpg
# >> /images/cards/Diamonds/5.jpg
# >> /images/cards/Spades/3.jpg
# >> /images/cards/Diamonds/9.jpg
# >> /images/cards/Spades/Jack.jpg
# >> /images/cards/Diamonds/2.jpg
# >> /images/cards/Clubs/6.jpg
# >> /images/cards/Clubs/Ace.jpg

Ruby Hashes can have an array for a key, which makes it very easy to find the image that matches a particular card.

Answer 3

<img src='/images/cards/<%= "#{session[:deck].first}_#{session[:deck].last} %>.jpg' height="120" width="120>

But probably it's better to do:

<%= image_tag "cards/#{session[:deck].first}_#{session[:deck].last}.jpg", size: '120' %>