Add gamepad support + Enter=straight

This commit is contained in:
Neale Pickett 2020-05-19 08:21:33 -06:00
parent feeadb65ba
commit 8e6e18f413
3 changed files with 117 additions and 37 deletions

View File

@ -77,7 +77,13 @@
</tr>
<tr>
<td>
<kbd>c</kbd> or <kbd>,</kbd> or <kbd>⇧ Shift</kbd>
<kbd>c</kbd>
<kbd>,</kbd>
<kbd>Enter</kbd>
<kbd>⇧ Shift</kbd>
<br>
<kbd class="gamepad a" title="Gamepad A">A</kbd>
<kbd class="gamepad b" title="Gamepad B">B</kbd>
</td>
</tr>
</table>
@ -98,12 +104,20 @@
</tr>
<tr>
<td>
<kbd>.</kbd> or <kbd>z</kbd>
<kbd>.</kbd>
<kbd>z</kbd>
<br>
<kbd class="gamepad x" title="Gamepad X">X</kbd>
<kbd class="gamepad" title="Gamepad LB">LB</kbd>
<br>
right-click for Dah
</td>
<td>
<kbd>/</kbd> or <kbd>x</kbd>
<kbd>/</kbd>
<kbd>x</kbd>
<br>
<kbd class="gamepad y" title="Gamepad Y">Y</kbd>
<kbd class="gamepad" title="Gamepad RB">RB</kbd>
</td>
</tr>
</table>

View File

@ -55,6 +55,28 @@ kbd {
border-radius: 3px;
font-size: 9pt;
padding: .1em .6em;
cursor: default;
}
.gamepad {
color: white;
font-weight: bold;
background-color: #444;
border-radius: 50%;
height: 10px;
width: 10px;
}
.gamepad.a {
color: #8f8;
}
.gamepad.b {
color: #f88;
}
.gamepad.x {
color: #88f;
}
.gamepad.y {
color: #ff8;
}
code {

View File

@ -262,8 +262,8 @@ class Vail {
}
// Listen for keystrokes
document.addEventListener("keydown", e => this.key(e))
document.addEventListener("keyup", e => this.key(e))
document.addEventListener("keydown", e => this.keyboard(e))
document.addEventListener("keyup", e => this.keyboard(e))
// Make helpers
this.iambic = new Iambic(() => this.beginTx(), () => this.endTx())
@ -282,19 +282,9 @@ class Vail {
navigator.requestMIDIAccess()
.then(a => this.midiInit(a))
}
}
maximize(e) {
let element = e.target
while (! element.classList.contains("mdl-card")) {
element = element.parentElement
if (! element) {
console.log("Maximize button: couldn't find parent card")
return
}
}
element.classList.toggle("maximized")
console.log(element)
// Set up for gamepad input
window.addEventListener("gamepadconnected", e => this.gamepadConnected(e))
}
openSocket() {
@ -370,12 +360,7 @@ class Vail {
}
error(msg) {
let now = new Date()
let el = document.querySelector("#snackbar")
el.MaterialSnackbar.showSnackbar({
message: msg,
timeout: 2000
})
toast(msg)
this.buzzer.ErrorTone()
}
@ -484,7 +469,15 @@ class Vail {
}
}
key(event) {
iambicDit(begin) {
this.iambic.Key(begin, DIT)
}
iambicDah(begin) {
this.iambic.Key(begin, DAH)
}
keyboard(event) {
if (event.repeat) {
// Ignore key repeats generated by the OS, we do this ourselves
return
@ -494,19 +487,19 @@ class Vail {
if ((event.code == "KeyZ") || (event.code == "Period")) {
event.preventDefault()
this.iambic.Key(begin, DIT)
this.iambicDit(begin)
}
if ((event.code == "KeyX") || (event.code == "Slash")) {
event.preventDefault()
this.iambic.Key(begin, DAH)
this.iambicDah(begin)
}
if ((event.code == "KeyC") || (event.code == "Comma") || (event.key == "Shift")) {
if ((event.code == "KeyC") ||
(event.code == "Comma") ||
(event.key == "Shift") ||
(event.key == "Enter") ||
(event.key == "NumpadEnter")) {
event.preventDefault()
if (begin) {
this.beginTx()
} else {
this.endTx()
}
this.straightKey(begin)
}
}
@ -516,11 +509,11 @@ class Vail {
event.preventDefault()
if (event.target.id == "dah") {
this.iambic.Key(begin, DAH)
this.iambicDah(begin)
} else if ((event.target.id == "dit") && (event.button == 2)) {
this.iambic.Key(begin, DAH)
this.iambicDah(begin)
} else if (event.target.id == "dit") {
this.iambic.Key(begin, DIT)
this.iambigDit(begin)
} else if (event.target.id == "key") {
this.straightKey(begin)
} else if ((event.target.id == "ck") && begin) {
@ -528,6 +521,42 @@ class Vail {
}
}
gamepadConnected(event) {
// 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) {
this.gamepadButtons = {}
this.gamepadPoll(event.timeStamp)
}
}
gamepadPoll(timestamp) {
let currentButtons = {}
for (let gp of navigator.getGamepads()) {
if (gp == null) {
continue
}
currentButtons.key |= gp.buttons[0].pressed || gp.buttons[1].pressed
currentButtons.dit |= gp.buttons[2].pressed || gp.buttons[4].pressed
currentButtons.dah |= gp.buttons[3].pressed || gp.buttons[5].pressed
}
if (currentButtons.key != this.gamepadButtons.key) {
this.straightKey(currentButtons.key)
}
if (currentButtons.dit != this.gamepadButtons.dit) {
this.iambicDit(currentButtons.dit)
}
if (currentButtons.dah != this.gamepadButtons.dah) {
this.iambicDah(currentButtons.dah)
}
this.gamepadButtons = currentButtons
requestAnimationFrame(e => this.gamepadPoll(e))
}
/**
* Send "CK" to server, and don't squelch the repeat
*/
@ -545,6 +574,21 @@ class Vail {
this.wsSend(Date.now(), 0) // Get round-trip time
this.socket.send(JSON.stringify(msg))
}
maximize(e) {
let element = e.target
while (! element.classList.contains("mdl-card")) {
element = element.parentElement
if (! element) {
console.log("Maximize button: couldn't find parent card")
return
}
}
element.classList.toggle("maximized")
console.log(element)
}
}
function vailInit() {