Skip to content

workable, just need to add refresh feature for when game is complete #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paulsobers23 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

workable, just need to add refresh feature for when game is complete #3

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b15fa69
started making my Gameboard component and Cell component
Apr 23, 2020
c1611d6
refactor my components
Apr 23, 2020
63279a4
finished the game and cell component
Apr 24, 2020
afbc137
fixed feedback changes that was suggested except mapping new cells in…
May 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion tic-tac-toe-app/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
const App = () => {
return <div>A tic-tac-toe game</div>;
return (
<GameBoard />
)
};

ReactDOM.render(<App />, document.querySelector('.container'));
16 changes: 16 additions & 0 deletions tic-tac-toe-app/Cell.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
const Cell = (props) => {
const [square, setSquare] = React.useState('')

//the cell only know its own value
const changeCellValue = () => {
setSquare(props.turn);
props.changeTurn();
props.updateBoard(props.id, props.turn);
};

return (
<div>
<div id ={props.id} className ="cell" onClick={changeCellValue}>{square}</div>
</div>
);
};
86 changes: 86 additions & 0 deletions tic-tac-toe-app/GameBoard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
const calculateWinner = (board) =>{
const winningConditions = [
[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 < winningConditions.length; i++){
const [a,b,c] = winningConditions[i];
if(board[a] && board[a] === board[b] && board[a] === board[c]){
console.log(board);
console.log(`The winner is player ${board[a]}`);
return board[a];
}
}
return null;
};


const GameBoard = () => {
const [board, setBoard] = React.useState([]);
const [turn, setTurn] = React.useState('O');
// first i want to check who turn it is and alternate between the two
// this function is responsible for changing the player turns
const changeTurn = () => {
if (turn === 'O'){
setTurn('X');
}
if(turn === 'X'){
setTurn('O');
}
};

const updateBoard = (i,player) => {
// add the player value on the board[i]
const newBoard = board.slice();
newBoard[i] = player;
console.log(newBoard);
setBoard(newBoard);
};

// first i want to check the state of board
const winner = calculateWinner(board);
let status;
console.log(winner);
if(winner){
status = `The winner is ${winner}`;
}
return (

<div className="gameBoard">
<div className="row">
<h1>It is currently {turn} turn</h1>
<h1>{status}</h1>
</div>

<div className="row">
<Cell id={0} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
<Cell id={1} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
<Cell id={2} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
</div>

<div className="row">
<Cell id={3} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
<Cell id={4} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
<Cell id={5} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
</div>

<div className="row">
<Cell id={6} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
<Cell id={7} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
<Cell id={8} turn={turn} updateBoard={updateBoard} changeTurn={changeTurn} />
</div>


</div>
);
};



12 changes: 7 additions & 5 deletions tic-tac-toe-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<title>Tic-Tac-Toe</title>
</head>
<body>
<main class="container"></main>

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
<script type="text/babel" src="app.jsx"></script>
<script type="text/babel" src="Cell.jsx"></script>
<script type="text/babel" src="GameBoard.jsx"></script>
<script type="text/babel" src="App.jsx"></script>
</body>
</html>
27 changes: 27 additions & 0 deletions tic-tac-toe-app/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.cell{
width: 100px;
height: 100px;
box-shadow: 0 0 0 1px #333333;
border: 1px solid #333333;
cursor:pointer;
line-height: 100px;
font-size: 30px;
background-color:rgb(142,135,219);
font-size:50px;
text-align:center;
}

.gameBoard{
display: grid;
grid-template-columns: repeat(5, auto);
width: 306px;
margin-top: 30px;
padding-left:30px;
}

.container{
display:flex;
flex-direction:column;
align-items:center;
}