0

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.

Improve this question

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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) %>
Improve this answer

Comments

0 
<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' %>
Improve this answer

1 Comment

Thank you very much. Sorry I found another question similar. Here is an original that works just the same. stackoverflow.com/questions/17820145/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.