Players can now join lobby and get an opponent.

package-lock.json

@@ -20,6 +20,7 @@
         "react-dom": "^17.0.2",
         "react-scripts": "4.0.3",
         "typescript": "^4.3.5",
+        "uuid": "^8.3.2",
         "web-vitals": "^1.1.2"
       },
       "devDependencies": {
@@ -19905,7 +19906,6 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "optional": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -37026,8 +37026,7 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "optional": true
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.3.5",
+    "uuid": "^8.3.2",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import './App.css';
-import {Simulate} from "react-dom/test-utils";
+import {v4 as uuidv4} from 'uuid';
+import ChessSwap from "./ChessSwap";
+import Color from "./Color";
 
 interface IAppProps {
 
 }
 interface IAppState {
-    text: string,
-    chat: string,
-    lobby: string
+    lobby: string,
+    joinLobbyText: string,
+    playerColor: Color | undefined,
+    turnsToSwap: number
 }
 
 class App extends React.Component<IAppProps, IAppState> {
@@ -19,16 +22,32 @@ class App extends React.Component<IAppProps, IAppState> {
         super(props);
 
         this.state = {
-            text: "",
-            chat: "",
-            lobby: ""
+            lobby: "",
+            joinLobbyText: "",
+            playerColor: undefined,
+            turnsToSwap: 6
         }
-
-        this.joinLobby("default");
     }
 
+    createLobby(){
+        let newLobby: string = uuidv4();
+        this.setState({lobby: newLobby})
+        this.connectToLobby(newLobby);
+    }
+
+    updateTurnsToSwap(turnsToSwap: number){
+        this.setState({
+            turnsToSwap: turnsToSwap
+        })
+    }
 
     joinLobby(lobbyName: string){
+        // TODO: Do announcement here
+        this.setState({lobby: lobbyName})
+        this.connectToLobby(lobbyName);
+    }
+
+    connectToLobby(lobbyName){
 
         if (this.ws?.OPEN){
             this.ws.close();
@@ -40,33 +59,51 @@ class App extends React.Component<IAppProps, IAppState> {
 
         this.ws.onopen = () => {
             console.log('connected to lobby: ' + lobbyName);
+            this.ws?.send("isThereOpponent")
         }
 
         this.ws.onmessage = evt => {
             //const message = JSON.parse(evt.data);
             const message = evt.data;
-            this.setState({chat: this.state.chat + "\n" + message})
             console.log(message);
+
+            switch (message) {
+                case "isThereOpponent":
+                    this.ws?.send("OpponentReady");
+                    console.log("I am white");
+                    this.setState({playerColor: Color.white})
+                    break;
+                case "OpponentReady":
+                    console.log("I am black");
+                    this.setState({playerColor: Color.black})
+            }
+
         }
     }
 
     render(){
-        return  <div>
-            <h3>Chat</h3>
-            <pre id="chat">{this.state.chat}</pre>
-            <input placeholder="say something" id="text" type="text" value={this.state.text} onChange={(e) => this.setState({
-                text: e.target.value
-            })}/>
-            <p>Current Lobby:</p>
-            <input placeholder="say something" id="text" type="text" value={this.state.lobby} onChange={(e) => this.setState({
-                lobby: e.target.value
-            })}/>
-            <button onClick={(e => {
-                // ws is not null after constructor.
-                // @ts-ignore
-                this.ws.send(this.state.text)})}>Send message</button>
-            <button onClick={(e => {this.joinLobby(this.state.lobby)})}>Join Lobby</button>
-        </div>
+        if (this.state.lobby === ""){
+            return  <div>
+                <h3>Welcome to Chess Swap!</h3>
+                <p>A game by <a href="https://lucaswinther.info">Lucas Winther</a></p>
+                <p>This was made using open source tools. See the <a href={"https://github.com/StereotypicalCat/chess-swap-backend"}>backend</a> or <a href={"https://github.com/StereotypicalCat/chess-swap-frontend"}>frontend</a> respotistory for more information</p>
+                <button onClick={this.createLobby.bind(this)}>Create a lobby</button>
+                <button onClick={() => {this.joinLobby.bind(this); this.joinLobby(this.state.joinLobbyText)}}>Join this lobby: </button> <input type={"text"} value={this.state.joinLobbyText} onChange={(e) => this.setState({joinLobbyText: e.target.value})} placeholder={"lobby name"}/>
+            </div>
+        }
+        else if (this.state.playerColor !== undefined){
+            return <div>
+                <p>Swap in {this.state.turnsToSwap} turns</p>
+                <ChessSwap orientation={this.state.playerColor} updateTurnsToSwapOnGui={this.updateTurnsToSwap.bind(this)} turnsToSwap={6} />
+            </div>
+        }
+        else{
+            return <div>
+                <h3>You are in lobby</h3> <h3>{this.state.lobby}</h3>
+                <p>Waiting for opponent</p>
+            </div>
+        }
+
     }
 }
 

src/ChessSwap.tsx

@@ -2,9 +2,12 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Chess, {Piece} from "chess.js"; // import Chess from  "chess.js"(default) if recieving an error about new Chess() not being a constructor
 import Chessboard from "chessboardjsx";
+import Color from "./Color";
 
 interface IChessSwapProps {
-
+    orientation: Color,
+    updateTurnsToSwapOnGui: (number) => void,
+    turnsToSwap: number
 }
 interface IChessSwapState {
     fen: string,
@@ -12,17 +15,18 @@ interface IChessSwapState {
     squareStyles: object,
     pieceSquare: string,
     square: string,
-    history: []
+    history: [],
+    currentOrientation: Color,
+    turnsToNextSwap: number
 }
 
-
 interface IOnDrop {
     sourceSquare: string,
     targetSquare: string,
     piece: Piece
 }
 
-class HumanVsHuman extends Component<IChessSwapProps, IChessSwapState> {
+export default class ChessSwap extends Component<IChessSwapProps, IChessSwapState> {
 
     // @ts-ignore
     // It obviously does, rtfm typescript!
@@ -42,7 +46,11 @@ class HumanVsHuman extends Component<IChessSwapProps, IChessSwapState> {
             // currently clicked square
             square: "",
             // array of past game moves
-            history: []
+            history: [],
+            // Which color the player is
+            currentOrientation: this.props.orientation,
+            // When to swap
+            turnsToNextSwap: this.props.turnsToSwap
         };
     }
 
@@ -82,7 +90,6 @@ class HumanVsHuman extends Component<IChessSwapProps, IChessSwapState> {
         }));
     };
 
-
     onDrop = (info: IOnDrop ) => {
         let sourceSquare = info.sourceSquare;
         let targetSquare = info.targetSquare;
@@ -100,6 +107,9 @@ class HumanVsHuman extends Component<IChessSwapProps, IChessSwapState> {
             history: this.game.history({ verbose: true }),
             squareStyles: squareStyling({ pieceSquare, history })
         }));
+
+        this.setState({turnsToNextSwap: this.state.turnsToNextSwap - 1})
+        this.props.updateTurnsToSwapOnGui(this.state.turnsToNextSwap)
     };
 
     onMouseOverSquare = (square: string) => {
@@ -160,61 +170,29 @@ class HumanVsHuman extends Component<IChessSwapProps, IChessSwapState> {
         });
 
     render() {
-        const { fen, dropSquareStyle, squareStyles } = this.state;
 
-        // @ts-ignore
-        return this.props.children({
-            squareStyles,
-            position: fen,
-            onMouseOverSquare: this.onMouseOverSquare,
-            onMouseOutSquare: this.onMouseOutSquare,
-            onDrop: this.onDrop,
-            dropSquareStyle,
-            onDragOverSquare: this.onDragOverSquare,
-            onSquareClick: this.onSquareClick,
-            onSquareRightClick: this.onSquareRightClick
-        });
+        const { fen, dropSquareStyle, squareStyles } = this.state;
+        return <Chessboard
+            id="humanVsHuman"
+            width={320}
+            position={fen}
+            /* @ts-ignore */
+            onDrop={this.onDrop}
+            orientation={this.state.currentOrientation}
+            onMouseOverSquare={this.onMouseOverSquare}
+            onMouseOutSquare={this.onMouseOutSquare}
+            boardStyle={{
+                borderRadius: "5px",
+                boxShadow: `0 5px 15px rgba(0, 0, 0, 0.5)`
+            }}
+            squareStyles={squareStyles}
+            dropSquareStyle={dropSquareStyle}
+            onDragOverSquare={this.onDragOverSquare}
+            onSquareClick={this.onSquareClick}
+            onSquareRightClick={this.onSquareRightClick}
+        />
     }
 }
-
-export default function ChessSwap() {
-    return (
-        <div>
-            <HumanVsHuman>
-                {({
-                      position,
-                      onDrop,
-                      onMouseOverSquare,
-                      onMouseOutSquare,
-                      squareStyles,
-                      dropSquareStyle,
-                      onDragOverSquare,
-                      onSquareClick,
-                      onSquareRightClick
-                  }) => (
-                    <Chessboard
-                        id="humanVsHuman"
-                        width={320}
-                        position={position}
-                        onDrop={onDrop}
-                        onMouseOverSquare={onMouseOverSquare}
-                        onMouseOutSquare={onMouseOutSquare}
-                        boardStyle={{
-                            borderRadius: "5px",
-                            boxShadow: `0 5px 15px rgba(0, 0, 0, 0.5)`
-                        }}
-                        squareStyles={squareStyles}
-                        dropSquareStyle={dropSquareStyle}
-                        onDragOverSquare={onDragOverSquare}
-                        onSquareClick={onSquareClick}
-                        onSquareRightClick={onSquareRightClick}
-                    />
-                )}
-            </HumanVsHuman>
-        </div>
-    );
-}
-
 // @ts-ignore
 const squareStyling = ({ pieceSquare, history }) => {
     const sourceSquare = history.length && history[history.length - 1].from;

src/Color.tsx

@@ -0,0 +1,5 @@
+enum Color {
+    white = "white",
+    black = "black"
+}
+export default Color;

src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import ChessSwap from "./ChessSwap";
 
 // Chat Example
 /*ReactDOM.render(
@@ -16,7 +15,7 @@ import ChessSwap from "./ChessSwap";
 
 ReactDOM.render(
   <React.StrictMode>
-    <ChessSwap />
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 );