diff --git a/public/ProfilBaseImage.png b/public/ProfilBaseImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..123c902c001c1d4dd715c364adb55b21d129860d
Binary files /dev/null and b/public/ProfilBaseImage.png differ
diff --git a/src/components/quiz/endQuizModal/endQuizModal.css b/src/components/quiz/endQuizModal/endQuizModal.css
index b4e0b680a1c90639b4ec1874ce0752c8ffe38589..d4ab6954ed8e68b5d4d28d78c71fd8d5757ef43f 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 0204e89882affc833b19d3018edc765ebf5c7041..e058c42301f9f90262eec72337e41aec7def0541 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 994f3d4fb35a42ee51319957611339ecda2297bc..86ecf6052fdfff3290007348c1e4df60fcafba16 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 b1d4b1b5e7a38ad2b28e49f12460a3c8bfc48cc1..671a4285b554653b5ae903c99f5d32850bc6e74f 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 03e53f988fd841f50fe6cb9bce7a18d0f35820ff..be26fc9b222b75f43762467f326bc96157a31846 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 585c04b947e8d7570a22ff077690a0e5c8982dce..d6230a2e69e48a9a8ae1b0765853e4ce40609880 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
diff --git a/src/routes/root.tsx b/src/routes/root.tsx
index 6f387779703cd9e79c0c30ead9855cc32e9c11c0..6caf88f8c3f1ff7809770c7f8beb5c83c5a217ba 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>