github-mirrors/pf2015
1
0
Fork 0
mirror of https://github.com/ysoftdevs/pf2015.git synced 2026-01-14 15:53:56 +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 {
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;
}

86
index.html
View File

@@ -23,47 +23,59 @@
<body>
<div id="levelSelector"
ng-controller="LevelSelectorController"
ng-show="isLevelSelectorVisible"
>
<h2>How to play:</h2>
<div id="infoGraphics">
<!--<img src="img/info.png"/>-->
</div>
<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>
<!-- Level Selector -->
<div id="levelSelector"
ng-controller="LevelSelectorController"
ng-show="isLevelSelectorVisible"
>
<h2>How to play:</h2>
<div id="infoGraphics">
<!--<img src="img/info.png"/>-->
</div>
<div id="mainContent" ng-controller="PexesoController" ng-show="isLevelVisible" 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>
<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>
<!-- 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="congratulation">Congratulations!</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() {
if (!localStorageService.isSupported) {
return;
@@ -63,6 +67,7 @@ angular.module('level-selector', ['LocalStorageModule'])
};
$rootScope.$on('completeLevel', $scope.completeLevel);
$rootScope.$on('cancelLevel', $scope.cancelLevel);
init();

17
js/pexeso-controller.js
View File

@@ -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);
});