From e798e9f41a12206913bfc686d6da402a361ebb35 Mon Sep 17 00:00:00 2001 From: tejinder-sharma Date: Fri, 20 May 2022 11:48:11 +0530 Subject: [PATCH 01/10] changes --- src/meta/play-meta.js | 14 ++ src/plays/index.js | 1 + src/plays/tic-tac-toe-game/Readme.md | 17 ++ src/plays/tic-tac-toe-game/TicTacToeGame.jsx | 173 +++++++++++++++++++ src/plays/tic-tac-toe-game/cover.png | Bin 0 -> 3596 bytes src/plays/tic-tac-toe-game/tic.css | 63 +++++++ 6 files changed, 268 insertions(+) create mode 100644 src/plays/tic-tac-toe-game/Readme.md create mode 100644 src/plays/tic-tac-toe-game/TicTacToeGame.jsx create mode 100644 src/plays/tic-tac-toe-game/cover.png create mode 100644 src/plays/tic-tac-toe-game/tic.css diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 5edc878dec..33bba57415 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -16,6 +16,7 @@ QuoteGenerator, PasswordGenerator, WhyTypescript, NetlifyCardGame, +TicTacToeGame, //import play here } from "plays"; @@ -240,5 +241,18 @@ export const plays = [ video: '', language: 'js', featured: true, + }, { + id: 'pl-tic-tac-toe-game', + name: 'Tic Tac Toe Game', + description: 'This game is coded in ReactJS and VanillaCSS', + component: () => {return }, + path: '/plays/tic-tac-toe-game', + level: 'Beginner', + tags: 'Hooks,JSX,Functions,ResetState,CSS', + github: 'tejinder-sharma', + cover: 'https://github.com/tejinder-sharma/logo/blob/main/cover.png?raw=true', + blog: '', + video: '', + language: 'js' }, //replace new play item here ]; diff --git a/src/plays/index.js b/src/plays/index.js index 9d3cd7944d..349c77a916 100644 --- a/src/plays/index.js +++ b/src/plays/index.js @@ -18,4 +18,5 @@ export { default as AnalogClock } from 'plays/analog-clock/AnalogClock'; export { default as PasswordGenerator } from 'plays/password-generator/PasswordGenerator'; export { default as WhyTypescript } from 'plays/why-typescript/WhyTypescript'; export { default as NetlifyCardGame } from 'plays/memory-game/NetlifyCardGame'; +export { default as TicTacToeGame } from 'plays/tic-tac-toe-game/TicTacToeGame'; //add export here diff --git a/src/plays/tic-tac-toe-game/Readme.md b/src/plays/tic-tac-toe-game/Readme.md new file mode 100644 index 0000000000..315d0fbb05 --- /dev/null +++ b/src/plays/tic-tac-toe-game/Readme.md @@ -0,0 +1,17 @@ +# Tic Tac Toe Game + +It is a Tic Tac Toe Game to made with React. + + +## What will you learn? + +- Use of `useEffect` hook. +- Event handling for user interaction. +- Update of states. +- How to reuse the components.(e.g we reused our game square button many times). +- How to reset the states. + + +The file `TicTacToeGAme` is the main file along with the css. + +If you want to implement your learnings about states and useEffect hooks try implementing it on your own! \ No newline at end of file diff --git a/src/plays/tic-tac-toe-game/TicTacToeGame.jsx b/src/plays/tic-tac-toe-game/TicTacToeGame.jsx new file mode 100644 index 0000000000..ddc1ebc5d7 --- /dev/null +++ b/src/plays/tic-tac-toe-game/TicTacToeGame.jsx @@ -0,0 +1,173 @@ +import { getPlayById } from 'meta/play-meta-util'; + +import PlayHeader from 'common/playlists/PlayHeader'; + +import React from "react"; + +import "./tic.css"; + +function TicTacToeGame(props) { + // Do not remove the below lines. + // The following code is to fetch the current play from the URL + const { id } = props; + const play = getPlayById(id); + + // Your Code Start below. + + function Square(props) { + return ( + + ); + } + + class Board extends React.Component { + renderSquare(i) { + return ( + this.props.onClick(i)} + /> + ); + } + renderSquares(n) { + let squares = []; + for (let i = n; i < n + 3; i++) { + squares.push(this.renderSquare(i)); + } + return squares; + } + renderRow(i) { + return
{this.renderSquares(i)}
; + } + render() { + return ( +
+ {this.renderRow(0)} + {this.renderRow(3)} + {this.renderRow(6)} +
+ ); + } + } + class Game extends React.Component { + constructor(props) { + super(props); + this.initialState = { + history: [ + { + squares: Array(9).fill(null), + }, + ], + xIsNext: true, + stepNumber: 0, + }; + this.state = this.initialState; + } + onResetClick(e) { + e.preventDefault(); + this.setState(this.initialState); + console.log(this.state); + } + + handleClick(i) { + const history = this.state.history; + const current = history[history.length - 1]; + const squares = current.squares.slice(); + if (calculateWinner(squares) || squares[i]) { + return; + } + + squares[i] = this.state.xIsNext ? "X" : "O"; + + this.setState({ + history: history.concat([ + { + squares: squares, + }, + ]), + xIsNext: !this.state.xIsNext, + }); + } + + render() { + const history = this.state.history; + const current = history[history.length - 1]; + const winner = calculateWinner(current.squares); + let status; + + if (winner) { + status = "Winner: " + winner.player; + } else if (!current.squares.includes(null)) { + status = "Match Draw"; + } else { + status = current.squares.every((value) => value === null) + ? "First Turn : X" + : "Next Player : " + (this.state.xIsNext ? "X" : "O"); + } + return ( +
+
Tic Tac Toe Game
+ this.handleClick(i)} + /> +
{status}
+ +
+ ); + } + } + + function calculateWinner(squares) { + const lines = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [2, 4, 6], + [0, 4, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + ]; + 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] + ) { + return { player: squares[a], line: [a, b, c] }; + } + } + return null; + } + + + return ( + <> +
+ +
+ {/* Your Code Starts Here */} + + {/* Your Code Ends Here */} +
+
+ + ); +} + +export default TicTacToeGame; \ No newline at end of file diff --git a/src/plays/tic-tac-toe-game/cover.png b/src/plays/tic-tac-toe-game/cover.png new file mode 100644 index 0000000000000000000000000000000000000000..39d1c09a972454b91aceb1dfa9585d660c9eb275 GIT binary patch literal 3596 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 Date: Sun, 22 May 2022 19:04:52 +0530 Subject: [PATCH 02/10] final changes --- src/meta/play-meta.js | 2 +- src/plays/tic-tac-toe-game/TicTacToeGame.jsx | 147 +----------------- .../tic-tac-toe-game/components/Game.jsx | 118 ++++++++++++++ src/plays/tic-tac-toe-game/dummy.jsx | 144 +++++++++++++++++ .../tic-tac-toe-game/{ => styles}/tic.css | 17 +- 5 files changed, 271 insertions(+), 157 deletions(-) create mode 100644 src/plays/tic-tac-toe-game/components/Game.jsx create mode 100644 src/plays/tic-tac-toe-game/dummy.jsx rename src/plays/tic-tac-toe-game/{ => styles}/tic.css (85%) diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 33bba57415..4bf67bef1b 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -250,7 +250,7 @@ export const plays = [ level: 'Beginner', tags: 'Hooks,JSX,Functions,ResetState,CSS', github: 'tejinder-sharma', - cover: 'https://github.com/tejinder-sharma/logo/blob/main/cover.png?raw=true', + cover: '', blog: '', video: '', language: 'js' diff --git a/src/plays/tic-tac-toe-game/TicTacToeGame.jsx b/src/plays/tic-tac-toe-game/TicTacToeGame.jsx index ddc1ebc5d7..4aacefb7ae 100644 --- a/src/plays/tic-tac-toe-game/TicTacToeGame.jsx +++ b/src/plays/tic-tac-toe-game/TicTacToeGame.jsx @@ -4,7 +4,9 @@ import PlayHeader from 'common/playlists/PlayHeader'; import React from "react"; -import "./tic.css"; +import Game from "./components/Game.jsx" + +import "./styles/tic.css"; function TicTacToeGame(props) { // Do not remove the below lines. @@ -13,149 +15,6 @@ function TicTacToeGame(props) { const play = getPlayById(id); // Your Code Start below. - - function Square(props) { - return ( - - ); - } - - class Board extends React.Component { - renderSquare(i) { - return ( - this.props.onClick(i)} - /> - ); - } - renderSquares(n) { - let squares = []; - for (let i = n; i < n + 3; i++) { - squares.push(this.renderSquare(i)); - } - return squares; - } - renderRow(i) { - return
{this.renderSquares(i)}
; - } - render() { - return ( -
- {this.renderRow(0)} - {this.renderRow(3)} - {this.renderRow(6)} -
- ); - } - } - class Game extends React.Component { - constructor(props) { - super(props); - this.initialState = { - history: [ - { - squares: Array(9).fill(null), - }, - ], - xIsNext: true, - stepNumber: 0, - }; - this.state = this.initialState; - } - onResetClick(e) { - e.preventDefault(); - this.setState(this.initialState); - console.log(this.state); - } - - handleClick(i) { - const history = this.state.history; - const current = history[history.length - 1]; - const squares = current.squares.slice(); - if (calculateWinner(squares) || squares[i]) { - return; - } - - squares[i] = this.state.xIsNext ? "X" : "O"; - - this.setState({ - history: history.concat([ - { - squares: squares, - }, - ]), - xIsNext: !this.state.xIsNext, - }); - } - - render() { - const history = this.state.history; - const current = history[history.length - 1]; - const winner = calculateWinner(current.squares); - let status; - - if (winner) { - status = "Winner: " + winner.player; - } else if (!current.squares.includes(null)) { - status = "Match Draw"; - } else { - status = current.squares.every((value) => value === null) - ? "First Turn : X" - : "Next Player : " + (this.state.xIsNext ? "X" : "O"); - } - return ( -
-
Tic Tac Toe Game
- this.handleClick(i)} - /> -
{status}
- -
- ); - } - } - - function calculateWinner(squares) { - const lines = [ - [0, 1, 2], - [3, 4, 5], - [6, 7, 8], - [2, 4, 6], - [0, 4, 8], - [0, 3, 6], - [1, 4, 7], - [2, 5, 8], - ]; - 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] - ) { - return { player: squares[a], line: [a, b, c] }; - } - } - return null; - } - - return ( <>
diff --git a/src/plays/tic-tac-toe-game/components/Game.jsx b/src/plays/tic-tac-toe-game/components/Game.jsx new file mode 100644 index 0000000000..c9c72313ef --- /dev/null +++ b/src/plays/tic-tac-toe-game/components/Game.jsx @@ -0,0 +1,118 @@ +import React, { useState } from "react"; + +// import "../styles/tic.css"; + +function Square({ value, onClick}) { + return ( + + ); +} +function Restart({ onClick }) { + return ( + + ); +} + +function Game() { + const [squares, setSquares] = useState(Array(9).fill(null)); + const [isXNext, setIsXNext] = useState(true); + + const nextSymbol = isXNext ? "X" : "O"; + + const winner = calculateWinner(squares); + + function renderSquare(i) { + return ( + { + const nextSquares = squares.slice(); + if (squares[i] != null || winner != null) { + return; + } + nextSquares[i] = nextSymbol; + setSquares(nextSquares); + setIsXNext(!isXNext); + }} + /> + ); + } + function getStatus() { + if (winner) { + return `Winner: ${winner}`; + } else if (isBoardFull(squares)) { + return "Draw!"; + } else { + return `Next player: ${nextSymbol}`; + } + } + function renderRestartButton() { + return ( + { + setSquares(Array(9).fill(null)); + setIsXNext(true); + }} + /> + ); + } + function renderSquares(n) { + let squares = []; + for (let i = n; i < n + 3; i++) { + squares.push(renderSquare(i)); + } + return squares; + } + + function renderRow(i) { + return
{renderSquares(i)}
; + } + + return ( +
+
Tic Tac Toe Game
+
+ {renderRow(0)} + {renderRow(3)} + {renderRow(6)} +
+
{getStatus()}
+
{renderRestartButton()}
+
+ ); +} + +function calculateWinner(squares) { + const possibleLines = [ + [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 < possibleLines.length; i++) { + const [a, b, c] = possibleLines[i]; + if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { + return squares[a]; + } + } + return null; +} + +function isBoardFull(squares) { + for (let i = 0; i < squares.length; i++) { + if (squares[i] == null) { + return false; + } + } + return true; +} + +export default Game; diff --git a/src/plays/tic-tac-toe-game/dummy.jsx b/src/plays/tic-tac-toe-game/dummy.jsx new file mode 100644 index 0000000000..3714baf31e --- /dev/null +++ b/src/plays/tic-tac-toe-game/dummy.jsx @@ -0,0 +1,144 @@ +function Square({isWinning, value, onClick}) { + // console.log(props.isWinning) + console.log(isWinning) + return ( + + + ); + } + + class Board extends React.Component { + renderSquare(i) { + return ( + this.props.onClick(i)} + /> + ); + } + renderSquares(n) { + let squares = []; + for (let i = n; i < n + 3; i++) { + squares.push(this.renderSquare(i)); + } + return squares; + } + renderRow(i) { + return
{this.renderSquares(i)}
; + } + render() { + return ( +
+ {this.renderRow(0)} + {this.renderRow(3)} + {this.renderRow(6)} +
+ ); + } + } + class Game extends React.Component { + constructor(props) { + super(props); + this.initialState = { + history: [ + { + squares: Array(9).fill(null), + }, + ], + xIsNext: true, + stepNumber: 0, + }; + this.state = this.initialState; + } + onResetClick(e) { + e.preventDefault(); + this.setState(this.initialState); + console.log(this.state); + } + + handleClick(i) { + const history = this.state.history; + const current = history[history.length - 1]; + const squares = current.squares.slice(); + if (calculateWinner(squares) || squares[i]) { + return; + } + + squares[i] = this.state.xIsNext ? "X" : "O"; + + this.setState({ + history: history.concat([ + { + squares: squares, + }, + ]), + xIsNext: !this.state.xIsNext, + }); + } + + render() { + const history = this.state.history; + const current = history[history.length - 1]; + const winner = calculateWinner(current.squares); + let status; + + if (winner) { + status = "Winner: " + winner.player; + } else if (!current.squares.includes(null)) { + status = "Match Draw"; + } else { + status = current.squares.every((value) => value === null) + ? "First Turn : X" + : "Next Player : " + (this.state.xIsNext ? "X" : "O"); + } + return ( +
+
Tic Tac Toe Game
+ this.handleClick(i)} + /> +
{status}
+ +
+ ); + } + } + + function calculateWinner(squares) { + const lines = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [2, 4, 6], + [0, 4, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + ]; + 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] + ) { + return { player: squares[a], line: [a, b, c] }; + } + } + return null; + } \ No newline at end of file diff --git a/src/plays/tic-tac-toe-game/tic.css b/src/plays/tic-tac-toe-game/styles/tic.css similarity index 85% rename from src/plays/tic-tac-toe-game/tic.css rename to src/plays/tic-tac-toe-game/styles/tic.css index 2081aa4dd5..66dead6eba 100644 --- a/src/plays/tic-tac-toe-game/tic.css +++ b/src/plays/tic-tac-toe-game/styles/tic.css @@ -1,10 +1,3 @@ - -*{ - margin: 0; - padding: 0; - box-sizing: border-box; -} - .squareButton{ width: 5rem; height: 5rem; @@ -22,9 +15,6 @@ .row{ display: flex; } -.bg-yellow-500{ - background-color: #F59E0B; -} .jumpButton{ padding: 0.5rem 1rem; background-color: #10B981; @@ -45,12 +35,15 @@ margin-top: 1rem; font-size: 24px; } -header{ +.header{ width: 100%; padding: 16px 8px; color: white; font-size: 24px; - text-align: center; + + display: grid; + place-content: center; + background-color: #010326; margin-bottom: 2rem; } From 378b20882b1cf343c314fb41215450188b4bbbf4 Mon Sep 17 00:00:00 2001 From: tejinder-sharma Date: Sun, 22 May 2022 19:05:37 +0530 Subject: [PATCH 03/10] removed unwanted file --- src/plays/tic-tac-toe-game/dummy.jsx | 144 --------------------------- 1 file changed, 144 deletions(-) delete mode 100644 src/plays/tic-tac-toe-game/dummy.jsx diff --git a/src/plays/tic-tac-toe-game/dummy.jsx b/src/plays/tic-tac-toe-game/dummy.jsx deleted file mode 100644 index 3714baf31e..0000000000 --- a/src/plays/tic-tac-toe-game/dummy.jsx +++ /dev/null @@ -1,144 +0,0 @@ -function Square({isWinning, value, onClick}) { - // console.log(props.isWinning) - console.log(isWinning) - return ( - - - ); - } - - class Board extends React.Component { - renderSquare(i) { - return ( - this.props.onClick(i)} - /> - ); - } - renderSquares(n) { - let squares = []; - for (let i = n; i < n + 3; i++) { - squares.push(this.renderSquare(i)); - } - return squares; - } - renderRow(i) { - return
{this.renderSquares(i)}
; - } - render() { - return ( -
- {this.renderRow(0)} - {this.renderRow(3)} - {this.renderRow(6)} -
- ); - } - } - class Game extends React.Component { - constructor(props) { - super(props); - this.initialState = { - history: [ - { - squares: Array(9).fill(null), - }, - ], - xIsNext: true, - stepNumber: 0, - }; - this.state = this.initialState; - } - onResetClick(e) { - e.preventDefault(); - this.setState(this.initialState); - console.log(this.state); - } - - handleClick(i) { - const history = this.state.history; - const current = history[history.length - 1]; - const squares = current.squares.slice(); - if (calculateWinner(squares) || squares[i]) { - return; - } - - squares[i] = this.state.xIsNext ? "X" : "O"; - - this.setState({ - history: history.concat([ - { - squares: squares, - }, - ]), - xIsNext: !this.state.xIsNext, - }); - } - - render() { - const history = this.state.history; - const current = history[history.length - 1]; - const winner = calculateWinner(current.squares); - let status; - - if (winner) { - status = "Winner: " + winner.player; - } else if (!current.squares.includes(null)) { - status = "Match Draw"; - } else { - status = current.squares.every((value) => value === null) - ? "First Turn : X" - : "Next Player : " + (this.state.xIsNext ? "X" : "O"); - } - return ( -
-
Tic Tac Toe Game
- this.handleClick(i)} - /> -
{status}
- -
- ); - } - } - - function calculateWinner(squares) { - const lines = [ - [0, 1, 2], - [3, 4, 5], - [6, 7, 8], - [2, 4, 6], - [0, 4, 8], - [0, 3, 6], - [1, 4, 7], - [2, 5, 8], - ]; - 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] - ) { - return { player: squares[a], line: [a, b, c] }; - } - } - return null; - } \ No newline at end of file From df1a7df2b0238b82daaf184c321a043f791cacff Mon Sep 17 00:00:00 2001 From: tejinder-sharma Date: Sun, 22 May 2022 19:32:25 +0530 Subject: [PATCH 04/10] cover image changed --- src/plays/tic-tac-toe-game/cover.png | Bin 3596 -> 19159 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/src/plays/tic-tac-toe-game/cover.png b/src/plays/tic-tac-toe-game/cover.png index 39d1c09a972454b91aceb1dfa9585d660c9eb275..48622014c3ba3aee8482e96eaefeabace2aea990 100644 GIT binary patch literal 19159 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 literal 3596 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 Date: Sun, 22 May 2022 19:44:52 +0530 Subject: [PATCH 05/10] Final changes --- src/plays/tic-tac-toe-game/components/Game.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/plays/tic-tac-toe-game/components/Game.jsx b/src/plays/tic-tac-toe-game/components/Game.jsx index c9c72313ef..f1b48f0ac3 100644 --- a/src/plays/tic-tac-toe-game/components/Game.jsx +++ b/src/plays/tic-tac-toe-game/components/Game.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, Component } from "react"; // import "../styles/tic.css"; @@ -25,9 +25,11 @@ function Game() { const winner = calculateWinner(squares); + function renderSquare(i) { return ( { const nextSquares = squares.slice(); @@ -73,7 +75,7 @@ function Game() { } return ( -
+
Tic Tac Toe Game
{renderRow(0)} From 9bc7cc48529ab8fa2b7a54926293742bcf093849 Mon Sep 17 00:00:00 2001 From: tejinder-sharma Date: Sun, 22 May 2022 23:08:11 +0530 Subject: [PATCH 06/10] Made winning squares of same color --- src/plays/tic-tac-toe-game/components/Game.jsx | 12 +++++++----- src/plays/tic-tac-toe-game/styles/tic.css | 3 +++ 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/plays/tic-tac-toe-game/components/Game.jsx b/src/plays/tic-tac-toe-game/components/Game.jsx index f1b48f0ac3..e930d08edf 100644 --- a/src/plays/tic-tac-toe-game/components/Game.jsx +++ b/src/plays/tic-tac-toe-game/components/Game.jsx @@ -1,10 +1,10 @@ -import React, { useState, Component } from "react"; +import React, { useState } from "react"; // import "../styles/tic.css"; -function Square({ value, onClick}) { +function Square({ index, value, onClick, winningSquare}) { return ( - ); @@ -30,6 +30,8 @@ function Game() { return ( { const nextSquares = squares.slice(); @@ -45,7 +47,7 @@ function Game() { } function getStatus() { if (winner) { - return `Winner: ${winner}`; + return `Winner: ${winner.player}`; } else if (isBoardFull(squares)) { return "Draw!"; } else { @@ -102,7 +104,7 @@ function calculateWinner(squares) { for (let i = 0; i < possibleLines.length; i++) { const [a, b, c] = possibleLines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { - return squares[a]; + return {player:squares[a], line:[a, b, c]}; } } return null; diff --git a/src/plays/tic-tac-toe-game/styles/tic.css b/src/plays/tic-tac-toe-game/styles/tic.css index 66dead6eba..0094309425 100644 --- a/src/plays/tic-tac-toe-game/styles/tic.css +++ b/src/plays/tic-tac-toe-game/styles/tic.css @@ -25,6 +25,9 @@ border-radius: 4px; margin-top: 1rem; } +.bg-yellow-500{ + background-color: #f59e0b; +} .jumpButton:hover{ background-color: #EC4899; } From 19ba6b3f6d9d0f4b6e294a98471a5a66195e3a91 Mon Sep 17 00:00:00 2001 From: tejinder-sharma Date: Mon, 23 May 2022 09:32:51 +0530 Subject: [PATCH 07/10] Used flex on button too, beacuse mobile view is not great without flex. --- src/plays/tic-tac-toe-game/styles/tic.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/plays/tic-tac-toe-game/styles/tic.css b/src/plays/tic-tac-toe-game/styles/tic.css index 0094309425..b2d1a5f60d 100644 --- a/src/plays/tic-tac-toe-game/styles/tic.css +++ b/src/plays/tic-tac-toe-game/styles/tic.css @@ -3,7 +3,11 @@ height: 5rem; margin: 1px; background-color: #EC4899; - display: inline-block; + + display: inline-flex; + justify-content: center; + align-items: center; + border: none; font: bold; font-size: 32px; @@ -18,7 +22,11 @@ .jumpButton{ padding: 0.5rem 1rem; background-color: #10B981; - display: inline-block; + + display: inline-flex; + justify-content: center; + align-items: center; + border: none; color: white; font-size: 18px; From 36f431c0306832bdc7ef8c0328e0277eac3608fd Mon Sep 17 00:00:00 2001 From: tejinder-sharma Date: Mon, 23 May 2022 10:04:46 +0530 Subject: [PATCH 08/10] Resoved CSS conflicts --- src/meta/play-meta.js | 2 +- src/plays/tic-tac-toe-game/TicTacToeGame.jsx | 4 ++-- .../tic-tac-toe-game/components/Game.jsx | 2 -- .../styles/{tic.css => tic-tac-toe-tj.css} | 22 +++++++++---------- 4 files changed, 14 insertions(+), 16 deletions(-) rename src/plays/tic-tac-toe-game/styles/{tic.css => tic-tac-toe-tj.css} (74%) diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 4bf67bef1b..0f89040d31 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -253,6 +253,6 @@ export const plays = [ cover: '', blog: '', video: '', - language: 'js' + language: 'js', }, //replace new play item here ]; diff --git a/src/plays/tic-tac-toe-game/TicTacToeGame.jsx b/src/plays/tic-tac-toe-game/TicTacToeGame.jsx index 4aacefb7ae..67440fcc06 100644 --- a/src/plays/tic-tac-toe-game/TicTacToeGame.jsx +++ b/src/plays/tic-tac-toe-game/TicTacToeGame.jsx @@ -6,7 +6,7 @@ import React from "react"; import Game from "./components/Game.jsx" -import "./styles/tic.css"; +import "./styles/tic-tac-toe-tj.css"; function TicTacToeGame(props) { // Do not remove the below lines. @@ -19,7 +19,7 @@ function TicTacToeGame(props) { <>
-
+
{/* Your Code Starts Here */} {/* Your Code Ends Here */} diff --git a/src/plays/tic-tac-toe-game/components/Game.jsx b/src/plays/tic-tac-toe-game/components/Game.jsx index e930d08edf..1b7f005963 100644 --- a/src/plays/tic-tac-toe-game/components/Game.jsx +++ b/src/plays/tic-tac-toe-game/components/Game.jsx @@ -1,7 +1,5 @@ import React, { useState } from "react"; -// import "../styles/tic.css"; - function Square({ index, value, onClick, winningSquare}) { return ( ); } diff --git a/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css b/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css index dee749bfd5..2cc5ed5861 100644 --- a/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css +++ b/src/plays/tic-tac-toe-game/styles/tic-tac-toe-tj.css @@ -1,3 +1,8 @@ +.tic-tac-toe-tj .container{ + text-align: center; +} + + .tic-tac-toe-tj .squareButton{ width: 5rem; height: 5rem; @@ -58,9 +63,7 @@ background-color: #010326; margin-bottom: 2rem; } -.tic-tac-toe-tj .container{ - text-align: center; -} + .tic-tac-toe-tj .boardMain{ display: grid; place-content: center;