First-level ReactJS abstraction

gistfile1.txt

##games/show.html.erb

<%= react_component("App", @data %>

## games_controller.rb

  def show
    @game = Game.current_game_by_id(params[:id])
    @user = User.find(session[:user_id])
    @card = @game.deck.cards[@game.card_idx]
    @letters = ["a", "b", "c"]
    @all_cards = @game.deck.cards.all
    @cards = [
              ([CardBehavior.all.shuffle] - [@card.answer]).flatten.first.name,
              ([CardBehavior.all.shuffle] - [@card.answer]).flatten.first.name,
              @card.answer
            ].shuffle
    @data = {game: @game, user: @user, card: @card, letters: @letters, cards: @cards, deck: @game.deck, all_cards: @all_cards }.to_json
  end

## assets/javascripts/components/App.jsx

var App = React.createClass({ 
  render: function() {
    var table = [];
    $.each(this.props.data.cards, function(idx, card) {
        table.push(<TableRow card={card} letter={data.letters[idx]} />);
    });
    return (
    <div className="col-sm-12 games-show-wrapper">
+        <div className="image-gradient-dynamic games-show-header">
+          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png" alt=""/>
+          <div className="overlay"></div>
+          <div className="copy">
+            <h2>You are playing the following deck: <b> {this.props.data.deck.name}</b></h2>
+            <div className="score-holder flexbox">
+              <p className="score-counter">Correct answers: <b>  {this.props.data.game.right}</b></p>
+              <p className="score-counter">Incorrect answers: <b> {this.props.data.game.wrong }</b></p>
+            </div>
+          </div>
+        </div>
+      </div>
        <div class="col-sm-12 card-wrapper">
+           <div class="col-md-5 card-image-holder">
+               <div class="image-wrapper">
+                   
+                   <h1>{ this.props.card.name }</h1>
+                   <img src={ this.props.card.image_url } height="370" />
+               </div>
+           </div>
+           <div class="col-md-7 table-wrapper">
+               <h2>This spirit animal has the <b>following attribute: </b></h2>
+               <table class="tables">
+                   <thead><br />
+                       <tr><p style="font-size: 1.5em;">Choose one of the following:</p></tr>
+                   </thead><br />
+                   <tbody>
+                       { table }
+                   </tbody>
+               </table>
+               <br /><br />
+               <div class="button-wrapper">
+                   <div class="col-sm-3 col-sm-offset-1">
+                       <form class="" action="/games/{this.props.game.id}/guess" method="post">
+                           <input type="hidden" name="selection" value={ this.props.data.cards[0]}/>
+                            <input type="submit" name="name" value="A" class="hero-button"/>
+                       </form>
+                   </div>
+                   <div class="col-sm-3">
+                       <form class="" action="/games/{this.props.game.id}/guess" method="post">
+                           <input type="hidden" name="selection" value={ this.props.data.cards[1] }/>
+                           <input type="submit" name="name" value="B" class="hero-button"/>
+                       </form>
+                   </div>
+                   <div class="col-sm-3">
+                       <form class="" action="/games/{this.props.game.id }/guess" method="post">
+                           <input type="hidden" name="selection" value={ this.props.data.cards[2]}/>
+                           <input type="submit" name="name" value="C" class="hero-button"/>
+                       </form>
+                   </div>
+               </div>
+               <br />
+           </div>
+<      /div>
    );
  }
}); 
  
## assets/javascripts/components/Table.jsx 
var TableRow = React.createClass({
  render: function() {
    return (
      <tr>
        <td className="action-td"><b> {this.props.letter }</b></td>
        <td className="hover-td">{ this.props.card }</td>
      </tr>
    );
  }
});