X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=14d3007a190ae5c27e1e6ec6acf55b32291a6e03;hb=15952ada1d73262371654351ab8a4471f64010fd;hp=2a9a701817af5cbaf980fbac0ff9ec72d62fba6d;hpb=444615475746b98a4338de2a6bb9e70f5735780b;p=vchess.git diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 2a9a7018..14d3007a 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -413,9 +413,24 @@ Vue.component('my-game', { { 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() } } ) ] @@ -432,7 +447,7 @@ Vue.component('my-game', { "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, @@ -779,8 +794,11 @@ Vue.component('my-game', { // 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) { @@ -789,7 +807,10 @@ Vue.component('my-game', { 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;