diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4d3c41f --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.c9/ diff --git a/css/flippy.css b/css/flippy.css new file mode 100644 index 0000000..bb07f64 --- /dev/null +++ b/css/flippy.css @@ -0,0 +1,113 @@ +flippy { + float: left; + -webkit-perspective: 600px; + -moz-perspective: 600px; + -ms-perspective: 600px; + perspective: 600px; +} +flippy-front { + position: absolute; + z-index: 900; + width: inherit; + height: inherit; + -webkit-transform: rotateX(0deg) rotateY(0deg); + -moz-transform: rotateX(0deg) rotateY(0deg); + -ms-transform: rotateX(0deg) rotateY(0deg); + transform: rotateX(0deg) rotateY(0deg); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +flippy-back { + position: absolute; + z-index: 800; + width: inherit; + height: inherit; + -webkit-transform: rotateY(-180deg); + -moz-transform: rotateY(-180deg); + -ms-transform: rotateY(-180deg); + transform: rotateY(-180deg); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +flippy.flipped flippy-front { + z-index: 900; + -webkit-transform: rotateY(180deg); + -moz-transform: rotateY(180deg); + -ms-transform: rotateY(180deg); + transform: rotateY(180deg); +} +flippy.flipped flippy-back { + z-index: 1000; + -webkit-transform: rotateY(0deg); + -moz-transform: rotateY(0deg); + -ms-transform: rotateY(0deg); + transform: rotateY(0deg); +} + + + + + + + +flippy.fancy { + float: left; + margin: 0 10px 10px 0; + position: relative; + font-size: .8em; + cursor: pointer; + width: 250px; + height: 250px; +} +flippy.fancy img { + height: 100%; + width: 100%; +} +flippy.fancy flippy-front { + float: none; + position: absolute; + top: 0; + left: 0; + z-index: 900; + width: inherit; + height: inherit; + border: 1px solid #ccc; + background: white; + text-align: center; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); +} +flippy.fancy flippy-front.flipped { + border-color: #eee; + /*background: #333;*/ + box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); +} +flippy.fancy flippy-back { + float: none; + position: absolute; + top: 0; + left: 0; + z-index: 800; + width: inherit; + height: inherit; + border: 1px solid #ccc; + background: white; + text-align: center; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9); +} +flippy.fancy flippy-back.flipped { + /*background: #80868d;*/ + box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); +} + diff --git a/css/pexeso.css b/css/pexeso.css index c76274d..3f2d9fa 100644 --- a/css/pexeso.css +++ b/css/pexeso.css @@ -24,6 +24,7 @@ color: #996633; cursor: pointer; } + .buttonStyle:active { border: thin solid #99CC00; background-color: #F5FFD2; @@ -32,8 +33,11 @@ } .card { - width: 10em; - height: 10em; + width: 5em; + height: 5em; + margin: 0.2em; + float: left; + cursor: pointer; } .solved { @@ -54,5 +58,5 @@ .mystery { background: blue; - color: blue; + } \ No newline at end of file diff --git a/index.html b/index.html index 35964ff..45afe5d 100644 --- a/index.html +++ b/index.html @@ -5,17 +5,36 @@ PF2015 + + + +
-
{{card.cardId}}
+ + + + + + ? + + + + {{card.cardId}} + + + + diff --git a/js/flippy.js b/js/flippy.js new file mode 100644 index 0000000..c0e681c --- /dev/null +++ b/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'); + } + + } + }; + }); \ No newline at end of file diff --git a/js/pexeso-controller.js b/js/pexeso-controller.js index c1fba5e..1b7de12 100644 --- a/js/pexeso-controller.js +++ b/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); }; -}]); \ No newline at end of file +}); \ No newline at end of file