wassname/cardsforscience
1
0
Fork 0
mirror of https://github.com/wassname/cardsforscience.git synced 2026-08-12 11:50:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Animation for score

Browse Source
This commit is contained in:
gitea
2016-02-27 19:43:08 +08:00
parent c59c5eef0d
commit e1306cf35a
5 changed files with 325 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/app.js
+55 -10
View File
@@ -33,6 +33,46 @@ var app = (function () {
// ]);
/**
* Make little score animations when score changes require ng-model="score"
*/
function cfsScoreChange($compile) {
return {
link: function (scope, element, attrs) {
scope.$watch(attrs.ngModel, function (newValue, oldValue) {
console.log('value changed, new value is: ' + newValue, oldValue);
// showUpdateValue
var num = newValue-oldValue;
var formatted = Helpers.formatNumberPostfix(num);
var insert;
if (num > 0) {
insert = angular.element("<div class=''></div>")
.attr("class", "update-plus")
.html("+" + formatted);
} else {
insert = angular.element("<div></div>")
.attr("class", "update-minus")
.html(formatted);
}
// showUpdate
element.append(insert);
insert.animate({
"bottom":"+=30px",
"opacity": 0
}, { duration: 500, complete: function() {
angular.element(this).remove();
}});
});
}
};
};
cfsScoreChange.$inject = ['$compile'];
app.directive('cfsScoreChange', cfsScoreChange);
/**
* Directive to render a rule and bind it's option with select boxes
* This expects ng-model="rule" as an attribute
@@ -40,7 +80,6 @@ var app = (function () {
function cfsRule($compile) {
return {
link: function (scope, element, attrs) {
scope.$eval("$index");
var rule = scope.$eval(attrs.ngModel);
// first generate a select box for each option (using lodash templating)
@@ -161,26 +200,32 @@ var app = (function () {
function ElementController($scope, $compile, game, lab) {
var vm = this;
vm.jqyouiDragOptions = {
revert: true, //"invalid",
vm.dataJqyouiOptions = {
revert: "invalid",
zIndex: 100,
cancel: false,
};
vm.dragOptions = {
vm.jqyouiDraggable = {
containment:'offset',
onStart:'rc.dragStart(r)',
onStop:'rc.dragStop(r)',
animate:true,
};
vm.onClick = function (card) {
// a flag to preven ng-click being fired on drag
if (!card.state.dragged)
// don't click if it was dragged within .222 seconds
// (to prevent double firing)
if (!card.state.lastDragged || new Date()-new Date(card.state.lastDragged)>300)
game.play(card);
else
console.log('clickprevent',card.state.lastDragged);
};
vm.dragStart = function(event, ui,card){
card.state.dragged=true;
card.state.lastDragged=new Date();
console.log('startDrag');
};
vm.dragStop = function(event, ui,card){
card.state.dragged=false;
card.state.lastDragged=new Date();
console.log('endDrag');
};
vm.elements = game.elements;
vm.isVisible = function (item) {
@@ -202,7 +247,7 @@ var app = (function () {
vm.ruleCost = 300;
vm.lastCards = game.lastCards;
vm.incorrectCards = game.incorrectCards;
vm.jqyouiDropOptions = {
vm.dataJqyouiOptions = {
// accept: ".rune",
addClasses: true,
// greedy: true,
@@ -210,7 +255,7 @@ var app = (function () {
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
};
vm.dropOptions={onDrop: 'dc.onDrop'};
vm.jqyouiDroppable={onDrop: 'dc.onDrop',multiple:true};
vm.onDrop = function (event, ui) {
var result = game.onDrop(event, ui, game);
};
js/game.js
+1 -1
View File
@@ -177,7 +177,7 @@ var Game = (function (Helpers, GameObjects, ObjectStorage) {
// deal 2 random cards
_.sample(this.elements).state.amount+=1;
_.sample(this.elements).state.amount+=1;
this.lab.state.score-=1;
this.lab.state.score-=2;
}
return correct;
};
js/rules.js
+14 -20
View File
@@ -279,13 +279,13 @@ var Rules = (function functionName(_) {
if (d > 3 && d < 21) return d+'th to last'; // thanks kennebec
switch (d % 10) {
case 1:
return d+" st to last";
return "last";
case 2:
return d+" nd to last";
return d+"nd to last";
case 3:
return d+" rd to last";
return d+"rd to last";
default:
return d+" th to last";
return d+"th to last";
}
};
@@ -326,7 +326,7 @@ var Rules = (function functionName(_) {
]
),
new Rule(
"If last <%= n %><%=nth(n)%> cards value was between <%= min %> and <%= max %> play a card that isn't and vice versa.",
"If <%= lastn(n) %> cards value was between <%= min %> and <%= max %> play a card that isn't and vice versa.",
function (card, lastCards, allCards, options) {
var lastNCard = lastCards[lastCards.length - this.options.n];
var property = this.options.property;
@@ -372,19 +372,12 @@ var Rules = (function functionName(_) {
]
),
new Rule(
"Play a card with a value <%= min %> to <%= max %> higher than the value of the last <%=n%><%=nth(n)%> card. The numbers wrap around once they reach the max",
"Play a card with a value <%= min %> to <%= max %> higher than the value of the <%= lastn(n) %> card. The numbers wrap around once they reach the max",
function (card, lastCards, allCards, options) {
var lastNCard = lastCards[lastCards.length - this.options.n];
var property = this.options.property;
var lastWasbetween = options.min < lastNCard.value && lastNCard.value < options.max;
if (lastWasbetween)
return chai.expect(card)
.to.have.property('value')
.not.within(options.min, options.max);
else
return chai.expect(card)
.to.have.property('value')
.within(options.min, options.max);
var val = card.value%16;
return chai.expect(val).to.be
.within(lastNCard.value+options.min, lastNCard.value+options.max);
}, {
n: 1,
min: 1,
@@ -423,7 +416,7 @@ var Rules = (function functionName(_) {
new Rule(
"If the last <%= n %><%=nth(n)%> card is an even-valued card, play a <%= evenColor %> card. Otherwise play the other color",
"If the <%= lastn(n) %> card is an even-valued card, play a <%= evenColor %> card. Otherwise play the other color",
function (card, lastCards, allCards, options) {
var lastNCard = lastCards[lastCards.length - this.options.n];
var lastWasEven = lastNCard % 2 == 0;
@@ -462,7 +455,7 @@ var Rules = (function functionName(_) {
),
new Rule(
"Play a card that has the same <%= property %> or color as the last <%= n %><%=nth(n)%> card but not both.",
"Play a card that has the same <%= property %> or color as the <%= lastn(n) %> card but not both.",
function (card, lastCards, allCards, options) {
var lastNCard = lastCards[lastCards.length - options.n];
var matchesColor = lastNCard.color === card.color;
@@ -492,7 +485,7 @@ var Rules = (function functionName(_) {
),
new Rule(
"If the last <%= n %><%=nth(n)%> card's number is higher than <%= min %>, change <%= property %>, and if lower, keep it the same.",
"If the <%= lastn(n) %> card's number is higher than <%= min %>, change <%= property %>, and if lower, keep it the same.",
function (card, lastCards, allCards, options) {
var lastNCard = lastCards[lastCards.length - options.n];
var lastWasHigher = lastNCard.value > options.min;
@@ -537,7 +530,8 @@ var Rules = (function functionName(_) {
]
),
new Rule(
"If the last <%= n %><%=nth(n)%> card was a <%= property %> card, play a higher value card otherwise lower.",
"If the <%= lastn(n) %> card was a <%= property %> card, play a higher value card otherwise lower.",
//TODO what if we have a high card? we can only go higher
function (card, lastCards, allCards, options) {
var lastNCard = lastCards[lastCards.length - options.n];
var lastHadProperty = lastNCard[options.property];