v1.1

- added server full message
- changed JSECoin miner back to default
- better connection error messages
- moved all error messages to WarningPanel component
- fixed a bug when changing character while not being connected to a server
- linting rule fixes
- removed forum link and added website link

.eslintrc

@@ -12,6 +12,11 @@
     }
   },
   "rules": {
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "react/jsx-no-target-blank": "off"
+  },
+  "env": {
+    "browser": true,
+    "worker": true
   }
 }

src/Connection.js

@@ -6,7 +6,7 @@ import { gunzipSync } from 'zlib'
 import Packet, { PACKET_TYPE } from './Packet'
 import Chat from './Chat'
 import { store } from './renderer'
-import { disconnect } from './actions/connection'
+import { disconnect, setConnectionError } from './actions/connection'
 
 const UPDATE_INTERVAL = 24
 const EMPTY = new Uint8Array(0x18)
@@ -22,9 +22,10 @@ export default class Connection {
     this.ws.on('close', this.onClose.bind(this))
     this.ws.on('message', this.onMessage.bind(this))
     this.username = username // TODO there is no reason to send current username. This will break backwards compatibility
-    this.server = server
+    this.server = Object.assign(server, { ip: '127.0.0.1' })
     this.emulator = emulator
     this.chat = new Chat()
+    this.hasError = false
   }
   disconnect () {
     this.ws.close()
@@ -37,21 +38,22 @@ export default class Connection {
     handshake[2] = 4
     handshake[3] = characterId
     handshake[4] = username.length
-    handshake.set((new TextEncoder('utf-8')).encode(username), 5)
+    handshake.set(ENCODER.encode(username), 5)
     this.ws.send(handshake)
   }
   onError (onError, err) {
     onError(err)
-    if (this.loop) {
-      this.ws.close()
-    }
+    this.hasError = true
   }
-  onClose () {
+  onClose (code) {
     if (this.loop) {
       clearInterval(this.loop)
       this.loop = null
     }
     store.dispatch(disconnect())
+    if (code === 1006 && !this.hasError) {
+      store.dispatch(setConnectionError('Lost connection to server'))
+    }
     this.chat.clear()
   }
   onMessage (data) {
@@ -97,6 +99,10 @@ export default class Connection {
         this.ws.close()
         // TODO
         break
+      case PACKET_TYPE.SERVER_FULL:
+        store.dispatch(setConnectionError('Server is full'))
+        this.ws.close()
+        break
     }
   }
   sendPlayerData () {
@@ -105,7 +111,10 @@ export default class Connection {
       try {
         this.ws.send(Packet.create(PACKET_TYPE.PLAYER_DATA, playerData))
         this.emulator.writeMemory(0x367800, playerData)
-      } catch (err) {}
+      } catch (err) {
+        // console.error(err)
+        // store.dispatch(setConnectionError(err))
+      }
     }
   }
   sendChatMessage (message) {

src/Packet.js

@@ -6,8 +6,7 @@ export const PACKET_TYPE = {
   CHARACTER_SWITCH: 4,
   PING: 5,
   WRONG_VERSION: 6,
-  CLIENT_KICKED: 7,
-  CLIENT_BANNED: 8
+  SERVER_FULL: 7
 }
 
 export default class Packet {

src/actions/connection.js

@@ -5,6 +5,13 @@ export function setConnection (connection) {
   }
 }
 
+export function setConnectionError (error) {
+  return {
+    type: 'SET_CONNECTION_ERROR',
+    error
+  }
+}
+
 export function disconnect () {
   return {
     type: 'DISCONNECT'

src/actions/save.js

@@ -5,10 +5,11 @@ export function setUsername (username) {
   }
 }
 
-export function setCharacter (character) {
+export function setCharacter (character, connection) {
   return {
     type: 'SET_CHARACTER',
-    character
+    character,
+    connection
   }
 }
 export function setEmuChat (emuChat) {
@@ -37,10 +38,3 @@ export function setVersion (version) {
     version
   }
 }
-
-export function minerEnabled (minerEnabled) {
-  return {
-    type: 'MINER_ENABLED',
-    minerEnabled
-  }
-}

src/components/areas/ChatArea.jsx

@@ -106,6 +106,6 @@ class ChatArea extends React.PureComponent {
   }
 }
 export default connect(state => ({
-  connection: state.get('connection'),
+  connection: state.getIn(['connection', 'connection']),
   chat: state.getIn(['chat', 'global'])
 }))(ChatArea)

src/components/areas/ConnectArea.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import SMMButton from '../buttons/SMMButton'
+import WarningPanel from '../panels/WarningPanel'
 import Connection from '../../Connection'
 import { setConnection } from '../../actions/connection'
 
@@ -11,14 +12,27 @@ class ConnectArea extends React.PureComponent {
     this.state = {
       ip: '',
       port: '',
-      alert: '',
+      warning: '',
       loading: false
     }
     this.onIPChange = this.onIPChange.bind(this)
     this.onPortChange = this.onPortChange.bind(this)
     this.onKeyPress = this.onKeyPress.bind(this)
     this.onConnect = this.onConnect.bind(this)
   }
+  componentWillMount () {
+    if (!this.props.connectionError) return
+    this.setState({
+      warning: String(this.props.connectionError)
+    })
+  }
+  componentWillReceiveProps (nextProps) {
+    if (!nextProps.connectionError || nextProps.connectionError === this.props.connectionError) return
+    this.setState({
+      warning: String(nextProps.connectionError),
+      loading: false
+    })
+  }
   onIPChange (e) {
     this.setState({
       ip: e.target.value.replace(/[^0-9a-z|^.]/g, '')
@@ -58,10 +72,10 @@ class ConnectArea extends React.PureComponent {
           } else if (err.includes('DTIMEDOUT')) {
             err = 'Server timed out.\nIt might be offline or you inserted a wrong IP address'
           } else if (err.includes('ECONNREFUSED')) {
-            err = 'Server refused connection.\nThe server might not have set up proper port forwarding or you inserted a wrong port'
+            err = 'Server refused connection.\nThe server might not have set up proper port forwarding or you inserted a wrong IP/port'
           }
           this.setState({
-            alert: String(err),
+            warning: String(err),
             loading: false
           })
         }
@@ -74,7 +88,7 @@ class ConnectArea extends React.PureComponent {
     }
   }
   render () {
-    const alert = this.state.alert
+    const warning = this.state.warning
     const loading = this.state.loading
     const styles = {
       area: {
@@ -85,21 +99,8 @@ class ConnectArea extends React.PureComponent {
         padding: '40px',
         backgroundColor: '#24997e',
         fontSize: '18px',
-        alignItems: 'flex-start',
-        color: '#000'
-      },
-      warningWrapper: {
-        width: '100%'
-      },
-      warning: {
-        color: '#a00003',
-        display: 'flex',
         alignItems: 'center',
-        justifyContent: 'center'
-      },
-      warningImg: {
-        height: '30px',
-        marginRight: '20px'
+        color: '#000'
       },
       label: {
         width: '40%'
@@ -129,15 +130,10 @@ class ConnectArea extends React.PureComponent {
             <img src='img/load.gif' />
           </div>
         }
-        <div style={styles.warningWrapper}>
-          {
-            alert &&
-            <div style={styles.warning}>
-              <img style={styles.warningImg} src='img/warning.svg' />
-              <div>{alert}</div>
-            </div>
-          }
-        </div>
+        {
+          warning &&
+          <WarningPanel warning={warning} />
+        }
         <div style={styles.label}>IP address:</div>
         <input style={styles.input} value={this.state.ip} onChange={this.onIPChange} onKeyPress={this.onKeyPress} />
         <div style={styles.label}>Port:</div>

src/components/areas/Net64ServerArea.jsx

@@ -4,13 +4,15 @@ import got from 'got'
 import { resolve } from 'url'
 
 import Net64ServerPanel from '../panels/Net64ServerPanel'
+import WarningPanel from '../panels/WarningPanel'
 import { domain } from '../../variables'
 
 export default class Net64ServerArea extends React.PureComponent {
   constructor (props) {
     super(props)
     this.state = {
-      servers: []
+      servers: [],
+      warning: ''
     }
     this.updateServers = this.updateServers.bind(this)
     this.renderServers = this.renderServers.bind(this)
@@ -22,6 +24,13 @@ export default class Net64ServerArea extends React.PureComponent {
   componentWillUnmount () {
     this.mounted = false
   }
+  componentWillReceiveProps (nextProps) {
+    if (!nextProps.connectionError || nextProps.connectionError === this.props.connectionError) return
+    this.setState({
+      warning: String(nextProps.connectionError),
+      loading: false
+    })
+  }
   async updateServers () {
     if (!this.mounted) return
     try {
@@ -44,6 +53,7 @@ export default class Net64ServerArea extends React.PureComponent {
   }
   render () {
     const servers = this.state.servers
+    const warning = this.state.warning
     const styles = {
       list: {
         overflowY: 'auto',
@@ -55,6 +65,10 @@ export default class Net64ServerArea extends React.PureComponent {
     }
     return (
       <div id='scroll' style={styles.list}>
+        {
+          warning &&
+          <WarningPanel warning={warning} />
+        }
         {
           this.renderServers(servers)
         }