I'm trying to use my game on mobile but even tho i tried the touch events, it wouldn't work properly and the drop won't work. It's a solitaire game and i'm trying to move the cards on drag.
When i do the touchstart event, i have this error: Uncaught TypeError: Cannot set properties of undefined (setting 'effectAllowed') at Game.dragstart
And the setdata also won't work..
I tried many solutions but nothing seems to give the same result as on the desktop.
Can someone please help me find a solution?
thank you!
These are my events:
this.events = {
click: this.click.bind(this),
mousedown: this.mousedown.bind(this),
keydown: this.keydown.bind(this),
mouseup: this.mouseup.bind(this),
dragstart: this.dragstart.bind(this),
dragenter: this.dragenter.bind(this),
dragover: this.dragover.bind(this),
dragend: this.dragend.bind(this)
};
on(this.dealer, "click", this.events.click);
on(this.el, "mousedown", this.events.mousedown);
on(doc, "keydown", this.events.keydown);
on(doc, "mouseup", this.events.mouseup);
on(doc, "dragstart", this.events.dragstart);
on(doc, "dragenter", this.events.dragenter);
on(doc, "dragover", this.events.dragover);
on(doc, "dragend", this.events.dragend);
};
And these are the functions:
Game.prototype.click = function(e) {
var t = e.target;
if ( t.classList.contains("pack") ) {
e.stopImmediatePropagation();
this.deal();
}
};
Game.prototype.keydown = function(e) {
var k = e.key;
if ( e.ctrlKey ) {
switch(k) {
case "z":
this.undo();
break;
}
}
};
Game.prototype.mousedown = function(e) {
if ( this.autoStacking ) {
return false;
}
var t = e.target.closest(".card");
if ( t && t.card ) {
this.siblings = [];
var card = this.pack.cards[t.idx];
var next = card.el.nextElementSibling;
card.checked = false;
card.origin = {
x: e.pageX,
y: e.pageY,
};
card.el.classList.add("dragging");
this.activeCard = card;
this.startParent = card.el.parentNode;
// grab the cards on top as well
if ( next ) {
var p = next.parentNode;
var idx = Array.from(p.children).indexOf(next);
for (var i = idx; i < p.childElementCount; i++) {
var c = p.children[i];
c.classList.add("dragging");
this.siblings.push(c);
}
}
}
};
Game.prototype.dragstart = function(e) {
e.dataTransfer.effectAllowed = 'copy';
e.dataTransfer.setData('text/html', '');
// Create blank image to hide the ghost
var dragIcon = doc.createElement('img');
e.dataTransfer.setDragImage(dragIcon, -10, -10);
this.dragging = true;
};
Game.prototype.dragenter = function(e) {
var t = e.target;
var column = t.classList.contains("column");
var stack = t.classList.contains("stack");
var canDrop = t.card || column || stack;
if ( this.activeColumn ) {
this.activeColumn.classList.remove("over");
}
if ( canDrop ) {
if ( column || stack ) {
this.activeColumn = t;
} else {
this.activeColumn = t.parentNode;
}
this.activeColumn.classList.add("over");
}
};
Game.prototype.dragover = function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'over';
// Physically drag the card instead of using the D&D ghost
if ( this.activeCard && this.dragging ) {
var c = this.activeCard;
var x = e.pageX - c.origin.x;
var y = e.pageY - c.origin.y;
var css = "pointer-events: none; transform: scale(1.05, 1.05) rotateX(0deg) translate3d("+x+"px, "+y+"px, 0px);";
this.activeCard.el.style.cssText = css;
if ( this.siblings.length ) {
each(this.siblings, function(i, card) {
card.style.cssText = css;
}, this);
}
}
};
Game.prototype.dragend = function(e) {
if ( this.activeCard && this.dragging ) {
var c = this.activeCard;
c.el.classList.remove("dragging");
var x = e.pageX - c.origin.x;
var y = e.pageY - c.origin.y;
c.el.style.cssText = "";
if ( this.siblings.length ) {
each(this.siblings, function(i, card) {
card.classList.remove("dragging");
card.style.cssText = "";
}, this);
}
if ( this.activeColumn ) {
this.activeColumn.classList.remove("over");
}
if ( this.isLegalMove() ) {
var prev = c.el.previousElementSibling;
// Flip the last card
if ( prev ) {
var card = this.pack.cards[prev.idx];
if ( !card.flipped ) {
card.prevState = card.flipped;
card.flip();
this.score += 5;
}
}
this.stackToColumn = c.el.parentNode.classList.contains("stack");
this.pickCount = c.el.parentNode.childElementCount;
this.dropCount = this.activeColumn.childElementCount;
this.activeColumn.appendChild(c.el);
this.updateScore();
if ( this.siblings.length ) {
each(this.siblings, function(i, card) {
if ( this.activeCard.value === 13 &&
this.dropCount === 0 &&
!this.startParent.classList.contains("dealt") &&
c.el.parentNode.firstElementChild === c.el ) {
} else {
this.score += 5;
}
c.el.parentNode.appendChild(card);
card.classList.remove("dragging");
}, this);
}
this.updateHistory();
this.startParent.classList.toggle("empty", !this.startParent.childElementCount);
this.activeColumn.classList.toggle("empty", !this.activeColumn.childElementCount);
this.emit("change");
}
else(
this.move=this.move+1,
document.getElementById("moves1").innerHTML=this.move
)
}
if ( !this.stackToColumn ) {
this.check();
}
};
Game.prototype.mouseup = function(e) {
if ( this.activeCard ) {
this.activeCard.el.classList.remove("dragging");
this.activeCard = false;
if ( this.siblings.length ) {
each(this.siblings, function(i, card) {
card.classList.remove("dragging");
}, this);
}
}
this.hinted = false;
this.emit("change");
};
enter code here
