Skip to content
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.

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

Navbar link's scroll position resolved. #194

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
15 changes: 12 additions & 3 deletions frontend/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,16 @@ input[type='radio'] {
}

.star {
cursor: pointer;
font-size: 2rem;
margin-bottom: 0;
cursor: pointer;
font-size: 2rem;
margin-bottom: 0;
}

.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 */
}
8 changes: 7 additions & 1 deletion frontend/src/components/Pages/About.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import bgpic from '../../assets/img/abt1.jpg';

import bgpic from "../../assets/img/abt1.jpg";
import React, { useEffect } from 'react';


export default function About() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div id="about" className="relative w-full h-screen md:mt-28">
<div
Expand Down
171 changes: 157 additions & 14 deletions frontend/src/components/Pages/Boardgame.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
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 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 { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';
Expand Down Expand Up @@ -44,9 +45,151 @@ export default function Boardgame() {
}
};

const handleOpenInstructions = (board) => {
setSelectedBoard(board);
};
const handleCloseInstructions = () => {
setSelectedBoard(null);
};
Comment on lines +48 to +50
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove duplicate handleCloseInstructions function

The handleCloseInstructions function is defined here and again later in the code (after line 192). Having duplicate definitions can lead to unexpected behavior or confusion.

Please remove one of the definitions to avoid duplication. Here's how you can remove this instance:

-    const handleCloseInstructions = () => {
-        setSelectedBoard(null);
-    };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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);
}, []);
Comment on lines +190 to +192
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove duplicate useEffect for scrolling

The useEffect hook for scrolling to the top is defined here and may already exist earlier in the component. Multiple definitions can cause confusion.

Keep only one instance of the useEffect hook. You can remove this duplicate:

-    useEffect(() => {
-        window.scrollTo(0, 0);
-      }, []);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
useEffect(() => {
window.scrollTo(0, 0);
}, []);


const handleCloseInstructions = () => {
setSelectedBoard(null);
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Pages/Event.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,10 @@ export default function Event() {
};
}, []);

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<>
<div id="event" className="w-full h-fit bg-amber-100 md:overflow-hidden ">
Expand Down
30 changes: 17 additions & 13 deletions frontend/src/components/Pages/Home.jsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
import Landing from '../ui/Landing';
import ReviewCarousel from '../ui/ReviewCarousel';
import FeedbackForm from '../ui/FeedbackForm';
import About from './About';

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() {
return (
<div id="home" className="bg-[#FDF3C7]">
<Landing />
<About />
<ReviewCarousel />
<FeedbackForm />
</div>
);
}
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div id="home" className="bg-[#FDF3C7]">
<Landing />
<About/>
<ReviewCarousel/>
<FeedbackForm />
</div>
)
Ashwinib26 marked this conversation as resolved.
Show resolved Hide resolved
17 changes: 13 additions & 4 deletions frontend/src/components/Pages/Login.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { Link, useNavigate } from 'react-router-dom';
import photo from '../../assets/login.png';
import React, { useState } from 'react';
import { message } from 'antd';

import React, { useState , useEffect } from "react";
import { Link } from "react-router-dom";
import photo from "../../assets/login.png";

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ashwinib26 you add twice it remove and follow code rabit suggestions

import { Link, useNavigate } from "react-router-dom";
import photo from "../../assets/login.png";
import React, { useState } from "react";
import { message } from "antd";
Comment on lines +1 to +8
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Consolidate duplicate imports

There are several duplicate import statements that need to be addressed. This can lead to confusion and potential issues in the future.

Please apply the following changes to clean up the imports:

-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 React, { useState, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import photo from "../../assets/login.png";
import { message } from "antd";

This will remove the duplicate imports and consolidate them into a clean, organized import section.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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";
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import photo from "../../assets/login.png";
import { message } from "antd";
🧰 Tools
🪛 Biome

[error] 5-5: Shouldn't redeclare 'Link'. Consider to delete it or rename it.

'Link' is defined here:

(lint/suspicious/noRedeclare)


[error] 6-6: Shouldn't redeclare 'photo'. Consider to delete it or rename it.

'photo' is defined here:

(lint/suspicious/noRedeclare)


[error] 7-7: Shouldn't redeclare 'React'. Consider to delete it or rename it.

'React' is defined here:

(lint/suspicious/noRedeclare)


[error] 7-7: Shouldn't redeclare 'useState'. Consider to delete it or rename it.

'useState' is defined here:

(lint/suspicious/noRedeclare)



const Login = () => {
const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
Expand Down Expand Up @@ -43,6 +48,10 @@ const Login = () => {
}
};

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<div className="w-screen h-screen flex items-center justify-center pt-10">
<img src={photo} alt="login" className=" w-3/4 absolute" />
Expand Down
18 changes: 15 additions & 3 deletions frontend/src/components/Pages/Menu.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { useState } from 'react';

import { useState , useEffect } from 'react';

import { motion } from 'framer-motion';
import Mybook from './MyBook';
import TodaysSpecial from './TodaysSpecial';
Expand Down Expand Up @@ -28,6 +30,10 @@ function ParallaxImage() {
y: mousePosition.y / 30,
};

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<>
<div
Expand Down Expand Up @@ -61,10 +67,16 @@ function ParallaxImage() {
<h1 className="text-5xl md:text-9xl font-roboto">Flip Menu</h1>
<GiArrowDunk size={60} className="mt-2 text-orange-400" />
</div>
<div className="w-full md:flex md:items-center md:justify-center">
{/* <div className="w-full md:flex md:items-center md:justify-center">
<Mybook />
</div>
<TodaysSpecial /> */}
<div className="w-full md:flex md:items-center md:justify-center mb-20"> {/* Adjust this container */}
<Mybook />
</div>
<TodaysSpecial />
<div className="w-full md:flex md:items-center md:justify-center" style={{ paddingBottom: '80px' }}> {/* Add bottom padding here */}
<TodaysSpecial />
</div>
</div>
</>
);
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Pages/MyBook.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ function MyBook() {
return () => window.removeEventListener('resize', handleResize);
}, []);

useEffect(() => {
window.scrollTo(0, 0);
}, []);

return (
<div
style={BgTextureStyle}
Expand Down
40 changes: 22 additions & 18 deletions frontend/src/components/Pages/Notfound.jsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import Notfound from '../../assets/Menu_assets/Notfound.gif';

const NotFound = () => {
return (
<div>
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-5xl font-bold mb-8 text-center">404 Not Found</h1>
<img
src={Notfound} // Replace with your actual GIF path
alt="Not Found GIF"
className="w-full max-w-md"
/>
<p className="mt-8 text-lg text-gray-700 text-center">
Sorry, the page you are looking for could not be found.
</p>
</div>
</div>
);
};
import Notfound from "../../assets/Menu_assets/Notfound.gif"
import React, { useState , useEffect } from 'react';

const NotFound = () => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div>
<div className="flex flex-col items-center justify-center h-screen">
<h1 className="text-5xl font-bold mb-8 text-center">404 Not Found</h1>
<img
src={Notfound} // Replace with your actual GIF path
alt="Not Found GIF"
className="w-full max-w-md"
/>
<p className="mt-8 text-lg text-gray-700 text-center">
Sorry, the page you are looking for could not be found.
</p>
</div>
</div>
);
}
export default NotFound;
9 changes: 7 additions & 2 deletions frontend/src/components/Pages/Pages.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { forwardRef } from 'react';
import PropTypes from 'prop-types';

import PropTypes from "prop-types";
import React, { useState , useEffect , forwardRef } from 'react';


const Page = forwardRef((props, ref) => {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<div className="demoPage bg-white" ref={ref}>
<div className="h-full">{props.children}</div>
Expand Down
Loading