Use angluar-flippy to flip cards

js/flippy.js

@@ -0,0 +1,35 @@
+/**
+ * handles the behaviour of flipping card.
+ * Soure: https://github.com/zwacky/angular-flippy
+ */
+angular.module('angular-flippy', [])
+	.directive('flippy', function() {
+		return {
+			restrict: 'EA',
+			link: function($scope, $elem, $attrs) {
+
+				var options = {
+					flipDuration: ($attrs.flipDuration) ? $attrs.flipDuration : 400,
+					timingFunction: 'ease-in-out',
+				};
+
+				// setting flip options
+				angular.forEach(['flippy-front', 'flippy-back'], function(name) {
+					var el = $elem.find(name);
+					if (el.length == 1) {
+						angular.forEach(['', '-ms-', '-webkit-'], function(prefix) {
+							angular.element(el[0]).css(prefix + 'transition', 'all ' + options.flipDuration/1000 + 's ' + options.timingFunction);
+						});
+					}
+				});
+
+				/**
+				 * behaviour for flipping effect.
+				 */
+				$scope.flip = function() {
+					$elem.toggleClass('flipped');
+				}
+
+			}
+		};
+	});

js/pexeso-controller.js

@@ -1,5 +1,5 @@
-angular.module('app', [])
-.controller('PexesoController', ['$scope', function($scope) {
+angular.module('app', ['angular-flippy'])
+.controller('PexesoController', function($scope, $timeout) {
     $scope.languages = {
         'cs-CZ': {
             title: 'Čeština'
@@ -100,7 +100,8 @@ angular.module('app', [])
             cardId: cardId,
             card: card,
             index: index,
-            state: 'mystery'
+            state: 'mystery',
+            flipState: ''
         };
     };
     
@@ -134,6 +135,11 @@ angular.module('app', [])
         $scope.selectionCounter = 0;
         angular.forEach($scope.selectedCards, function(card) {
             card.state = state;
+            if (state == "mystery") {
+                card.flipState = '';
+            } else {
+                card.flipState = 'flipped';
+            }
         });
         $scope.selectedCards = [];
     };    
@@ -163,6 +169,13 @@ angular.module('app', [])
         return true;
     };
     
+    /**
+     * Reset selection of current cards
+     */
+    $scope.resetSelection = function() {
+        $scope.setSelectionState('mystery');
+    };
+    
     /**
      * Click handler to select card.
      */
@@ -174,8 +187,9 @@ angular.module('app', [])
         
         $scope.selectionCounter += 1;
         
+
         if ($scope.selectionCounter == $scope.maxSelected + 1) {
-            $scope.setSelectionState('mystery');
+            $scope.resetSelection();
             return;
         } else {
             $scope.selectedCards.push(card);
@@ -183,11 +197,14 @@ angular.module('app', [])
         
         if (card.state == 'mystery') {
             card.state = 'selected' + $scope.selectionCounter;
+            card.flipState = 'flipped';
         }
         
         if ($scope.areAllSelectedSame()) {
             $scope.setSelectionState('solved');
-        }
+        } else if ($scope.selectionCounter == $scope.maxSelected) {
+            $timeout($scope.resetSelection, 1000);
+        } 
         
     };
     
@@ -199,4 +216,4 @@ angular.module('app', [])
         $scope.generateBoard(4*4);
     };
     
-}]);
+});