added joystick guide (closes #17)

assets/config.json

@@ -1,8 +1,8 @@
 {
-	"input.touchscreen.crosspad.enabled": true,
+	"input.touchscreen.crosspad.enabled": false,
 	"input.touchscreen.crosspad.overlay": true,
 
-	"input.touchscreen.joystick.enabled": false,
+	"input.touchscreen.joystick.enabled": true,
 	"input.touchscreen.joystick.overlay": true,
 	"input.touchscreen.joystick.deadzone": 10,
 

src/js/input.js

@@ -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);
-		}
+		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(

src/less/hud.less

@@ -31,4 +31,10 @@
 		transform: translate(-50%, -50%);
 		opacity: .5;
 	}
+
+	.joystickOverlay {
+		pointer-events: none;
+		transform: translate(-50%, -50%);
+		opacity: .5;
+	}
 }