{
attrs: { id: "pgn-game" },
on: { click: this.download },
- domProps: {
- innerHTML: this.pgnTxt
- }
+ domProps: { innerHTML: this.pgnTxt }
+ }
+ )
+ ]
+ )
+ );
+ }
+ else if (this.mode != "idle")
+ {
+ // Show current FEN (at least for debug)
+ elementArray.push(
+ h('div',
+ { attrs: { id: "fen-div" } },
+ [
+ h('p',
+ {
+ attrs: { id: "fen-string" },
+ domProps: { innerHTML: this.vr.getBaseFen() }
}
)
]
"col-lg-6":true,
"col-lg-offset-3":true,
},
- // NOTE: click = mousedown + mouseup --> what about smartphone?!
+ // NOTE: click = mousedown + mouseup
on: {
mousedown: this.mousedown,
mousemove: this.mousemove,
mouseup: this.mouseup,
- touchdown: this.mousedown,
+ touchstart: this.mousedown,
touchmove: this.mousemove,
- touchup: this.mouseup,
+ touchend: this.mouseup,
},
},
elementArray
},
mousedown: function(e) {
e = e || window.event;
+ let ingame = false;
+ let elem = e.target;
+ while (!ingame && elem !== null)
+ {
+ if (elem.classList.contains("game"))
+ {
+ ingame = true;
+ break;
+ }
+ elem = elem.parentElement;
+ }
+ if (!ingame) //let default behavior (click on button...)
+ return;
e.preventDefault(); //disable native drag & drop
if (!this.selectedPiece && e.target.classList.contains("piece"))
{
this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
? this.vr.getPossibleMovesFrom(startSquare)
: [];
- e.target.parentNode.appendChild(this.selectedPiece);
+ // Next line add moving piece just after current image (required for Crazyhouse reserve)
+ e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
}
},
mousemove: function(e) {
// If there is an active element, move it around
if (!!this.selectedPiece)
{
- this.selectedPiece.style.left = (e.clientX-this.start.x) + "px";
- this.selectedPiece.style.top = (e.clientY-this.start.y) + "px";
+ const [offsetX,offsetY] = !!e.clientX
+ ? [e.clientX,e.clientY] //desktop browser
+ : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
+ this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
+ this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
}
},
mouseup: function(e) {
e = e || window.event;
// Read drop target (or parentElement, parentNode... if type == "img")
this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coordinates
- let landing = document.elementFromPoint(e.clientX, e.clientY);
+ const [offsetX,offsetY] = !!e.clientX
+ ? [e.clientX,e.clientY]
+ : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
+ let landing = document.elementFromPoint(offsetX, offsetY);
this.selectedPiece.style.zIndex = 3000;
while (landing.tagName == "IMG") //classList.contains(piece) fails because of mark/highlight
landing = landing.parentNode;