You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
6.5 KiB
315 lines
6.5 KiB
var colorr = 0;
|
|
|
|
|
|
var Game = {
|
|
cards: [],
|
|
selected: [],
|
|
setCards: [],
|
|
nbSets: 0,
|
|
score: 0,
|
|
$board: $('[data-display="game-board"]'),
|
|
$score: $('[data-display="score"]'),
|
|
$nbSets: $('[data-display="nbSets"]'),
|
|
|
|
|
|
|
|
|
|
deal: function() {
|
|
var self = this;
|
|
if (colorr === 0 || colorr === null) {
|
|
// ajax request to get initial set of cards
|
|
var dealRequest = $.ajax({
|
|
url: 'set.php?action=deal',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
self.cards = data;
|
|
self.displayCards.call(self);
|
|
self.existingSet(data);
|
|
self.setCardListeners();
|
|
self.setPageListeners();
|
|
}
|
|
});
|
|
}else if (colorr === 1){
|
|
var dealRequest1 = $.ajax({
|
|
url: 'set.php?action=deal1',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
self.cards = data;
|
|
self.displayCards.call(self);
|
|
self.setCardListeners();
|
|
self.setPageListeners();
|
|
}
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
displayCards: function() {
|
|
var self = this;
|
|
var colors = [];
|
|
var shapes;
|
|
var fills;
|
|
var numbers;
|
|
var cartes = [];
|
|
|
|
|
|
$.each(this.cards, function(index, card){
|
|
var cardNode = $('<div>');
|
|
cardNode.addClass('card');
|
|
$(cardNode).data({
|
|
'id': card.id,
|
|
'shape': card.shape,
|
|
'fill': card.fill,
|
|
'color': card.color,
|
|
'number': card.number
|
|
});
|
|
|
|
var shapeNode = $('<canvas>');
|
|
shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill);
|
|
|
|
|
|
for (var i = 0; i < card.number; i++) {
|
|
cardNode.append(shapeNode.clone());
|
|
}
|
|
self.$board.append(cardNode);
|
|
|
|
// display 4 cards per row
|
|
if ((index+1) % 3 === 0) {
|
|
self.$board.append($('<div>'));
|
|
}
|
|
|
|
/*colors = $.map(cardNode, function(ele) { return $(ele).data("color");});
|
|
shapes = $.map(cardNode, function(ele) { return $(ele).data("shape"); });
|
|
fills= $.map(cardNode, function(ele) { return $(ele).data("fill"); });
|
|
numbers = $.map(cardNode, function(ele) { return $(ele).data("number"); });*/
|
|
|
|
cartes = $.map(cardNode, function(ele) { return $(ele).data();});
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
existingSet: function(cartes) {
|
|
|
|
console.log(cartes);
|
|
|
|
/* var i;
|
|
var isSet = [];
|
|
|
|
for (i = 0; i < cartes.length-2; ++i) {
|
|
isSet[0] = cartes[i];
|
|
for (i = 0; i < cartes1.length-1; ++i) {
|
|
isSet[1] = cartes1[i];
|
|
for (i = 0; i < cartes2.length; ++i) {
|
|
isSet[2] = cartes2[i];
|
|
isSet = [];
|
|
}
|
|
}
|
|
}
|
|
console.log(isSet);
|
|
|
|
this.$nbSets.html(self.nbSets);*/
|
|
},
|
|
setCardListeners: function() {
|
|
var self = this;
|
|
|
|
// what happens when a card is clicked:
|
|
this.$board.on('click', '.card', function(e) {
|
|
e.stopImmediatePropagation();
|
|
var card = e.currentTarget;
|
|
|
|
// if card is new, add it, otherwise remove it
|
|
var ids = $.map(self.selected, function(el) { return $(el).data("id");});
|
|
if (ids.indexOf($(card).data('id')) >= 0) {
|
|
self.deselectCard(card);
|
|
} else {
|
|
self.selectCard(card);
|
|
}
|
|
|
|
if (self.selected.length === 3) {
|
|
self.silentSubmission();
|
|
}
|
|
});
|
|
},
|
|
|
|
setPageListeners: function() {
|
|
var self = this;
|
|
|
|
// if the user clicks on the page outside the game board, clear selected
|
|
$(document).on('click', function() {
|
|
self.clearSelections.call(self);
|
|
});
|
|
},
|
|
|
|
|
|
|
|
|
|
selectCard: function(card) {
|
|
$(card).addClass('selected');
|
|
this.selected.push(card);
|
|
|
|
if (this.selected.length > 3) {
|
|
this.clearSelections.call(this);
|
|
}
|
|
|
|
},
|
|
|
|
|
|
deselectCard: function(card) {
|
|
var self = this;
|
|
var index = self.selected.indexOf(card);
|
|
if (index > -1) {
|
|
self.selected.splice(index, 1);
|
|
}
|
|
$(card).removeClass('selected');
|
|
},
|
|
|
|
clearSelections: function() {
|
|
$.each(this.selected, function(index, card) {
|
|
$(card).removeClass('selected');
|
|
});
|
|
this.selected = [];
|
|
},
|
|
|
|
|
|
validateSet: function() {
|
|
var self = this;
|
|
|
|
var colors = $.map(self.selected, function(el) { return $(el).data("color");});
|
|
var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
|
|
var fills= $.map(self.selected, function(el) { return $(el).data("fill"); });
|
|
var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });
|
|
|
|
|
|
return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers));
|
|
},
|
|
|
|
isSet: function(arr) {
|
|
var unique = [];
|
|
$.each(arr, function(i, el){
|
|
if($.inArray(el, unique) === -1) unique.push(el);
|
|
});
|
|
|
|
console.log(unique);
|
|
return unique.length === 1 || unique.length === 3;
|
|
|
|
},
|
|
|
|
silentSubmission: function() {
|
|
var valid = this.validateSet();
|
|
if (valid) {
|
|
this.submitSet();
|
|
}
|
|
|
|
|
|
},
|
|
|
|
submitSet: function() {
|
|
var self = this;
|
|
var ids = $.map(self.selected, function(el) { return $(el).data("id");});
|
|
|
|
// ajax request to get initial set of cards
|
|
var newCardRequest = $.ajax({
|
|
url: 'set.php?action=submit',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
self.clearCards(ids);
|
|
// to do - implement game complete check on server
|
|
if (!data.gameComplete) {
|
|
self.updateCards(data);
|
|
self.increaseScore();
|
|
} else {
|
|
self.gameWon();
|
|
}
|
|
},
|
|
error: function() {
|
|
console.log(arguments);
|
|
}
|
|
});
|
|
|
|
this.clearSelections();
|
|
},
|
|
|
|
clearCards: function(ids) {
|
|
// remove submitted cards game's card array and clear the board
|
|
var self = this;
|
|
this.selected = [];
|
|
this.$board.empty();
|
|
var cardIds = $.map(self.cards, function(card) { return card.id; });
|
|
$.each(ids, function(idx, id) {
|
|
var location = cardIds.indexOf(id);
|
|
if (location > -1) {
|
|
cardIds.splice(location, 1);
|
|
self.cards.splice(location, 1);
|
|
}
|
|
});
|
|
},
|
|
|
|
updateCards: function(newCards) {
|
|
this.cards = this.cards.concat(newCards);
|
|
this.displayCards();
|
|
},
|
|
|
|
increaseScore: function() {
|
|
this.$score.html(++this.score);
|
|
},
|
|
|
|
startRound: function() {
|
|
// todo
|
|
// reset timer to 30 seconds
|
|
},
|
|
|
|
gameWon: function() {
|
|
alert("you won!");
|
|
},
|
|
|
|
gameLost: function() {
|
|
alert("you lost :(");
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
$(document).ready(Game.deal());
|
|
|
|
|
|
/*
|
|
var canvases = document.getElementsByClassName('shape diamond red solid');
|
|
console.log(canvases);
|
|
for (let canvas of canvases) {
|
|
var context = canvas.getContext('2d');
|
|
|
|
drawDiamond(context, 50, 50, 75, 100);
|
|
canvas.fillStyle("#FF0000");
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
|
|
function drawDiamond(context, x, y, width, height){
|
|
context.save();
|
|
context.beginPath();
|
|
context.moveTo(x, y);
|
|
// top left edge
|
|
context.lineTo(x - width / 2, y + height / 2);
|
|
// bottom left edge
|
|
context.lineTo(x, y + height);
|
|
// bottom right edge
|
|
context.lineTo(x + width / 2, y + height / 2);
|
|
|
|
// closing the path automatically creates
|
|
// the top right edge
|
|
context.closePath();
|
|
|
|
context.fillStyle = "red";
|
|
context.fill();
|
|
context.restore();
|
|
}*/ |