Add support for custom matching cards.

achopragh · Nov 11, 2017 · 8fee08f · 8fee08f
1 parent ec96a31
commit 8fee08f
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 8 deletions.
diff --git a/css/MemoryGame.css b/css/MemoryGame.css
@@ -283,3 +283,50 @@ body {
 .back.card-15 {
   background-image: url(../images/fruits/strawberry.jpg);
 }
+
+/** Matching Cards **/
+.back.matching.card-1 {
+  background-image: url(../images/matching-fruits/apple.jpg);
+}
+.back.matching.card-2 {
+  background-image: url(../images/matching-fruits/fig.jpg);
+}
+.back.matching.card-3 {
+  background-image: url(../images/matching-fruits/grape.jpg);
+}
+.back.matching.card-4 {
+  background-image: url(../images/matching-fruits/kiwi.jpg);
+}
+.back.matching.card-5 {
+  background-image: url(../images/matching-fruits/lemon.jpg);
+}
+.back.matching.card-6 {
+  background-image: url(../images/matching-fruits/lime.jpg);
+}
+.back.matching.card-7 {
+  background-image: url(../images/matching-fruits/mango.jpg);
+}
+.back.matching.card-8 {
+  background-image: url(../images/matching-fruits/melon.jpg);
+}
+.back.matching.card-9 {
+  background-image: url(../images/matching-fruits/orange.jpg);
+}
+.back.matching.card-10 {
+  background-image: url(../images/matching-fruits/peach.jpg);
+}
+.back.matching.card-11 {
+  background-image: url(../images/matching-fruits/pear.jpg);
+}
+.back.matching.card-12 {
+  background-image: url(../images/matching-fruits/pinapple.jpg);
+}
+.back.matching.card-13 {
+  background-image: url(../images/matching-fruits/plum.jpg);
+}
+.back.matching.card-14 {
+  background-image: url(../images/matching-fruits/raspberry.jpg);
+}
+.back.matching.card-15 {
+  background-image: url(../images/matching-fruits/strawberry.jpg);
+}
diff --git a/js/BrowserInterface.js b/js/BrowserInterface.js
@@ -116,9 +116,8 @@
     for (var i = 0; i < rows; i++) {
       for (var j = 0; j < columns; j++) {
         // Use cloneNode(true) otherwise only one node is appended
-        memoryCards.appendChild(buildCardNode(
-            index, cards[index].value, cards[index].isRevealed,
-            (100 / columns) + "%", (100 / rows) + "%"));
+        memoryCards.appendChild(buildCardNode(index, cards[index],
+          (100 / columns) + "%", (100 / rows) + "%"));
         index++;
       }
     }
@@ -145,7 +144,7 @@
   }, true);
 
   // Build single card
-  var buildCardNode = function (index, value, isRevealed, width, height) {
+  var buildCardNode = function (index, card, width, height) {
     var flipContainer = document.createElement("li");
     var flipper = document.createElement("div");
     var front = document.createElement("a");
@@ -155,15 +154,18 @@
     flipContainer.style.width = width;
     flipContainer.style.height = height;
     flipContainer.classList.add("flip-container");
-    if (isRevealed) {
+    if (card.isRevealed) {
       flipContainer.classList.add("clicked");
     }
 
     flipper.classList.add("flipper");
     front.classList.add("front");
     front.setAttribute("href", "#");
     back.classList.add("back");
-    back.classList.add("card-" + value);
+    back.classList.add("card-" + card.value);
+    if (card.isMatchingCard) {
+      back.classList.add("matching");
+    }
     back.setAttribute("href", "#");
 
     flipper.appendChild(front);

diff --git a/js/Card.js b/js/Card.js
@@ -12,9 +12,12 @@
 /**
  * @namespace Card object
  */
-MemoryGame.Card = function(value) {
+MemoryGame.Card = function(value, isMatchingCard) {
   this.value = value;
   this.isRevealed = false;
+  if (isMatchingCard) {
+    this.isMatchingCard = true;
+  }
 
   this.reveal = function() {
     this.isRevealed = true;

diff --git a/js/MemoryGame.js b/js/MemoryGame.js
@@ -80,8 +80,10 @@ var MemoryGame = {
     var count = 0;
     var maxValue = (this.settings.columns * this.settings.rows) / 2;
     while (count < maxValue) {
+      // Card A
       cards[2 * count] = new this.Card(count + 1);
-      cards[2 * count + 1] = new this.Card(count + 1);
+      // Card B (matching card)
+      cards[2 * count + 1] = new this.Card(count + 1, true);
       count++;
     }