522 lines
19 KiB
JavaScript
522 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="Just Dance 2020 and later">
|
|
<option value="${PairingMethod.DEFAULT}">Default (all, except Stadia)</option>
|
|
<option value="${PairingMethod.FAST}">Fast (Xbox, PlayStation, Nintendo Switch)</option>
|
|
<option value="${PairingMethod.STADIA}">Stadia</option>
|
|
</optgroup>
|
|
<optgroup label="Just Dance 2016 to Just Dance 2019">
|
|
<option value="${PairingMethod.OLD}">Old (all platforms, including PCs)</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 (${addr})" />
|
|
`}
|
|
|
|
${(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="number" 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)
|