github-mirrors/pf2015
1
0
Fork 0
mirror of https://github.com/ysoftdevs/pf2015.git synced 2026-03-22 09:10:04 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

add navigation bar with back button

Browse Source
This commit is contained in:
Juraj Michalek
2014-12-28 21:49:10 +00:00
parent a388bc8fb0
commit 8941bdb767
4 changed files with 81 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
css/pexeso.css
View File

@@ -1,6 +1,7 @@
body { body {
margin: 0; margin: 0;
background: lightyellow; background: lightyellow;
font-family: Arial, Verdana, sans-serif;
} }
#mainContent { #mainContent {
@@ -8,7 +9,7 @@ body {
font-size: xx-large; font-size: xx-large;
font-weight: bold; font-weight: bold;
border-radius: 4px; border-radius: 4px;
text-align: center;
} }
.buttonStyle { .buttonStyle {
border-radius: 4px; border-radius: 4px;
@@ -42,23 +43,18 @@ body {
cursor: pointer; cursor: pointer;
} }
.solved { .navigationButton {
background: green; cursor: pointer;
text-align:left;
} }
.selected1 { #navigationBar {
background: yellow; background: #75755f;
font-size: xx-large;
padding: 2px 10px 2px 10px;
color: white;
} }
.selected2 { #levelTitle {
background: orange; float:right;
}
.selected3 {
background: white;
}
.mystery {
background: blue;
} }

86
index.html
View File

@@ -23,47 +23,59 @@
<body> <body>
<div id="levelSelector" <!-- Level Selector -->
ng-controller="LevelSelectorController" <div id="levelSelector"
ng-show="isLevelSelectorVisible" ng-controller="LevelSelectorController"
> ng-show="isLevelSelectorVisible"
>
<h2>How to play:</h2>
<div id="infoGraphics"> <h2>How to play:</h2>
<!--<img src="img/info.png"/>--> <div id="infoGraphics">
</div> <!--<img src="img/info.png"/>-->
<h2>Select level:</h2>
<div ng-repeat="level in levelLock" class="levelItem {{level.state}}">
<div ng-show="level.state == 'unlocked'" ng-click="startLevel($index)">{{level.text}}</div>
<div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
</div>
<div class="clearfix"></div>
</div> </div>
<h2>Select level:</h2>
<div id="mainContent" ng-controller="PexesoController" ng-show="isLevelVisible" ng-style="containerStyle"> <div ng-repeat="level in levelLock" class="levelItem {{level.state}}">
<div ng-show="level.state == 'unlocked'" ng-click="startLevel($index)">{{level.text}}</div>
<flippy ng-repeat="card in board" <div ng-show="level.state == 'locked'"><i class="fa fa-lock"></i></div>
class="fancy" </div>
ng-class="card.flipState" <div class="clearfix"></div>
ng-click="selectCard(card)"
ng-style="cardStyle"
flip-duration="800"
timing-function="ease-in-out">
<flippy-front>
<span class="cardHelper"></span><img ng-src="img/cards/question.png">
</flippy-front>
<flippy-back>
<span class="cardHelper"></span><img ng-src="img/cards/{{card.cardId}}.png" ng-show="card.cardType == 'picture'">
<div ng-hide="card.cardType == 'picture'">{{card.card['en-US']}}</div>
</flippy-back>
</flippy>
</div> </div>
<!-- Game board -->
<div ng-controller="PexesoController" ng-show="isLevelVisible">
<div id="navigationBar">
<div>
<a class="navigationButton" ng-click="cancelLevel()">
<i class="fa fa-arrow-left" ></i></a>
<span id="levelTitle">Level {{currentLevel.levelName}}</span>
</div>
</div>
<div id="mainContent" ng-style="containerStyle">
<flippy ng-repeat="card in board"
class="fancy"
ng-class="card.flipState"
ng-click="selectCard(card)"
ng-style="cardStyle"
flip-duration="800"
timing-function="ease-in-out">
<flippy-front>
<span class="cardHelper"></span><img ng-src="img/cards/question.png">
</flippy-front>
<flippy-back>
<span class="cardHelper"></span><img ng-src="img/cards/{{card.cardId}}.png" ng-show="card.cardType == 'picture'">
<div ng-hide="card.cardType == 'picture'">{{card.card['en-US']}}</div>
</flippy-back>
</flippy>
</div>
</div>
<!-- Level complete panel -->
<div id="levelCompleteContent" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible"> <div id="levelCompleteContent" ng-controller="LevelCompleteController" ng-show="isLevelCompleteVisible">
<div id="congratulation">Congratulations!</div> <div id="congratulation">Congratulations!</div>
<div> <div>

5
js/level-selector-controller.js
View File

@@ -35,6 +35,10 @@ angular.module('level-selector', ['LocalStorageModule'])
} }
}; };
$scope.cancelLevel = function(even, args) {
$scope.isLevelSelectorVisible = true;
};
$scope.storeConfiguration = function() { $scope.storeConfiguration = function() {
if (!localStorageService.isSupported) { if (!localStorageService.isSupported) {
return; return;
@@ -63,6 +67,7 @@ angular.module('level-selector', ['LocalStorageModule'])
}; };
$rootScope.$on('completeLevel', $scope.completeLevel); $rootScope.$on('completeLevel', $scope.completeLevel);
$rootScope.$on('cancelLevel', $scope.cancelLevel);
init(); init();

17
js/pexeso-controller.js
View File

@@ -35,18 +35,21 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
*/ */
$scope.levels = [ $scope.levels = [
{ {
levelName: "01: 2x2 Picture",
totalCards: 2*2, totalCards: 2*2,
cardsPerRow: 2, cardsPerRow: 2,
chainLength: 2, chainLength: 2,
cardTypes: ['picture', 'picture'] cardTypes: ['picture', 'picture']
}, },
{ {
levelName: "02: 3x3 Picture",
totalCards: 3*3, totalCards: 3*3,
cardsPerRow: 3, cardsPerRow: 3,
chainLength: 3, chainLength: 3,
cardTypes: ['picture', 'picture', 'picture'] cardTypes: ['picture', 'picture', 'picture']
}, },
{ {
levelName: "03: 4x4 Picture",
totalCards: 4*4, totalCards: 4*4,
cardsPerRow: 4, cardsPerRow: 4,
chainLength: 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 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) { if (paddingLeft < 0) {
paddingLeft = 0; paddingLeft = 0;
@@ -341,9 +344,11 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
$scope.levelIndex = args.levelIndex; $scope.levelIndex = args.levelIndex;
$scope.currentLevel = $scope.levels[$scope.levelIndex]; $scope.currentLevel = $scope.levels[$scope.levelIndex];
$scope.currentCardTypes = $scope.currentLevel.cardTypes; $scope.currentCardTypes = $scope.currentLevel.cardTypes;
$scope.computeCardSize($scope.currentLevel.cardsPerRow);
$scope.chainLength = $scope.currentLevel.chainLength; $scope.chainLength = $scope.currentLevel.chainLength;
$scope.computeCardSize($scope.currentLevel.cardsPerRow);
$scope.generateBoard($scope.currentLevel.totalCards); $scope.generateBoard($scope.currentLevel.totalCards);
$scope.isLevelVisible = true; $scope.isLevelVisible = true;
}; };
@@ -357,6 +362,14 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
$rootScope.$emit('completeLevel', args); $rootScope.$emit('completeLevel', args);
}; };
/**
* Return to level selection screen
*/
$scope.cancelLevel = function() {
$scope.isLevelVisible = false;
$rootScope.$emit('cancelLevel', {});
};
$rootScope.$on('startLevel', $scope.initLevel); $rootScope.$on('startLevel', $scope.initLevel);
}); });