mirror of
https://github.com/ysoftdevs/pf2015.git
synced 2026-01-17 00:57:22 +01:00
initial commit
This commit is contained in:
Juraj Michalek
58
css/pexeso.css
Normal file
58
css/pexeso.css
Normal file
@@ -0,0 +1,58 @@
|
||||
#mainContent {
|
||||
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 {
|
||||
border-radius: 4px;
|
||||
border: thin solid #F0E020;
|
||||
padding: 5px;
|
||||
background-color: #F8F094;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-weight: bold;
|
||||
color: #663300;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.buttonStyle:hover {
|
||||
border: thin solid #FFCC00;
|
||||
background-color: #FCF9D6;
|
||||
color: #996633;
|
||||
cursor: pointer;
|
||||
}
|
||||
.buttonStyle:active {
|
||||
border: thin solid #99CC00;
|
||||
background-color: #F5FFD2;
|
||||
color: #669900;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
.solved {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.selected1 {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.selected2 {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.selected3 {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.mystery {
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
21
index.html
Normal file
21
index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us" ng-app="app">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="js/pexeso-controller.js"></script>
|
||||
<link rel="stylesheet" href="css/pexeso.css" type="text/css" />
|
||||
</head>
|
||||
|
||||
<body ng-controller="PexesoController" data-ng-init="init()">
|
||||
<div id="mainContent">
|
||||
<div ng-repeat="card in board"
|
||||
class="card"
|
||||
ng-class="card.state"
|
||||
ng-click="selectCard(card)"
|
||||
>{{card.cardId}}</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
202
js/pexeso-controller.js
Normal file
202
js/pexeso-controller.js
Normal file
@@ -0,0 +1,202 @@
|
||||
angular.module('app', [])
|
||||
.controller('PexesoController', ['$scope', function($scope) {
|
||||
$scope.languages = {
|
||||
'cs-CZ': {
|
||||
title: 'Čeština'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'English'
|
||||
},
|
||||
'sk-SK': {
|
||||
title: 'Slovenčina'
|
||||
}
|
||||
};
|
||||
|
||||
$scope.basicCards = {
|
||||
'printer' : {
|
||||
'cs-CZ': 'tiskárna',
|
||||
'en-US': 'house',
|
||||
'sk-SK': 'tlačiareň'
|
||||
},
|
||||
'toner' : {
|
||||
'cs-CZ': 'toner',
|
||||
'en-US': 'toner',
|
||||
'sk-SK': 'toner'
|
||||
},
|
||||
'finisher': {
|
||||
'cs-CZ': 'finisher',
|
||||
'en-US': 'finisher',
|
||||
'sk-SK': 'finisher'
|
||||
},
|
||||
'paper': {
|
||||
'cs-CZ': 'papír',
|
||||
'en-US': 'paper',
|
||||
'sk-SK': 'papier'
|
||||
},
|
||||
'black': {
|
||||
'cs-CZ': 'černá',
|
||||
'en-US': 'black',
|
||||
'sk-SK': 'čierna'
|
||||
},
|
||||
'white': {
|
||||
'cs-CZ': 'bílá',
|
||||
'en-US': 'white',
|
||||
'sk-SK': 'biela'
|
||||
},
|
||||
'color': {
|
||||
'cs-CZ': 'barva',
|
||||
'en-US': 'color',
|
||||
'sk-SK': 'farba'
|
||||
},
|
||||
'duplexPrint': {
|
||||
'cs-CZ': 'oboustranný tisk',
|
||||
'en-US': 'duplex print',
|
||||
'sk-SK': 'obostranná tlač'
|
||||
},
|
||||
'stapler': {
|
||||
'cs-CZ': 'sešívačka',
|
||||
'en-US': 'stapler',
|
||||
'sk-SK': 'zošívačka'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$scope.cards = $scope.basicCards;
|
||||
$scope.maxSelected = 2;
|
||||
|
||||
$scope.board = [
|
||||
{
|
||||
cardId:'house',
|
||||
index:1,
|
||||
state: 'solved'
|
||||
}, {
|
||||
cardId: 'dog',
|
||||
index:1,
|
||||
state: 'mystery'
|
||||
}, {
|
||||
cardId:'house',
|
||||
index:2,
|
||||
state: 'solved'
|
||||
}, {
|
||||
cardId:'printer',
|
||||
index:1,
|
||||
state: 'mystery'
|
||||
}, {
|
||||
cardId: 'dog',
|
||||
index:2,
|
||||
state: 'mystery'
|
||||
},{
|
||||
cardId:'printer',
|
||||
index:2,
|
||||
state: 'mystery'
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* Generate playing card object.
|
||||
*/
|
||||
$scope.getCard = function(card, cardId, index) {
|
||||
return {
|
||||
cardId: cardId,
|
||||
card: card,
|
||||
index: index,
|
||||
state: 'mystery'
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Generate playing board.
|
||||
*/
|
||||
$scope.generateBoard = function(totalCount) {
|
||||
$scope.board = [];
|
||||
var stack = [];
|
||||
angular.forEach($scope.basicCards, function(card, cardId) {
|
||||
stack.push($scope.getCard(card, cardId, 1));
|
||||
stack.push($scope.getCard(card, cardId, 2));
|
||||
});
|
||||
|
||||
for (var index = 0; index < totalCount; index++) {
|
||||
var coordinate = Math.floor((Math.random()* stack.length));
|
||||
$scope.board.push(stack[coordinate]);
|
||||
stack.splice(coordinate, 1);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$scope.selectionCounter = 0;
|
||||
|
||||
$scope.selectedCards = [];
|
||||
|
||||
/**
|
||||
* Set state of all selected cards to defined state.
|
||||
*/
|
||||
$scope.setSelectionState = function(state) {
|
||||
$scope.selectionCounter = 0;
|
||||
angular.forEach($scope.selectedCards, function(card) {
|
||||
card.state = state;
|
||||
});
|
||||
$scope.selectedCards = [];
|
||||
};
|
||||
|
||||
/**
|
||||
* Check whether all cards were selected.
|
||||
*/
|
||||
$scope.areAllSelectedSame = function() {
|
||||
var previous = null;
|
||||
|
||||
// At least two cards must match
|
||||
if ($scope.selectedCards.length < 2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var index=0; index<$scope.selectedCards.length; index++) {
|
||||
|
||||
var card = $scope.selectedCards[index];
|
||||
if (previous === null) {
|
||||
previous = card;
|
||||
} else {
|
||||
if (previous.cardId != card.cardId) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Click handler to select card.
|
||||
*/
|
||||
$scope.selectCard = function(card) {
|
||||
// only mystery cards are processed
|
||||
if (card.state != 'mystery') {
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.selectionCounter += 1;
|
||||
|
||||
if ($scope.selectionCounter == $scope.maxSelected + 1) {
|
||||
$scope.setSelectionState('mystery');
|
||||
return;
|
||||
} else {
|
||||
$scope.selectedCards.push(card);
|
||||
}
|
||||
|
||||
if (card.state == 'mystery') {
|
||||
card.state = 'selected' + $scope.selectionCounter;
|
||||
}
|
||||
|
||||
if ($scope.areAllSelectedSame()) {
|
||||
$scope.setSelectionState('solved');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Initialize game.
|
||||
*/
|
||||
$scope.init = function() {
|
||||
$scope.generateBoard(4*4);
|
||||
};
|
||||
|
||||
}]);
|
||||
Reference in New Issue
Block a user