getting the game connected

client/package.json

@@ -11,10 +11,13 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "reactstrap": "^8.4.1",
     "redux": "^4.0.5",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "socket.io-client": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,10 +1,12 @@
 import React from "react";
 import { Provider } from "react-redux";
 import store from "./store";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
 import "./App.scss";
 
 import Homepage from "./pages/homepage/homepage";
+import Battle from "./pages/battle/battle";
 
 import { loadUser } from "./actions/authActions";
 
@@ -16,7 +18,16 @@ class App extends React.Component {
     return (
       <Provider store={store}>
         <div className="main-container">
-          <Homepage />
+          <Router>
+            <Switch>
+              <Route path="/battle">
+                <Battle />
+              </Route>
+              <Route path="/">
+                <Homepage />
+              </Route>
+            </Switch>
+          </Router>
         </div>
       </Provider>
     );

client/src/actions/authActions.js

@@ -9,6 +9,7 @@ import {
   LOGOUT_SUCCESS,
   REGISTER_SUCCESS,
   REGISTER_FAIL,
+  SET_ROOM,
 } from "../actions/types";
 
 //Check token and load user
@@ -91,3 +92,7 @@ export const login = ({ username, password }) => (dispatch) => {
       dispatch({ type: LOGIN_FAIL });
     });
 };
+
+export const setRoom = ({ room }) => (dispatch) => {
+  dispatch({ type: SET_ROOM, payload: room });
+};

client/src/actions/types.js

@@ -8,3 +8,4 @@ export const REGISTER_SUCCESS = "REGISTER_SUCCESS";
 export const REGISTER_FAIL = "REGISTER_FAIL";
 export const GET_ERRORS = "GET_ERRORS";
 export const CLEAR_ERRORS = "CLEAR_ERRORS";
+export const SET_ROOM = "SET_ROOM";

client/src/components/battle-box/battleBox.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import "./battleBox.styles.scss";
+
+class BattleBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div className="battle-box">
+        <div className="battle"></div>
+        <div className="moves"></div>
+      </div>
+    );
+  }
+}
+
+export default BattleBox;

client/src/components/battle-box/battleBox.styles.scss

@@ -0,0 +1,11 @@
+.battle-box {
+  background-color: white;
+  color: black;
+  display: flex;
+  flex-direction: column;
+}
+
+.battle {
+  background-image: url("../../assets/battle-bg.jpg");
+  padding: 200px;
+}

client/src/components/header/header.jsx

@@ -46,7 +46,7 @@ class Header extends React.Component {
 
   componentDidUpdate(prevProps) {
     const { error, isAuthenticated } = this.props;
-    if (error != prevProps.error) {
+    if (error !== prevProps.error) {
       if (error.id === "REGISTER_FAIL") {
         this.setState({ msg: error.msg.msg });
       } else if (error.id === "LOGIN_FAIL") {

client/src/components/logs/logs.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./logs.styles.scss";
+const Logs = (props) => {
+  return <div className="log-box"></div>;
+};
+
+export default Logs;

client/src/components/logs/logs.styles.scss

@@ -0,0 +1,4 @@
+.log-box {
+  background-color: #cecece;
+  min-height: 100%;
+}

client/src/components/start-card/startCard.jsx

@@ -38,7 +38,6 @@ const StartCard = (props) => {
           )}
         </div>
       </div>
-      <div className="start-btn">Find game</div>
     </div>
   );
 };

client/src/pages/battle/battle.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { connect } from "react-redux";
+import "./battle.styles.scss";
+import { Layout } from "../layout";
+import BattleBox from "../../components/battle-box/battleBox";
+import Logs from "../../components/logs/logs";
+
+class Battle extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <Layout>
+        <h2>Room #{this.props.room}</h2>
+        <div className="container">
+          <BattleBox />
+          <Logs />
+        </div>
+      </Layout>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  isAuthenticated: state.auth.isAuthenticated,
+  error: state.error,
+  user: state.auth.user,
+  room: state.auth.room,
+});
+export default connect(mapStateToProps)(Battle);

client/src/pages/battle/battle.styles.scss

@@ -0,0 +1,3 @@
+.container {
+  display: flex;
+}

client/src/pages/homepage/homepage.js

@@ -1,7 +1,12 @@
 import React from "react";
 
+import { Link } from "react-router-dom";
 import "./homepage.styles.scss";
 import { Layout } from "../layout";
+import socketIO from "socket.io-client";
+import { connect } from "react-redux";
+import { setRoom } from "../../actions/authActions";
+import { Redirect } from "react-router";
 
 import StartCard from "../../components/start-card/startCard";
 
@@ -32,6 +37,7 @@ class Homepage extends React.Component {
       activeTeam: 0,
       pokeData: [],
       newTeam: [],
+      redirect: false,
     };
   }
 
@@ -57,6 +63,7 @@ class Homepage extends React.Component {
           );
           this.setState({ pokeData: sortedData });
         });
+      return 1;
     });
   }
   showTeams = () => this.setState({ showTeams: !this.state.showTeams });
@@ -79,11 +86,43 @@ class Homepage extends React.Component {
       newTeam: [],
     });
   };
+  findGame = () => {
+    if (!this.props.isAuthenticated) {
+      return alert("You must be logged in to play a game");
+    }
+
+    const socket = socketIO("http://localhost:5000");
+    socket.emit(
+      "join",
+      {
+        username: this.props.user.username,
+        team: this.state.teamList[this.state.activeTeam],
+      },
+      (room) => {
+        console.log(room);
+        this.props.setRoom({ room });
+        socket.emit("play-turn", {
+          username: this.props.username,
+          room,
+          gameStart: true,
+        });
+
+        console.log(this.props);
+      }
+    );
+
+    socket.on("starting-game", ({ team }) => {
+      console.log(team);
+      this.setState({ redirect: true });
+    });
+  };
 
   render() {
     const idArray = [...Array(100).keys()].map((x) => x + 1);
     const sixRange = [...Array(6).keys()];
-
+    if (this.state.redirect) {
+      return <Redirect to="/battle"></Redirect>;
+    }
     return (
       <Layout>
         <div className="homepage-container">
@@ -95,7 +134,11 @@ class Homepage extends React.Component {
               teamList={this.state.teamList}
               activeTeam={this.state.activeTeam}
             />
+            <div className="start-btn" onClick={this.findGame}>
+              Find game
+            </div>
           </div>
+          <Link to="/battle">GO TO BATTLE</Link>
           <div className="selection-half">
             <div className="selection-container">
               <div className="cur-team"></div>
@@ -145,6 +188,7 @@ class Homepage extends React.Component {
                         </div>
                       );
                     }
+                    return 1;
                   })
                 )}
               </div>
@@ -156,4 +200,10 @@ class Homepage extends React.Component {
   }
 }
 
-export default Homepage;
+const mapStateToProps = (state) => ({
+  isAuthenticated: state.auth.isAuthenticated,
+  error: state.error,
+  user: state.auth.user,
+  room: state.auth.room,
+});
+export default connect(mapStateToProps, { setRoom })(Homepage);

client/src/reducers/authReducer.js

@@ -7,13 +7,15 @@ import {
   LOGOUT_SUCCESS,
   REGISTER_SUCCESS,
   REGISTER_FAIL,
+  SET_ROOM,
 } from "../actions/types";
 
 const initialState = {
   token: localStorage.getItem("token"),
   isAuthenticated: null,
   isLoading: false,
   user: null,
+  room: null,
 };
 
 export default function (state = initialState, action) {
@@ -51,6 +53,12 @@ export default function (state = initialState, action) {
         isAuthenticated: false,
         isLoading: false,
       };
+    case SET_ROOM:
+      console.log("SETTING ROOM", action.payload);
+      return {
+        ...state,
+        room: action.payload,
+      };
     default:
       return state;
   }