Skip to content

Commit

Permalink
Merge pull request #127 from Arquisoft/final-frontend
Browse files Browse the repository at this point in the history 
Front End final updates
  • Loading branch information
@ChristianFN2
ChristianFN2 authored Apr 25, 2024
2 parents ec37ac4 + db44bf0 commit 091722d
Show file tree
Hide file tree
Showing 11 changed files with 277 additions and 214 deletions.
107 changes: 55 additions & 52 deletions webapp/src/components/AddUser.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,63 +40,66 @@ const AddUser = () => {
};

return (

<Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
<Typography component="h1" variant="h5">
Register
</Typography>
<TextField
name="username"
margin="normal"
fullWidth
label="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<TextField
name="email"
type='email'
margin="normal"
fullWidth
label="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<TextField
name="password"
margin="normal"
fullWidth
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<TextField
name="cpassword"
<div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
<Container component="main" maxWidth="xs" sx={{ marginTop: 4 }} className='bg-white rounded-xl content-center justify-center'>
<h1 className='py-5 text-4xl font-bold text-[#111827]'>
Register
</h1>
<TextField
name="username"
margin="normal"
fullWidth
label="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<TextField
name="email"
type='email'
margin="normal"
fullWidth
label="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<TextField
name="password"
margin="normal"
fullWidth
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<TextField
name="cpassword"

margin="normal"
fullWidth
label="Confirm Password"
type="password"
value={cpassword}
onChange={(e) => setcPassword(e.target.value)}
/>
<Button variant="contained" color="primary" onClick={addUser}>
Register
</Button>
<Typography component="div" align="center" sx={{ marginTop: 2 }}>
margin="normal"
fullWidth
label="Confirm Password"
type="password"
value={cpassword}
onChange={(e) => setcPassword(e.target.value)}
/>
<div className='py-5 content-center justify-center'>
<Button variant="contained" color="primary" className="flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={addUser}>
Register
</Button>
</div>
<Typography component="div" align="center" sx={{ marginTop: 2, marginBottom: 3 }}>
<Link to="/login">Already have an account? Log in here.</Link>
</Typography>

<Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
{
error && (
<Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
)
}
</Container>
<Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully" />
{
error && (
<Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
)
}
</Container>
</div>



);
};

Expand Down
56 changes: 29 additions & 27 deletions webapp/src/components/Game.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,41 +35,43 @@ const Game = () => {
}, [isAuthenticated, navigate]);

return (
<div>
{isAuthenticated()? (flagGameStarted || cityGameStarted || monumentGameStarted
|| touristAttractionGameStarted || foodGameStarted) ?(
<div>
{flagGameStarted && <Question type="imgs" category="flags"/>}
{cityGameStarted && <Question type="imgs" category="cities"/>}
{monumentGameStarted && <Question type="imgs" category="monuments"/>}
{touristAttractionGameStarted && <Question type="imgs" category="tourist_attractions"/>}
{foodGameStarted && <Question type="imgs" category="foods"/>}
<div className="bg-[#4c2185]" style={{ height: "92.9vh" }}>
{isAuthenticated() ? (flagGameStarted || cityGameStarted || monumentGameStarted
|| touristAttractionGameStarted || foodGameStarted) ? (
<div className="flex justify-center content-center pt-10 h-auto">
{flagGameStarted && <Question type="imgs" category="flags" />}
{cityGameStarted && <Question type="imgs" category="cities" />}
{monumentGameStarted && <Question type="imgs" category="monuments" />}
{touristAttractionGameStarted && <Question type="imgs" category="tourist_attractions" />}
{foodGameStarted && <Question type="imgs" category="foods" />}
</div>
) : (
<div className="flex flex-col items-center justify-center mt-16">
<h1 className="text-6xl font-bold text-zinc-700">{auth.username}, Let's Play! Guess the...</h1>
<button onClick={startFlagsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full
<div className="flex flex-col items-center justify-center">
<h1 className="text-6xl font-bold text-center text-white pt-5">{auth.username}, Let's Play! Guess the...</h1>
<div className="grid grid-cols-1 p-7 gap-5">
<button onClick={startFlagsGame} className="w-auto flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10
transition-transform transform-gpu hover:scale-105">
Flag
</button>
<button onClick={startCitiesGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full
Flag
</button>
<button onClick={startCitiesGame} className="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10
transition-transform transform-gpu hover:scale-105">
City
</button>
<button onClick={startMonumentsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full
City
</button>
<button onClick={startMonumentsGame} className="w-auto flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10
transition-transform transform-gpu hover:scale-105">
Monument
</button>
<button onClick={startTouristAttractionsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full
Monument
</button>
<button onClick={startTouristAttractionsGame} className="flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10
transition-transform transform-gpu hover:scale-105">
Tourist attraction
</button>
<button onClick={startFoodsGame} className="mt-10 border border-blue-500 text-blue-500 font-bold text-2xl py-2 px-4 rounded-full
Tourist attraction
</button>
<button onClick={startFoodsGame} className="w-auto flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10
transition-transform transform-gpu hover:scale-105">
Food
</button>
Food
</button>
</div>
</div>
):""}
) : ""}
</div>
)
};
Expand Down
6 changes: 3 additions & 3 deletions webapp/src/components/ImgGameReport.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ImgGameReport = (props) => {
<div class="rounded-md shadow">
<a href=""
onClick={props.restartGame}
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg">
Restart Game
</a>
</div>
Expand All @@ -32,7 +32,7 @@ const ImgGameReport = (props) => {
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href=""
onClick={loadRankings}
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10">
class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg">
See Rankings
</a>
</div>
Expand All @@ -45,7 +45,7 @@ const ImgGameReport = (props) => {

{answers.map((answer) => {
return (
<div class="flex flex-col rounded-2xl w-80 bg-[#ffffff] shadow-xl" key={answer.associate}>
<div class="flex flex-col rounded-2xl bg-[#ffffff] shadow-xl" key={answer.associate}>
<figure class="flex justify-center items-center rounded-2xl">
<img src={answer.associate} alt="Card Preview" class="rounded-t-2xl"></img>
</figure>
Expand Down
73 changes: 38 additions & 35 deletions webapp/src/components/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const Login = () => {
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const signIn = useSignIn();
const navigate = useNavigate();
const navigate = useNavigate();
const [openSnackbar, setOpenSnackbar] = useState(false);

const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
Expand All @@ -34,7 +34,7 @@ const Login = () => {
}
})) { // Only if you are using refreshToken feature
// Redirect or do-something
navigate('/');
navigate('/');
//window.location.href = '/';
} else {
//Throw error
Expand Down Expand Up @@ -62,42 +62,45 @@ const Login = () => {
};

return (
<div className="content-center justify-center bg-[#2E2F82] " style={{ height: "92.9vh" }}>
<Container component="main" maxWidth="xs" sx={{ marginTop: 4 }} className='bg-white rounded-xl content-center justify-center'>
<h1 className='py-5 text-4xl font-bold text-[#111827]'>
Access WIQ
</h1>
<TextField
name="username"
margin="normal"
fullWidth
label="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<TextField

<Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
<Typography component="h1" variant="h5">
Log in to WIQ
</Typography>
<TextField
name="username"
margin="normal"
fullWidth
label="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<TextField
name="password"
margin="normal"
fullWidth
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button variant="contained" color="primary" onClick={loginUser}>
Log In
</Button>
<Typography component="div" align="center" sx={{ marginTop: 2 }}>
<Link to="/register">New around here? Create account.</Link>
</Typography>
name="password"
margin="normal"
fullWidth
label="Password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<div className='py-5 content-center justify-center'>
<Button variant="contained" className="flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={loginUser}>
Log In
</Button>
</div>
<Typography component="div" align="center" sx={{ marginTop: 2, marginBottom: 3 }}>
<Link to="/register">New around here? Create account.</Link>
</Typography>


<Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
{error && (
<Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
)}
</Container>

<Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
{error && (
<Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
)}
</Container>
</div>
);
};

Expand Down
49 changes: 34 additions & 15 deletions webapp/src/components/MainPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,50 @@ const MainPage = () => {
const auth = useAuthUser();
const navigate = useNavigate();
useEffect(() => {
if(isAuthenticated()===false) {

if (isAuthenticated() === false) {
logged = false;
}else{
} else {
logged = true;
}
}

}
, [logged]);
, [logged]);

return (
<div className="flex flex-col items-center justify-center mt-16">
<div className="flex flex-col items-center justify-center text-center bg-[#2E2F82]" style={{height: "92.9vh"}}>
{logged ?
<div>
<h1 className="text-6xl font-bold text-zinc-700">Welcome back, {auth.username}!</h1>
<hr className=" my-8"/>
<button className="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold rounded-full transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/play")}>
Start Playing
</button>
</div>:

<h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome back, {auth.username}!</h1>


<div className="flex flex-col items-center justify-center">

<div className="basis-1 flex flex-col items-center justify-center">
<button className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg " onClick={() => navigate("/play")}>
Start Playing
</button>
</div>
<div className="flex flex-row mt-5 " >
<button className=" flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/squads")}>
Squads
</button>
<div className="mx-1"/>

<button className=" flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/userProfile")}>
My stats
</button>
</div>
</div>
</div> :
<div>
<h1 className="text-6xl font-bold text-zinc-700">Welcome to WIQ, Please log in to play!</h1>
<button className="px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold rounded-full transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/register")}>
<h1 className="text-6xl font-bold text-white mb-8 text-white">Welcome to WIQ, Please log in to play!</h1>
<div className="basis-1 flex flex-col items-center justify-center">
<button className=" flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10 transition-transform transform-gpu hover:-translate-y-1 hover:shadow-lg" onClick={() => navigate("/register")}>
Create account
</button>
</div>
</div>
}
</div >
Expand Down
Loading

0 comments on commit 091722d

Please sign in to comment.