add jQuery to make jeopardy game interaction work!

README.md

@@ -1,4 +1,7 @@
-#gambit + trebek
+#gambit + trebek + Oliver's JS magic = mempoints
+
+A game I created to test your memory under pressure. Can you rack up 2000 points before the time limit is up?
+
 
 
 ## gambit is a server side application that allows you to design cards and build decks and serve them to a client

app.rb

@@ -12,12 +12,18 @@ class Gambit < Sinatra::Application
     set :public_folder, 'public'
   end
 
+  get "/oliversmemorygame.css" do
+    scss :oliversmemorygame
+  end
+
   get "/styles.css" do
     scss :trebek
   end
 
   get "/" do
-    haml :index
+    deck = Deck.new("data/olivers_memory_game.yml")
+    @cards = deck.cards
+    haml :olivers_memory_game
   end
 
   get "/games/new/" do
@@ -62,13 +68,13 @@ def partial(template,locals=nil)
         template = template.is_a?(Array) ? :"_#{template.first.class.to_s.downcase}" : :"_#{template.class.to_s.downcase}"
       end
       if locals.is_a?(Hash)
-        haml template, {}, locals      
+        haml template, {}, locals
       elsif locals
         locals=[locals] unless locals.respond_to?(:inject)
         locals.inject([]) do |output,element|
           output << haml(template,{template.to_s.delete("_").to_sym => element})
         end.join("\n")
-      else 
+      else
         haml template
       end
     end

data/olivers_memory_game.yml

@@ -0,0 +1,40 @@
+- points: 200
+  siblings: two
+- points: 200
+  siblings: two
+- points: 200
+  siblings: two
+- points: 200
+  siblings: two
+- points: 200
+  siblings: two
+- points: 200
+  siblings: two
+- points: 300
+  siblings: three
+- points: 300
+  siblings: three
+- points: 300
+  siblings: three
+- points: 300
+  siblings: three
+- points: 300
+  siblings: three
+- points: 300
+  siblings: three
+- points: 400
+  siblings: four
+- points: 400
+  siblings: four
+- points: 400
+  siblings: four      
+- points: 400
+  siblings: four
+- points: 400
+  siblings: four
+- points: 400
+  siblings: four
+- points: 400
+  siblings: four
+- points: 400
+  siblings: four

lib/memory_card.rb

@@ -0,0 +1,8 @@
+class Card
+  attr_reader :points, :siblings
+
+  def initialize(data)
+    @points, @siblings = data["points"], data["siblings"];
+  end
+
+end

public/jquery.shuffle.js

@@ -0,0 +1,24 @@
+(function($){
+
+    $.fn.shuffle = function() {
+
+        var allElems = this.get(),
+            getRandom = function(max) {
+                return Math.floor(Math.random() * max);
+            },
+            shuffled = $.map(allElems, function(){
+                var random = getRandom(allElems.length),
+                    randEl = $(allElems[random]).clone(true)[0];
+                allElems.splice(random, 1);
+                return randEl;
+           });
+
+        this.each(function(i){
+            $(this).replaceWith($(shuffled[i]));
+        });
+
+        return $(shuffled);
+
+    };
+
+})(jQuery);

public/oliver.js

@@ -0,0 +1,76 @@
+// nikliver.js
+
+
+$(document).ready(function() {
+
+  var $cards = $(".card").not(".cat-card");
+  var $buttons = $("button");
+
+  $cards.on("click", function(){
+   var $this = $(this);
+   var $value = $this.find(":first-child");
+   var $question = $this.find(":nth-child(2)");
+   var $answer = $this.find(":nth-child(3)");
+   var $notChosen = $cards.not(this);
+
+   //if player hasn't chosen this card already and the selected card isn't disabled
+   if (!$this.hasClass("played") && !$this.hasClass("disabled")) {
+
+    if(isVisible($value)) {   // if point value is visible
+      $this.addClass("chosen"); //card is chosen
+      $notChosen.addClass("disabled");    //disabled all other cards 
+      $value.fadeOut();
+      $question.fadeIn();
+      enableButtons($value.text());
+    } else if(isVisible($question)) {  //if question is visible
+      $question.fadeOut();
+      $answer.fadeIn();
+    } else {   // if answer is visible
+      if(clicked == false) {
+        alert("Please change the score of whoever guessed correctly!");
+        return false
+      }
+      $this.removeClass("chosen").addClass("played");;
+      $notChosen.removeClass("disabled");
+      $answer.toggle();
+      $buttons.addClass("disabled");
+    }
+
+   } 
+  });
+
+
+  function isVisible(cardObject) {
+    return cardObject.is(":visible");
+  }
+
+  function enableButtons(cardValue) {
+    var cardValInt = Number(cardValue);
+    clicked = false;
+    var $buttons = $(".score button");   // must get all buttons again because this function doesn't have access to the scope in which I first defined $buttons
+    $buttons.removeClass("disabled");
+    $buttons.on("click", function() {
+      clicked = true;
+      var $this = $(this);
+      var $scoreContainer = $this.parent().children().filter("h2");
+      var score = Number($scoreContainer.text());
+      if(!$this.hasClass("disabled")) {  // if this button isn't disabled
+        if($this.hasClass("up")) {   //if user is clicking on an up button
+          score += cardValInt;     //increment the score by the value of the card
+          $scoreContainer.text(String(score));   //set the container text to the score
+          $buttons.addClass("disabled")
+        } else  {  //if button clicked is down
+          score -= cardValue;    // subtract card value from score
+          $scoreContainer.text(String(score)); //set the container text to the score
+          $buttons.addClass("disabled");
+        }
+      }
+
+    });
+    return clicked
+  }
+
+
+});
+
+