GuildCrafts · mikeadossi · May 2, 2017 · May 2, 2017 · May 2, 2017 · May 2, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -7,18 +7,22 @@ A collection of games to play in a web browser. See the full list of games in th
 Clone the repo, install npm dependencies, and start the server:
 
 ```shell-session
-$ git clone [email protected]:GuildCrafts/browser-games.git
+$ git clone [email protected]:mikeadossi/browser-games.git
 $ cd browser-games
 $ npm install
 
 ...
 
+$ npm build 
+..
+
 $ npm start
 ...
+
 Starting up http-server, serving ./public
 Available on:
-  http://127.0.0.1:4321
-  http://10.0.1.11:4321
+  http://127.0.0.1:8080
+  http://10.0.1.11:8080
 ```
 
-Then open `http://localhost:4321/` in your browser of choice and play away!
+Then open `http://localhost:8080/` in your browser of choice and play away!
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Bowser Games</title>
+    <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister|Wendy+One" rel="stylesheet">
+    <link rel="icon" href="src/components/img/koopaTroopaShell.png"/>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "description": "A collection of games to play in a web browser.",
   "scripts": {
-    "start": "http-server ./public -p 4321"
+    "build": "./node_modules/bin/webpack",
+    "start": "./node_modules/.bin/webpack-dev-server"
   },
   "repository": {
     "type": "git",
@@ -19,7 +20,26 @@
     "url": "https://github.com/GuildCrafts/browser-games/issues"
   },
   "homepage": "https://github.com/GuildCrafts/browser-games#readme",
+  "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-preset-env": "^1.1.4",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-register": "^6.18.0",
+    "react-hot-loader": "^1.3.1",
+    "react-scripts": "0.8.5",
+    "url-loader": "^0.5.8",
+    "webpack": "^1.14.0",
+    "webpack-dev-server": "^1.16.2"
+  },
   "dependencies": {
-    "http-server": "^0.9.0"
+    "http-server": "^0.9.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-router": "^4.0.0",
+    "react-router-dom": "*",
+    "webpack": "^1.14.0",
+    "webpack-dev-server": "^1.16.2",
+    "react-history": "*"
   }
 }
diff --git a/public/css/.gitkeep b/public/css/.gitkeep
diff --git a/public/img/.gitkeep b/public/img/.gitkeep
diff --git a/public/index.html b/public/index.html
diff --git a/public/js/.gitkeep b/public/js/.gitkeep
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/components/.DS_Store b/src/components/.DS_Store
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import './app.css';
+import Nav from 'components/Nav/Nav';
+import Home from 'components/Home/Home';
+import Footer from 'components/Footer/Footer';
+import TicTacToe from 'components/TicTacToe/TicTacToe';
+import Simon from 'components/Simon/Simon';
+import ConnectFour from 'components/ConnectFour/ConnectFour';
+import { Link, Route, HashRouter, Switch } from 'react-router-dom';
+
+export default class App extends React.Component{
+
+  render(){
+    return(
+      <div className="app_container">
+        <HashRouter>
+          <Switch>
+            <Route exact path="/" component={Home}/>
+            <Route exact path="/Home" component={Home}/>
+            <Route exact path="/TicTacToe" component={TicTacToe}/>
+            <Route exact path="/Simon" component={Simon}/>
+            <Route exact path="/ConnectFour" component={ConnectFour}/>
+          </Switch>
+        </HashRouter>
+      </div>
+    )
+  }
+}
diff --git a/src/components/App/app.css b/src/components/App/app.css
@@ -0,0 +1,10 @@
+.app_LoveYa_font{
+  font-family: 'Love Ya Like A Sister', cursive;
+}
+.app_WendyOne_font{
+  font-family: 'Wendy One', sans-serif;
+}
+
+button:focus {
+  outline:0;
+}
diff --git a/src/components/ConnectFour/ConnectFour.css b/src/components/ConnectFour/ConnectFour.css
@@ -0,0 +1,241 @@
+.connectFour{
+  height:485px;
+  padding:0 6% 6% 6%;
+  width:160px;
+  min-height:620px;
+  margin:auto;
+  margin-top:-42px;
+}
+
+.connectFour_container{
+  background-color: transparent;
+  width: 300px;
+  text-align: center;
+  position: absolute;
+  z-index:3;
+  margin: 82px 0 0 -70px;
+  padding: 3% 3% 3% 0;
+}
+
+.connectFour_title{
+  margin-bottom:10px;
+}
+
+.connectFour_interface{
+  border: 2px solid black;
+  height: 264px;
+  width: 297px;
+  position: relative;
+  border-radius: 5px;
+}
+
+.connectFour_nodes{
+  background-color:steelblue;
+  height:16.7%;
+}
+
+.connectFour_controls_btns{
+  border:none;
+  border-radius:5px;
+  margin:2px;
+  min-width:40px;
+}
+
+.connectFour_controls_btns:hover{
+  color:white;
+  cursor:pointer;
+}
+
+.connectFour_scoreboard{
+  border:1px solid gainsboro;
+  margin-top:5px;
+  border-radius:5px;
+}
+
+.connectFour_player_scores_container{
+  border-bottom:1px solid gainsboro;
+  text-align:center;
+  width:100%;
+}
+
+.connectFour_player1_scores{
+  border-right:1px solid gainsboro;
+}
+
+.connectFour_player1_scores, .connectFour_player2_scores{
+  display:inline-block;
+  width:49.5%;
+}
+
+.connectFour_player1_score{
+  color:red;
+}
+
+.connectFour_player2_score{
+  color:orange;
+}
+
+.connectFour_single_node{
+  display:inline-block;
+  border-radius:50%;
+  height:68%;
+  width:13%;
+  margin-right:0.2%;
+  margin-top:3%;
+  content: ' ';
+  background-color:white;
+  position:relative;
+}
+
+.connectFour_single_node:hover{
+  cursor:pointer;
+  background-color:gainsboro;
+}
+
+.connectFour_message{
+  color:steelblue;
+  border-bottom:1px solid gainsboro;
+  padding: 5px 0 5px 0;
+}
+
+.connectFour_yellow_coin{
+  height: 30px;
+  width: 26px;
+}
+
+.connectFour_red_mushroom{
+  height: 30px;
+  width: 30px;
+}
+
+.connectFour_gameover_reset, .connectFour_gameover_quit{
+  border:none;
+  border-radius:5px;
+  margin:2px;
+}
+
+.connectFour_lakituBoard{
+  width: 303px;
+  text-align: center;
+  border: 2px solid skyblue;
+  background-size: 50px 50px;
+  padding: 2%;
+  margin: 120px 0 0 -87px;
+  border-radius:8px;
+}
+
+.connectFour_lakituBoard_border{
+  width:300px;
+  text-align:center;
+  border:2px solid skyblue;
+  background-size: 50px 50px;
+  border-radius:5px;
+  /*padding:20%;
+  margin: 120px 0 0 -86px;*/
+}
+
+.connectFour_gameover_container{
+  margin-top: 120px;
+  margin-left: -42%;
+  background-color: oldlace;
+  border: 2px solid black;
+  padding: 30px;
+  width: 233px;
+  text-align: center;
+}
+
+.connectFour_gameover_winner{
+  color:indianred;
+  font-size:3em;
+  padding:5px;
+}
+
+.connectFour_landing_title_text{
+  margin-top:-20px;
+}
+
+.connectFour_mushroom_img{
+  width:66%;
+  margin-top:16%;
+}
+
+.connectFour_coin_img{
+  width:52%;
+  margin-top:16%;
+}
+
+.connectFour_lakitu_img{
+  position: absolute;
+  margin-top: -79px;
+  margin-left: 67px;
+  height: 35%;
+  width: 30%;
+  max-width: 142px;
+  max-height: 174px;
+  min-height: 180px;
+  min-width:90px;
+}
+
+.connectFour_player_select_div{
+  border: 2px solid skyblue;
+  margin-top:2%;
+  padding: 27% 5% 7vh 5%;
+}
+
+.connectFour_player_character_border{
+  border-radius: 50%;
+  border: 2px solid black;
+  height: 60px;
+  width: 60px;
+}
+
+.connectFour_player1_query, .connectFour_player2_query{
+  width:218px;
+  margin:auto;
+}
+
+.connectFour_player_select_container{
+  display:inline-block;
+  width:24%;
+}
+
+.connectFour_player1_query_container, .connectFour_player2_query_container{
+  display:inline-block;
+  width:76%;
+}
+
+.connectFour_name1_input, .connectFour_name2_input{
+  text-align: center;
+  font-size: 14px;
+  border: none;
+  border-bottom: 2px solid black;
+}
+
+.connectFour_name1_input:focus, .connectFour_name2_input:focus{
+  outline:none;
+}
+
+.connectFour_player1_name_btn, .connectFour_player2_name_btn, .connectFour_player_quit_btn{
+  border:2px solid black;
+  border-radius:5px;
+  margin-top:10px;
+  width:50%;
+  background-color:white;
+  margin-right:2px;
+}
+
+.connectFour_player1_name_btn:hover, .connectFour_player2_name_btn:hover, .connectFour_player_quit_btn:hover{
+  background-color:papayawhip;
+  cursor:pointer;
+}
+
+
+
+@media (max-width: 490px){
+
+  .connectFour_lakituBoard{
+    /*padding:0 0 20px 0;*/
+    margin: 120px 0 0 -76px;
+  }
+
+}