Changes for #23 and #24

static/b0.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-1 -1 15 15" xmlns="http://www.w3.org/2000/svg">
+  <circle cx= "6" cy="10" r="2" style="stroke: #000;"/>
+  <circle cx="10" cy= "6" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx= "2" cy= "6" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx= "6" cy= "2" r="2" style="stroke: #000; fill: none;"/>
+</svg>

static/b1.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-1 -1 15 15" xmlns="http://www.w3.org/2000/svg">
+  <circle cx= "6" cy="10" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx="10" cy= "6" r="2" style="stroke: #000;"/>
+  <circle cx= "2" cy= "6" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx= "6" cy= "2" r="2" style="stroke: #000; fill: none;"/>
+</svg>

static/b2.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-1 -1 15 15" xmlns="http://www.w3.org/2000/svg">
+  <circle cx= "6" cy="10" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx="10" cy= "6" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx= "2" cy= "6" r="2" style="stroke: #000;"/>
+  <circle cx= "6" cy= "2" r="2" style="stroke: #000; fill: none;"/>
+</svg>

static/b3.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="-1 -1 15 15" xmlns="http://www.w3.org/2000/svg">
+  <circle cx= "6" cy="10" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx="10" cy= "6" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx= "2" cy= "6" r="2" style="stroke: #000; fill: none;"/>
+  <circle cx= "6" cy= "2" r="2" style="stroke: #000;"/>
+</svg>

static/dev.html

@@ -99,8 +99,8 @@
 											<i class="material-icons" role="presentation">gamepad</i>
 										</td>
 										<td>
-											<kbd class="gamepad b0" title="Gamepad Bottom Button">A</kbd> 
+											<img class="gamepad b0" title="Gamepad Bottom Button" src="b0.svg" alt="Bottom button">
-											<kbd class="gamepad b1" title="Gamepad Right Button">B</kbd>
+											<img class="gamepad b1" title="Gamepad Right Button" src="b1.svg" alt="Right button">
 										</td>
 									</tr>
 								</table>
@@ -140,14 +140,14 @@
 											<i class="material-icons" role="presentation">gamepad</i>
 										</td>
 										<td>
-											<kbd class="gamepad b2" title="Gamepad Left Button">X</kbd> 
+											<img class="gamepad b2" title="Gamepad Left Button" src="b2.svg" alt="Left Button">
 											<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 b3" title="Gamepad Top Button">Y</kbd>
+											<img class="gamepad b3" title="Gamepad Top Button" src="b3.svg" alt="Top Button">
 											<kbd class="gamepad" title="Gamepad Right Shoulder Button">RB</kbd>
 										</td>
 									</tr>

static/dev.js

@@ -8,40 +8,6 @@ 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
@@ -81,16 +47,19 @@ class Iambic {
 		this.beginTxFunc = beginTxFunc
 		this.endTxFunc = endTxFunc
 		this.intervalDuration = intervalDuration
-		this.typematic = null
+		this.ditDown = false
+		this.dahDown = false
+		this.last = null
 		this.queue = []
 		this.pulseTimer = null
 	}
 
 	pulse() {
 		if (this.queue.length == 0) {
-			if (this.typematic) {
+			let next = this.typematic()
+			if (next) {
 				// Barkeep! Another round!
-				this.Enqueue(this.typematic)
+				this.Enqueue(next)
 			} else {
 				// Nothing left on the queue, stop the machine
 				this.pulseTimer = null
@@ -98,14 +67,15 @@ class Iambic {
 			}
 		}
 
-		let duration = this.queue.shift() * this.intervalDuration
+		let next = this.queue.shift()
-		if (duration < 0) {
+		if (next < 0) {
-			duration = duration * -1
+			next = next * -1
 			this.endTxFunc()
 		} else {
+			this.last = next
 			this.beginTxFunc()
 		}
-		this.pulseTimer = setTimeout(() => this.pulse(), duration)
+		this.pulseTimer = setTimeout(() => this.pulse(), next * this.intervalDuration)
 	}
 
 	maybePulse() {
@@ -115,6 +85,23 @@ class Iambic {
 		}
 	}
 
+	typematic() {
+		if (this.ditDown && this.dahDown) {
+			if (this.last == DIT) {
+				this.last = DAH
+			} else {
+				this.last = DIT
+			}
+		} else if (this.ditDown) {
+			this.last = DIT
+		} else if (this.dahDown) {
+			this.last = DAH
+		} else {
+			this.last = null
+		}
+		return this.last
+	}
+
 	/**
 	  * Set a new dit interval (transmission rate)
 	  *
@@ -142,11 +129,14 @@ class Iambic {
 	  * @param {boolean} down True if key was pressed, false if released
 	  */
 	Key(key, down) {
+		if (key == DIT) {
+			this.ditDown = down
+		} else if (key == DAH) {
+			this.dahDown = down
+		}
+
 		if (down) {
 			this.Enqueue(key)
-			this.typematic = key
-		} else {
-			this.typematic = null
 		}
 	}
 }
@@ -639,35 +629,22 @@ 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 b = gp.buttons
+				let pressed = gp.buttons[i].pressed
-
+				if (i < 2) {
-			let key = b[0].pressed || b[1].pressed
+					currentButtons.key |= pressed
-			let dit = b[2].pressed || b[4].pressed || b[6].pressed || b[8].pressed || b[10].pressed || b[14].pressed
+				} else if (i % 2 == 0) {
-			let dah = b[3].pressed || b[5].pressed || b[7].pressed || b[9].pressed || b[11].pressed || b[15].pressed
+					currentButtons.dit |= pressed
-
+				} else {
-			if (key || dit || dah) {
+					currentButtons.dah |= pressed
-				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)
 		}

static/vail.css

@@ -60,9 +60,10 @@ kbd {
     font-size: 9pt;
     padding: .1em .6em;
 	cursor: default;
+	vertical-align: top;
 }
 
-.gamepad {
+kbd.gamepad {
 	color: white;
 	font-weight: bold;
 	background-color: #444;
@@ -70,17 +71,9 @@ kbd {
 	height: 10px;
 	width: 10px;
 }
-.gamepad.a {
+img.gamepad {
-	color: #8f8;
+	height: 1.5em;
-}
+	vertical-align: baseline;
-.gamepad.b {
-	color: #f88;
-}
-.gamepad.x {
-	color: #88f;
-}
-.gamepad.y {
-	color: #ff8;
 }
 
 code {