added minigame funcitonality written in angular.
This commit is contained in:
arzynik
parent
624a032bed
commit
0ff386fe28
@ -86,7 +86,7 @@
|
||||
<br>Fav<span class="staff-orite">orite</span> beer: Stella Artois
|
||||
</p>
|
||||
<p class="staff-content">
|
||||
Hes in Brazil.
|
||||
Hes in Brazil. I hear he also likes to <a href="/cafe" ng-click="navigation.link('/cafe')">play games</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
31
include/views/default/seven/frontend/cafe.phtml
Normal file
31
include/views/default/seven/frontend/cafe.phtml
Normal file
@ -0,0 +1,31 @@
|
||||
<div class="top-pad"></div>
|
||||
|
||||
|
||||
<div class="content-padding">
|
||||
<button class="button lightorange" ng-click="start()" ng-show="!running">Start</button>
|
||||
<button class="button lightorange" ng-click="stop()" ng-show="running">Stop</button>
|
||||
<br><br>
|
||||
|
||||
<div class="cafe-message">
|
||||
<div class="dialog-message dialog-message-error" ng-show="message.error">
|
||||
<span ng-bind-html-unsafe="message.error"></span>
|
||||
</div>
|
||||
<div class="dialog-message dialog-message-success" ng-show="message.good">
|
||||
<span ng-bind-html-unsafe="message.good"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cafe-request">
|
||||
<h4>{{requested.name}}</h4>
|
||||
</div>
|
||||
<div class="cafe-level">
|
||||
<b>{{stats.level.name}}</b><br>
|
||||
Time: <b>{{stats.timer}}</b> / <b>{{stats.level.time/1000}}:00</b> seconds<br>
|
||||
Errors: <b>{{stats.errors}}</b><br>
|
||||
Success: <b>{{stats.success}}</b><br>
|
||||
Required: <b>{{stats.level.required}}</b><br>
|
||||
</div>
|
||||
<br><br><br>
|
||||
<button class="cafe-button" ng-repeat="button in items" ng-click="buttonPress(button.id)">{{button.name}}</button>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
@ -273,14 +273,20 @@ html {
|
||||
.pushabutton {
|
||||
background: url(../images/micro/push-a-button.svg) no-repeat;
|
||||
background-position: center center;
|
||||
width: 14em;
|
||||
height: 14em;
|
||||
background-size: 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1em;
|
||||
padding-top: 50px;
|
||||
-webkit-transition: all 0.2s;
|
||||
}
|
||||
.snap-drawer .pushabutton {
|
||||
width: 14em;
|
||||
height: 14em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.home-top .pushabutton {
|
||||
width: 16em;
|
||||
height: 16em;
|
||||
}
|
||||
@media (min-width: 321px) and (max-height: 350px) {
|
||||
.pushabutton {
|
||||
display: none;
|
||||
@ -875,7 +881,6 @@ p {
|
||||
display:block;
|
||||
border-bottom:1px solid rgba(0,0,0,0.1);
|
||||
padding:8px 0 2px 0;
|
||||
font-weight:bold;
|
||||
text-decoration:none;
|
||||
color:#fff;
|
||||
text-indent:20px;
|
||||
@ -905,7 +910,6 @@ p {
|
||||
line-height: 1.6em;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2794,4 +2798,25 @@ sup {
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
|
||||
}
|
||||
|
||||
.cafe-button {
|
||||
border: 0;
|
||||
background: #fe9872;
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 1em 0 1em 0;
|
||||
width: 9em;
|
||||
height: 5em;
|
||||
margin: .5em;
|
||||
float: left;
|
||||
}
|
||||
.cafe-message {
|
||||
height: 3.1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.cafe-request {
|
||||
height: 2.1em;
|
||||
}
|
||||
@ -223,6 +223,11 @@ NGApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $l
|
||||
controller: 'HomeCtrl',
|
||||
templateUrl: 'assets/view/home.html'
|
||||
})
|
||||
.when('/cafe', {
|
||||
action: 'cafe',
|
||||
controller: 'CafeCtrl',
|
||||
templateUrl: 'assets/view/cafe.html'
|
||||
})
|
||||
.otherwise({
|
||||
action: 'home',
|
||||
controller: 'DefaultCtrl',
|
||||
|
||||
@ -982,4 +982,273 @@ NGApp.controller( 'NoInternetCtrl', function ( $scope ) {
|
||||
// Just store the cookie, it will be used later
|
||||
$.cookie( 'referral', $routeParams.id );
|
||||
$location.path( '/' );
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* mini game controller
|
||||
*/
|
||||
NGApp.controller('CafeCtrl', function ($scope, $http) {
|
||||
var
|
||||
gameStart = null,
|
||||
timer = null,
|
||||
messageTimeout = null,
|
||||
enabled = false,
|
||||
level = 0,
|
||||
startTimer = null;
|
||||
|
||||
var getItem = function(key) {
|
||||
for (var x in items) {
|
||||
if (items[x].id == key) {
|
||||
return items[x];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
$scope.buttonPress = function(id) {
|
||||
if (!$scope.requested || !enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
var clicked = getItem(id);
|
||||
|
||||
if ($scope.requested.id == clicked.id) {
|
||||
$scope.stats.success++;
|
||||
if ($scope.stats.success >= rounds[level].required) {
|
||||
win();
|
||||
return;
|
||||
}
|
||||
showMessage('Yay. Keep going!','good');
|
||||
requestPress();
|
||||
} else {
|
||||
enabled = false;
|
||||
$scope.stats.errors++;
|
||||
showMessage('You suck! Wait 2 seconds!','error');
|
||||
setTimeout(function() {
|
||||
enabled = true;
|
||||
},2000);
|
||||
}
|
||||
};
|
||||
|
||||
var showMessage = function(message, type) {
|
||||
clearTimeout(messageTimeout);
|
||||
$scope.message = {};
|
||||
$scope.message[type] = message;
|
||||
|
||||
messageTimeout = setTimeout(function() {
|
||||
$scope.$apply(function() {
|
||||
$scope.message = null;
|
||||
});
|
||||
},2000);
|
||||
};
|
||||
|
||||
var requestPress = function() {
|
||||
var cloned = $scope.items.slice(0);
|
||||
|
||||
if (!$scope.requested) {
|
||||
var newrequest = $.pluck(cloned,1);
|
||||
newrequest = newrequest[0];
|
||||
} else {
|
||||
var previous = newrequest = $scope.requested;
|
||||
while (newrequest.id == previous.id) {
|
||||
newrequest = $.pluck(cloned,1);
|
||||
newrequest = newrequest[0];
|
||||
}
|
||||
}
|
||||
|
||||
if ($scope.$$phase) {
|
||||
$scope.requested = newrequest;
|
||||
} else {
|
||||
$scope.$apply(function($scope) {
|
||||
$scope.requested = newrequest;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var loose = function() {
|
||||
$scope.stop();
|
||||
|
||||
if ($scope.$$phase) {
|
||||
$scope.message = {error: 'You loose.'};
|
||||
|
||||
} else {
|
||||
$scope.$apply(function($scope) {
|
||||
$scope.message = {error: 'You loose.'};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var win = function() {
|
||||
$scope.stop();
|
||||
level++;
|
||||
|
||||
if ($scope.$$phase) {
|
||||
$scope.message = {good: 'You win! Try the next level!'};
|
||||
|
||||
} else {
|
||||
$scope.$apply(function($scope) {
|
||||
$scope.message = {good: 'You win! Try the next level!'};
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var updateTimer = function() {
|
||||
var now = new Date;
|
||||
var diffMs = now.getTime() - gameStart.getTime();
|
||||
var diff = Math.round(diffMs / 10).pad(4);
|
||||
|
||||
if (diffMs >= rounds[level].time) {
|
||||
loose();
|
||||
return;
|
||||
}
|
||||
|
||||
diff = (diff + ' ').slice(0,2) + ':' + (diff + ' ').slice(2,4);
|
||||
|
||||
if ($scope.$$phase) {
|
||||
$scope.stats.timer = diff;
|
||||
} else {
|
||||
$scope.$apply(function($scope) {
|
||||
$scope.stats.timer = diff;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var rounds = [
|
||||
{
|
||||
name: 'Trial Level ',
|
||||
time: 20000,
|
||||
required: 3
|
||||
},
|
||||
{
|
||||
name: 'Level 1',
|
||||
time: 20000,
|
||||
required: 10
|
||||
},
|
||||
{
|
||||
name: 'Level 2',
|
||||
time: 20000,
|
||||
required: 20
|
||||
},
|
||||
{
|
||||
name: 'Level 3',
|
||||
time: 20000,
|
||||
required: 30
|
||||
},
|
||||
{
|
||||
name: 'Level 4',
|
||||
time: 20000,
|
||||
required: 40
|
||||
}
|
||||
];
|
||||
|
||||
var items = [
|
||||
{
|
||||
name: 'Wenzel',
|
||||
id: 'wenzel'
|
||||
},
|
||||
{
|
||||
name: 'Spicy With',
|
||||
id: 'spicywith'
|
||||
},
|
||||
{
|
||||
name: 'All Meat Pizza',
|
||||
id: 'allmeatpizza'
|
||||
},
|
||||
{
|
||||
name: 'Mega Burger',
|
||||
id: 'megaburger'
|
||||
},
|
||||
{
|
||||
name: 'Curry Rice',
|
||||
id: 'curryrice'
|
||||
},
|
||||
{
|
||||
name: 'Steak Sandwich',
|
||||
id: 'steaksandwich'
|
||||
},
|
||||
{
|
||||
name: 'Spicy Tuna Roll',
|
||||
id: 'spicytunaroll'
|
||||
},
|
||||
{
|
||||
name: 'Nachos',
|
||||
id: 'nachos'
|
||||
},
|
||||
{
|
||||
name: 'Shrimp Tacos',
|
||||
id: 'shrimptacos'
|
||||
},
|
||||
{
|
||||
name: 'Orange Chicken',
|
||||
id: 'orangechicken'
|
||||
},
|
||||
{
|
||||
name: 'Chicken Parm Sandwich',
|
||||
id: 'chickenparmsandwich'
|
||||
},
|
||||
{
|
||||
name: 'Virgin Mojito',
|
||||
id: 'virginmojito'
|
||||
},
|
||||
{
|
||||
name: 'Chicken Tikka Masala',
|
||||
id: 'chickentikkamasala'
|
||||
},
|
||||
{
|
||||
name: 'Bucket of Waffles',
|
||||
id: 'bucketofwaffles'
|
||||
},
|
||||
{
|
||||
name: 'Boring Salad',
|
||||
id: 'boringsalad'
|
||||
}
|
||||
];
|
||||
|
||||
$scope.stop = function() {
|
||||
clearTimeout(startTimer);
|
||||
clearTimeout(messageTimeout);
|
||||
clearInterval(timer);
|
||||
gameStart = null;
|
||||
|
||||
$scope.message = null;
|
||||
$scope.requested = null;
|
||||
enabled = false;
|
||||
$scope.running = false;
|
||||
$scope.items = [];
|
||||
};
|
||||
|
||||
$scope.start = function() {
|
||||
$scope.items = $.pluck(items,6);
|
||||
$scope.message = {good: 'Starting in 3 seconds!'};
|
||||
$scope.stats = {
|
||||
timer: '00:00',
|
||||
level: rounds[level],
|
||||
errors: 0,
|
||||
success: 0
|
||||
};
|
||||
|
||||
startTimer = setTimeout(function() {
|
||||
gameStart = new Date();
|
||||
timer = setInterval(function() {
|
||||
updateTimer();
|
||||
},10);
|
||||
|
||||
if ($scope.$$phase) {
|
||||
$scope.message = null;
|
||||
} else {
|
||||
$scope.$apply(function($scope) {
|
||||
$scope.message = null;
|
||||
});
|
||||
}
|
||||
|
||||
requestPress();
|
||||
enabled = true;
|
||||
},3000);
|
||||
$scope.running = true;
|
||||
};
|
||||
|
||||
$scope.timer = '00:00';
|
||||
|
||||
|
||||
});
|
||||
@ -129,3 +129,14 @@ Number.prototype.pad = String.prototype.pad = function(width, z) {
|
||||
var n = this + '';
|
||||
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
|
||||
}
|
||||
|
||||
|
||||
$.pluck = function(ar, len) {
|
||||
for (var i = ar.length - 1; i > 0; i--) {
|
||||
var j = Math.floor(Math.random() * (i + 1));
|
||||
var temp = ar[i];
|
||||
ar[i] = ar[j];
|
||||
ar[j] = temp;
|
||||
}
|
||||
return ar.slice(0, len || len.length);
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user