diff --git a/css/pexeso.css b/css/pexeso.css index 700a1b3..f9622d3 100644 --- a/css/pexeso.css +++ b/css/pexeso.css @@ -1,6 +1,7 @@ body { margin: 0; background: lightyellow; + font-family: Arial, Verdana, sans-serif; } #mainContent { @@ -8,7 +9,7 @@ body { font-size: xx-large; font-weight: bold; border-radius: 4px; - text-align: center; + } .buttonStyle { border-radius: 4px; @@ -42,23 +43,18 @@ body { cursor: pointer; } -.solved { - background: green; +.navigationButton { + cursor: pointer; + text-align:left; } -.selected1 { - background: yellow; +#navigationBar { + background: #75755f; + font-size: xx-large; + padding: 2px 10px 2px 10px; + color: white; } -.selected2 { - background: orange; -} - -.selected3 { - background: white; -} - -.mystery { - background: blue; - +#levelTitle { + float:right; } \ No newline at end of file diff --git a/index.html b/index.html index 384872f..bd5765e 100644 --- a/index.html +++ b/index.html @@ -23,47 +23,59 @@ -
- -

How to play:

-
- -
-

Select level:

-
-
{{level.text}}
-
-
-
+ +
+ +

How to play:

+
+
- -
- - - - - - - - - -
{{card.card['en-US']}}
- - - - +

Select level:

+
+
{{level.text}}
+
+
+
+ +
+ +
+ + + + + + + + + +
{{card.card['en-US']}}
+ + + + +
+
+ +
Congratulations!
diff --git a/js/level-selector-controller.js b/js/level-selector-controller.js index 1315d96..54ce9cf 100644 --- a/js/level-selector-controller.js +++ b/js/level-selector-controller.js @@ -35,6 +35,10 @@ angular.module('level-selector', ['LocalStorageModule']) } }; + $scope.cancelLevel = function(even, args) { + $scope.isLevelSelectorVisible = true; + }; + $scope.storeConfiguration = function() { if (!localStorageService.isSupported) { return; @@ -63,6 +67,7 @@ angular.module('level-selector', ['LocalStorageModule']) }; $rootScope.$on('completeLevel', $scope.completeLevel); + $rootScope.$on('cancelLevel', $scope.cancelLevel); init(); diff --git a/js/pexeso-controller.js b/js/pexeso-controller.js index 3b90d7f..d6578ba 100644 --- a/js/pexeso-controller.js +++ b/js/pexeso-controller.js @@ -35,18 +35,21 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete']) */ $scope.levels = [ { + levelName: "01: 2x2 Picture", totalCards: 2*2, cardsPerRow: 2, chainLength: 2, cardTypes: ['picture', 'picture'] }, { + levelName: "02: 3x3 Picture", totalCards: 3*3, cardsPerRow: 3, chainLength: 3, cardTypes: ['picture', 'picture', 'picture'] }, { + levelName: "03: 4x4 Picture", totalCards: 4*4, cardsPerRow: 4, chainLength: 4, @@ -317,7 +320,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete']) }; var paddingLeft = Math.floor((window.innerWidth - (cardSize + 10) * cardsPerRow) / 2); - var paddingTop = Math.floor((window.innerHeight - (cardSize + 10) * cardsPerRow) / 2); + var paddingTop = Math.floor((window.innerHeight - (cardSize + 10) * cardsPerRow) / 2) - 32; if (paddingLeft < 0) { paddingLeft = 0; @@ -341,9 +344,11 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete']) $scope.levelIndex = args.levelIndex; $scope.currentLevel = $scope.levels[$scope.levelIndex]; $scope.currentCardTypes = $scope.currentLevel.cardTypes; - $scope.computeCardSize($scope.currentLevel.cardsPerRow); $scope.chainLength = $scope.currentLevel.chainLength; + + $scope.computeCardSize($scope.currentLevel.cardsPerRow); $scope.generateBoard($scope.currentLevel.totalCards); + $scope.isLevelVisible = true; }; @@ -357,6 +362,14 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete']) $rootScope.$emit('completeLevel', args); }; + /** + * Return to level selection screen + */ + $scope.cancelLevel = function() { + $scope.isLevelVisible = false; + $rootScope.$emit('cancelLevel', {}); + }; + $rootScope.$on('startLevel', $scope.initLevel); }); \ No newline at end of file