111 lines
3.8 KiB
JavaScript
111 lines
3.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import HeaderBar from '../../HeaderBar/components/HeaderBar';
|
|
import Monitor from '../../Monitor/components/Monitor';
|
|
import WidgetArea from '../../WidgetArea/containers/WidgetArea';
|
|
import MonitorTools from '../../global/MonitorTools';
|
|
import '../../../styles/WebUI/containers/WebUI.scss';
|
|
|
|
// Redux actions
|
|
import setWebSocket from '../Redux/actions/setWebSocket';
|
|
import WebSocketUtils from '../../global/WebSocketUtils';
|
|
import updateGameState from '../../global/Redux/actions/updateGameState';
|
|
import appendMessage from '../../Monitor/Redux/actions/appendMessage';
|
|
|
|
const mapReduxStateToProps = (reduxState) => ({
|
|
connections: reduxState.gameState.connections,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
doSetWebSocket: (webSocket) => dispatch(setWebSocket(webSocket)),
|
|
handleIncomingMessage: (message) => dispatch(WebSocketUtils.handleIncomingMessage(message)),
|
|
doUpdateGameState: (gameState) => dispatch(updateGameState(gameState)),
|
|
appendMonitorMessage: (message) => dispatch(appendMessage(message)),
|
|
});
|
|
|
|
class WebUI extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.webSocket = null;
|
|
this.maxConnectionAttempts = 20;
|
|
this.webUiRef = React.createRef();
|
|
this.state = {
|
|
connectionAttempts: 0,
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.webSocketConnect();
|
|
}
|
|
|
|
webSocketConnect = () => {
|
|
this.props.appendMonitorMessage(MonitorTools.createTextDiv(
|
|
`Attempting to connect to MultiClient (attempt ${this.state.connectionAttempts + 1})...`,
|
|
));
|
|
// eslint-disable-next-line react/no-access-state-in-setstate
|
|
this.setState({ connectionAttempts: this.state.connectionAttempts + 1 }, () => {
|
|
if (this.state.connectionAttempts >= 20) {
|
|
this.props.appendMonitorMessage(MonitorTools.createTextDiv(
|
|
'Unable to connect to MultiClient. Maximum of 20 attempts exceeded.',
|
|
));
|
|
return;
|
|
}
|
|
|
|
const getParams = new URLSearchParams(document.location.search.substring(1));
|
|
const port = getParams.get('port');
|
|
if (!port) { throw new Error('Unable to determine socket port from GET parameters'); }
|
|
|
|
const webSocketAddress = `ws://localhost:${port}`;
|
|
try {
|
|
this.props.webSocket.close();
|
|
this.props.doSetWebSocket(null);
|
|
} catch (error) {
|
|
// Ignore errors caused by attempting to close an invalid WebSocket object
|
|
}
|
|
|
|
const webSocket = new WebSocket(webSocketAddress);
|
|
webSocket.onerror = () => {
|
|
this.props.doUpdateGameState({
|
|
connections: {
|
|
snesDevice: this.props.connections.snesDevice,
|
|
snesConnected: false,
|
|
serverAddress: this.props.connections.serverAddress,
|
|
serverConnected: false,
|
|
},
|
|
});
|
|
if (this.state.connectionAttempts < this.maxConnectionAttempts) {
|
|
setTimeout(this.webSocketConnect, 5000);
|
|
}
|
|
};
|
|
|
|
// Dispatch a custom event when websocket messages are received
|
|
webSocket.onmessage = (message) => {
|
|
this.props.handleIncomingMessage(message);
|
|
};
|
|
|
|
// Store the webSocket object in the Redux store so other components can access it
|
|
webSocket.onopen = () => {
|
|
this.props.doSetWebSocket(webSocket);
|
|
webSocket.send(WebSocketUtils.formatSocketData('webStatus', 'connections'));
|
|
this.props.appendMonitorMessage(MonitorTools.createTextDiv('Connected to MultiClient.'));
|
|
this.setState({ connectionAttempts: 0 });
|
|
};
|
|
this.setState({ connectionInProgress: false });
|
|
});
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div id="web-ui" ref={ this.webUiRef }>
|
|
<HeaderBar />
|
|
<div id="content-middle">
|
|
<Monitor />
|
|
<WidgetArea />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(mapReduxStateToProps, mapDispatchToProps)(WebUI);
|