joydance-improved/static/js/app.js

521 lines
19 KiB
JavaScript

import { h, Component, render } from '/js/preact.module.js';
import htm from '/js/htm.module.js';
// Initialize htm with Preact
const html = htm.bind(h);
window.mitty = mitt()
const SVG_BATTERY_LEVEL = html`<svg style="enable-background:new 0 0 16 16" viewBox="0 0 16 16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M15 4H0v8h15V9h1V7h-1V4zm-1 3v4H1V5h13v2z"/><rect class="battery-bar-4" height="4" width="2" x="11" y="6"/><rect class="battery-bar-3" height="4" width="2" x="8" y="6"/><rect class="battery-bar-2" height="4" width="2" x="5" y="6"/><rect class="battery-bar-1" height="4" width="2" x="2" y="6"/></svg>`
const BATTERY_LEVEL = {
4: 'full',
3: 'medium',
2: 'low',
1: 'critical',
0: 'critical',
}
const PairingMethod = {
DEFAULT: 'default',
FAST: 'fast',
STADIA: 'stadia',
OLD: 'old',
}
const WsCommand = {
GET_JOYCON_LIST: 'get_joycon_list',
CONNECT_JOYCON: 'connect_joycon',
DISCONNECT_JOYCON: 'disconnect_joycon',
UPDATE_JOYCON_STATE: 'update_joycon_state',
}
const PairingState = {
IDLE: 0,
GETTING_TOKEN: 1,
PAIRING: 2,
CONNECTING: 3,
CONNECTED: 4,
DISCONNECTING: 5,
DISCONNECTED: 10,
ERROR_JOYCON: 101,
ERROR_CONNECTION: 102,
ERROR_INVALID_PAIRING_CODE: 103,
ERROR_PUNCH_PAIRING: 104,
ERROR_HOLE_PUNCHING: 105,
ERROR_CONSOLE_CONNECTION: 106,
}
const PairingStateMessage = {
[PairingState.IDLE]: 'Idle',
[PairingState.GETTING_TOKEN]: 'Getting auth token...',
[PairingState.PAIRING]: 'Sending pairing code...',
[PairingState.CONNECTING]: 'Connecting with console...',
[PairingState.CONNECTED]: 'Connected!',
[PairingState.DISCONNECTED]: 'Disconnected',
[PairingState.ERROR_JOYCON]: 'Joy-Con problem!',
[PairingState.ERROR_CONNECTION]: 'Couldn\'t get auth token!',
[PairingState.ERROR_INVALID_PAIRING_CODE]: 'Invalid pairing code!',
[PairingState.ERROR_PUNCH_PAIRING]: 'Couldn\'t punch pairing!',
[PairingState.ERROR_HOLE_PUNCHING]: 'Couldn\'t connect with console!',
[PairingState.ERROR_CONSOLE_CONNECTION]: 'Couldn\'t connect with console!',
}
class PairingMethodPicker extends Component {
constructor(props) {
super()
this.state = {
pairing_method: props.pairing_method,
}
this.onChange = this.onChange.bind(this)
}
onChange(e) {
const pairing_method = e.target.value
this.setState({
pairing_method: pairing_method,
})
window.mitty.emit('update_method', pairing_method)
}
render(props) {
return html`
<label for="stacked-state">Pairing Method</label>
<select id="stacked-state" onChange=${this.onChange} value=${props.pairing_method}>
<optgroup label="JD 2020 and later">
<option value="${PairingMethod.DEFAULT}">Default: All platforms except Stadia</option>
<option value="${PairingMethod.FAST}">Fast: Xbox One/PlayStation/Nintendo Switch</option>
<option value="${PairingMethod.STADIA}">Stadia: for Stadia, obviously</option>
</optgroup>
<optgroup label="JD 2016-2019">
<option value="${PairingMethod.OLD}">Old: All platforms (incl. PC)</option>
</optgroup>
</select>
`
}
}
class PrivateIpAddress extends Component {
constructor(props) {
super(props)
let lock_host = false
let host_ip_addr = props.host_ip_addr
let console_ip_addr = props.console_ip_addr
let hostname = window.location.hostname
if (hostname.startsWith('192.168.') || hostname.startsWith('10.')) {
host_ip_addr = hostname
lock_host = true
}
this.state = {
host_ip_addr: host_ip_addr,
console_ip_addr: console_ip_addr,
lock_host: lock_host,
}
this.onKeyPress = this.onKeyPress.bind(this)
this.onChange = this.onChange.bind(this)
}
onChange(e) {
const key = this.props.pairing_method == PairingMethod.DEFAULT ? 'host_ip_addr' : 'console_ip_addr'
const value = e.target.value
this.setState({
[key]: value,
})
window.mitty.emit('update_addr', value)
}
onKeyPress(e) {
if (!/[0-9\.]/.test(e.key)) {
e.preventDefault()
return
}
}
componentDidMount() {
let addr = this.props.pairing_method == PairingMethod.DEFAULT ? this.state.host_ip_addr : this.state.console_ip_addr
window.mitty.emit('update_addr', addr)
}
render(props, state) {
const pairing_method = props.pairing_method
const addr = pairing_method == PairingMethod.DEFAULT ? state.host_ip_addr : state.console_ip_addr
return html`
<label>
${[PairingMethod.DEFAULT, PairingMethod.STADIA].indexOf(pairing_method) > -1 && html`Host's Private IP Address`}
${[PairingMethod.DEFAULT, PairingMethod.STADIA].indexOf(pairing_method) == -1 && html`Console's Private IP Address`}
</label>
${(pairing_method == PairingMethod.STADIA) && html`
<input readonly id="ipAddr" type="text" size="15" placeholder="Not Required" />
`}
${(pairing_method == PairingMethod.DEFAULT && state.lock_host) && html`
<input readonly id="ipAddr" type="text" size="15" placeholder="${addr}" />
`}
${([PairingMethod.FAST, PairingMethod.OLD].indexOf(pairing_method) > -1 || (pairing_method == PairingMethod.DEFAULT && !state.lock_host)) && html`
<input required id="ipAddr" type="text" inputmode="decimal" size="15" maxlength="15" placeholder="192.168.?/10.?" pattern="^(192\\.168|10.(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5]))\\.((\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])\\.)(\\d{1,2}|1\\d\\d|2[0-4]\\d|25[0-5])$" value=${addr} onKeyPress=${this.onKeyPress} onChange="${this.onChange}" />
`}
`
}
}
class PairingCode extends Component {
constructor(props) {
super(props)
this.state = {
pairing_code: props.pairing_code,
}
this.onChange = this.onChange.bind(this)
}
onChange(e) {
const value = e.target.value
this.setState({
pairing_code: value,
})
window.mitty.emit('update_code', value)
}
render(props, state) {
const pairing_method = props.pairing_method
return html`
<label>Pairing Code</label>
${[PairingMethod.DEFAULT, PairingMethod.STADIA].indexOf(pairing_method) > -1 && html`
<input required id="pairingCode" type="text" inputmode="decimal" value=${state.pairing_code} placeholder="000000" maxlength="6" size="6" pattern="[0-9]{6}" onKeyPress=${(e) => !/[0-9]/.test(e.key) && e.preventDefault()} onChange=${this.onChange} />
`}
${[PairingMethod.DEFAULT, PairingMethod.STADIA].indexOf(pairing_method) == -1 && html`
<input type="text" id="pairingCode" value="" readonly placeholder="Not Required" size="12" />
`}
`
}
}
class JoyCon extends Component {
constructor(props) {
super(props)
this.connect = this.connect.bind(this)
this.disconnect = this.disconnect.bind(this)
this.onStateUpdated = this.onStateUpdated.bind(this)
this.state = {
...props.joycon,
}
window.mitty.on('resp_' + WsCommand.DISCONNECT_JOYCON, this.onDisconnected)
window.mitty.on('resp_' + WsCommand.UPDATE_JOYCON_STATE, this.onStateUpdated)
}
connect() {
window.mitty.emit('req_' + WsCommand.CONNECT_JOYCON, this.props.joycon.serial)
}
disconnect() {
window.mitty.emit('req_' + WsCommand.DISCONNECT_JOYCON, this.props.joycon.serial)
}
onStateUpdated(data) {
if (data['serial'] != this.props.joycon.serial) {
return
}
const state = data['state']
if (PairingStateMessage.hasOwnProperty(state)) {
this.setState({
...data,
})
}
}
render(props, { name, state, pairing_code, is_left, color, battery_level }) {
const joyconState = state
const stateMessage = PairingStateMessage[joyconState]
let showButton = true
if ([PairingState.GETTING_TOKEN, PairingState.PAIRING, PairingState.CONNECTING].indexOf(joyconState) > -1) {
showButton = false
}
let joyconSvg
if (is_left) {
joyconSvg = html`<svg class="joycon-color" viewBox="0 0 171 453" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd"><path d="M219.594 33.518v412.688c0 1.023-.506 1.797-1.797 1.797h-49.64c-51.68 0-85.075-45.698-85.075-85.075V114.987c0-57.885 56.764-84.719 84.719-84.719h48.79c2.486 0 3.003 1.368 3.003 3.25zm-32.123 105.087c0 17.589-14.474 32.062-32.063 32.062-17.589 0-32.062-14.473-32.062-32.062s14.473-32.063 32.062-32.063 32.063 14.474 32.063 32.063z" style="fill:${color};stroke:#000;stroke-width:8.33px" transform="translate(-65.902 -13.089)"/></svg>`
} else {
joyconSvg = html`<svg class="joycon-color" viewBox="0 0 171 453" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd"><path d="M324.763 40.363v412.688c0 1.023.506 1.797 1.797 1.797h49.64c51.68 0 85.075-45.698 85.075-85.075V121.832c0-6.774-.777-13.123-2.195-19.054-10.696-44.744-57.841-65.665-82.524-65.665h-48.79c-2.486 0-3.003 1.368-3.003 3.25zm96 218.094c0 17.589-14.473 32.063-32.062 32.063s-32.063-14.474-32.063-32.063c0-17.589 14.474-32.062 32.063-32.062 17.589 0 32.062 14.473 32.062 32.062z" style="fill:${color};fill-rule:nonzero;stroke:#000;stroke-width:8.33px" transform="translate(-307.583 -19.934)"/></svg>`
}
const batteryLevel = BATTERY_LEVEL[battery_level]
return html`
<li>
<div class="pure-g">
<div class="pure-u-2-24 flex">${joyconSvg}</div>
<div class="pure-u-12-24 joycon-info">
<div class="flex">
<span class="joycon-name">${name}</span>
<span class="battery-level ${batteryLevel}">${SVG_BATTERY_LEVEL}</span>
</div>
<span class="joycon-state">${stateMessage}</span>
</div>
<div class="pure-u-4-24 flex">
${pairing_code && html`
<span class="pairing-code">${pairing_code}</span>
`}
</div>
<div class="pure-u-6-24">
${showButton && joyconState == PairingState.CONNECTED && html`
<button type="button" onClick=${this.disconnect} class="pure-button pure-button-error">Disconnect</button>
`}
${showButton && joyconState != PairingState.CONNECTED && html`
<button type="button" onClick=${this.connect} class="pure-button pure-button-primary">Connect</button>
`}
</div>
</div>
</li>
`
}
}
class JoyCons extends Component {
constructor() {
super()
this.state = {
isRefreshing: false,
}
this.refreshJoyconList = this.refreshJoyconList.bind(this)
}
refreshJoyconList() {
this.setState({
isRefreshing: false,
})
window.mitty.emit('req_' + WsCommand.GET_JOYCON_LIST)
}
componentDidMount() {
}
render(props, state) {
return html`
<div class="pure-g">
<h2 class="pure-u-18-24">Joy-Cons</h2>
${state.isRefreshing && html`
<button type="button" disabled class="pure-button btn-refresh pure-u-6-24">Refresh</a>
`}
${!state.isRefreshing && html`
<button type="button" class="pure-button btn-refresh pure-u-6-24" onClick=${this.refreshJoyconList}>Refresh</button>
`}
</div>
<div class="joycons-wrapper">
${props.joycons.length == 0 && html`
<p class="empty">No Joy-Cons found!</p>
`}
${props.joycons.length > 0 && html`
<ul class="joycons-list">
${props.joycons.map(item => (
html`<${JoyCon} joycon=${item} key=${item.serial} />`
))}
</ul>
`}
</div>
`
}
}
class App extends Component {
constructor(props) {
super()
this.state = {
pairing_method: window.CONFIG.pairing_method,
host_ip_addr: window.CONFIG.host_ip_addr,
console_ip_addr: window.CONFIG.console_ip_addr,
pairing_code: window.CONFIG.pairing_code,
joycons: [],
}
this.connectWs = this.connectWs.bind(this)
this.sendRequest = this.sendRequest.bind(this)
this.requestGetJoyconList = this.requestGetJoyconList.bind(this)
this.requestConnectJoycon = this.requestConnectJoycon.bind(this)
this.requestDisconnectJoycon = this.requestDisconnectJoycon.bind(this)
this.handleMethodChange = this.handleMethodChange.bind(this)
this.handleAddrChange = this.handleAddrChange.bind(this)
this.handleCodeChange = this.handleCodeChange.bind(this)
window.mitty.on('req_' + WsCommand.GET_JOYCON_LIST, this.requestGetJoyconList)
window.mitty.on('req_' + WsCommand.CONNECT_JOYCON, this.requestConnectJoycon)
window.mitty.on('req_' + WsCommand.DISCONNECT_JOYCON, this.requestDisconnectJoycon)
window.mitty.on('update_method', this.handleMethodChange)
window.mitty.on('update_addr', this.handleAddrChange)
window.mitty.on('update_code', this.handleCodeChange)
}
sendRequest(cmd, data) {
if (!data) {
data = {}
}
const msg = {
cmd: cmd,
data: data,
}
console.log('send', msg)
this.socket.send(JSON.stringify(msg))
}
requestGetJoyconList() {
this.sendRequest(WsCommand.GET_JOYCON_LIST);
}
requestConnectJoycon(serial) {
const state = this.state
const pairing_method = state.pairing_method
let addr = pairing_method == PairingMethod.DEFAULT ? state.host_ip_addr : state.console_ip_addr
if (!addr.match(/^(192\.168|10.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]))\.((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.)(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/)) {
alert('ERROR: Invalid IP address!')
document.getElementById('ipAddr').focus()
return
}
if (pairing_method == PairingMethod.DEFAULT) {
const pairing_code = state.pairing_code
if (!pairing_code.match(/^\d{6}$/)) {
alert('ERROR: Invalid pairing code!')
document.getElementById('pairingCode').focus()
return
}
}
this.sendRequest(WsCommand.CONNECT_JOYCON, {
pairing_method: state.pairing_method,
host_ip_addr: state.host_ip_addr,
console_ip_addr: state.console_ip_addr,
pairing_code: state.pairing_code,
joycon_serial: serial,
})
}
requestDisconnectJoycon(serial) {
this.sendRequest(WsCommand.DISCONNECT_JOYCON, {
joycon_serial: serial,
})
}
connectWs() {
const that = this
this.socket = new WebSocket('ws://' + window.location.host + '/ws')
this.socket.onopen = function(e) {
console.log('[open] Connection established')
that.requestGetJoyconList()
}
this.socket.onmessage = function(event) {
const msg = JSON.parse(event.data)
console.log(msg)
const cmd = msg['cmd']
const shortCmd = msg['cmd'].slice(5) // Remove "resp_" prefix
switch (shortCmd) {
case WsCommand.GET_JOYCON_LIST:
that.setState({
joycons: msg['data'],
})
break
default:
window.mitty.emit(cmd, msg['data'])
}
}
this.socket.onclose = function(event) {
if (event.wasClean) {
console.log(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
} else {
console.log('[close] Connection died');
}
}
this.socket.onerror = function(error) {
console.log(`[error] ${error.message}`);
}
}
handleMethodChange(pairing_method) {
this.setState({
pairing_method: pairing_method,
})
}
handleAddrChange(addr) {
const key = this.state.pairing_method == PairingMethod.DEFAULT ? 'host_ip_addr' : 'console_ip_addr'
this.setState({
[key]: addr,
})
}
handleCodeChange(pairing_code) {
this.setState({
pairing_code: pairing_code,
})
}
componentDidMount() {
this.connectWs()
}
render(props, state) {
return html`
<div class="container">
<div class="ascii">
<pre> ░░ ░░░░░░ ░░ ░░ ░░░░░░ ░░░░░ ░░░ ░░ ░░░░░░ ░░░░░░░
▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒▒▒ ▒▒ ▒▒ ▒▒
▒▒ ▒▒ ▒▒ ▒▒▒▒ ▒▒ ▒▒ ▒▒▒▒▒▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒▒▒▒
▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓ ▓▓
█████ ██████ ██ ██████ ██ ██ ██ ████ ██████ ███████
</pre>
</div>
<form class="pure-form pure-form-stacked">
<fieldset>
<div class="pure-g">
<h2 class="pure-u-1">Config</h2>
<div class="pure-u-1">
<${PairingMethodPicker} pairing_method=${state.pairing_method}/>
</div>
<div class="pure-u-1-2">
<${PrivateIpAddress} pairing_method=${state.pairing_method} host_ip_addr=${state.host_ip_addr} console_ip_addr=${state.console_ip_addr} />
</div>
<div class="pure-u-1-2">
<${PairingCode} pairing_method=${state.pairing_method} pairing_code=${state.pairing_code} />
</div>
</div>
</fieldset>
</form>
<div class="pure-u-1 joycons">
<${JoyCons} pairing_method=${state.pairing_method} joycons=${state.joycons} />
</div>
</div>
<div class="footer">
<a href="https://github.com/redphx/joydance" target="_blank">${window.VERSION}</a>
</div>
`
}
}
render(html`<${App} />`, document.body)