From 5574c7c3ca7e447eca1c900305bd96a94b2ce396 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 16 Jan 2025 19:43:31 +0100
Subject: [PATCH 1/2] fix: css for modal
---
public/ProfilBaseImage.png | Bin 0 -> 8808 bytes
.../quiz/endQuizModal/endQuizModal.css | 7 +-
.../quiz/endQuizModal/endQuizModal.tsx | 2 +-
.../multiplayer/endQuizModal/endQuizModal.css | 74 +++++++++-----
.../endQuizModal/endQuizModalMulti.tsx | 93 +++++++++++++-----
.../multiplayer/quiz/PlayingQuizMulti.tsx | 35 ++++---
src/routes/profile/profile.css | 4 +-
7 files changed, 140 insertions(+), 75 deletions(-)
create mode 100644 public/ProfilBaseImage.png
diff --git a/public/ProfilBaseImage.png b/public/ProfilBaseImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..123c902c001c1d4dd715c364adb55b21d129860d
GIT binary patch
literal 8808
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
literal 0
HcmV?d00001
diff --git a/src/components/quiz/endQuizModal/endQuizModal.css b/src/components/quiz/endQuizModal/endQuizModal.css
index b4e0b68..d4ab695 100644
--- a/src/components/quiz/endQuizModal/endQuizModal.css
+++ b/src/components/quiz/endQuizModal/endQuizModal.css
@@ -1,4 +1,4 @@
-.end-quiz-modal-overlay {
+.modal-end-quiz-modal-overlay {
position: fixed;
top: 0;
left: 0;
@@ -11,7 +11,7 @@
z-index: 1000;
}
-.end-quiz-modal-content {
+.modal-end-quiz-modal-overlay .end-quiz-modal-content {
display: flex;
flex-direction: column;
justify-content: space-around;
@@ -80,8 +80,9 @@
opacity: 0;
transform: translateY(-50%);
}
+
to {
opacity: 1;
transform: translateY(0);
}
-}
+}
\ No newline at end of file
diff --git a/src/components/quiz/endQuizModal/endQuizModal.tsx b/src/components/quiz/endQuizModal/endQuizModal.tsx
index 0204e89..e058c42 100644
--- a/src/components/quiz/endQuizModal/endQuizModal.tsx
+++ b/src/components/quiz/endQuizModal/endQuizModal.tsx
@@ -29,7 +29,7 @@ export const EndQuizModal = ({ isOpen, quizInformations, score, setIsOpen }: Pro
navigate("/home");
};
return (
- <div className="end-quiz-modal-overlay">
+ <div className="modal-end-quiz-modal-overlay">
<div className="end-quiz-modal-content" onClick={(e) => e.stopPropagation()}>
<div>
<p className="end-quiz-modal-button-title">CONGRATS !</p>
diff --git a/src/routes/multiplayer/endQuizModal/endQuizModal.css b/src/routes/multiplayer/endQuizModal/endQuizModal.css
index 994f3d4..86ecf60 100644
--- a/src/routes/multiplayer/endQuizModal/endQuizModal.css
+++ b/src/routes/multiplayer/endQuizModal/endQuizModal.css
@@ -17,13 +17,16 @@
justify-content: space-around;
align-items: center;
background: white;
- border-radius: 8px;
- width: 30%;
+ width: 40%;
height: 65%;
padding: 20px;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
animation: slide-down 0.3s ease-out;
+ background-color: #ffffff;
+ max-width: 600px;
+ border-radius: 10px;
+ text-align: center;
}
.end-quiz-modal-button-container {
@@ -79,6 +82,7 @@
opacity: 0;
transform: translateY(-50%);
}
+
to {
opacity: 1;
transform: translateY(0);
@@ -99,16 +103,6 @@
z-index: 1000;
}
-.end-quiz-modal-content {
- background-color: #ffffff;
- width: 90%;
- max-width: 600px;
- border-radius: 10px;
- padding: 20px;
- text-align: center;
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-}
-
.end-quiz-modal-button-title {
font-size: 2rem;
font-weight: bold;
@@ -116,10 +110,6 @@
margin-bottom: 10px;
}
-.end-quiz-modal-button-text-container {
- margin-bottom: 20px;
-}
-
.end-quiz-modal-button-text {
font-size: 1.2rem;
color: #333;
@@ -166,21 +156,28 @@
.end-quiz-modal-scores {
display: flex;
- flex-wrap: wrap;
+ /* flex-wrap: wrap; */
justify-content: center;
- gap: 10px;
- margin-bottom: 20px;
+ /* gap: 0.1vmin; */
+ margin-bottom: 2vmin;
+ width: 100%;
+}
+
+.end-quiz-modal-scores-container {
+ width: 100%;
}
.end-quiz-modal-scores .score-item {
display: flex;
+ width: 5vw;
+ height: 20vh;
flex-direction: column;
align-items: center;
font-size: 1rem;
color: #333;
}
-.end-quiz-modal-scores .score-item .score-avatar {
+/* .end-quiz-modal-scores .score-item .score-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
@@ -192,7 +189,7 @@
font-size: 1.2rem;
font-weight: bold;
color: #007bff;
-}
+} */
.end-quiz-modal-stars {
color: #ffd700;
@@ -201,16 +198,39 @@
}
.stars-image {
- width: 80px;
- height: auto;
+ height: 20vh;
+ aspect-ratio: 1 / 1;
display: block;
- margin: 0 auto 20px auto;
+ /* margin: 0 auto 20px auto; */
}
.stars-image-reverse {
- width: 80px;
- height: auto;
+ height: 20vh;
+ aspect-ratio: 1 / 1;
display: block;
- margin: 20px auto 0 auto;
+ /* margin: 20px auto 0 auto; */
transform: rotate(90deg);
}
+
+.player-list-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 2vmin;
+ margin-top: 20px;
+}
+
+.player-list-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin: 5px 0;
+}
+
+.avatar {
+ width: 90%;
+ aspect-ratio: 1 / 1;
+ border-radius: 25;
+}
\ No newline at end of file
diff --git a/src/routes/multiplayer/endQuizModal/endQuizModalMulti.tsx b/src/routes/multiplayer/endQuizModal/endQuizModalMulti.tsx
index b1d4b1b..671a428 100644
--- a/src/routes/multiplayer/endQuizModal/endQuizModalMulti.tsx
+++ b/src/routes/multiplayer/endQuizModal/endQuizModalMulti.tsx
@@ -2,21 +2,62 @@ import "./endQuizModal.css";
import { ModalButton } from "../../../components/quiz/modalButton/modalButton.tsx";
import { useNavigate } from "react-router-dom";
import { MultiplayerQuizInformations } from "../../../models/QuizInformations.ts";
-import {UserEndQuiz} from "../../../models/UserEndQuiz.ts";
+import { UserEndQuiz } from "../../../models/UserEndQuiz.ts";
+import { List } from "../../../components/list/list.tsx";
+import { useEffect, useState } from "react";
+import ListModel from "../../../models/ListModel.ts";
interface Props {
isOpen: boolean;
onClose: () => void;
users: UserEndQuiz[];
+ questionCount: number;
+ score: number;
}
-export const EndQuizModalMulti = ({ isOpen, onClose, users }: Props) => {
+export const EndQuizModalMulti = ({ isOpen, onClose, users, questionCount, score }: Props) => {
+ const [liste, setListe] = useState<ListModel[]>([]);
if (!isOpen) return null;
const navigate = useNavigate();
const handleBackToMenu = () => {
navigate("/multiplayer");
};
+
+ // const renderUser = ({ item, index }: { item: UserEndQuiz; index: number }) => (
+ // <div className={index === 0 ? "first-place score-item" : "score-item"} key={index}>
+ // <img
+ // src={require("../../../assets/ProfilBaseImage.png")} // Replace with actual profile picture if available
+ // className="avatar"
+ // />
+ // <div className="infoContainer">
+ // <p className={index === 0 ? "username username-firstplace" : "username"}>
+ // {item.username.toUpperCase()}
+ // </p>
+ // <p className="score">
+ // {10 + index}/{questionCount} {/* Adjust score logic as needed */}
+ // </p>
+ // </div>
+ // </div>
+ // );
+
+ useEffect(() => {
+ formatliste(users);
+ }, []);
+
+
+ const formatliste = (users: UserEndQuiz[]) => {
+ const temp: ListModel[] = users.map((user, index) => ({
+ id: user.username,
+ title: user.username,
+ content: `${user.score}/${questionCount}`,
+ }));
+ setListe(temp);
+ }
+
+ const toIgnore = (index: string) => {
+ }
+
return (
<div className="end-quiz-modal-overlay">
<div className="end-quiz-modal-content" onClick={(e) => e.stopPropagation()}>
@@ -26,37 +67,37 @@ export const EndQuizModalMulti = ({ isOpen, onClose, users }: Props) => {
<div className="end-quiz-modal-button-text-container">
<p className="end-quiz-modal-button-text">YOU FINISH THE TEST WITH A</p>
<p className="end-quiz-modal-button-text">
- {/*SCORE OF {10}/{quizInformations.questionCount} !*/}
- SCORE OF {10}/{10} !
+ SCORE OF {score}/{questionCount} !
</p>
</div>
- <div>
+ <div className="end-quiz-modal-scores-container">
<div className="end-quiz-modal-scores">
<img src="../../../../public/stars.png" alt="stars picture" className="stars-image" />
- {/*{quizInformations.scores.slice(0, 3).map((score, index) => (*/}
- {/* <div key={index} className="score-item">*/}
- {/* <div className="score-avatar">*/}
- {/* <img*/}
- {/* src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"*/}
- {/* alt="profile picture"*/}
- {/* className="player-image"*/}
- {/* />*/}
- {/* </div>*/}
- {/* <p>{quizInformations.names[index]}</p>*/}
- {/* <p>*/}
- {/* {score}/{quizInformations.questionCount}*/}
- {/* </p>*/}
- {/* </div>*/}
- {/*))}*/}
+ {
+ users.map((user, index) => (
+ index <= 2 ? (
+ <div key={index} className="score-item">
+ <img
+ src="../../../../public/ProfilBaseImage.png" // Replace with actual profile picture if available
+ className="avatar"
+ />
+ <p>{user.username}</p>
+ <p>{user.score}/{questionCount}</p>
+ </div>
+ ) : null
+ ))
+ }
<img src="../../../../public/stars.png" alt="stars picture" className="stars-image-reverse" />
</div>
<div className="end-quiz-modal-scores">
- {/*{quizInformations.scores.slice(3, 8).map((score, index) => (*/}
- {/* <div key={index} className="score-item">*/}
- {/* <p>{quizInformations.names[index + 3]}</p>*/}
- {/* <p>{score}/20</p>*/}
- {/* </div>*/}
- {/*))}*/}
+ <div className="player-list-container">
+ {liste.map((item) => (
+ <div className="player-list-item" key={item.id.toString()}>
+ <div className="player-list-info">{item.title}</div>
+ <div className="player-list-info">{item.content}</div>
+ </div>
+ ))}
+ </div>
</div>
</div>
diff --git a/src/routes/multiplayer/quiz/PlayingQuizMulti.tsx b/src/routes/multiplayer/quiz/PlayingQuizMulti.tsx
index 03e53f9..be26fc9 100644
--- a/src/routes/multiplayer/quiz/PlayingQuizMulti.tsx
+++ b/src/routes/multiplayer/quiz/PlayingQuizMulti.tsx
@@ -1,18 +1,18 @@
import "./quiz.css";
-import {useEffect, useState} from "react";
-import {useMultiplayerService} from "../../../services/MultiplayerService.ts";
-import {QuizTopMulti} from "./quizTop/QuizTopMulti.tsx";
-import {QuizBotMulti} from "./quizBot/QuizBotMulti.tsx";
-import {EndQuizModalMulti} from "../endQuizModal/endQuizModalMulti.tsx";
-import {MultiplayerQuizInformations} from "../../../models/QuizInformations.ts";
-import {Question} from "../../../models/Question.ts";
-import {useLocation} from "react-router-dom";
-import {useQuizService} from "../../../services/QuizService.ts";
-import {useEventSourceContext} from "../../../components/EventSourceContextType.tsx";
-import {PlayingQuizState} from "../../../models/PlayingQuizState.ts";
-import {StopQuizModal} from "../../../components/quiz/stopQuizModal/stopQuizModal.tsx";
-import {UserEndQuiz} from "../../../models/UserEndQuiz.ts";
-import {shuffleAnswers} from "../../../utils/QuizHelper.ts";
+import { useEffect, useState } from "react";
+import { useMultiplayerService } from "../../../services/MultiplayerService.ts";
+import { QuizTopMulti } from "./quizTop/QuizTopMulti.tsx";
+import { QuizBotMulti } from "./quizBot/QuizBotMulti.tsx";
+import { EndQuizModalMulti } from "../endQuizModal/endQuizModalMulti.tsx";
+import { MultiplayerQuizInformations } from "../../../models/QuizInformations.ts";
+import { Question } from "../../../models/Question.ts";
+import { useLocation } from "react-router-dom";
+import { useQuizService } from "../../../services/QuizService.ts";
+import { useEventSourceContext } from "../../../components/EventSourceContextType.tsx";
+import { PlayingQuizState } from "../../../models/PlayingQuizState.ts";
+import { StopQuizModal } from "../../../components/quiz/stopQuizModal/stopQuizModal.tsx";
+import { UserEndQuiz } from "../../../models/UserEndQuiz.ts";
+import { shuffleAnswers } from "../../../utils/QuizHelper.ts";
enum QuizState {
@@ -75,13 +75,16 @@ export function PlayingQuizMulti() {
) : (
<>
<QuizTopMulti quizInformations={null} actualQuestion={actualQuestion} score={score} questionCount={questionCount} setStopQuizModalIsOpen={setStopQuizModalIsOpen} />
- <QuizBotMulti actualQuestion={actualQuestion} isHost={true} setPlayingQuizState={setPlayingQuizState} playingQuizState={playingQuizState} OpenModalEndQuiz={setEndQuizModalIsOpen} setScore={setScore}/>
+ <QuizBotMulti actualQuestion={actualQuestion} isHost={true} setPlayingQuizState={setPlayingQuizState} playingQuizState={playingQuizState} OpenModalEndQuiz={setEndQuizModalIsOpen} setScore={setScore} />
<StopQuizModal isOpen={stopQuizModalIsOpen} onClose={() => setStopQuizModalIsOpen(false)} />
- <EndQuizModalMulti
+ {!endQuizModalIsOpen ? null : <EndQuizModalMulti
isOpen={endQuizModalIsOpen}
onClose={null}
users={users}
+ questionCount={questionCount}
+ score={score}
/>
+ }
</>
)}
{/*{playingQuizState === QuizState.ERROR && <h2>Error: {errorMessage}</h2>}*/}
diff --git a/src/routes/profile/profile.css b/src/routes/profile/profile.css
index 585c04b..d6230a2 100644
--- a/src/routes/profile/profile.css
+++ b/src/routes/profile/profile.css
@@ -170,7 +170,7 @@ input {
font-weight: semi-bold;
}
-img {
+.profile_info img {
width: 10vw;
height: 10vw;
border-radius: 50%;
@@ -250,4 +250,4 @@ img {
.stat-value {
font-size: 0.8rem;
}
-}
+}
\ No newline at end of file
--
GitLab
From fdaa42a504766c6e600631412f44cd48c89bab2f Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Thu, 16 Jan 2025 19:48:14 +0100
Subject: [PATCH 2/2] feat: show multiplayer again
---
src/routes/root.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/routes/root.tsx b/src/routes/root.tsx
index 6f38777..6caf88f 100644
--- a/src/routes/root.tsx
+++ b/src/routes/root.tsx
@@ -16,12 +16,12 @@ export default function Root() {
>
COMMUNITY
</NavLink>
- {/*<NavLink
+ <NavLink
to="/multiplayer"
className={location.pathname === "/multiplayer" ? "selected" : "buttonHeader"}
>
MULTIPLAYER
- </NavLink>*/}
+ </NavLink>
<NavLink to="/profile" className={location.pathname === "/profile" ? "selected" : "buttonHeader"}>
PROFILE
</NavLink>
--
GitLab