github-mirrors/pf2015
1
0
Fork 0
mirror of https://github.com/ysoftdevs/pf2015.git synced 2026-03-25 02:21:56 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

add level selector

Browse Source
This commit is contained in:
Juraj Michalek
2014-12-25 19:18:27 +00:00
parent 7609ffdfd3
commit 8908d042b7
4 changed files with 106 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
css/level-selector.css Normal file
View File

@@ -0,0 +1,45 @@
#levelSelector {
max-width: 24em;
margin-left:auto;
margin-right:auto;
}
.levelItem {
width: 3em;
height: 2em;
border: 1px solid gray;
text-align: center;
font-size: 1.5em;
font-weight: bold;
color: white;
margin-left: 0.5em;
margin-bottom: 0.4em;
float: left;
padding-top: 1em;
cursor: pointer;
background:rgba(0,0,0,0.5);
}
.locked {
padding-top: 0.3em;
padding-bottom: 0.8em;
color: yellow;
}
.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
#infoGraphics {
width: 100%;
text-align: center;
}
#badges {
text-align: center;
vertical-align: top;
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
}

22
index.html
View File

@@ -5,17 +5,35 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>PF2015</title> <title>PF2015</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/pexeso-controller.js"></script> <script type="text/javascript" src="js/pexeso-controller.js"></script>
<link rel="stylesheet" href="css/pexeso.css" type="text/css" /> <link rel="stylesheet" href="css/pexeso.css" type="text/css" />
<script type="text/javascript" src="js/level-selector-controller.js"></script>
<link rel="stylesheet" href="css/level-selector.css" type="text/css" />
<link rel="stylesheet" href="css/flippy.css" /> <link rel="stylesheet" href="css/flippy.css" />
<script type="text/javascript" src="js/flippy.js"></script> <script type="text/javascript" src="js/flippy.js"></script>
</head> </head>
<body ng-controller="PexesoController" data-ng-init="init()"> <body>
<div id="mainContent">
<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>
</div>
<div id="mainContent" ng-controller="PexesoController" ng-show="isLevelVisible">
<flippy ng-repeat="card in board" <flippy ng-repeat="card in board"
class="fancy" class="fancy"

30
js/level-selector-controller.js Normal file
View File

@@ -0,0 +1,30 @@
angular.module('level-selector', [])
.controller('LevelSelectorController', function($scope, $rootScope) {
$scope.isLevelSelectorVisible = true;
$scope.levelLock = [
{state:'unlocked', text:'1'},
{state:'locked', text:'2'},
{state:'locked', text:'3'},
{state:'locked', text:'4'},
{state:'locked', text:'5'},
{state:'locked', text:'6'},
{state:'locked', text:'7'},
{state:'locked', text:'8'},
{state:'locked', text:'9'},
{state:'locked', text:'10'},
{state:'locked', text:'11'},
{state:'locked', text:'12'},
{state:'locked', text:'PF'}
];
$scope.startLevel = function(levelIndex) {
$scope.isLevelSelectorVisible = false;
var args = {
levelIndex: levelIndex
};
$rootScope.$emit('startLevel', args);
};
});

15
js/pexeso-controller.js
View File

@@ -1,5 +1,8 @@
angular.module('app', ['angular-flippy']) angular.module('app', ['angular-flippy', 'level-selector'])
.controller('PexesoController', function($scope, $timeout) { .controller('PexesoController', function($scope, $timeout, $rootScope) {
$scope.isLevelVisible = false;
$scope.languages = { $scope.languages = {
'cs-CZ': { 'cs-CZ': {
title: 'Čeština' title: 'Čeština'
@@ -210,10 +213,14 @@ angular.module('app', ['angular-flippy'])
/** /**
* Initialize game. * Start Level
*/ */
$scope.init = function() { $scope.initLevel = function(event, args) {
$scope.generateBoard(4*4); $scope.generateBoard(4*4);
$scope.isLevelVisible = true;
}; };
$rootScope.$on('startLevel', $scope.initLevel);
}); });