From 2be66cda3ccd7fe664c77d041adf6fa1d1d29248 Mon Sep 17 00:00:00 2001 From: Ashwini Bisen Date: Wed, 9 Oct 2024 13:02:34 +0530 Subject: [PATCH 1/5] Fix - Fixed Scroll View of Navigation Links --- frontend/src/components/Pages/About.jsx | 4 ++++ frontend/src/components/Pages/Boardgame.jsx | 6 ++++-- frontend/src/components/Pages/Event.jsx | 4 ++++ frontend/src/components/Pages/Home.jsx | 4 ++++ frontend/src/components/Pages/Login.jsx | 6 +++++- frontend/src/components/Pages/Menu.jsx | 6 +++++- frontend/src/components/Pages/MyBook.jsx | 4 ++++ frontend/src/components/Pages/Notfound.jsx | 4 ++++ frontend/src/components/Pages/Pages.jsx | 5 ++++- frontend/src/components/Pages/Register.jsx | 6 +++++- frontend/src/components/Pages/Signup.jsx | 6 +++++- 11 files changed, 48 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx index 794229f3..c3ac6edc 100644 --- a/frontend/src/components/Pages/About.jsx +++ b/frontend/src/components/Pages/About.jsx @@ -1,6 +1,10 @@ import bgpic from "../../assets/img/abt1.jpg"; +import React, { useEffect } from 'react'; export default function About() { + useEffect(() => { + window.scrollTo(0, 0); + }, []); return (
{ + window.scrollTo(0, 0); + }, []); return ( <> diff --git a/frontend/src/components/Pages/Event.jsx b/frontend/src/components/Pages/Event.jsx index ff2fe6c7..627eb383 100644 --- a/frontend/src/components/Pages/Event.jsx +++ b/frontend/src/components/Pages/Event.jsx @@ -111,6 +111,10 @@ export default function Event() { }; }, []); + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( <>
diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx index 4d3ea1d0..0d22861c 100644 --- a/frontend/src/components/Pages/Home.jsx +++ b/frontend/src/components/Pages/Home.jsx @@ -3,8 +3,12 @@ import Landing from "../ui/Landing"; import ReviewCarousel from "../ui/ReviewCarousel"; import FeedbackForm from "../ui/FeedbackForm"; import About from "./About"; +import React, { useEffect } from 'react'; export default function Home() { + useEffect(() => { + window.scrollTo(0, 0); + }, []); return (
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx index 849c39d5..7ac7cfc6 100644 --- a/frontend/src/components/Pages/Login.jsx +++ b/frontend/src/components/Pages/Login.jsx @@ -1,6 +1,6 @@ import { Link } from "react-router-dom"; import photo from "../../assets/login.png"; -import React, { useState } from "react"; +import React, { useState , useEffect } from "react"; const Login = () => { const API_URL = process.env.VITE_BACKEND_URL || "http://localhost:3000"; @@ -41,6 +41,10 @@ const Login = () => { } }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return (
login diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx index 4a36ec53..28fef21e 100644 --- a/frontend/src/components/Pages/Menu.jsx +++ b/frontend/src/components/Pages/Menu.jsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState , useEffect } from 'react'; import { motion } from 'framer-motion'; import Mybook from './MyBook'; import TodaysSpecial from './TodaysSpecial'; @@ -28,6 +28,10 @@ function ParallaxImage() { y: mousePosition.y / 30, }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( <>
diff --git a/frontend/src/components/Pages/MyBook.jsx b/frontend/src/components/Pages/MyBook.jsx index e71059ae..7b78580a 100644 --- a/frontend/src/components/Pages/MyBook.jsx +++ b/frontend/src/components/Pages/MyBook.jsx @@ -42,6 +42,10 @@ function MyBook() { return () => window.removeEventListener('resize', handleResize); }, []); + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return (
{ + useEffect(() => { + window.scrollTo(0, 0); + }, []); return (
diff --git a/frontend/src/components/Pages/Pages.jsx b/frontend/src/components/Pages/Pages.jsx index fe4bddca..d136aecf 100644 --- a/frontend/src/components/Pages/Pages.jsx +++ b/frontend/src/components/Pages/Pages.jsx @@ -1,7 +1,10 @@ -import { forwardRef } from "react"; import PropTypes from "prop-types"; +import React, { useState , useEffect , forwardRef } from 'react'; const Page = forwardRef((props, ref) => { + useEffect(() => { + window.scrollTo(0, 0); + }, []); return (
{props.children}
diff --git a/frontend/src/components/Pages/Register.jsx b/frontend/src/components/Pages/Register.jsx index 5cd9bb9d..e077c73d 100644 --- a/frontend/src/components/Pages/Register.jsx +++ b/frontend/src/components/Pages/Register.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState , useEffect } from "react"; import pic from "../../assets/img/abt1.jpg"; import pic2 from "../../assets/img/abt1.png"; import pic3 from "../../assets/img/abt2.png"; @@ -33,6 +33,10 @@ export default function Register() { .catch((error) => console.log(error)); }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( <>
diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx index b5105c6f..129783c6 100644 --- a/frontend/src/components/Pages/Signup.jsx +++ b/frontend/src/components/Pages/Signup.jsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState , useEffect } from "react"; import photo from "../../assets/login.png"; const Signup = () => { @@ -26,6 +26,10 @@ const Signup = () => { console.log(result); }; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return (
login From 6a0fbf08d65c0a70b513c16105a09edcce8d5586 Mon Sep 17 00:00:00 2001 From: Ashwini Bisen Date: Wed, 9 Oct 2024 21:07:52 +0530 Subject: [PATCH 2/5] Add - Added hover effect to Item boxes , added original and offer prices of the item --- frontend/src/App.css | 11 +++- frontend/src/components/Pages/Menu.jsx | 10 ++- .../src/components/Pages/TodaysSpecial.jsx | 66 +++++++++++++++---- 3 files changed, 72 insertions(+), 15 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index fe1a1f51..af7dc652 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -30,4 +30,13 @@ input[type="radio"] { cursor: pointer; font-size: 2rem; margin-bottom: 0; -} \ No newline at end of file +} + +.card { + transition: all 0.3s ease; /* Ensure smooth transitions */ + } + + /* Shadow effect on hover */ + .card:hover { + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */ + } \ No newline at end of file diff --git a/frontend/src/components/Pages/Menu.jsx b/frontend/src/components/Pages/Menu.jsx index 28fef21e..79788bcc 100644 --- a/frontend/src/components/Pages/Menu.jsx +++ b/frontend/src/components/Pages/Menu.jsx @@ -60,10 +60,16 @@ function ParallaxImage() {

Flip Menu

-
+ {/*
- + */} +
{/* Adjust this container */} + +
+
{/* Add bottom padding here */} + +
); diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx index 97932921..c0d5b9b0 100644 --- a/frontend/src/components/Pages/TodaysSpecial.jsx +++ b/frontend/src/components/Pages/TodaysSpecial.jsx @@ -11,24 +11,25 @@ import caesar_salad from '../../assets/TSimg/caesar_salad.webp'; const menuItems = { coffee: [ - { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso }, - { name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino }, - { name: "Latte", description: "Smooth coffee with steamed milk.", image: latte }, + { name: "Espresso", description: "Rich and bold coffee shot.", image: espresso, originalPrice: "$3.00", offerPrice: "$2.50" }, + { name: "Cappuccino", description: "Creamy coffee with frothy milk.", image: cappuccino, originalPrice: "$3.50", offerPrice: "$3.00" }, + { name: "Latte", description: "Smooth coffee with steamed milk.", image: latte, originalPrice: "$4.00", offerPrice: "$3.50" }, ], drinks: [ - { name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie }, - { name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade }, - { name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea }, + { name: "Mango Smoothie", description: "Refreshing mango blend.", image: mango_smoothie, originalPrice: "$4.50", offerPrice: "$4.00" }, + { name: "Lemonade", description: "Zesty and chilled lemonade.", image: lemonade, originalPrice: "$2.50", offerPrice: "$2.00" }, + { name: "Iced Tea", description: "Cool iced tea with lemon.", image: iced_tea, originalPrice: "$2.00", offerPrice: "$1.50" }, ], food: [ - { name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich }, - { name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera }, - { name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad }, + { name: "Cheese Sandwich", description: "Toasted sandwich with cheese.", image: cheese_sandwich, originalPrice: "$3.50", offerPrice: "$3.00" }, + { name: "Pasta Primavera", description: "Veggies and pasta in a light sauce.", image: pasta_primavera, originalPrice: "$5.50", offerPrice: "$5.00" }, + { name: "Caesar Salad", description: "Crispy salad with Caesar dressing.", image: caesar_salad, originalPrice: "$5.00", offerPrice: "$4.50" }, ], }; const TodaysSpecial = () => { const [todaysSpecial, setTodaysSpecial] = useState({ coffee: {}, drink: {}, food: {} }); + const [hoveredItem, setHoveredItem] = useState(null); // State to track the hovered item // Function to update today's special (cycling through 3 items) const updateTodaysSpecial = () => { @@ -51,20 +52,61 @@ const TodaysSpecial = () => {

Today's Special

-
+ {/* Coffee Card */} +
setHoveredItem('coffee')} + onMouseLeave={() => setHoveredItem(null)} + > {todaysSpecial.coffee.name}

{todaysSpecial.coffee.name}

{todaysSpecial.coffee.description}

+ {/* Show prices below the image and description */} + {hoveredItem === 'coffee' && ( +
+

{todaysSpecial.coffee.originalPrice}

+

{todaysSpecial.coffee.offerPrice}

+
+ )}
-
+ + {/* Food Card */} +
setHoveredItem('food')} + onMouseLeave={() => setHoveredItem(null)} + > {todaysSpecial.food.name}

{todaysSpecial.food.name}

{todaysSpecial.food.description}

+ {/* Show prices below the image and description */} + {hoveredItem === 'food' && ( +
+

{todaysSpecial.food.originalPrice}

+

{todaysSpecial.food.offerPrice}

+
+ )}
-
+ + {/* Drink Card */} +
setHoveredItem('drink')} + onMouseLeave={() => setHoveredItem(null)} + > {todaysSpecial.drink.name}

{todaysSpecial.drink.name}

{todaysSpecial.drink.description}

+ {/* Show prices below the image and description */} + {hoveredItem === 'drink' && ( +
+

{todaysSpecial.drink.originalPrice}

+

{todaysSpecial.drink.offerPrice}

+
+ )}
From d2711fa519d964756456155e890735b6f583e6bb Mon Sep 17 00:00:00 2001 From: Ashwini Bisen Date: Wed, 9 Oct 2024 23:17:53 +0530 Subject: [PATCH 3/5] Pull --- frontend/src/components/Pages/Login.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx index 7ac7cfc6..8d7da4ae 100644 --- a/frontend/src/components/Pages/Login.jsx +++ b/frontend/src/components/Pages/Login.jsx @@ -1,6 +1,6 @@ +import React, { useState , useEffect } from "react"; import { Link } from "react-router-dom"; import photo from "../../assets/login.png"; -import React, { useState , useEffect } from "react"; const Login = () => { const API_URL = process.env.VITE_BACKEND_URL || "http://localhost:3000"; From 19022a62704587aaf9780b69d5e3442728e3f200 Mon Sep 17 00:00:00 2001 From: Ashwini Bisen Date: Fri, 11 Oct 2024 09:23:26 +0530 Subject: [PATCH 4/5] Fix - Fixed Scroll View of Navigation Links --- frontend/src/components/Pages/Boardgame.jsx | 177 +++----------------- frontend/src/components/Pages/Home.jsx | 1 + frontend/src/components/Pages/Login.jsx | 3 - 3 files changed, 20 insertions(+), 161 deletions(-) diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index da454541..64dc8881 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -1,15 +1,14 @@ - -import React, { useState , useEffect } from 'react'; -import board1 from "../../assets/Boardgames/board1.png"; -import board2 from "../../assets/Boardgames/board2.png"; -import board3 from "../../assets/Boardgames/board3.jpg"; -import board4 from "../../assets/Boardgames/board4.png"; -import board5 from "../../assets/Boardgames/board5.png"; -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 bg from "../../assets/Boardgames/bg.jpg"; +import React, { useState } from 'react'; +import board1 from '../../assets/Boardgames/board1.png'; +import board2 from '../../assets/Boardgames/board2.png'; +import board3 from '../../assets/Boardgames/board3.jpg'; +import board4 from '../../assets/Boardgames/board4.png'; +import board5 from '../../assets/Boardgames/board5.png'; +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 bg from '../../assets/Boardgames/bg.jpg'; import { LazyLoadImage } from 'react-lazy-load-image-component'; import 'react-lazy-load-image-component/src/effects/blur.css'; @@ -45,151 +44,9 @@ export default function Boardgame() { } }; - const handleCloseInstructions = () => { - setSelectedBoard(null); - }; - const boards = [ - { - src: "https://th.bing.com/th/id/OSK.HEROqYqMhD-y4GKqP62-uYHPi1C0P_LIEmg92q6L1uwt3xo?rs=1&pid=ImgDetMain", - title: "Monopoly", - description: "Buy, sell, and trade properties to bankrupt your opponents.", - instructions: [ - "Players roll two six-sided dice to determine how many spaces they can move around the board.", - "When a player lands on an unowned property, they can choose to buy it at the price listed on the space.", - "If a player lands on a property owned by another player, they must pay rent, which varies depending on property development.", - "Players can build houses and hotels on their properties to increase the rent other players must pay when they land there.", - "Landing on 'Chance' or 'Community Chest' squares requires drawing a card that can provide rewards or impose penalties.", - "The game continues until all but one player is bankrupt, with the last remaining player declared the winner." - ] - }, - { - src: "https://cdn.cloudflare.steamstatic.com/steam/apps/1088150/capsule_616x353.jpg?t=1605966437", - title: "Scribble", - description: "Create words on a board using letter tiles and score points based on letter value.", - instructions: [ - "Players take turns creating words on a grid using letter tiles.", - "Each letter has a designated point value, and players score based on the total points of the letters used.", - "Players can create new words by adding letters to existing words on the grid, forming crosswords.", - "Bonus spaces on the board may multiply the points for specific words or letters.", - "The player with the highest total score at the end of the game wins." - ] - }, - { - src: "https://th.bing.com/th/id/OIP.dRy3iD5zetm02WmkuYW2bQAAAA?rs=1&pid=ImgDetMain", - title: "Chess", - description: "A strategic game of checkmate, where two players move pieces to capture the opponent's king.", - instructions: [ - "Each player begins with 16 pieces: 1 king, 1 queen, 2 rooks, 2 knights, 2 bishops, and 8 pawns.", - "Players take turns moving one piece at a time according to the specific movement rules of each piece.", - "The objective is to checkmate the opponent's king, meaning the king is under threat of capture with no legal moves to escape.", - "If a king is in check, the player must make a move to remove the check on their next turn.", - "The game can end in checkmate, stalemate, or draw based on various conditions, including insufficient material to checkmate." - ] - }, - { - src: "https://th.bing.com/th/id/OIP.BEqgB5UEEz92gHe3XzLbRAHaEx?rs=1&pid=ImgDetMain", - title: "Life", - description: "Simulate life by choosing a career, family, and lifestyle to accumulate wealth and happiness.", - instructions: [ - "Players spin a wheel to determine how many spaces to move on the board, making choices along the way.", - "As players progress, they make decisions about careers, education, and family, which affect their financial situation.", - "Collect salary and pay bills, and make strategic investments to grow wealth.", - "At the end of the game, players tally their wealth and happiness to determine who has led the most successful life." - ] - }, - { - src: "https://i1.wp.com/www.boardgameanalysis.com/wp-content/uploads/2020/01/DSC_5586.jpg?fit=1200%2C905&ssl=1", - title: "Catan", - description: "Settle the island of Catan in this classic resource management game.", - instructions: [ - "Players roll two six-sided dice to gather resources based on the hexes adjacent to their settlements.", - "Trade resources with other players to obtain what you need to build roads, settlements, and cities.", - "Construct roads to expand your territory and connect to resource-rich areas.", - "The first player to reach 10 victory points through building and development wins the game." - ] - }, - { - src: board2, - title: "Ticket to Ride", - description: "Connect cities across a map and complete your railway routes.", - instructions: [ - "Players collect train cards of various colors to claim routes on the map between cities.", - "To claim a route, players must play a number of cards matching the color and length of the route.", - "Longer routes earn more points, and players can complete secret destination tickets for bonus points.", - "The game ends when a player has two or fewer trains left, at which point final scores are calculated." - ] - }, - { - src: board3, - title: "Pandemic", - description: "Work together to contain the spread of deadly diseases across the globe.", - instructions: [ - "Players take on different roles with unique abilities to strategize and treat infections.", - "Move your character around the board to cities to treat infections, build research stations, and discover cures.", - "Collaborate with teammates to manage outbreaks and ensure diseases do not spread out of control.", - "The team wins by discovering cures for all four diseases before they spread excessively." - ] - }, - { - src: "https://th.bing.com/th/id/OIP.8GSKPTci8prggscpqzpQTAHaDt?rs=1&pid=ImgDetMain", - title: "Codenames", - description: "Compete to make word associations and guess your team's secret code words.", - instructions: [ - "Players are divided into two teams, each with a Spymaster and field operatives.", - "The Spymaster gives one-word clues that relate to multiple words on the grid.", - "Field operatives discuss and guess the words based on the clues given by their Spymaster.", - "The first team to correctly guess all their words without picking the opposing team's words wins." - ] - }, - { - src: "https://th.bing.com/th/id/OIP.uQnK77iWmXoZHH1xgrHXLwHaHa?rs=1&pid=ImgDetMain", - title: "Azul", - description: "Collect and place beautiful tiles to decorate the walls of a palace.", - instructions: [ - "Players take turns drafting tiles from a central market and placing them on their boards.", - "Tiles must be placed in rows and can only be added if they complete a row or column.", - "Earn points for completed rows and patterns, and lose points for unplaced tiles.", - "The game ends when one player completes a row on their board, and the player with the most points wins." - ] - }, - { - src: "https://th.bing.com/th/id/OIP.zie_-I5v0VE5cwVk1P9tswHaEK?rs=1&pid=ImgDetMain", - title: "Cluedo", - description: "Solve the mystery of who committed the murder in the mansion.", - instructions: [ - "Players move their pieces around the mansion to gather clues about the murder.", - "Make deductions about the suspect, weapon, and room based on the clues gathered.", - "Players can make suggestions and must keep track of their findings and other players' clues.", - "The first player to correctly identify the murderer, weapon, and location wins the game." - ] - }, - { - src: "https://th.bing.com/th/id/R.928702e46c4d6f8a5e6ae7a98abc507d?rik=h6j8OdTmlyLETQ&riu=http%3a%2f%2f4.bp.blogspot.com%2f-LL5zs-V6z9Y%2fTil9973hSbI%2fAAAAAAAAAp8%2fC9J5Q3NhWJc%2fs1600%2fstratego-1.jpg&ehk=2C4%2f8CFzZloqDXImPW2gPpTTTPmBLS0mr%2bjXP39OC3s%3d&risl=&pid=ImgRaw&r=0", - title: "Stratego", - description: "Outwit your opponent by moving pieces to capture the flag while protecting your own.", - instructions: [ - "Players secretly set up their pieces on the board, each with a specific rank and ability.", - "Move pieces strategically to capture the opponent's flag while defending your own.", - "Combat occurs when two pieces occupy the same space, with the higher-ranked piece capturing the lower one.", - "The game ends when one player successfully captures the opponent's flag." - ] - }, - { - src: "https://c8.alamy.com/comp/A6GN87/anti-monopoly-board-game-A6GN87.jpg", - title: "Anti-Monopoly", - description: "A twist on Monopoly where competitors and monopolists clash in different business strategies.", - instructions: [ - "Players choose to be either a monopolist or a competitor at the start of the game.", - "Monopolists can form monopolies and charge higher rents on their properties.", - "Competitors aim to disrupt monopolies and benefit from lower prices and fewer fees.", - "The game ends when one group dominates the market, leading to victory." - ] - }, - ]; - - useEffect(() => { - window.scrollTo(0, 0); - }, []); + const handleOpenInstructions = (board) => { + setSelectedBoard(board); + }; const handleCloseInstructions = () => { setSelectedBoard(null); @@ -345,6 +202,10 @@ export default function Boardgame() { }, ]; + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return ( <>
@@ -461,4 +322,4 @@ export default function Boardgame() {
); -} +} \ No newline at end of file diff --git a/frontend/src/components/Pages/Home.jsx b/frontend/src/components/Pages/Home.jsx index c3f467d2..2f5001f1 100644 --- a/frontend/src/components/Pages/Home.jsx +++ b/frontend/src/components/Pages/Home.jsx @@ -17,3 +17,4 @@ export default function Home() {
) +} \ No newline at end of file diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx index 0b593d9e..1833c561 100644 --- a/frontend/src/components/Pages/Login.jsx +++ b/frontend/src/components/Pages/Login.jsx @@ -1,10 +1,7 @@ import React, { useState , useEffect } from "react"; -import { Link } from "react-router-dom"; import photo from "../../assets/login.png"; import { Link, useNavigate } from "react-router-dom"; -import photo from "../../assets/login.png"; -import React, { useState } from "react"; import { message } from "antd"; From b5c86d8648c21a9be67a799291e7963e341cf717 Mon Sep 17 00:00:00 2001 From: Ashwini Bisen Date: Fri, 11 Oct 2024 16:29:34 +0530 Subject: [PATCH 5/5] Add - Added hover effect to Item boxes , added original and offer prices of the item --- frontend/src/components/Pages/Boardgame.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index 64dc8881..96ca0fcf 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState ,useEffect} from 'react'; import board1 from '../../assets/Boardgames/board1.png'; import board2 from '../../assets/Boardgames/board2.png'; import board3 from '../../assets/Boardgames/board3.jpg';