|
|
|
@ -49,10 +49,8 @@ const handleCrosspad=(() => { |
|
|
|
|
let useOverlay=false; |
|
|
|
|
let enabled=false; |
|
|
|
|
const displayOverlay=() => { |
|
|
|
|
if(hud) { |
|
|
|
|
if(useOverlay && enabled) hud.appendChild(cross); |
|
|
|
|
else hud.removeChild(cross); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
config.watchB('input.touchscreen.crosspad.overlay', (k, v) => { |
|
|
|
|
useOverlay=v; |
|
|
|
@ -80,8 +78,7 @@ const handleCrosspad=(() => { |
|
|
|
|
return { |
|
|
|
|
touchstart: fn, |
|
|
|
|
touchmove: fn, |
|
|
|
|
init, |
|
|
|
|
fini |
|
|
|
|
init, fini |
|
|
|
|
}; |
|
|
|
|
})(); |
|
|
|
|
|
|
|
|
@ -96,24 +93,74 @@ const handleKeyboard={ |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const handleJoystick=(() => { |
|
|
|
|
let cvs=document.createElement('canvas'); |
|
|
|
|
cvs.classList.add('joystickOverlay'); |
|
|
|
|
let ctx=cvs.getContext('2d'); |
|
|
|
|
let enabled=false; |
|
|
|
|
let useOverlay=false; |
|
|
|
|
|
|
|
|
|
let center={ |
|
|
|
|
x: 0, |
|
|
|
|
y: 0 |
|
|
|
|
}; |
|
|
|
|
let deadzone; |
|
|
|
|
|
|
|
|
|
const displayOverlay=() => { |
|
|
|
|
if(!enabled || !useOverlay) return hud.removeChild(cvs); |
|
|
|
|
|
|
|
|
|
cvs.width=cvs.height=4*deadzone+120; |
|
|
|
|
hud.appendChild(cvs); |
|
|
|
|
ctx.clearRect(0, 0, cvs.width, cvs.width); |
|
|
|
|
|
|
|
|
|
ctx.strokeStyle='black'; |
|
|
|
|
ctx.lineWidth=1; |
|
|
|
|
ctx.beginPath(); |
|
|
|
|
const rad=2*deadzone+50; |
|
|
|
|
ctx.moveTo(rad*Math.cos(Math.PI/4)+cvs.width/2, rad*Math.sin(Math.PI/4)+cvs.width/2); |
|
|
|
|
ctx.lineTo(rad*Math.cos(Math.PI/4+Math.PI)+cvs.width/2, rad*Math.sin(Math.PI/4+Math.PI)+cvs.width/2); |
|
|
|
|
ctx.moveTo(rad*Math.cos(-Math.PI/4)+cvs.width/2, rad*Math.sin(-Math.PI/4)+cvs.width/2); |
|
|
|
|
ctx.lineTo(rad*Math.cos(-Math.PI/4+Math.PI)+cvs.width/2, rad*Math.sin(-Math.PI/4+Math.PI)+cvs.width/2); |
|
|
|
|
ctx.stroke(); |
|
|
|
|
|
|
|
|
|
ctx.strokeStyle='gray'; |
|
|
|
|
ctx.lineWidth=2; |
|
|
|
|
ctx.beginPath(); |
|
|
|
|
ctx.ellipse(cvs.width/2, cvs.width/2, deadzone, deadzone, 0, 0, Math.PI*2); |
|
|
|
|
ctx.stroke(); |
|
|
|
|
ctx.lineWidth=3; |
|
|
|
|
ctx.beginPath(); |
|
|
|
|
ctx.ellipse(cvs.width/2, cvs.width/2, deadzone*2+50, deadzone*2+50, 0, 0, Math.PI*2); |
|
|
|
|
ctx.stroke(); |
|
|
|
|
|
|
|
|
|
cvs.style.left=center.x+'px'; |
|
|
|
|
cvs.style.top=center.y+'px'; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const init=() => { |
|
|
|
|
enabled=true; |
|
|
|
|
deadzone=config.getN('input.touchscreen.joystick.deadzone'); |
|
|
|
|
useOverlay=config.getB('input.touchscreen.joystick.overlay'); |
|
|
|
|
displayOverlay(); |
|
|
|
|
}; |
|
|
|
|
const fini=() => { |
|
|
|
|
enabled=false; |
|
|
|
|
displayOverlay(); |
|
|
|
|
}; |
|
|
|
|
config.watchN('input.touchscreen.joystick.deadzone', (k, v) => { |
|
|
|
|
deadzone=v; |
|
|
|
|
displayOverlay(); |
|
|
|
|
}); |
|
|
|
|
config.watchB('input.touchscreen.joystick.overlay', (k, v) => { |
|
|
|
|
useOverlay=v; |
|
|
|
|
displayOverlay(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
init, |
|
|
|
|
init, fini, |
|
|
|
|
touchstart: e => { |
|
|
|
|
center.x=e.touches[0].clientX; |
|
|
|
|
center.y=e.touches[0].clientY; |
|
|
|
|
displayOverlay(); |
|
|
|
|
}, |
|
|
|
|
touchmove: e => |
|
|
|
|
handleAngleMagnitude( |
|
|
|
|