Skip to content
Snippets Groups Projects
Commit 941362c9 authored by FERNANDES SAMUEL's avatar FERNANDES SAMUEL :star:
Browse files

Merge branch 'develop_mode' into 'develop' 

Changements de dernières minutes

See merge request the-sevens/the-sevens!72
parents 60620ea1 a8ca83c1
Branches
Tags
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1704 additions and 2564 deletions
QuizzWeb/app/entry.server.tsx
+ 34
− 33
View file @ 941362c9
......@@ -84,9 +84,9 @@ async function startServer() {
io.on("connection", (socket) => {
console.log(`Client connecté : ${socket.id}`);
socket.onAny((event, ...args) => {
console.log(`[Socket] Événement reçu : ${event}`, args);
});
// socket.onAny((event, ...args) => {
// console.log(`[Socket] Événement reçu : ${event}`, args);
// });
socket.on("joinLobby", ({ lobbyId, username, settings }) => {
// Déconnecter l'ancien socket s'il existe
......@@ -243,7 +243,6 @@ async function startServer() {
}
// Gestion du mode Timer
socket.on("startQuiz", ({ quizId, difficulty }) => {
console.log(
`[Socket] startQuiz reçu : quizId=${quizId}, difficulty=${difficulty}`
......@@ -296,9 +295,7 @@ async function startServer() {
}
}, 1000); // Mise à jour toutes les secondes
}
// SCRUM MODE
function createScrumLobby(lobbyId, quizId) {
// Vérifier si le lobby existe
if (!lobbies[lobbyId]) {
......@@ -361,41 +358,46 @@ async function startServer() {
});
socket.on("joinScrumLobby", ({ lobbyId, username }) => {
console.log(
`[Socket] Demande de rejoindre le Scrum Lobby pour ${lobbyId} par ${username}`
);
if (username) {
console.log(
`[Socket] Demande de rejoindre le Scrum Lobby pour ${lobbyId} par ${username}`
);
// Vérifier si le Scrum Lobby existe
if (!scrumData[lobbyId]) {
console.error(`[Error] Le Scrum Lobby ${lobbyId} n'existe pas.`);
socket.emit("error", { message: "Scrum Lobby introuvable." });
return;
}
// Vérifier si le Scrum Lobby existe
if (!scrumData[lobbyId]) {
console.error(`[Error] Le Scrum Lobby ${lobbyId} n'existe pas.`);
socket.emit("error", { message: "Scrum Lobby introuvable." });
return;
}
// Ajouter l'utilisateur au lobby s'il n'est pas déjà dedans
if (!lobbies[lobbyId]?.participants.includes(username)) {
lobbies[lobbyId].participants.push(username);
}
// Ajouter l'utilisateur au lobby s'il n'est pas déjà dedans
if (!lobbies[lobbyId]?.participants.includes(username)) {
lobbies[lobbyId].participants.push(username);
}
// Si l'utilisateur n'a pas de score, l'ajouter avec un score de 0
if (!scrumData[lobbyId].scores[username]) {
scrumData[lobbyId].scores[username] = 0;
}
// Si l'utilisateur n'a pas de score, l'ajouter avec un score de 0
if (!scrumData[lobbyId].scores[username]) {
scrumData[lobbyId].scores[username] = 0;
}
// Joindre le socket au lobby
socket.join(lobbyId);
// Joindre le socket au lobby
socket.join(lobbyId);
console.log(`[Socket] ${username} a rejoint le Scrum Lobby ${lobbyId}`);
console.log(
`[Socket] ${username} a rejoint le Scrum Lobby ${lobbyId}`
);
// Diffuser les données mises à jour du Scrum Lobby à tous les membres
io.to(lobbyId).emit("scrumLobbyUpdated", {
scores: scrumData[lobbyId].scores,
});
// Diffuser les données mises à jour du Scrum Lobby à tous les membres
io.to(lobbyId).emit("scrumLobbyUpdated", {
scores: scrumData[lobbyId].scores,
});
}
});
socket.on(
"submitScrumAnswer",
({ lobbyId, quizId, username, answer, correct }) => {
console.log("submitScrumAnswer");
const scrum = scrumData[lobbyId];
if (!scrum) {
console.error(
......@@ -427,6 +429,7 @@ async function startServer() {
// Mettre à jour les scores si la réponse est correcte
if (correct) {
console.log("[Socket] Réponse correcte !");
scrum.answered.clear();
scrum.scores[username] = (scrum.scores[username] || 0) + 1;
io.to(lobbyId).emit("updateScrumScores", {
......@@ -434,14 +437,13 @@ async function startServer() {
scores: scrum.scores,
answered: Array.from(scrum.answered),
});
io.to(lobbyId).emit("nextquestion");
io.to(lobbyId).emit("nextquestion" , {username});
}
// Vérifier si tous les participants (ayant un score) ont répondu
const allAnswered = Object.keys(scrum.scores).every((id) =>
scrum.answered.has(id)
);
console.log(scrum.answered);
if (allAnswered) {
scrum.answered.clear();
console.log(
......@@ -453,7 +455,6 @@ async function startServer() {
);
// TEAM MODE
function createTeamLobby(lobbyId, quizId, teams) {
// Vérifier si le lobby existe
if (!lobbies[lobbyId]) {
......
QuizzWeb/app/host.ts
+ 5
− 1
View file @ 941362c9
export const API_URL = import.meta.env.VITE_API_URL || "http://localhost:2728";
export const API_URL =
import.meta.env.VITE_API_URL || "https://kwisos.servegame.com/api";
export const SOCKET_URL =
import.meta.env.VITE_SOCKET_URL || "http://57.129.71.104:8081";
QuizzWeb/app/model/api.ts
+ 0
− 1
View file @ 941362c9
......@@ -467,4 +467,3 @@ export async function generateOptions(args: IAGeneration): Promise<IAResponse> {
throw error;
}
}
QuizzWeb/app/routes/lobby.$mode.$quizId.$lobbyId.$diffiuclty.tsx
+ 51
− 24
View file @ 941362c9
......@@ -6,13 +6,18 @@ import QRCode from "react-qr-code";
import { FaArrowLeft } from "react-icons/fa";
import { Button } from "~/components/ui/button";
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import { useAuth } from "~/context/authContext";
import { UserDetails } from "~/lib/type";
import { getUserDetails } from "~/model/api";
import { SOCKET_URL } from "~/host";
let socket: Socket | null = null;
if (!socket) {
socket = io("http://localhost:8081");
socket = io(SOCKET_URL);
}
export default function LobbyPage() {
const params = useParams();
const fetcher = useFetcher();
const { lobbyId, mode, quizId } = useParams();
const navigate = useNavigate();
......@@ -25,6 +30,8 @@ export default function LobbyPage() {
const [participants, setParticipants] = useState<string[]>([]);
const [teams, setTeams] = useState<any[]>([]);
const [currentTeamIndex, setCurrentTeamIndex] = useState<number>(0);
const { token, login, logout } = useAuth();
const [userDetails, setUser] = useState<UserDetails>();
const maxPlayers = Number(searchParams.get("maxPlayers")) || 4;
const difficulty = searchParams.get("difficulty") || "easy";
......@@ -43,27 +50,23 @@ export default function LobbyPage() {
const initializeSocket = () => {
if (!socket) return;
let userId = localStorage.getItem("userId");
if (!userId) {
userId = `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
localStorage.setItem("userId", userId);
if (userDetails) {
socket.emit("joinLobby", {
lobbyId,
username: String(userDetails?.nickname),
settings: {
mode,
maxPlayers,
difficulty,
teamCount,
teamNames,
teamColors,
teamPlayerLimits,
timerDuration,
},
});
}
socket.emit("joinLobby", {
lobbyId,
username: userId,
settings: {
mode,
maxPlayers,
difficulty,
teamCount,
teamNames,
teamColors,
teamPlayerLimits,
timerDuration,
},
});
socket.on("updateParticipants", (data) => {
setParticipants(data.participants || []);
});
......@@ -102,16 +105,35 @@ export default function LobbyPage() {
socket.off("newMessage");
}
};
}, [lobbyId]);
}, [lobbyId, token, userDetails]);
useEffect(() => {
const fetchQuiz = async () => {
if (token) {
try {
const user = await getUserDetails(String(token));
if (!user) {
throw new Error("This user does not exist");
}
console.log("user", user);
setUser(user);
} catch (error) {
console.error("Error fetching :", error);
}
}
};
fetchQuiz();
}, [token]);
const handleJoinTeam = (teamIndex: number) => {
const userId = localStorage.getItem("userId") || "Anonymous";
const userId = userDetails?.nickname || "Anonymous";
socket?.emit("joinTeam", { lobbyId, teamIndex, username: userId });
};
const handleSendMessage = () => {
if (newMessage.trim()) {
const userId = localStorage.getItem("userId") || "Anonymous";
const userId = userDetails?.nickname || "Anonymous";
socket?.emit("sendMessage", {
lobbyId,
sender: userId,
......@@ -272,8 +294,12 @@ export default function LobbyPage() {
</Button>
</div>
</div>
<QRCode
value={`http://localhost:5173/lobby/${params.mode}/${params.quizzId}/${params.lobbyId}/${params.diffiuclty}`}
size={256}
/>
{participants[0] === localStorage.getItem("userId") && (
{participants[0] === userDetails?.nickname && (
<div className="text-center mt-auto">
<Button
onClick={startGame}
......@@ -287,3 +313,4 @@ export default function LobbyPage() {
</div>
);
}
QuizzWeb/app/routes/quizDifficulty.$mode.$quizId.tsx
+ 3
− 1
View file @ 941362c9
......@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
import NextButton from "~/components/NextButton";
import { Button } from "~/components/ui/button";
import { io, Socket } from "socket.io-client";
import { SOCKET_URL } from "~/host";
let socket: Socket | null = null; // Singleton pour le WebSocket
......@@ -23,7 +24,7 @@ export default function QuizDifficulty() {
useEffect(() => {
if (!socket) {
socket = io("http://localhost:8081");
socket = io(SOCKET_URL);
console.log("[Socket] Connecté au serveur WebSocket.");
}
}, []);
......@@ -102,3 +103,4 @@ export default function QuizDifficulty() {
</div>
);
}
QuizzWeb/app/routes/quizQuestionPage.$mode.$difficulty.$quizId.tsx
+ 3
− 1
View file @ 941362c9
......@@ -14,6 +14,7 @@ import QuestionHeader from "../components/QuestionHeader";
import QuizResultPage from "./quizResultPage";
import { io } from "socket.io-client";
import { useAuth } from "~/context/authContext";
import { SOCKET_URL } from "~/host";
interface AnswerResult {
isCorrect: boolean; // Indique si la réponse de l'utilisateur est correcte
......@@ -51,7 +52,7 @@ export default function QuizQuestionPage() {
let socketConnection = socket;
if (!socketConnection) {
console.log("[Socket] Initialisation...");
socketConnection = io("http://localhost:8081");
socketConnection = io(SOCKET_URL);
setSocket(socketConnection);
}
......@@ -329,3 +330,4 @@ export default function QuizQuestionPage() {
<div className="flex justify-center items-center h-screen w-screen absolute top-0 left-0"></div>
);
}
QuizzWeb/app/routes/quizQuestionPageLobby.$mode.$quizId.$lobbyId.$diffiuclty.tsx deleted 100644 → 0
+ 0
− 254
View file @ 60620ea1
import {
isRouteErrorResponse,
useParams,
useRouteError,
} from "@remix-run/react";
import { useEffect, useState } from "react";
import { OrbitProgress } from "react-loading-indicators";
import ErrorComponent from "~/components/ErrorComponent";
import type { PlayAnswer, PlayQuiz } from "~/lib/type";
import { getQuiz, isCorrectAnswer } from "~/model/api";
import AnswerOption from "../components/AnswerOption";
import NextButton from "../components/NextButton";
import QuestionHeader from "../components/QuestionHeader";
import QuizResultPage from "./quizResultPage";
import { io } from "socket.io-client";
import { useAuth } from "~/context/authContext";
interface AnswerResult {
isCorrect: boolean; // Indique si la réponse de l'utilisateur est correcte
correctAnswer: string;
}
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
return <ErrorComponent error={error.data} />;
}
}
export default function QuizQuestionPage() {
const params = useParams();
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [selectedAnswer, setSelectedAnswer] = useState<PlayAnswer | null>(null);
const [score, setScore] = useState(0);
const [isSubmitted, setIsSubmitted] = useState(false);
const [isQuizFinished, setIsQuizFinished] = useState(false);
const [answeredQuestions, setAnsweredQuestions] = useState(0);
const [isLoading, setLoading] = useState(false);
const [correctAnswer, setCorrectAnswer] = useState<AnswerResult | null>(null);
const [quizz, setLocalQuiz] = useState<PlayQuiz | null>(null);
const { token, login, logout } = useAuth();
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>("");
const [socket, setSocket] = useState<any>(null);
const [teamScores, setTeamScores] = useState<Record<string, number>>({});
const [scrumScores, setScrumScores] = useState<Record<string, number>>({});
useEffect(() => {
const fetchQuiz = async () => {
setLoading(true);
if (token) {
try {
const fetchedQuiz = await getQuiz(
String(params.quizId),
String(token)
);
if (!fetchedQuiz?.idCurrentQuestion) {
setIsQuizFinished(true);
} else {
setLocalQuiz(fetchedQuiz);
setScore(fetchedQuiz?.score || 0);
setCurrentQuestionId(fetchedQuiz?.idCurrentQuestion || null);
}
} catch (error) {
console.error("Error fetching quiz:", error);
} finally {
setLoading(false);
}
}
};
fetchQuiz();
}, [params.quizId, token]);
useEffect(() => {
if (!quizz) return; // Wait for the quiz to be loaded
let socketConnection = socket;
if (!socketConnection) {
console.log("[Socket] Initialisation...");
socketConnection = io("http://localhost:8081");
setSocket(socketConnection);
}
socketConnection.emit("createScrumLobby", {
lobbyId: params.lobbyId,
quizId: params.quizId,
});
socketConnection.emit("joinScrumLobby", {
lobbyId: params.lobbyId,
username: "1736721621021-plorkj7",
});
socketConnection.on("scrumLobbyUpdated", ({ scores }) => {
setScrumScores(scores);
});
socketConnection.on("updateScrumScores", ({ answer, scores }) => {
setSelectedAnswer(answer);
setScrumScores(scores);
});
socketConnection.on("nextquestion", () => {
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionIndex(currentIndex + 1);
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null); // Reset the selected answer
setIsSubmitted(false); // Reset submission state
} else {
setIsQuizFinished(true);
}
});
return () => {
socketConnection.disconnect();
console.log("[Socket] Déconnecté du serveur WebSocket.");
};
}, [quizz]);
const currentQuestion = quizz?.questions.find(
(question) => question.id === currentQuestionId
);
const handleAnswerSelect = async (option: PlayAnswer) => {
if (!isSubmitted && socket && params.lobbyId && params.quizId) {
const userId = localStorage.getItem("userId") || "Anonymous";
setSelectedAnswer(option);
setIsSubmitted(true);
if (currentQuestionId) {
try {
const isAnswerCorrect = await isCorrectAnswer(
currentQuestionId,
option.id,
String(token)
);
setCorrectAnswer({
isCorrect: isAnswerCorrect?.isCorrect ?? false,
correctAnswer: isAnswerCorrect?.correctAnswerId ?? "",
});
socket.emit("submitScrumAnswer", {
lobbyId: params.lobbyId,
quizId: params.quizId,
username: userId,
answer: option,
correct: isAnswerCorrect?.isCorrect,
});
} catch (error) {
console.error(
"Erreur lors de la vérification de la réponse :",
error
);
}
}
}
};
const handleNext = async () => {
if (quizz) {
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
setCurrentQuestionIndex(currentIndex);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null);
setIsSubmitted(false);
} else {
setIsQuizFinished(true);
}
}
};
if (quizz) {
if (isQuizFinished) {
return (
<QuizResultPage
score={score}
totalQuestions={quizz.questions.length}
correct={score}
wrong={quizz.questions.length - score}
quizId={quizz.id}
token={String(token)}
/>
);
}
if (currentQuestion && !isQuizFinished) {
return (
<div className={`flex flex-col items-center min-h-screen bg-gray-50`}>
<QuestionHeader
progress={`${currentQuestionIndex + 1}/${quizz.questions.length}`}
points={score}
question={currentQuestion.text}
quizId={quizz.id}
isSubmitted={isSubmitted}
mode={String(params.mode)}
scores={params.mode === "scrum" ? scrumScores : teamScores}
/>
<div className="w-full max-w-md space-y-4 mt-4">
{currentQuestion.answers.map((option, index) => {
const correct = correctAnswer?.correctAnswer;
const isCorrectOption =
correctAnswer?.isCorrect && option.id === selectedAnswer?.text;
const correctAnswerReveal = currentQuestion.answers.find(
(reponse) => reponse.id == correctAnswer?.correctAnswer
);
console.log(
"verif : ",
correctAnswerReveal.id,
"avec : ",
option.id
);
return (
<AnswerOption
key={index}
label={String.fromCharCode(65 + index)}
type={
currentQuestion.answerType as "text" | "sound" | "image"
}
text={option.text}
ressource={option?.ressource}
isCorrect={option.id === correct || false}
isSelected={option.id === selectedAnswer?.id || false}
onClick={() => handleAnswerSelect(option)}
showResult={!isLoading && isSubmitted}
correctAnswer={correctAnswerReveal?.id} // Transmettre la bonne réponse
answerId={option.id}
/>
);
})}
</div>
<NextButton onClick={handleNext} isSubmitted={isSubmitted} />
</div>
);
}
}
return (
<div className="flex justify-center items-center h-screen">Loading...</div>
);
}
QuizzWeb/app/routes/quizzLobbyPage.$mode.$quizId.$lobbyId.$difficulty.tsx
+ 246
− 220
View file @ 941362c9
import {
isRouteErrorResponse,
useParams,
useRouteError,
} from "@remix-run/react";
import { useEffect, useState } from "react";
import { OrbitProgress } from "react-loading-indicators";
import ErrorComponent from "~/components/ErrorComponent";
import type { PlayAnswer, PlayQuiz } from "~/lib/type";
import { getQuiz, isCorrectAnswer } from "~/model/api";
import AnswerOption from "../components/AnswerOption";
import NextButton from "../components/NextButton";
import QuestionHeader from "../components/QuestionHeader";
import QuizResultPage from "./quizResultPage";
import { io } from "socket.io-client";
interface AnswerResult {
isCorrect: boolean; // Indique si la réponse de l'utilisateur est correcte
correctAnswer: string;
}
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
return <ErrorComponent error={error.data} />;
}
isRouteErrorResponse,
useParams,
useRouteError,
} from "@remix-run/react";
import { useEffect, useState } from "react";
import { OrbitProgress } from "react-loading-indicators";
import ErrorComponent from "~/components/ErrorComponent";
import type { PlayAnswer, PlayQuiz, UserDetails } from "~/lib/type";
import { getQuiz, getUserDetails, isCorrectAnswer } from "~/model/api";
import AnswerOption from "../components/AnswerOption";
import NextButton from "../components/NextButton";
import QuestionHeader from "../components/QuestionHeader";
import QuizResultPage from "./quizResultPage";
import { io } from "socket.io-client";
import { useAuth } from "~/context/authContext";
import { SOCKET_URL } from "~/host";
interface AnswerResult {
isCorrect: boolean; // Indique si la réponse de l'utilisateur est correcte
correctAnswer: string;
}
export function ErrorBoundary() {
const error = useRouteError();
if (isRouteErrorResponse(error)) {
return <ErrorComponent error={error.data} />;
}
export default function QuizQuestionPage() {
const params = useParams();
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [selectedAnswer, setSelectedAnswer] = useState<PlayAnswer | null>(null);
const [score, setScore] = useState(0);
const [isSubmitted, setIsSubmitted] = useState(false);
const [isQuizFinished, setIsQuizFinished] = useState(false);
const [answeredQuestions, setAnsweredQuestions] = useState(0);
const [isLoading, setLoading] = useState(false);
const [correctAnswer, setCorrectAnswer] = useState<AnswerResult | null>(null);
const [quizz, setLocalQuiz] = useState<PlayQuiz | null>(null);
const [token, setToken] = useState<string | null>(null);
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>(
""
);
const [socket, setSocket] = useState<any>(null);
const [teamScores, setTeamScores] = useState<Record<string, number>>({});
const [scrumScores, setScrumScores] = useState<Record<string, number>>({});
useEffect(() => {
}
export default function QuizQuestionPage() {
const params = useParams();
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [selectedAnswer, setSelectedAnswer] = useState<PlayAnswer | null>(null);
const [score, setScore] = useState(0);
const [isSubmitted, setIsSubmitted] = useState(false);
const [isQuizFinished, setIsQuizFinished] = useState(false);
const [answeredQuestions, setAnsweredQuestions] = useState(0);
const [isLoading, setLoading] = useState(false);
const [correctAnswer, setCorrectAnswer] = useState<AnswerResult | null>(null);
const [quizz, setLocalQuiz] = useState<PlayQuiz | null>(null);
const [currentQuestionId, setCurrentQuestionId] = useState<string | null>("");
const [socket, setSocket] = useState<any>(null);
const [teamScores, setTeamScores] = useState<Record<string, number>>({});
const [scrumScores, setScrumScores] = useState<Record<string, number>>({});
const { token, login, logout } = useAuth();
const [userDetails, setUser] = useState<UserDetails>();
useEffect(() => {
const fetchQuiz = async () => {
setLoading(true);
const storedToken =
sessionStorage.getItem("token") || sessionStorage.getItem("guest");
if (storedToken) {
setToken(storedToken);
}
setLoading(false);
}, []);
useEffect(() => {
const fetchQuiz = async () => {
setLoading(true);
if (token) {
try {
const fetchedQuiz = await getQuiz(String(params.quizId), String(token));
if (!fetchedQuiz?.idCurrentQuestion) {
setIsQuizFinished(true);
} else {
if (token) {
try {
const fetchedQuiz = await getQuiz(
String(params.quizId),
String(token)
);
if (!fetchedQuiz?.idCurrentQuestion) {
setIsQuizFinished(true);
} else {
if (fetchedQuiz) {
setLocalQuiz(fetchedQuiz);
setScore(fetchedQuiz?.score || 0);
setCurrentQuestionId(fetchedQuiz?.idCurrentQuestion || null);
const user = await getUserDetails(String(token));
if (!user) {
throw new Error("This user does not exist");
}
setUser(user);
}
} catch (error) {
console.error("Error fetching quiz:", error);
} finally {
setLoading(false);
}
} catch (error) {
console.error("Error fetching quiz:", error);
} finally {
setLoading(false);
}
};
fetchQuiz();
}, [params.quizId, token]);
useEffect(() => {
if (!quizz) return; // Wait for the quiz to be loaded
let socketConnection = socket;
if (!socketConnection) {
console.log("[Socket] Initialisation...");
socketConnection = io("http://localhost:8081");
setSocket(socketConnection);
}
socketConnection.emit("createScrumLobby", {
lobbyId: params.lobbyId,
quizId: params.quizId,
});
socketConnection.emit("joinScrumLobby", {
lobbyId: params.lobbyId,
username: localStorage.getItem("userId"),
});
socketConnection.on("scrumLobbyUpdated", ({ scores }) => {
setScrumScores(scores);
});
socketConnection.on("updateScrumScores", ({ answer, scores }) => {
setSelectedAnswer(answer);
setScrumScores(scores);
});
socketConnection.on("nextquestion", () => {
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionIndex(currentIndex + 1);
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null); // Reset the selected answer
setIsSubmitted(false); // Reset submission state
} else {
setIsQuizFinished(true);
}
});
return () => {
socketConnection.disconnect();
console.log("[Socket] Déconnecté du serveur WebSocket.");
};
}, [quizz]);
const currentQuestion = quizz?.questions.find(
};
fetchQuiz();
}, [params.quizId, token, isSubmitted]);
useEffect(() => {
console.log("test", currentQuestionId);
const currentInd = quizz?.questions.findIndex(
(question) => question.id === currentQuestionId
);
const handleAnswerSelect = async (option: PlayAnswer) => {
if (!isSubmitted && socket && params.lobbyId && params.quizId) {
const userId = localStorage.getItem("userId") || "Anonymous";
setSelectedAnswer(option);
setIsSubmitted(true);
if (currentQuestionId) {
try {
const isAnswerCorrect = await isCorrectAnswer(
currentQuestionId,
option.id,
String(token)
);
setCorrectAnswer({
isCorrect: isAnswerCorrect?.isCorrect ?? false,
correctAnswer: isAnswerCorrect?.correctAnswerId ?? "",
});
console.log(isAnswerCorrect?.isCorrect)
socket.emit("submitScrumAnswer", {
lobbyId: params.lobbyId,
quizId: params.quizId,
username: userId,
answer: option,
correct: isAnswerCorrect?.isCorrect,
});
} catch (error) {
console.error("Erreur lors de la vérification de la réponse :", error);
}
}
setCurrentQuestionIndex(Number(currentInd));
}, [currentQuestionId]);
useEffect(() => {
if (!quizz) return; // Wait for the quiz to be loaded
let socketConnection = socket;
if (!socketConnection) {
console.log("[Socket] Initialisation...");
socketConnection = io(SOCKET_URL);
setSocket(socketConnection);
}
socketConnection.emit("createScrumLobby", {
lobbyId: params.lobbyId,
quizId: params.quizId,
});
socketConnection.emit("joinScrumLobby", {
lobbyId: params.lobbyId,
username: userDetails?.nickname,
});
socketConnection.on("scrumLobbyUpdated", ({ scores }) => {
setScrumScores(scores);
});
socketConnection.on("updateScrumScores", ({ answer, scores }) => {
setSelectedAnswer(answer);
setScrumScores(scores);
});
socketConnection.on("nextquestion", () => {
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionIndex(currentIndex + 1);
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null); // Reset the selected answer
setIsSubmitted(false); // Reset submission state
} else {
setIsQuizFinished(true);
}
};
const handleNext = async () => {
if (quizz) {
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
setCurrentQuestionIndex(currentIndex);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null);
setIsSubmitted(false);
} else {
setIsQuizFinished(true);
});
// return () => {
// socketConnection.disconnect();
// console.log("[Socket] Déconnecté du serveur WebSocket.");
// };
}, [quizz, userDetails, token]);
const currentQuestion = quizz?.questions.find(
(question) => question.id === currentQuestionId
);
const handleAnswerSelect = async (option: PlayAnswer) => {
if (!isSubmitted && socket && params.lobbyId && params.quizId) {
const userId = userDetails?.nickname || "Anonymous";
setSelectedAnswer(option);
setIsSubmitted(true);
if (currentQuestionId) {
console.log("submit");
try {
const isAnswerCorrect = await isCorrectAnswer(
currentQuestionId,
option.id,
String(token)
);
setCorrectAnswer({
isCorrect: isAnswerCorrect?.isCorrect ?? false,
correctAnswer: isAnswerCorrect?.correctAnswerId ?? "",
});
console.log(isAnswerCorrect?.isCorrect);
const timer = setTimeout(() => {
console.log("affichage réponse");
}, 1000);
clearTimeout(timer);
socket.emit("submitScrumAnswer", {
lobbyId: params.lobbyId,
quizId: params.quizId,
username: userId,
answer: option,
correct: isAnswerCorrect?.isCorrect,
});
console.log("socket", socket);
} catch (error) {
console.error(
"Erreur lors de la vérification de la réponse :",
error
);
}
}
};
}
};
const handleNext = async () => {
if (quizz) {
if (isQuizFinished) {
return (
<QuizResultPage
score={scrumScores[localStorage.getItem("userId") || "Anonymous"]}
totalQuestions={quizz.questions.length}
correct={score}
wrong={quizz.questions.length - score}
const currentIndex = quizz.questions.findIndex(
(question) => question.id === currentQuestionId
);
setCurrentQuestionIndex(currentIndex);
if (currentIndex !== -1 && currentIndex < quizz.questions.length - 1) {
const nextQuestionId = quizz.questions[currentIndex + 1].id;
setCurrentQuestionId(nextQuestionId);
setSelectedAnswer(null);
setIsSubmitted(false);
} else {
setIsQuizFinished(true);
}
}
};
if (quizz) {
if (isQuizFinished) {
return (
<QuizResultPage
score={scrumScores[userDetails?.nickname || "Anonymous"]}
totalQuestions={quizz.questions.length}
correct={scrumScores[userDetails.nickname]}
wrong={quizz.questions.length - score}
quizId={quizz.id}
token={String(token)}
/>
);
}
if (currentQuestion && !isQuizFinished) {
return (
<div className={`flex flex-col items-center min-h-screen bg-gray-50`}>
<QuestionHeader
progress={`${currentQuestionIndex + 1}/${quizz.questions.length}`}
points={score}
question={currentQuestion.text}
quizId={quizz.id}
token={String(token)}
isSubmitted={isSubmitted}
mode={String(params.mode)}
scores={params.mode === "scrum" ? scrumScores : teamScores}
/>
);
}
if (currentQuestion && !isQuizFinished) {
return (
<div className={`flex flex-col items-center min-h-screen bg-gray-50`}>
<QuestionHeader
progress={`${currentQuestionIndex + 1}/${quizz.questions.length}`}
points={score}
question={currentQuestion.text}
quizId={quizz.id}
isSubmitted={isSubmitted}
mode={String(params.mode)}
scores={params.mode === "scrum" ? scrumScores : teamScores}
/>
<div className="w-full max-w-md space-y-4 mt-4">
{currentQuestion.answers.map((option, index) => (
<div className="w-full max-w-md space-y-4 mt-4">
{currentQuestion.answers.map((option, index) => {
const correct = correctAnswer?.correctAnswer;
const isCorrectOption =
correctAnswer?.isCorrect && option.id === selectedAnswer?.text;
const correctAnswerReveal = currentQuestion.answers.find(
(reponse) => reponse.id == correctAnswer?.correctAnswer
);
return (
<AnswerOption
key={index}
label={String.fromCharCode(65 + index)}
text={option.text}
isCorrect={
correctAnswer?.isCorrect || false
type={
currentQuestion.answerType as "text" | "sound" | "image"
}
isSelected={option.id === selectedAnswer?.id}
text={option.text}
ressource={option?.ressource}
isCorrect={option.id === correct || false}
isSelected={option.id === selectedAnswer?.id || false}
onClick={() => handleAnswerSelect(option)}
showResult={!isLoading && isSubmitted}
correctAnswer={correctAnswerReveal?.id} // Transmettre la bonne réponse
answerId={option.id}
/>
))}
</div>
);
})}
</div>
);
}
</div>
);
}
return (
<div className="flex justify-center items-center h-screen">Loading...</div>
);
}
\ No newline at end of file
return (
<div className="flex justify-center items-center h-screen">Loading...</div>
);
}
QuizzWeb/package.json
+ 1
− 0
View file @ 941362c9
......@@ -37,6 +37,7 @@
"lucide-react": "^0.454.0",
"multer": "^1.4.5-lts.1",
"nanoid": "^5.0.9",
"qrcode": "^1.5.4",
"react": "^18.2.0",
"react-chartjs-2": "^5.2.0",
"react-circular-progressbar": "^2.1.0",
......
QuizzWeb/yarn.lock
+ 1225
− 1338
View file @ 941362c9
This diff is collapsed.
ZmeiApi/Dockerfile
+ 17
− 4
View file @ 941362c9
This diff is collapsed.
ZmeiApi/package.json
+ 4
− 4
View file @ 941362c9
This diff is collapsed.
ZmeiApi/src/api-docs/openAPIDocumentGenerator.ts
+ 6
− 0
View file @ 941362c9
This diff is collapsed.
ZmeiApi/src/api-docs/openAPIRouter.ts
+ 1
− 1
View file @ 941362c9
This diff is collapsed.
ZmeiApi/src/common/utils/compress.ts
+ 3
− 0
View file @ 941362c9
This diff is collapsed.
ZmeiApi/src/server.ts
+ 1
− 1
View file @ 941362c9
This diff is collapsed.
ZmeiApi/yarn.lock
+ 102
− 680
View file @ 941362c9
This diff is collapsed.
docker-compose.yml
+ 2
− 1
View file @ 941362c9
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment