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

automaticaly compute size of board

Browse Source
This commit is contained in:
Juraj Michalek
2014-12-28 19:29:49 +00:00
parent aa9bff09b6
commit 3b1592c364
4 changed files with 75 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
css/flippy.css
View File

@@ -68,9 +68,13 @@ flippy.fancy {
position: relative;
font-size: .8em;
cursor: pointer;
width: 150px;
height: 150px;
}
flippy.fancy {
width: 60px;
height: 60px;
}
flippy.fancy img {
width:auto;
max-width:100%;

3
css/pexeso.css
View File

@@ -2,9 +2,7 @@
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
font-weight: bold;
background-color: #E3F0FB;
border-radius: 4px;
padding: 10px;
text-align: center;
}
.buttonStyle {
@@ -36,7 +34,6 @@
width: 5em;
height: 5em;
margin: 0.2em;
float: left;
cursor: pointer;
}

6
index.html
View File

@@ -40,14 +40,13 @@
<div class="clearfix"></div>
</div>
<div id="mainContent" ng-controller="PexesoController" ng-show="isLevelVisible">
<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">
@@ -59,6 +58,7 @@
<span class="cardHelper"></span><img ng-src="img/cards/{{card.cardId}}.png" ng-show="card.cardType == 'picture'"></span>
<div ng-hide="card.cardType == 'picture'">{{card.card['en-US']}}</div>
</flippy-back>
</flippy>
</div>

73
js/pexeso-controller.js
View File

@@ -8,9 +8,20 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
// How many cards must be found as the same.
$scope.chainLength = 2;
// Whic card types are active
// Which card types are active
$scope.currentCardTypes = [ 'picture', 'picture' ];
// Fit defined number of items on screen
$scope.containerStyle = {
"max-width": "280px"
};
// Card style - define dimensions
$scope.cardStyle = {
width: "60px",
height: "60px"
};
/**
* Level descriptor:
*
@@ -25,35 +36,54 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
$scope.levels = [
{
totalCards: 2*2,
cardsPerRow: 2,
chainLength: 2,
cardTypes: ['picture', 'picture']
},
{
totalCards: 4*4,
totalCards: 3*3,
cardsPerRow: 3,
chainLength: 3,
cardTypes: ['picture', 'picture', 'picture']
},
{
totalCards: 4*4,
cardsPerRow: 4,
chainLength: 4,
cardTypes: ['picture', 'picture', 'picture', 'picture']
}, {
totalCards: 4*4,
cardsPerRow: 4,
chainLength: 2,
cardTypes: ['picture', 'picture']
}, {
totalCards: 4*4,
cardsPerRow: 4,
chainLength: 2,
cardTypes: ['picture', 'en-US']
}, {
totalCards: 4*4,
cardsPerRow: 4,
chainLength: 2,
cardTypes: ['picture', 'oneLanguage']
}, {
totalCards: 4*4,
cardsPerRow: 4,
chainLength: 2,
cardTypes: ['picture', 'randomLanguage']
}, {
totalCards: 3*3,
cardsPerRow: 3,
chainLength: 3,
cardTypes: ['picture', 'picture', 'picture']
}, {
totalCards: 3*3,
cardsPerRow: 3,
chainLength: 3,
cardTypes: ['picture', 'randomLanguage', 'randomLanguage']
}, {
totalCards: 4*4,
cardsPerRow: 4,
chainLength: 4,
cardTypes: ['picture', 'randomLanguage', 'randomLanguage', 'randomLanguage']
}
@@ -128,7 +158,6 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
$scope.cards = $scope.basicCards;
$scope.maxSelected = 2;
$scope.board = [];
@@ -202,8 +231,8 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
$scope.areAllSelectedSame = function() {
var previous = null;
// At least two cards must match
if ($scope.selectedCards.length < 2) {
// At least n-cards must match
if ($scope.selectedCards.length < $scope.chainLength) {
return false;
}
@@ -253,7 +282,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
$scope.selectionCounter += 1;
if ($scope.selectionCounter == $scope.maxSelected + 1) {
if ($scope.selectionCounter == $scope.chainLength + 1) {
$scope.resetSelection();
return;
} else {
@@ -270,13 +299,41 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
if ($scope.isLevelComplete()) {
$timeout($scope.completeLevel, 1000);
}
} else if ($scope.selectionCounter == $scope.maxSelected) {
} else if ($scope.selectionCounter == $scope.chainLength) {
$timeout($scope.resetSelection, 1000);
}
};
/**
* Adjust size of card
*/
$scope.computeCardSize = function(cardsPerRow) {
var cardSize = Math.floor(Math.min(window.innerWidth, window.innerHeight) / cardsPerRow) - 20;
$scope.cardStyle = {
width: cardSize + "px",
height: cardSize + "px"
};
var paddingLeft = Math.floor((window.innerWidth - (cardSize + 10) * cardsPerRow) / 2);
var paddingTop = Math.floor((window.innerHeight - (cardSize + 10) * cardsPerRow) / 2);
if (paddingLeft < 0) {
paddingLeft = 0;
}
if (paddingTop < 0) {
paddingTop = 0;
}
$scope.containerStyle = {
"max-width": (cardSize + 20) * cardsPerRow + "px",
"padding-left": paddingLeft + "px",
"padding-top": paddingTop + "px"
};
};
/**
* Start Level
*/
@@ -284,6 +341,8 @@ 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.generateBoard($scope.currentLevel.totalCards);
$scope.isLevelVisible = true;
};