diff --git a/.eslintrc.json b/.eslintrc.json index f73bd931..b587ec74 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -12,7 +12,6 @@ "plugin:react/recommended", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended", - "plugin:jest/recommended", "plugin:testing-library/react" ], "parserOptions": { diff --git a/README.md b/README.md index feedbaac..0342455b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,12 @@ # React Tic-Tac-Toe +## Please Read First! + +The digital campus' version of Tic-Tac-Toe differs from the original in the following ways: +- We will *not* be using `main` branch. Follow step 6 in the **One-Time Project Setup** to change branches. +- Wave 1 has been completed for you; however, it would help you understand the flow of data by reviewing the code written for Wave 1. +- Wave 3's `checkForWinner` function has been created for you; however, read through Wave 3 instructions to figure out how and where to use it. + ## Skills Assessed - Following directions and reading comprehension @@ -81,9 +88,15 @@ We can run `yarn install` multiple times safely, but we only need to do this onc The file `package.json` contains details about our project, the scripts available, and the dependencies needed. We can inspect this file when we are curious about the details of our dependencies. -6. Follow the directions in the "Getting Started" section. +6. We will not being using `main` branch. Make sure you are working from `digital-starter` by running: + +```bash +$ git checkout digital-starter +``` + +7. Follow the directions in the "Getting Started" section. -7. Follow the directions in the "Project Requirements" section. +8. Follow the directions in the "Project Requirements" section. ## Project Development Workflow diff --git a/package.json b/package.json index f203daa6..b4983674 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,7 @@ }, "eslintConfig": { "extends": [ - "react-app", - "react-app/jest" + "react-app" ] }, "browserslist": { diff --git a/src/App.css b/src/App.css index 9bdb75da..dcf50aa2 100644 --- a/src/App.css +++ b/src/App.css @@ -1,16 +1,17 @@ .App { text-align: center; + background-image: url(https://i.gifer.com/5onc.gif); } .App-header { - background-color: #282c34; + background-color: #ffc2cc; + background-image: url(https://i.gifer.com/5onc.gif); min-height: 10vh; display: flex; flex-direction: column; align-items: center; justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + font-size: 28px; + color: #ffc2cc; margin-bottom: 2em; } - diff --git a/src/App.js b/src/App.js index 0d4e1dea..2513596f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,10 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import './App.css'; import Board from './components/Board'; -const PLAYER_1 = 'X'; -const PLAYER_2 = 'O'; +const PLAYER1 = 'X'; +const PLAYER2 = 'O'; const generateSquares = () => { const squares = []; @@ -24,45 +24,114 @@ const generateSquares = () => { return squares; }; + const App = () => { - // This starts state off as a 2D array of JS objects with - // empty value and unique ids. const [squares, setSquares] = useState(generateSquares()); + const [turn, setTurn] = useState('X'); + const [winner, setWinner] = useState(null); - // Wave 2 - // You will need to create a method to change the square - // When it is clicked on. - // Then pass it into the squares as a callback + const toggleTurn = () => { + if (turn === 'X'){ + setTurn('O'); + } else { + setTurn('X'); + } + }; + + + const onClickCallback = (id) => { + const newSquares = squares.map( (row) => { + row.map((square) => { + if (square.id === id && square.used !== true) { + const newValue = {value: turn, + used: true}; + let newSquare = Object.assign(square, newValue); + return newSquare; + } + return square; + }); + return row; + }); + setSquares(newSquares); + toggleTurn(); + if (checkForWinner()) { + const newSquares = squares.map( (row) => { + row.map((square) => { + const newValue = {used: true}; + let newSquare = Object.assign(square, newValue); + return newSquare; + + }); + return row; + }); + setSquares(newSquares); + setWinner(checkForWinner()); + } + + }; + const checkForWinner = () => { - // Complete in Wave 3 - // You will need to: - // 1. Go accross each row to see if - // 3 squares in the same row match - // i.e. same value - // 2. Go down each column to see if - // 3 squares in each column match - // 3. Go across each diagonal to see if - // all three squares have the same value. + let i = 0; + while (i < 3) { + if ( + squares[i][0].value === squares[i][1].value && + squares[i][2].value === squares[i][1].value && + squares[i][0].value !== '' + ) { + return squares[i][0].value; + } else if ( + squares[0][i].value === squares[1][i].value && + squares[2][i].value === squares[1][i].value && + squares[0][i].value !== '' + ) { + return squares[0][i].value; + } + i += 1; + } + // Check Top-Left to bottom-right diagonal + if ( + squares[0][0].value === squares[1][1].value && + squares[2][2].value === squares[1][1].value && + squares[1][1].value !== '' + ) { + return squares[0][0].value; + } + + // Check Top-right to bottom-left diagonal + if ( + squares[0][2].value === squares[1][1].value && + squares[2][0].value === squares[1][1].value && + squares[1][1].value !== '' + ) { + return squares[0][2].value; + } + + return null; }; const resetGame = () => { // Complete in Wave 4 + setSquares(generateSquares()); + setTurn('X'); + setWinner(null); }; + + return ( -