Add keys for vband compatibility

static/vail.js

@@ -8,7 +8,7 @@ const DIT = 1
 const DAH = 3
 
 // iOS kludge
-if (! window.AudioContext) { 
+if (!window.AudioContext) {
 	window.AudioContext = window.webkitAudioContext
 }
 
@@ -116,7 +116,7 @@ class Iambic {
 		}
 
 		// Not pulsing yet? Start right away!
-		if (! this.interval) {
+		if (!this.interval) {
 			this.interval = setInterval(e => this.pulse(), this.intervalDuration)
 			this.pulse()
 		}
@@ -132,7 +132,7 @@ class Buzzer {
 	// in order to avoid "pops" (square wave overtones)
 	// that happen with instant changes in gain.
 
-	constructor(txGain=0.6) {
+	constructor(txGain = 0.6) {
 		this.txGain = txGain
 
 		this.ac = new AudioContext()
@@ -143,13 +143,13 @@ class Buzzer {
 		this.noiseGain = this.whiteNoise()
 
 		this.ac.resume()
-		.then(() => {
+			.then(() => {
-			document.querySelector("#muted").classList.add("hidden")
+				document.querySelector("#muted").classList.add("hidden")
-		})
+			})
 
 	}
 
-	create(frequency, type="sine") {
+	create(frequency, type = "sine") {
 		let gain = this.ac.createGain()
 		gain.connect(this.ac.destination)
 		gain.gain.value = 0
@@ -186,7 +186,7 @@ class Buzzer {
 		gain.connect(this.ac.destination)
 
 		return gain
-}
+	}
 
 	gain(high) {
 		if (high) {
@@ -203,11 +203,11 @@ class Buzzer {
 	  * @return {number} AudioContext offset time
 	  */
 	acTime(when) {
-		if (! when) {
+		if (!when) {
 			return this.ac.currentTime
 		}
 
-		let acOffset = Date.now() - this.ac.currentTime*1000
+		let acOffset = Date.now() - this.ac.currentTime * 1000
 		let acTime = (when - acOffset) / 1000
 		return acTime
 	}
@@ -235,8 +235,8 @@ class Buzzer {
 	  * @param {boolean} tx Transmit or receive tone
 	  * @param {number} when Time to begin, in ms (null=now)
 	  */
-	Buzz(tx, when=null) {
+	Buzz(tx, when = null) {
-		if (! tx) {
+		if (!tx) {
 			let recv = document.querySelector("#recv")
 			let ms = when - Date.now()
 			setTimeout(e => {
@@ -247,9 +247,9 @@ class Buzzer {
 		let gain = this.gain(tx)
 		let acWhen = this.acTime(when)
 		this.ac.resume()
-		.then(() => {
+			.then(() => {
-			gain.setTargetAtTime(this.txGain, acWhen, 0.001)
+				gain.setTargetAtTime(this.txGain, acWhen, 0.001)
-		})
+			})
 	}
 
 	/**
@@ -258,8 +258,8 @@ class Buzzer {
 	  * @param {boolean} tx Transmit or receive tone
 	  * @param {number} when Time to end, in ms (null=now)
 	  */
-	Silence(tx, when=null) {
+	Silence(tx, when = null) {
-		if (! tx) {
+		if (!tx) {
 			let recv = document.querySelector("#recv")
 			let ms = when - Date.now()
 			setTimeout(e => {
@@ -282,7 +282,7 @@ class Buzzer {
 	  */
 	BuzzDuration(high, when, duration) {
 		this.Buzz(high, when)
-		this.Silence(high, when+duration)
+		this.Silence(high, when + duration)
 	}
 }
 
@@ -300,7 +300,7 @@ class Vail {
 
 		// Listen to HTML buttons
 		for (let e of document.querySelectorAll("button.key")) {
-			e.addEventListener("contextmenu", e => {e.preventDefault(); return false})
+			e.addEventListener("contextmenu", e => { e.preventDefault(); return false })
 			e.addEventListener("touchstart", e => this.keyButton(e))
 			e.addEventListener("touchend", e => this.keyButton(e))
 			e.addEventListener("mousedown", e => this.keyButton(e))
@@ -320,7 +320,7 @@ class Vail {
 
 		// Listen for slider values
 		this.inputInit("#iambic-duration", e => this.iambic.SetIntervalDuration(e.target.value))
-		this.inputInit("#rx-delay", e => {this.rxDelay = Number(e.target.value)})
+		this.inputInit("#rx-delay", e => { this.rxDelay = Number(e.target.value) })
 
 		// Show what repeater we're on
 		let repeater = (new URL(location)).searchParams.get("repeater") || "General Chaos"
@@ -329,7 +329,7 @@ class Vail {
 		// Request MIDI access
 		if (navigator.requestMIDIAccess) {
 			navigator.requestMIDIAccess()
-			.then(a => this.midiInit(a))
+				.then(a => this.midiInit(a))
 		}
 
 		// Set up for gamepad input
@@ -369,7 +369,7 @@ class Vail {
 			input.addEventListener("midimessage", e => this.midiMessage(e))
 		}
 		this.midiAccess.addEventListener("statechange", e => this.midiStateChange(e))
-  	}
+	}
 
 	midiStateChange(event) {
 		// XXX: it's not entirely clear how to handle new devices showing up.
@@ -434,8 +434,8 @@ class Vail {
 	}
 
 	updateReadings() {
-		let avgLag = this.lagTimes.reduce((a,b) => (a+b)) / this.lagTimes.length
+		let avgLag = this.lagTimes.reduce((a, b) => (a + b)) / this.lagTimes.length
-		let longestRx = this.rxDurations.reduce((a,b) => Math.max(a,b))
+		let longestRx = this.rxDurations.reduce((a, b) => Math.max(a, b))
 		let suggestedDelay = (avgLag + longestRx) * 1.2
 
 		this.updateReading("#lag-value", avgLag.toFixed())
@@ -474,7 +474,7 @@ class Vail {
 		try {
 			msg = JSON.parse(jmsg)
 		}
-		catch(err) {
+		catch (err) {
 			console.log(err, msg)
 			return
 		}
@@ -489,7 +489,7 @@ class Vail {
 		if (sent.length < this.sent.length) {
 			// We're getting our own message back, which tells us our lag.
 			// We shouldn't emit a tone, though.
-			let totalDuration = durations.reduce((a,b) => a+b)
+			let totalDuration = durations.reduce((a, b) => a + b)
 			this.sent = sent
 			this.addLagReading(now - beginTxTime - totalDuration)
 			return
@@ -511,7 +511,7 @@ class Vail {
 		}
 
 		// Add rxDelay
-		let adjustedTxTime = beginTxTime+this.rxDelay
+		let adjustedTxTime = beginTxTime + this.rxDelay
 		if (adjustedTxTime < now) {
 			console.log("adjustedTxTime: ", adjustedTxTime, " now: ", now)
 			this.error("Packet requested playback " + (now - adjustedTxTime) + "ms in the past. Increase receive delay!")
@@ -555,19 +555,27 @@ class Vail {
 
 		let begin = event.type.endsWith("down")
 
-		if ((event.code == "KeyX") || (event.code == "Period")) {
+		if ((event.code == "KeyX") ||
+			(event.code == "Period") ||
+			(event.code == "ControlLeft") ||
+			(event.code == "BracketLeft") ||
+			(event.key == "[")) {
 			event.preventDefault()
 			this.iambicDit(begin)
 		}
-		if ((event.code == "KeyZ") || (event.code == "Slash")) {
+		if ((event.code == "KeyZ") ||
+			(event.code == "Slash") ||
+			(event.code == "ControlRight") ||
+			(event.code == "BracketRight") ||
+			(event.key == "]")) {
 			event.preventDefault()
 			this.iambicDah(begin)
 		}
 		if ((event.code == "KeyC") ||
-				(event.code == "Comma") || 
+			(event.code == "Comma") ||
-				(event.key == "Shift") || 
+			(event.key == "Shift") ||
-				(event.key == "Enter") ||
+			(event.key == "Enter") ||
-				(event.key == "NumpadEnter")) {
+			(event.key == "NumpadEnter")) {
 			event.preventDefault()
 			this.straightKey(begin)
 		}
@@ -596,7 +604,7 @@ class Vail {
 		// Polling could be computationally expensive,
 		// especially on devices with a power budget, like phones.
 		// To be considerate, we only start polling if a gamepad appears.
-		if (! this.gamepadButtons) {
+		if (!this.gamepadButtons) {
 			this.gamepadButtons = {}
 			this.gamepadPoll(event.timeStamp)
 		}
@@ -654,9 +662,9 @@ class Vail {
 
 	maximize(e) {
 		let element = e.target
-		while (! element.classList.contains("mdl-card")) {
+		while (!element.classList.contains("mdl-card")) {
 			element = element.parentElement
-			if (! element) {
+			if (!element) {
 				console.log("Maximize button: couldn't find parent card")
 				return
 			}