From 2a9418c9c4af3ea74cb586853a2d0470bc8f0283 Mon Sep 17 00:00:00 2001
From: Nathan DECHER <nathan.decher@gmail.com>
Date: Mon, 6 Apr 2020 14:01:08 +0200
Subject: [PATCH] joystick overlay only appears on first touch

---
 src/js/input.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/js/input.js b/src/js/input.js
index a2fdc30..c860bd8 100644
--- a/src/js/input.js
+++ b/src/js/input.js
@@ -23,7 +23,11 @@ const handleAngleMagnitude=(x, y, threshold=0, fn=null) => {
 
 		if(fn) fn(angle, magnitude);
 	}
-}
+};
+
+const removeChild=(parent, child) => {
+	if(child.parentNode==parent) parent.removeChild(child);
+};
 
 const handleCrosspad=(() => {
 	const ns='http://www.w3.org/2000/svg';
@@ -50,7 +54,7 @@ const handleCrosspad=(() => {
 	let enabled=false;
 	const displayOverlay=() => {
 		if(useOverlay && enabled) hud.appendChild(cross);
-		else hud.removeChild(cross);
+		else removeChild(hud, cross);
 	};
 	config.watchB('input.touchscreen.crosspad.overlay', (k, v) => {
 		useOverlay=v;
@@ -98,6 +102,7 @@ const handleJoystick=(() => {
 	let ctx=cvs.getContext('2d');
 	let enabled=false;
 	let useOverlay=false;
+	let firstTouch=false;
 
 	let center={
 		x: 0,
@@ -106,7 +111,7 @@ const handleJoystick=(() => {
 	let deadzone;
 
 	const displayOverlay=() => {
-		if(!enabled || !useOverlay) return hud.removeChild(cvs);
+		if(!enabled || !useOverlay || !firstTouch) return removeChild(hud, cvs);
 
 		cvs.width=cvs.height=4*deadzone+120;
 		hud.appendChild(cvs);
@@ -160,6 +165,7 @@ const handleJoystick=(() => {
 		touchstart: e => {
 			center.x=e.touches[0].clientX;
 			center.y=e.touches[0].clientY;
+			firstTouch=true;
 			displayOverlay();
 		},
 		touchmove: e =>