],
data: function() {
return {
+ mobileBrowser: ("ontouchstart" in window),
possibleMoves: [], //filled after each valid click/dragstart
choices: [], //promotion pieces, or checkered captures... (as moves)
selectedPiece: null, //moving piece (or clicked piece)
}
let onEvents = {};
// NOTE: click = mousedown + mouseup
- if ("ontouchstart" in window) {
+ if (this.mobileBrowser) {
onEvents = {
on: {
touchstart: this.mousedown,
mousemove: function(e) {
if (!this.selectedPiece) return;
// There is an active element: move it around
- const [offsetX, offsetY] = e.clientX
- ? [e.clientX, e.clientY] //desktop browser
- : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
+ const [offsetX, offsetY] =
+ this.mobileBrowser
+ ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
+ : [e.clientX, e.clientY];
this.selectedPiece.style.left = offsetX - this.start.x + "px";
this.selectedPiece.style.top = offsetY - this.start.y + "px";
},
if (!this.selectedPiece) return;
// There is an active element: obtain the move from start and end squares
this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
- const [offsetX, offsetY] = e.clientX
- ? [e.clientX, e.clientY]
- : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
+ const [offsetX, offsetY] =
+ this.mobileBrowser
+ ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
+ : [e.clientX, e.clientY];
let landing = document.elementFromPoint(offsetX, offsetY);
this.selectedPiece.style.zIndex = 3000;
// Next condition: classList.contains(piece) fails because of marks