partey_workadventure/front/dist/static/js/touchcontrols.js

let TouchControls=(function() {

  if(!("ontouchstart" in document.documentElement)) {
    return;
  }

  let nativeKeyDownEvent=function(keyCode,code) {
    window.dispatchEvent(new KeyboardEvent('keydown',{'keyCode': keyCode,'code': code}));
  }

  let nativeKeyUpEvent=function(keyCode,code) {
    window.dispatchEvent(new KeyboardEvent('keyup',{'keyCode': keyCode,'code': code}));
  }

  let controls,
    dpad,
    btnA,
    btnB,
    centerX,
    centerY,
    threshholdX,
    threshholdY;

  controls=document.getElementById('controls');
  controls.style.display='block';
  dpad=document.getElementById('controls-dpad');
  btnA=document.getElementById('controls-btnA');
  btnB=document.getElementById('controls-btnB');
  centerX=dpad.clientWidth/2;
  centerY=dpad.clientHeight/2;
  threshholdX=centerX*0.15;
  threshholdY=centerY*0.15;

  dpad.addEventListener("touchmove",function(event) {
    event.preventDefault();
    if(event.targetTouches[0].target===dpad) {
      let movedX=event.targetTouches[0].pageX;
      let movedY=event.targetTouches[0].pageY;
      movedX-=dpad.offsetLeft+centerX;
      movedY-=dpad.offsetTop+centerY;

      if(movedX<(threshholdX*-1)&&(movedX>((centerX+threshholdX)*-1))) {
        nativeKeyDownEvent(37,"ArrowLeft");
      } else {
        nativeKeyUpEvent(37,"ArrowLeft");
      }

      if(movedX>threshholdX&&(movedX<(centerX+threshholdX))) {
        nativeKeyDownEvent(39,"ArrowRight");
      } else {
        nativeKeyUpEvent(39,"ArrowRight");
      }

      if(movedY<(threshholdY*-1)&&(movedY>((centerY+threshholdY)*-1))) {
        nativeKeyDownEvent(38,"ArrowUp");
      } else {
        nativeKeyUpEvent(38,"ArrowUp");
      }

      if(movedY>(threshholdY)&&(movedY<(centerY+threshholdY))) {
        nativeKeyDownEvent(40,"ArrowDown");
      } else {
        nativeKeyUpEvent(40,"ArrowDown");
      }
    } else {
      nativeKeyUpEvent(37,"ArrowLeft");
      nativeKeyUpEvent(39,"ArrowRight");
      nativeKeyUpEvent(38,"ArrowUp");
      nativeKeyUpEvent(40,"ArrowDown");
    }
  });

  dpad.addEventListener("touchend",function(event) {
    nativeKeyUpEvent(37,"ArrowLeft");
    nativeKeyUpEvent(39,"ArrowRight");
    nativeKeyUpEvent(38,"ArrowUp");
    nativeKeyUpEvent(40,"ArrowDown");
  });

  dpad.addEventListener("touchcancel",function(event) {
    nativeKeyUpEvent(37,"ArrowLeft");
    nativeKeyUpEvent(39,"ArrowRight");
    nativeKeyUpEvent(38,"ArrowUp");
    nativeKeyUpEvent(40,"ArrowDown");
  });

  btnA.addEventListener("touchstart",function(event) {
    nativeKeyDownEvent(32,"Space");
    nativeKeyDownEvent(13,"Enter");
    console.log("btnA start");
  });

  btnA.addEventListener("touchend",function(event) {
    nativeKeyUpEvent(32,"Space");
    nativeKeyUpEvent(13,"Enter");
    console.log("btnA end");
  });

  btnB.addEventListener("touchstart",function(event) {
    nativeKeyDownEvent(16,"Shift");
    console.log("btnB start");
  });

  btnB.addEventListener("touchend",function(event) {
    nativeKeyUpEvent(16,"Shift");
    console.log("btnB end");
  });

});

TouchControls();