Merge branch 'dev'

Author: exoRift

documentation/introduction.md

@@ -1,7 +1,8 @@
 # Minds and Machines
 ## Connect 4 AI Program
 
-[**Download**](https://github.com/exoRift/mindsmachines-connect4/releases/tag/v1.0.0)
+[**Download**](https://github.com/exoRift/mindsmachines-connect4/releases/tag/v1.1.0)
+[**Observer**](https://exoRift.github.io/mindsmachines-connect4)
 
 Welcome to the Minds and Machines Connect 4 moderator program.
 
@@ -13,7 +14,7 @@ Websocket is a web protocol (similar to HTTP) that allows a client to open a two
 Websocket URLs generally follow this structure: `ws://123.456.789.10:1234` where the first set of numbers is the IP address and the second number is the port.
 
 ## Running the server
-The server can be started by running the executable which can be downloaded [here](https://github.com/exoRift/mindsmachines-connect4/releases/tag/v1.0.0). By default, it will use port 5000. If port 5000 is taken, use the command line to run the file and you can supply a port number afterward to switch the port.
+The server can be started by running the executable which can be downloaded [here](https://github.com/exoRift/mindsmachines-connect4/releases/tag/v1.1.0). By default, it will use port 5000. If port 5000 is taken, use the command line to run the file and you can supply a port number afterward to switch the port.
 
 > [!TIP]
 > If Windows gives you gripe, click "More Info" and then click "Run Anyway"

src/client/Main.jsx

@@ -9,6 +9,7 @@ class Main extends React.Component {
 
   state = {
     server: null,
+    ip: null,
     currentGame: null,
     socket: null,
     games: [],
@@ -75,9 +76,20 @@ class Main extends React.Component {
                 disabled={this.state.inputLocked}
               />
 
-              <button className='connect' disabled={this.state.inputLocked}>Connect!</button>
+              <button type='submit' className='connect' disabled={this.state.inputLocked}>Connect!</button>
+
+              <button type='submit' className='quickconnect' onClick={() => this.setInput('server')('localhost:5000')}>Quick Connect</button>
             </form>
             )}
+
+        {this.state.server
+          ? (
+              <p className='ip'>
+                <span>Server IP: </span>
+                <span>{this.state.ip ?? 'Loading...'}</span>
+              </p>
+            )
+          : null}
       </div>
     )
   }
@@ -87,7 +99,7 @@ class Main extends React.Component {
       this.setState({
         inputs: {
           ...this.state.inputs,
-          [field]: e.target.value
+          [field]: typeof e === 'string' ? e : e.target.value
         }
       })
     }
@@ -115,6 +127,16 @@ class Main extends React.Component {
 
           this.refreshGames(this.state.inputs.server)
           this.refreshInterval = setInterval(() => this.refreshGames(this.state.inputs.server), Main.refreshRate)
+
+          fetch(`http://${this.state.inputs.server}/ip`, {
+            method: 'GET'
+          })
+            .then((res) => {
+              if (!res.ok) throw Error()
+              else return res.text()
+            })
+            .then((ip) => this.setState({ ip }))
+            .catch(() => this.setState({ ip: 'UNKNOWN' }))
         } else throw Error()
       })
       .catch(() => alert('Could not connect to server!'))

src/client/styles/Main.css

@@ -71,6 +71,12 @@ button.connect {
   font-size: 3em;
 }
 
+button.quickconnect {
+  background: lightgray;
+  margin-top: auto;
+  font-size: 2.6em;
+}
+
 .games {
   position: relative;
   display: flex;
@@ -136,6 +142,12 @@ button.create::before {
   line-height: 0.6;
 }
 
+.ip {
+  position: fixed;
+  right: 1em;
+  bottom: 0;
+}
+
 @keyframes backgroundanim {
   from {
     background-position: 5em 5em;

src/server/index.js

@@ -31,8 +31,10 @@ const server = app.listen(PORT, () => {
   const {
     port
   } = server.address()
-
   const interfaces = Object.values(os.networkInterfaces()).flat()
+  const ip = `${interfaces.find((i) => !i.internal && i.family === 'IPv4').address}:${port}`
+
+  console.info('Server online listening at %s', ip)
 
-  console.info('Server online listening at http://%s:%s', interfaces.find((i) => !i.internal && i.family === 'IPv4').address, port)
+  app.get('/ip', (req, res) => res.send(200, ip))
 })