refactor: playing quiz with SSE

screens/Multiplayer/Lobby/Lobby.tsx

@@ -65,20 +65,19 @@ export default function Lobby({navigation, route}: Props) {
         const es = new EventSource<CustomEventType>(`https://klebert-host.com:33037/party/join/${goodId}`);
         setEsUseState(es);
 
-        es.addEventListener("open", async (event) => {
-            console.log("open event");
+        es.addEventListener("gameStarted",  async (event) => {
+            if(!event.data) return;
+            console.log("Game started event data:",event.data);
             const responseGenerate = await generateRun();
             if(HttpError.isHttpError(responseGenerate)) {
                 console.log("zzzzzzzzz");
                 return;
             }
-            setRunId(responseGenerate);
-        });
+            console.log("generate run",responseGenerate);
 
-        es.addEventListener("gameStarted",  () => {
-            console.log("Game started event data:");
-            console.log("ES envoyé : ", es);
-            navigation.navigate("PlayingQuizMultiMode", {runId: runId, es: es, roomId: roomId, isHost: true});
+            setRunId(responseGenerate);
+            // navigation.navigate("PlayingQuizMultiMode", {runId: responseGenerate, questionCount:event.data.questionCount, es: es, roomId: roomId, isHost: true});
+            navigation.navigate("PlayingQuizMultiMode", {runId: responseGenerate, questionCount: 10, es: es, roomId: roomId, isHost: isHost});
         });
 
         es.addEventListener("userJoined", (event) => {
@@ -136,10 +135,8 @@ export default function Lobby({navigation, route}: Props) {
         navigation.navigate("TabNavigator");
     };
 
-    const onPlayPressed = async () => {
+    const onPlayPressed = () => {
         console.log("playing es :" + esUseState);
-        navigation.navigate("PlayingQuizMultiMode", {runId: runId, socket: esUseState, roomId: roomId});
-
         startParty();
     };
 

screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx

@@ -19,6 +19,7 @@ import {useMultiService} from "../../../../services/MultiService";
 type RoutePropsType = {
     PlayingQuizMultiMode: {
         runId: string;
+        questionCount: number;
         es: EventSource<CustomEventType>;
         roomId: string;
         isHost: boolean;
@@ -37,7 +38,7 @@ interface Props {
 }
 
 export default function PlayingQuizMultiMode({route, navigation}:Props) {
-    const {runId, es, roomId, isHost} = route.params;
+    const {runId, es, roomId,questionCount, isHost} = route.params;
 
     const {getQuizInformations, getRunsInfo} = useQuizService();
     const [quizState, setQuizState] = useState(QuizState.ANSWERING);
@@ -47,22 +48,17 @@ export default function PlayingQuizMultiMode({route, navigation}:Props) {
     const [score, setScore] = useState(0);
     const {nextQuestion} = useMultiService();
 
-    useEffect(() => {
-        console.log("es changed", es);
-    }, [es]);
-
     const initES = () => {
-        setTimeout(()=>{
-            es.addEventListener("nextQuestion", (event) => {
-                console.log("nextQuestion event data:");
-                if (!event.data) return;
-                const question: Question = JSON.parse(event.data);
-                setActualQuestion(question);
-                setQuizState(QuizState.ANSWERING);
-            });
-        },2000)
+        es.addEventListener("nextQuestion", (event) => {
+            console.log("nextQuestion event data:");
+            if (!event.data) return;
+            const question: Question = JSON.parse(event.data);
+            setActualQuestion(question);
+            setQuizState(QuizState.ANSWERING);
+        });
     }
     const fetchRuns = async () => {
+        console.log("run to get info :", runId);
         if (runId === undefined) return;
         const runFetched = await getRunsInfo(runId);
         if (runFetched instanceof HttpError) {
@@ -89,12 +85,13 @@ export default function PlayingQuizMultiMode({route, navigation}:Props) {
         <TemplateDuo
             childrenHeader={<PlayingQuizMultiModeHeader quizInformations={quizInformations} runId={runId}
                                                         actualQuestion={actualQuestion} score={score}
-                                                        navigation={navigation}></PlayingQuizMultiModeHeader>}
+                                                        navigation={navigation} questionCount={10}></PlayingQuizMultiModeHeader>}
             childrenBody={<PlayingQuizMultiModeBody runId={runId} actualQuestion={actualQuestion} es={es}
                                                     fetchActualQuestion={() => {
                                                     }} roomId={roomId} isHost={isHost}
                                                     navigation={navigation}
                                                     quizState={quizState}
+                                                    setScore={setScore}
                                                     setQuizState={setQuizState}>
             </PlayingQuizMultiModeBody>}
         />

screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx

@@ -28,6 +28,7 @@ interface Props {
     isHost: boolean;
     quizState: QuizState;
     setQuizState: (quizState: QuizState) => void;
+    setScore: (score: number) => void;
     navigation: NavigationProp<any>;
 }
 
@@ -74,14 +75,14 @@ const getStyleOfAnswerButton = (answerId: number, selectedAnswerIndex: number |
     return styles.answerButton;
 }
 
-export default function PlayingQuizMultiModeBody({runId, actualQuestion, fetchActualQuestion, roomId, es,isHost, quizState,setQuizState, navigation }: Props) {
+export default function PlayingQuizMultiModeBody({runId, actualQuestion, fetchActualQuestion, roomId, es,isHost, setScore, quizState,setQuizState, navigation }: Props) {
     const [selectedAnswerId, setSelectedAnswerId] = useState<number | null>(null);
     const [correctAnswerId, setCorrectAnswerId] = useState<number | null>(null);
     const [isLastQuestion, setIsLastQuestion] = useState(false);
     const [quizInformations, setQuizInformations] = useState<QuizInformations>();
     const [runInformations, setRunInformations] = useState<RunInformations>();
     const {getRunsInfo, getQuizInformations} = useQuizService();
-    const {revealAnswer, answerQuestion, nextQuestion} = useMultiService();
+    const {revealAnswer, answerQuestion, nextQuestion, getScore} = useMultiService();
     const getCorrectAnswer = (answers: Answer[]): Answer => {
         const correctAnswer = answers.find((answer) => answer.isCorrect);
         if (!correctAnswer) return answers[0];
@@ -117,7 +118,13 @@ export default function PlayingQuizMultiModeBody({runId, actualQuestion, fetchAc
 
         if(isHost)
         {
-            revealAnswer();
+            await revealAnswer();
+            const scoreFetched = await getScore();
+            if(HttpError.isHttpError(scoreFetched))
+            {
+                return;
+            }
+            setScore(scoreFetched);
         }
 
     };

screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx

@@ -14,10 +14,12 @@ interface Props {
     runId?: string;
     actualQuestion?: Question;
     score: number;
+    questionCount: number;
     navigation: NavigationProp<any>
+
 }
 
-export default function PlayingQuizMultiModeHeader({quizInformations, runId, actualQuestion, score, navigation}: Props) {
+export default function PlayingQuizMultiModeHeader({quizInformations, runId, actualQuestion, score, questionCount, navigation}: Props) {
     const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
     const {t} = useTranslation();
 
@@ -42,11 +44,11 @@ export default function PlayingQuizMultiModeHeader({quizInformations, runId, act
             <View style={styles.questionAndScoreContainer}>
                 <View style={styles.InformationsContainer}>
                     <Text style={TextsStyles.titleText}>{t("app.screens.question.question")}</Text>
-                    <Text style={TextsStyles.titleText}>{actualQuestion ? actualQuestion.order + 1 :"?"}/{quizInformations ? quizInformations.questionCount : "?"}</Text>
+                    <Text style={TextsStyles.titleText}>{actualQuestion ? actualQuestion.order + 1 :"?"}/{questionCount}</Text>
                 </View>
                 <View style={styles.InformationsContainer}>
                     <Text style={TextsStyles.titleText}>{t("app.screens.question.score")}</Text>
-                    <Text style={TextsStyles.titleText}>{score}/{quizInformations ? quizInformations.questionCount : "?"}</Text>
+                    <Text style={TextsStyles.titleText}>{score}/{questionCount}</Text>
                 </View>
             </View>
             <View style={styles.QuizQuestionContainer}>

services/MultiService.ts

@@ -35,7 +35,6 @@ export const useMultiService = () => {
             const response = await axios.get(`${url}/party/generateRun`, {
                 withCredentials: true,
             });
-            console.log("Generate run done");
             return response.data.runId;
         } catch (error: any) {
             console.log("Error while generate run:", error);
@@ -129,13 +128,33 @@ export const useMultiService = () => {
         }
     };
 
+    const getScore = async () : Promise<number | HttpError> => {
+        console.log("getScore");
+        try {
+            const response = await axios.get(`${url}/party/score`, {
+                withCredentials: true,
+            });
+            console.log("getScore done");
+            return response.data.score;
+        } catch (error: any) {
+            console.log("Error while startParty:", error);
+
+            if (error.response) {
+                return new HttpError(error.response.status, error.response.data?.message || "HTTP error");
+            } else {
+                return new HttpError(500, "Unexpected error: " + error.message);
+            }
+        }
+    };
+
     return {
         createParty: createParty,
         generateRun: generateRun,
         revealAnswer: revealAnswer,
         nextQuestion: nextQuestion,
         answerQuestion: answerQuestion,
-        startParty: startParty
+        startParty: startParty,
+        getScore: getScore
     }
 
 }
\ No newline at end of file