Some work to map buttons, but there's a better way

static/dev.html

@@ -99,8 +99,8 @@
 											<i class="material-icons" role="presentation">gamepad</i>
 										</td>
 										<td>
-											<kbd class="gamepad a" title="Gamepad A">A</kbd> 
-											<kbd class="gamepad b" title="Gamepad B">B</kbd>
+											<kbd class="gamepad b0" title="Gamepad Bottom Button">A</kbd> 
+											<kbd class="gamepad b1" title="Gamepad Right Button">B</kbd>
 										</td>
 									</tr>
 								</table>
@@ -140,15 +140,15 @@
 											<i class="material-icons" role="presentation">gamepad</i>
 										</td>
 										<td>
-											<kbd class="gamepad x" title="Gamepad X">X</kbd> 
-											<kbd class="gamepad" title="Gamepad LB">LB</kbd>
+											<kbd class="gamepad b2" title="Gamepad Left Button">X</kbd> 
+											<kbd class="gamepad" title="Gamepad Left Shoulder Button">LB</kbd>
 										</td>
 										<td>
 											<i class="material-icons" role="presentation">gamepad</i>
 										</td>
 										<td>
-											<kbd class="gamepad y" title="Gamepad Y">Y</kbd>
-											<kbd class="gamepad" title="Gamepad RB">RB</kbd>
+											<kbd class="gamepad b3" title="Gamepad Top Button">Y</kbd>
+											<kbd class="gamepad" title="Gamepad Right Shoulder Button">RB</kbd>
 										</td>
 									</tr>
 									<tr>

static/dev.js

@@ -8,6 +8,40 @@ const PAUSE = -1
 const DIT = 1
 const DAH = 3
 
+/**
+ * Return button labels and colors for the first 4 buttons of the provided gamepad.
+ * 
+ * @param {Gamepad} gamepad Gamepad you want to know about
+ */
+function getButtonLabels(gamepad) {
+	if (gamepad.id.includes("057e") || // Nintendo
+		gamepad.id.includes("2dc8") || // 8bitdo
+		false) { 
+		return [
+			{"label": "B", "color": "yellow"},
+			{"label": "A", "color": "red"},
+			{"label": "Y", "color": "green"},
+			{"label": "X", "color": "blue"},
+		]
+	}
+	if (gamepad.id.includes("054c") || // Sony
+		false) {
+		return [
+			{"label": "🞩", "color": "blue"},
+			{"label": "◯", "color": "red"},
+			{"label": "□", "color": "yellow"},
+			{"label": "△", "color": "pink"},
+		]
+	}
+	// Default: xbox, logitech, and more
+	return [
+		{"label": "A", "color": "green"},
+		{"label": "B", "color": "red"},
+		{"label": "X", "color": "blue"},
+		{"label": "Y", "color": "yellow"},
+	]
+}
+
 // iOS kludge
 if (!window.AudioContext) {
 	window.AudioContext = window.webkitAudioContext
@@ -605,22 +639,35 @@ class Vail {
 
 	gamepadPoll(timestamp) {
 		let currentButtons = {}
+		let currentGamepad = null
 		for (let gp of navigator.getGamepads()) {
 			if (gp == null) {
 				continue
 			}
-			for (let i in gp.buttons) {
-				let pressed = gp.buttons[i].pressed
-				if (i < 2) {
-					currentButtons.key |= pressed
-				} else if (i % 2 == 0) {
-					currentButtons.dit |= pressed
-				} else {
-					currentButtons.dah |= pressed
-				}
+
+			let b = gp.buttons
+
+			let key = b[0].pressed || b[1].pressed
+			let dit = b[2].pressed || b[4].pressed || b[6].pressed || b[8].pressed || b[10].pressed || b[14].pressed
+			let dah = b[3].pressed || b[5].pressed || b[7].pressed || b[9].pressed || b[11].pressed || b[15].pressed
+
+			if (key || dit || dah) {
+				currentGamepad = gp
 			}
+			this.currentButtons.key |= key
+			this.currentButtons.dit |= dit
+			this.currentButtons.dah |= dah
 		}
 
+		if (currentButtons != this.gamepadButtons) {
+			let labels = getButtonLabels(currentGamepad)
+
+			for (let but = 0; but < 4; but++) {
+				let e = document.querySelector(".gamepad.b" + but)
+				e.textContent = labels[but].label
+				e.
+			}
+			document.querySelector(".gamepad.b0").
 			if (currentButtons.key != this.gamepadButtons.key) {
 				this.straightKey(currentButtons.key)
 			}