wdi-sg · chelsejw · May 31, 2020
diff --git a/build-dev/client/index.html b/build-dev/client/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>React + Express</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+</head>
+<body>
+<div id="app"></div>
+<script src="/main.js"></script></body>
+</html>
diff --git a/build/client/index.html b/build/client/index.html
@@ -0,0 +1 @@
+<!doctype html> <html lang=en> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>React + Express</title> </head> <body> <div id=app></div> <script type="text/javascript" src="/main.js?e220098827402fba10df"></script></body> </html> 
diff --git a/build/client/main.js b/build/client/main.js
diff --git a/config/webpack.config.common.js b/config/webpack.config.common.js
@@ -33,7 +33,7 @@ module.exports = {
             {
               loader: 'css-loader',
               options: {
-                modules: true,
+                modules: { auto: true },
                 sourceMap: IS_DEV
               }
             },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,34 +14,35 @@
   },
   "postcss": {},
   "devDependencies": {
-    "@babel/core": "^7.3.3",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-react": "^7.7.0",
-    "babel-loader": ">=8.0.5",
+    "@babel/core": "^7.10.2",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "babel-loader": "^8.1.0",
     "babel-watch": ">=7.0.0",
-    "cross-env": ">=5.2.0",
-    "css-loader": ">=2.1.0",
+    "cross-env": "^7.0.2",
+    "css-loader": "^3.5.3",
     "extract-text-webpack-plugin": ">=4.0.0-beta.0",
-    "html-loader": ">=0.5.5",
+    "html-loader": "^1.1.0",
     "html-webpack-harddisk-plugin": ">=1.0.1",
-    "html-webpack-plugin": ">=3.2.0",
-    "node-sass": "^4.12.0",
+    "html-webpack-plugin": "^4.3.0",
+    "node-sass": "^4.14.1",
     "postcss-load-config": ">=2.0.0",
     "postcss-loader": ">=3.0.0",
-    "react-hot-loader": ">=4.6.5",
-    "rimraf": ">=2.6.3",
-    "sass-loader": ">=7.1.0",
-    "style-loader": ">=0.23.1",
-    "webpack": "^4.29.4",
-    "webpack-cli": ">=3.2.3",
+    "react-hot-loader": "^4.12.21",
+    "rimraf": "^3.0.2",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
     "webpack-dev-middleware": ">=3.5.2",
     "webpack-hot-middleware": ">=2.24.3",
     "webpack-merge": ">=4.2.1"
   },
   "dependencies": {
+    "autoprefixer": "^9.8.0",
     "classnames": "^2.2.6",
     "express": ">=4.16.4",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   }
 }
diff --git a/src/client/App.jsx b/src/client/App.jsx
@@ -6,8 +6,8 @@ import Board from './components/board/board';
 class App extends React.Component {
   render() {
     return (
-      <div>
-        <p>Welcome.</p>
+      <div className="container mx-auto">
+        <h1>Tic Tac Toe</h1>
         <Board/>
       </div>
     );

diff --git a/src/client/components/board/Square.jsx b/src/client/components/board/Square.jsx
@@ -0,0 +1,15 @@
+import React, {useState} from 'react';
+
+
+function Square(props){
+        return (
+          <div className="square" id={props.id} onClick={props.onClick}>
+              {props.value}
+          </div>
+        );
+  }
+
+
+
+
+export default Square;
diff --git a/src/client/components/board/board.jsx b/src/client/components/board/board.jsx
@@ -1,64 +1,81 @@
-import React from 'react';
-
-class Board extends React.Component {
-    constructor(){
-
-      super()
-
-      this.state = {
-        board: [
-          ['i','i','i'],
-          ['i','i','i'],
-          ['i','i','i']
-        ]
+import React, {useState} from 'react';
+import Square from './Square'
+
+function Board(){
+
+  let [board, setBoard] = useState(Array(9).fill(null));
+  let [turnIsX, setTurn] = useState(true);
+  let [winner, setWinner] = useState(null);
+
+  //Function taken from React docs
+  function calculateWinner(squares) {
+    const lines = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6],
+    ];
+    for (let i = 0; i < lines.length; i++) {
+      const [a, b, c] = lines[i];
+      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+        console.log(`The winning line is ${lines[i]}`)
+        return squares[a];
       }
-
     }
+    return null;
+  }
 
-    squareClick(something, something2){
-        console.log( something, something2 );
-    }
-
-    render() {
-        console.log("board", this.state.board);
-
-        const board = this.state.board.map( (row,rowIndex) => {
-
-          // make a single row
-          const rows = row.map( (col,colIndex) => {
+  let handleClick = e => {
+
+    const id = parseInt(e.target.id)
 
-            // make each column
-            return (
-                    <p
-                        className="boo"
-                        key={colIndex}
-                        onClick={()=>{
-                            this.squareClick(colIndex, rowIndex);
-                        }}
-
-                    >
-                        {col} : {colIndex} : {rowIndex}
-                    </p>
-            );
-
-          });
+    //If the square already has a value, end the function here.
+    if (e.target.innerText || winner ) {
+      return;
+    }
 
-          // return the complete row
-          return (
-            <div key={rowIndex} className="row">
-              {rows}
-            </div>
+    //If square is empty, update the board
+    let newBoard = [...board]
+    newBoard[id] = turnIsX ? "X" : "O"
+    setBoard(newBoard);
 
-          );
+    if (calculateWinner(newBoard)){
+      setWinner(`The winner is ${calculateWinner(newBoard)}`);
+    };
 
-        });
+    //Change the turn
+    setTurn(!turnIsX);
+  }
 
         return (
-          <div className="item">
-            {board}
+          <div className="container">
+            <p>Current Turn: {turnIsX ? "X" : "O"}</p>
+            <p>{winner}</p>
+              <div className="row">
+                <Square id={0} value={board[0]} onClick={handleClick}/>
+                <Square id={1} value={board[1]} onClick={handleClick}/>
+                <Square id={2} value={board[2]} onClick={handleClick}/>
+
+              </div>
+              <div className="row">
+              <Square id={3} value={board[3]} onClick={handleClick}/>
+              <Square id={4} value={board[4]} onClick={handleClick}/>
+              <Square id={5} value={board[5]} onClick={handleClick}/>
+
+
+              </div>
+              <div className="row">
+              <Square id={6} value={board[6]} onClick={handleClick}/>
+              <Square id={7} value={board[7]} onClick={handleClick}/>
+              <Square id={8} value={board[8]} onClick={handleClick}/>   
+            </div>
           </div>
         );
-    }
 }
 
+
 export default Board;
diff --git a/src/client/index.html b/src/client/index.html
@@ -4,22 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>React + Express</title>
-    <style>
-      body{
-        background-color:pink;
-      }
-      .row{
-        background-color:grey;
-        margin:5px;
-        padding:5px;
-      }
-      .boo{
-        background-color:white;
-      }
-    </style>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 </head>
 <body>
-<h1>Wow, react</h1>
 <div id="app"></div>
 </body>
 </html>
diff --git a/src/client/style.scss b/src/client/style.scss
@@ -6,8 +6,15 @@ html, body {
 }
 body{
   padding:20px;
-
 }
-p{
-	color:red;
+.square {
+  width: 150px;
+  height: 150px;
+  border: 1px solid black;
+  display: inline-block;
+  font-size: 3rem;
+  margin-bottom: -2px;
+  box-sizing: border-box;
+  text-align: center;
+  vertical-align:top;
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html> <html lang=en> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>React + Express</title> </head> <body> <div id=app></div> <script type="text/javascript" src="/main.js?e220098827402fba10df"></script></body> </html>