diff --git a/README.md b/README.md index cf249873..1f9188e0 100644 --- a/README.md +++ b/README.md @@ -274,19 +274,19 @@ We extend our heartfelt gratitude to all the amazing contributors who have made - - alo7lika + + Ashwinib26
- alolika bhowmik + Ashwini_ab - - Ashwinib26 + + alo7lika
- Ashwini_ab + alolika bhowmik diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index 2eb6273c..7ada1356 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -1,4 +1,4 @@ -import React, { useState,useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import { Splide, SplideSlide } from '@splidejs/react-splide'; import { AutoScroll } from '@splidejs/splide-extension-auto-scroll'; import '@splidejs/react-splide/css'; @@ -12,16 +12,17 @@ import board6 from '../../assets/Boardgames/board6.png'; import board7 from '../../assets/Boardgames/board7.png'; import board8 from '../../assets/Boardgames/board8.png'; import board10 from '../../assets/Boardgames/board10.png'; -import ludo from "../../assets/Boardgames/ludo.jpg"; -import snake from "../../assets/Boardgames/snake.jpg"; -import tic from "../../assets/Boardgames/tic.png"; -import uno from "../../assets/Boardgames/uno.jpg"; -import word from "../../assets/Boardgames/word.jpg"; -import war from "../../assets/Boardgames/war.jpg"; +import ludo from '../../assets/Boardgames/ludo.jpg'; +import snake from '../../assets/Boardgames/snake.jpg'; +import tic from '../../assets/Boardgames/tic.png'; +import uno from '../../assets/Boardgames/uno.jpg'; +import word from '../../assets/Boardgames/word.jpg'; +import war from '../../assets/Boardgames/war.jpg'; import bg from '../../assets/Boardgames/bg.jpg'; import { LazyLoadImage } from 'react-lazy-load-image-component'; import 'react-lazy-load-image-component/src/effects/blur.css'; import MainHOC from '../MainHOC'; +import { Link } from 'react-router-dom'; export default MainHOC(Boardgame); function Boardgame() { const [selectedBoard, setSelectedBoard] = useState(null); @@ -219,76 +220,79 @@ function Boardgame() { ], }, { - "src": ludo, - "title": "Ludo", - "description": "A classic board game where players race their tokens from start to finish based on dice rolls.", - "instructions": [ - "Players take turns rolling a single die to move their tokens around the board.", - "To enter a token onto the board, players must roll a 6. Tokens move based on the number rolled.", + src: ludo, + title: 'Ludo', + description: + 'A classic board game where players race their tokens from start to finish based on dice rolls.', + instructions: [ + 'Players take turns rolling a single die to move their tokens around the board.', + 'To enter a token onto the board, players must roll a 6. Tokens move based on the number rolled.', "Players can send opponents' tokens back to start by landing on the same space.", - "The first player to move all their tokens into the home area wins the game." - ] + 'The first player to move all their tokens into the home area wins the game.', + ], }, { - "src": snake, - "title": "Snake and Ladders", - "description": "A race game where players climb ladders and avoid snakes to reach the end.", - "instructions": [ - "Players take turns rolling a die to advance their token along the numbered board.", - "If a player lands at the base of a ladder, they climb to the top.", - "If a player lands on the head of a snake, they slide down to its tail.", - "The first player to reach the last square wins the game." - ] + src: snake, + title: 'Snake and Ladders', + description: + 'A race game where players climb ladders and avoid snakes to reach the end.', + instructions: [ + 'Players take turns rolling a die to advance their token along the numbered board.', + 'If a player lands at the base of a ladder, they climb to the top.', + 'If a player lands on the head of a snake, they slide down to its tail.', + 'The first player to reach the last square wins the game.', + ], }, { - "src": tic, - "title": "Tic-Tac-Toe", - "description": "A simple two-player game where players try to get three of their symbols in a row.", - "instructions": [ - "Players take turns placing their symbol (X or O) in an empty square on a 3x3 grid.", - "The first player to align three symbols vertically, horizontally, or diagonally wins.", - "If all squares are filled without a winner, the game ends in a draw." - ] + src: tic, + title: 'Tic-Tac-Toe', + description: + 'A simple two-player game where players try to get three of their symbols in a row.', + instructions: [ + 'Players take turns placing their symbol (X or O) in an empty square on a 3x3 grid.', + 'The first player to align three symbols vertically, horizontally, or diagonally wins.', + 'If all squares are filled without a winner, the game ends in a draw.', + ], }, { - "src": uno, - "title": "Uno", - "description": "A popular card game where players try to be the first to play all their cards.", - "instructions": [ - "Players take turns matching a card from their hand to the top card of the discard pile by color or number.", - "Special action cards can change the gameplay, like skipping a turn or reversing play direction.", + src: uno, + title: 'Uno', + description: + 'A popular card game where players try to be the first to play all their cards.', + instructions: [ + 'Players take turns matching a card from their hand to the top card of the discard pile by color or number.', + 'Special action cards can change the gameplay, like skipping a turn or reversing play direction.', "When a player has one card left, they must yell 'Uno!' to warn others.", - "The first player to play all their cards wins the game." - ] + 'The first player to play all their cards wins the game.', + ], }, { - "src": word, - "title": "Word Finder", - "description": "A fun puzzle game where players create words from a set of letters and fit them into designated boxes.", - "instructions": [ - "Players are given a list of words to find, each composed of letters that can be rearranged.", - "A grid of boxes is provided, where players must fit the words either horizontally, vertically, or diagonally.", - "Each word must be filled in completely, and letters cannot be reused for different words.", - "The goal is to fill in all the boxes with the given words as quickly as possible." - ] + src: word, + title: 'Word Finder', + description: + 'A fun puzzle game where players create words from a set of letters and fit them into designated boxes.', + instructions: [ + 'Players are given a list of words to find, each composed of letters that can be rearranged.', + 'A grid of boxes is provided, where players must fit the words either horizontally, vertically, or diagonally.', + 'Each word must be filled in completely, and letters cannot be reused for different words.', + 'The goal is to fill in all the boxes with the given words as quickly as possible.', + ], }, { - "src": war, - "title": "War", - "description": "A simple two-player card game where players compete to win all the cards.", - "instructions": [ - "The deck is shuffled and split evenly between the two players.", - "Each player reveals the top card of their stack at the same time.", - "The player with the higher card wins both cards and adds them to the bottom of their stack.", + src: war, + title: 'War', + description: + 'A simple two-player card game where players compete to win all the cards.', + instructions: [ + 'The deck is shuffled and split evenly between the two players.', + 'Each player reveals the top card of their stack at the same time.', + 'The player with the higher card wins both cards and adds them to the bottom of their stack.', "In case of a tie, a 'war' occurs: each player places three cards face down and reveals the next card. The higher card wins all the cards on the table.", - "The game continues until one player has all the cards or until players decide to stop." - ] - } - - + 'The game continues until one player has all the cards or until players decide to stop.', + ], + }, ]; - useEffect(() => { window.scrollTo(0, 0); }, []); @@ -317,9 +321,9 @@ function Boardgame() { autoplay: true, lazyLoad: 'sequential', autoScroll: { - speed: 0.2, - pauseOnHover:true - } + speed: 0.2, + pauseOnHover: true, + }, }} className="mx-auto w-full rounded-t-xl object-cover object-center shadow-2xl" > @@ -329,7 +333,7 @@ function Boardgame() { effect="blur" src="https://images.unsplash.com/photo-1656686631034-e88d4fbde1e3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="object-cover w-full" - style={{height : "500px" ,width:"2000px"}} + style={{ height: '500px', width: '2000px' }} /> @@ -338,7 +342,7 @@ function Boardgame() { effect="blur" src="https://images.unsplash.com/photo-1681402720847-961bb1aab8d8?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="object-cover w-full" - style={{height : "500px",width:"2000px"}} + style={{ height: '500px', width: '2000px' }} /> @@ -347,7 +351,7 @@ function Boardgame() { effect="blur" src="https://images.unsplash.com/photo-1609818698346-8cb3be6e0bc0?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="object-cover" - style={{height : "500px",width:"2000px"}} + style={{ height: '500px', width: '2000px' }} /> @@ -356,7 +360,7 @@ function Boardgame() { effect="blur" src="https://images.unsplash.com/photo-1659480142923-0cd01191e0e9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" className="object-cover" - style={{height : "500px",width:"2000px"}} + style={{ height: '500px', width: '2000px' }} /> {/* Add more slides as necessary */} @@ -392,12 +396,14 @@ function Boardgame() { > See Instructions - + + )} diff --git a/frontend/src/components/Pages/Games/TicTacToe.jsx b/frontend/src/components/Pages/Games/TicTacToe.jsx new file mode 100644 index 00000000..ecb76b7f --- /dev/null +++ b/frontend/src/components/Pages/Games/TicTacToe.jsx @@ -0,0 +1,86 @@ +import React, { useState } from 'react'; + +function TicTacToe() { + const [board, setBoard] = useState(Array(9).fill(null)); + const [isXNext, setIsXNext] = useState(true); + const winner = calculateWinner(board); + + const handleClick = (index) => { + if (board[index] || winner) return; + const newBoard = board.slice(); + newBoard[index] = isXNext ? 'X' : 'O'; + setBoard(newBoard); + setIsXNext(!isXNext); + }; + + const resetGame = () => { + setBoard(Array(9).fill(null)); + setIsXNext(true); + }; + + return ( +
+

+ Tic Tac Toe +

+
+ {board.map((value, index) => ( + + ))} +
+
+ {winner ? ( +

+ {winner} Wins! +

+ ) : board.every((cell) => cell) ? ( +

+ It's a Draw! +

+ ) : ( +

+ Next Player: {isXNext ? 'X' : 'O'} +

+ )} + +
+
+ ); +} + +function calculateWinner(board) { + 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 (board[a] && board[a] === board[b] && board[a] === board[c]) { + return board[a]; + } + } + return null; +} + +export default TicTacToe; diff --git a/frontend/src/router/index.jsx b/frontend/src/router/index.jsx index a14a06db..bea782b8 100644 --- a/frontend/src/router/index.jsx +++ b/frontend/src/router/index.jsx @@ -21,6 +21,8 @@ import Admin from '../components/Pages/Admin'; import VerifyOtp from '../components/Pages/VerifyOtp'; import EmailVerify from '../components/Pages/EmailVerify'; import Membership from '../components/Membership'; +import HelpAndSupport from '../components/Pages/HelpAndSupport'; +import TicTacToe from '../components/Pages/Games/TicTacToe'; const router = createBrowserRouter( createRoutesFromElements( }> @@ -28,6 +30,7 @@ const router = createBrowserRouter( } /> } /> } /> + } /> } /> } /> } /> @@ -40,6 +43,7 @@ const router = createBrowserRouter( } /> } /> + ) );