Add support for game rooms

package.json

@@ -6,9 +6,12 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "express": "^4.17.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "socket.io": "^3.0.5",
+    "socket.io-client": "^3.0.5",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

server.js

@@ -22,6 +22,7 @@ let interval;
 let board = new Board();
 
 let sockets = [];
+let games = new Map();
 
 io.on("connection", (socket) => {
   sockets.push(socket);
@@ -29,7 +30,6 @@ io.on("connection", (socket) => {
   if (interval) {
     clearInterval(interval);
   }
-  getApiAndEmit(socket);
   //interval = setInterval(() => getApiAndEmit(socket), 5000);
   socket.on("disconnect", () => {
     // TODO sockets.remove(socket)
@@ -37,17 +37,37 @@ io.on("connection", (socket) => {
     clearInterval(interval);
   });
 
-  socket.on("move", (move) => {
+  socket.on("find", (key) => {
-    console.log("Received move");
+    console.log(`Finding game '${key}'`);
-    if(move && board.makeMove(move.from, move.to) == 0) {
+    let game = games.get(key);
-      for (s of sockets) {
+    if(game) {
-        getApiAndEmit(s);
+      console.log(`Found game '${key}'`);
+      game.sockets.push(socket);
+    } else {
+      game = {
+        sockets: [socket],
+        board: new Board(),
+        moveDate: null,
+      };
+      console.log(`Created game '${key}'`);
+    }
+    games.set(key, game);
+    getApiAndEmit(socket, game.board);
+  });
+
+  socket.on("move", (key, move) => {
+    console.log(`Received move at '${key}'`);
+    let game = games.get(key);
+    if(move && game.board.makeMove(move.from, move.to) == 0) {
+      games.set(key, game);
+      for (s of game.sockets) {
+        getApiAndEmit(s, game.board);
       }
     }
   });
 });
 
-const getApiAndEmit = socket => {
+const getApiAndEmit = (socket, board) => {
   const response = board.textFromState();
   console.log(response);
   // Emitting a new message. Will be consumed by the client

src/index.js

@@ -7,7 +7,38 @@ import Board from './board';
 import './index.css';
 
 
-const ENDPOINT = "http://192.168.1.7:4001";
+const ENDPOINT = "http://localhost:4001";
+
+class NameForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {value: ''};
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.onSubmit = props.onSubmit;
+  }
+
+  handleChange(event) {
+    this.setState({value: event.target.value});
+  }
+
+  handleSubmit(event) {
+    this.onSubmit(this.state.value);
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Name:
+          <input type="text" value={this.state.value} onChange={this.handleChange} />
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    );
+  }
+}
 
 class Game extends React.Component {
   constructor(props) {
@@ -15,6 +46,7 @@ class Game extends React.Component {
     this.state = {
       board: null,
       socket: io(ENDPOINT),
+      gameKey: null,
     };
 
     this.state.socket.on("FromAPI", data => {
@@ -28,18 +60,24 @@ class Game extends React.Component {
            text={data}
            onMove={(move) => {
              console.log("ON MOVE");
-             this.state.socket.emit("move", move);
+             this.state.socket.emit("move", this.state.gameKey, move);
           }}/>
         ),
       });
     });
   }
 
+  setGameKey(key) {
+    console.log(`Setting gameKey to '${key}'`);
+    this.setState({gameKey: key});
+    this.state.socket.emit("find", key);
+  }
+
   render() {
     return (
       <div className="game">
         <div className="game-board">
-          {this.state.board}
+          {this.state.gameKey ? this.state.board : <NameForm onSubmit={this.setGameKey.bind(this)} />}
         </div>
       </div>
     );