Mobile Play

[ericborgos]

I created a page on my site at https://boredhumans.com/chess.php using your program, but it is hard to get the pieces to move on my iPhone. I can't drag them like on PC, I have to click the piece first (which then makes a giant sized version of it pop up which I then have to click again get off the screen) and then click where I want it to go. Any suggestions on how to improve that?

[hahmann1979]

Hi,

Add the code below at the beginning of the main.js file :

function touchHandler(event) {
var touch = event.changedTouches[0];

var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent({
    touchstart: "mousedown",
    touchmove: "mousemove",
    touchend: "mouseup"
}[event.type], true, true, window, 1,
    touch.screenX, touch.screenY,
    touch.clientX, touch.clientY, false,
    false, false, false, 0, null);

touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();

}

function init() {
var d = document.querySelectorAll("#myBoard");
for (var i = 0; i < d.length; i++) {
d[i].addEventListener("touchstart", touchHandler, true);
d[i].addEventListener("touchmove", touchHandler, true);
d[i].addEventListener("touchend", touchHandler, true);
d[i].addEventListener("touchcancel", touchHandler, true);
}
}

and at the of the file add : init();

Should work now on mobile devices.....

[Vinylrider]

Maybe you could port chess-ai from "chessboard" to "chessboard2" (https://github.com/oakmac/chessboard2) ? It has much better mobile devices touch support. It even works with Amazon Kindle devices.