Skip to content

Commit 0c50e8e

Browse files
Kanavpreet-SinghKanavpreet-Singh
authored
Merge pull request #95 from Naman-Vasudev/tic_tac_toe
Create Tic_Tac_Toe.cpp (Issue #94)
2 parents e0b072d + 24d10c9 commit 0c50e8e

File tree

3 files changed

+219
-110
lines changed

3 files changed

+219
-110
lines changed

‎src/data/content.js‎

Lines changed: 105 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -9,117 +9,116 @@ import { Jitter } from "../pages/games/Jitter";
99
import { RandomMeme } from "../pages/activities/RandomMemes";
1010
import { RandomJoke } from "../pages/activities/RandomJoke";
1111
import { RandomAnimeQuote } from "../pages/activities/RandomAnimeQuote";
12-
import meme from "../assets/activities/meme.jpg"
13-
import dog from "../assets/activities/dogimage.jpeg"
14-
import cat from "../assets/activities/cat.jpg"
15-
import numberblocs from "../assets/numberblocks.png"
16-
import wordleicon from "../assets/games/Wordle/wordlejpg.png"
17-
import flagger from "../assets/games/flag guess/flagger.png"
18-
import Calculator from "../pages/activities/Calculator"
12+
import meme from "../assets/activities/meme.jpg";
13+
import dog from "../assets/activities/dogimage.jpeg";
14+
import cat from "../assets/activities/cat.jpg";
15+
import numberblocs from "../assets/numberblocks.png";
16+
import wordleicon from "../assets/games/Wordle/wordlejpg.png";
17+
import flagger from "../assets/games/flag guess/flagger.png";
18+
import Calculator from "../pages/activities/Calculator";
1919
import { DogHttpCode } from "../pages/activities/DogHttpCode";
2020
import { CatHttpCode } from "../pages/activities/CatHttpCode";
2121

2222
export const activities = [
23-
{
24-
title: "Random quotes",
25-
description: "Get random quotes",
26-
icon: "https://cdn-icons-png.flaticon.com/512/2541/2541991.png",
27-
urlTerm: "random-quotes",
28-
element: <RandomQuote />
29-
},
30-
{
31-
title: "Random Anime Quotes",
32-
description: "Get random anime quotes",
33-
icon: "https://64.media.tumblr.com/7b526ba246f48e294ebc87fe2cbd8e1b/1a4bdb8275a18adc-c7/s250x400/94d6c7e70601111ba79b8801cd939694d0000018.jpg", // Add the path to the anime icon image
34-
urlTerm: "random-anime-quotes",
35-
element: <RandomAnimeQuote />, // Assuming you have a RandomQuote component for anime quotes
36-
},
37-
{
38-
title: "Random memes",
39-
description: "Get random meme",
40-
icon: meme,
41-
urlTerm: "random-memes",
42-
element: <RandomMeme />
43-
},
44-
{
45-
title: "Fortune Card",
46-
description: "Get your fortune",
47-
icon: "https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp",
48-
urlTerm: "get-your-fortune",
49-
element: <FortuneCard />
50-
},
51-
{
52-
title: "Search Words",
53-
description: "Get any definition",
54-
icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png",
55-
urlTerm: "search-any-word",
56-
element: <SearchWord />
57-
},
58-
{
59-
title: "Random Jokes",
60-
description: "Get random jokes",
61-
icon: "https://www.troublefreepool.com/media/joke-png.127455/full",
62-
urlTerm: "random-jokes",
63-
element: <RandomJoke />
64-
},
65-
{
66-
title: "Calculator",
67-
description: "A Simple Calculator",
68-
icon: "https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/512/Calculator_512.png",
69-
urlTerm: "calculator",
70-
element: <Calculator />
71-
},
72-
{
73-
title: "Dog Http Status Code",
74-
description: "Get random dog images or meme",
75-
icon: dog,
76-
urlTerm: "dog-http-status",
77-
element: <DogHttpCode />
78-
},
79-
{
80-
title: "Cat Http Status Code",
81-
description: "Get random cat images or meme",
82-
icon: cat,
83-
urlTerm: "cat-http-status",
84-
element: <CatHttpCode />
85-
},
23+
{
24+
title: "Random quotes",
25+
description: "Get random quotes",
26+
icon: "https://cdn-icons-png.flaticon.com/512/2541/2541991.png",
27+
urlTerm: "random-quotes",
28+
element: <RandomQuote />,
29+
},
30+
{
31+
title: "Random Anime Quotes",
32+
description: "Get random anime quotes",
33+
icon: "https://64.media.tumblr.com/7b526ba246f48e294ebc87fe2cbd8e1b/1a4bdb8275a18adc-c7/s250x400/94d6c7e70601111ba79b8801cd939694d0000018.jpg",
34+
urlTerm: "random-anime-quotes",
35+
element: <RandomAnimeQuote />,
36+
},
37+
{
38+
title: "Random memes",
39+
description: "Get random meme",
40+
icon: meme,
41+
urlTerm: "random-memes",
42+
element: <RandomMeme />,
43+
},
44+
{
45+
title: "Fortune Card",
46+
description: "Get your fortune",
47+
icon: "https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp",
48+
urlTerm: "get-your-fortune",
49+
element: <FortuneCard />,
50+
},
51+
{
52+
title: "Search Words",
53+
description: "Get any definition",
54+
icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png",
55+
urlTerm: "search-any-word",
56+
element: <SearchWord />,
57+
},
58+
{
59+
title: "Random Jokes",
60+
description: "Get random jokes",
61+
icon: "https://www.troublefreepool.com/media/joke-png.127455/full",
62+
urlTerm: "random-jokes",
63+
element: <RandomJoke />,
64+
},
65+
{
66+
title: "Calculator",
67+
description: "A Simple Calculator",
68+
icon: "https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/512/Calculator_512.png",
69+
urlTerm: "calculator",
70+
element: <Calculator />,
71+
},
72+
{
73+
title: "Dog Http Status Code",
74+
description: "Get random dog images or meme",
75+
icon: dog,
76+
urlTerm: "dog-http-status",
77+
element: <DogHttpCode />,
78+
},
79+
{
80+
title: "Cat Http Status Code",
81+
description: "Get random cat images or meme",
82+
icon: cat,
83+
urlTerm: "cat-http-status",
84+
element: <CatHttpCode />,
85+
},
8686
];
8787

8888
export const games = [
89-
{
90-
urlTerm: "magicsquares",
91-
title: "Magic Squares",
92-
description: "Magic Squares > contribution by y-ashaswini :)",
93-
icon: numberblocs,
94-
element: <MagicSquares />,
95-
},
96-
{
97-
title: "Tic-Tac-Toe",
98-
description: "Lets beat opponent's ass in TicTacToe",
99-
icon: "https://cdn-icons-png.flaticon.com/512/2076/2076261.png",
100-
urlTerm: "tic-tac-toe",
101-
element: <TicTacToe />,
102-
},
103-
{
104-
title: "Jitter Click Game",
105-
description: "Click as fast as possible to reach 5 stars.... lakshya",
106-
icon: "https://i.kym-cdn.com/entries/icons/original/000/036/070/cover5.jpg",
107-
urlTerm: "jitter-game",
108-
element: <Jitter />,
109-
},
110-
{
111-
title: "Wordle Game",
112-
description: "The normal wordle but you can play as much as you want",
113-
icon: wordleicon,
114-
urlTerm: "Wordle",
115-
element: <Wordle />
116-
},
117-
{
118-
title: "Guess The Flag",
119-
description: "Learn geography in fun way",
120-
icon: flagger,
121-
urlTerm: "GuessTheFlag",
122-
element: <GuessTheFlag />
123-
}
89+
{
90+
urlTerm: "magicsquares",
91+
title: "Magic Squares",
92+
description: "Magic Squares > contribution by y-ashaswini :)",
93+
icon: numberblocs,
94+
element: <MagicSquares />,
95+
},
96+
{
97+
title: "Tic-Tac-Toe",
98+
description: "Lets beat opponent in TicTacToe",
99+
icon: "https://cdn-icons-png.flaticon.com/512/2076/2076261.png",
100+
urlTerm: "tic-tac-toe",
101+
element: <TicTacToe />,
102+
},
103+
{
104+
title: "Jitter Click Game",
105+
description: "Click as fast as possible to reach 5 stars.... lakshya",
106+
icon: "https://i.kym-cdn.com/entries/icons/original/000/036/070/cover5.jpg",
107+
urlTerm: "jitter-game",
108+
element: <Jitter />,
109+
},
110+
{
111+
title: "Wordle Game",
112+
description: "The normal wordle but you can play as much as you want",
113+
icon: wordleicon,
114+
urlTerm: "Wordle",
115+
element: <Wordle />,
116+
},
117+
{
118+
title: "Guess The Flag",
119+
description: "Learn geography in fun way",
120+
icon: flagger,
121+
urlTerm: "GuessTheFlag",
122+
element: <GuessTheFlag />,
123+
},
124124
];
125-

‎src/pages/games/TicTacToe.js‎

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,70 @@
1-
import { useEffect, useState } from "react";
2-
import axios from "axios";
3-
import "../../styles/pages/activities/RandomQuote.css";
1+
import React, { useState } from "react";
2+
import "../../styles/pages/games/TicTacToe.css";
43

54
export const TicTacToe = () => {
6-
return <div>Hello</div>;
5+
const initialBoard = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
6+
const [board, setBoard] = useState(initialBoard);
7+
const [playerTurn, setPlayerTurn] = useState("X");
8+
const [message, setMessage] = useState("");
9+
10+
const isWinner = (b) => {
11+
const winCombos = [
12+
[0, 1, 2],
13+
[3, 4, 5],
14+
[6, 7, 8],
15+
[0, 3, 6],
16+
[1, 4, 7],
17+
[2, 5, 8],
18+
[0, 4, 8],
19+
[2, 4, 6],
20+
];
21+
return winCombos.some(([a, b1, c]) => b[a] === b[b1] && b[b1] === b[c]);
22+
};
23+
24+
const handleMove = (index) => {
25+
if (message || board[index] === "X" || board[index] === "O") return;
26+
27+
const newBoard = [...board];
28+
newBoard[index] = playerTurn;
29+
setBoard(newBoard);
30+
31+
if (isWinner(newBoard)) {
32+
setMessage(`Player ${playerTurn} wins!`);
33+
return;
34+
}
35+
36+
if (newBoard.every((c) => c === "X" || c === "O")) {
37+
setMessage("DRAW..");
38+
return;
39+
}
40+
41+
setPlayerTurn(playerTurn === "X" ? "O" : "X");
42+
};
43+
44+
const resetGame = () => {
45+
setBoard(initialBoard);
46+
setPlayerTurn("X");
47+
setMessage("");
48+
};
49+
50+
return (
51+
<div className="tictactoe-container">
52+
<h2>Tic Tac Toe</h2>
53+
<div className="board">
54+
{board.map((cell, i) => (
55+
<div key={i} className="cell" onClick={() => handleMove(i)}>
56+
{cell === "X" || cell === "O" ? cell : ""}
57+
</div>
58+
))}
59+
</div>
60+
<p className="status">
61+
{message ? message : `Player ${playerTurn}'s turn`}
62+
</p>
63+
{message && (
64+
<button className="reset-btn" onClick={resetGame}>
65+
Restart
66+
</button>
67+
)}
68+
</div>
69+
);
770
};

‎src/styles/pages/games/TicTacToe.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.tictactoe-container {
2+
text-align: center;
3+
padding: 1rem;
4+
}
5+
6+
.board {
7+
display: grid;
8+
grid-template-columns: repeat(3, 80px);
9+
gap: 5px;
10+
justify-content: center;
11+
margin: 1rem auto;
12+
}
13+
14+
.cell {
15+
width: 80px;
16+
height: 80px;
17+
font-size: 2rem;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
border: 2px solid #333;
22+
cursor: pointer;
23+
background: #f9f9f9;
24+
}
25+
26+
.cell:hover {
27+
background: #e0e0e0;
28+
}
29+
30+
.status {
31+
font-weight: bold;
32+
margin-top: 10px;
33+
}
34+
35+
.reset-btn {
36+
margin-top: 10px;
37+
padding: 0.5rem 1rem;
38+
background: #007bff;
39+
color: white;
40+
border: none;
41+
border-radius: 5px;
42+
cursor: pointer;
43+
}
44+
45+
.reset-btn:hover {
46+
background: #0056b3;
47+
}

0 commit comments

Comments
 (0)