From 7f1813f351f76a4285fbf97840fc82ce244a2269 Mon Sep 17 00:00:00 2001
From: GOEPP THOMAS <thomas@saturne-digital.fr>
Date: Sun, 12 Jan 2025 16:34:48 +0100
Subject: [PATCH 1/2] feat: starting playing quiz
---
.../PlayingQuizMultiMode.tsx | 126 ++++++++++
.../PlayingQuizMultiModeBody.tsx | 225 ++++++++++++++++++
.../PlayingQuizMultiModeHeader.tsx | 95 ++++++++
3 files changed, 446 insertions(+)
create mode 100644 screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx
create mode 100644 screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx
create mode 100644 screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx
diff --git a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx
new file mode 100644
index 0000000..e2e6bfc
--- /dev/null
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx
@@ -0,0 +1,126 @@
+import {NavigationProp, RouteProp} from "@react-navigation/native";
+import {useQuizService} from "../../../../services/QuizService";
+import React, {useEffect, useState} from "react";
+import {QuizInformations} from "../../../../models/QuizInformations";
+import {Question} from "../../../../models/Question";
+import {shuffleAnswers} from "../../../../helper/QuizHelper";
+import TemplateDuo from "../../../../templates/TemplateDuo";
+import HttpError from "../../../../services/HttpError";
+import PlayingQuizMultiModeHeader from "./PlayingQuizMultiModeHeader";
+import PlayingQuizMultiModeBody from "./PlayingQuizMultiModeBody";
+
+
+type RoutePropsType = {
+ PlayingQuiz: {
+ runId: string;
+ quizId: string;
+ };
+};
+
+interface Props {
+ route: RouteProp<RoutePropsType, "PlayingQuiz">;
+ navigation: NavigationProp<any>;
+}
+
+export default function PlayingQuizMultiMode({route, navigation}:Props) {
+ const {runId, quizId} = route.params;
+ const { getQuizInformations, getActualQuestionOfAQuiz } = useQuizService();
+ const [quizInformations, setQuizInformations] = useState<QuizInformations | undefined>(undefined);
+ const [actualQuestion, setActualQuestion] = useState<Question | undefined>(undefined);
+ const [score, setScore] = useState(0);
+
+ const fetchQuizInformations = async () => {
+ // const quizInformationsFetched = await getQuizInformations(quizId);
+ // if (HttpError.isHttpError(quizInformationsFetched)) {
+ // return;
+ // }
+ const quizInformationsFetched: QuizInformations = {
+ id: 1,
+ name: "Quiz de Test",
+ description: "Ceci est un quiz de test pour vérifier l'interface.",
+ isCommunity: true,
+ questionCount: 10,
+ categoryId: 2,
+ difficultyId: 3,
+ authorId: {
+ id: 42,
+ username: "TestAuthor",
+ email: "testauthor@example.com"
+ },
+ createdAt: "2025-01-10T10:00:00Z",
+ updatedAt: "2025-01-11T12:00:00Z",
+ category: {
+ id: 2,
+ name: "Science"
+ },
+ difficulty: {
+ id: 3,
+ name: "Moyenne"
+ }
+ };
+
+ setQuizInformations(quizInformationsFetched);
+ }
+
+ const fetchActualQuestion = async () => {
+ const actualQuestionFetched = await getActualQuestionOfAQuiz(runId);
+ if (HttpError.isHttpError(actualQuestionFetched)) {
+ return;
+ }
+ // const actualQuestionFetched: Question = {
+ // id: 1,
+ // text: "Quelle image correspond à une étoile ?",
+ // type: "imae",
+ // categoryId: 2,
+ // quizId: "quiz123",
+ // order: 1,
+ // answers: [
+ // {
+ // id: 1,
+ // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ // isCorrect: true,
+ // questionId: 1
+ // },
+ // {
+ // id: 2,
+ // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ // isCorrect: false,
+ // questionId: 1
+ // },
+ // {
+ // id: 3,
+ // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ // isCorrect: false,
+ // questionId: 1
+ // },
+ // {
+ // id: 4,
+ // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ // isCorrect: false,
+ // questionId: 1
+ // }
+ // ],
+ // category: {
+ // id: 2,
+ // name: "Astronomie"
+ // }
+ // };
+ const actualQuestionFetchedShuffle = shuffleAnswers(actualQuestionFetched);
+ setActualQuestion(actualQuestionFetchedShuffle);
+ }
+
+ useEffect(() => {
+ fetchQuizInformations();
+ }, []);
+
+ useEffect(() => {
+ fetchActualQuestion();
+ }, [quizId]);
+
+ return (
+ <TemplateDuo
+ childrenHeader={<PlayingQuizMultiModeHeader quizInformations={quizInformations} runId={runId} actualQuestion={actualQuestion} score={score} navigation={navigation}></PlayingQuizMultiModeHeader>}
+ childrenBody={<PlayingQuizMultiModeBody quizInformations={quizInformations} runId={runId} actualQuestion={actualQuestion} fetchActualQuestion={fetchActualQuestion} setScore={setScore} navigation={navigation}></PlayingQuizMultiModeBody>}
+ />
+ );
+}
\ No newline at end of file
diff --git a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx
new file mode 100644
index 0000000..f6fc5f5
--- /dev/null
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx
@@ -0,0 +1,225 @@
+import {QuizInformations} from "../../../../models/QuizInformations";
+import {Question} from "../../../../models/Question";
+import {NavigationProp} from "@react-navigation/native";
+import React, {useState} from "react";
+import {useQuizService} from "../../../../services/QuizService";
+import {Answer} from "../../../../models/Answer";
+import HttpError from "../../../../services/HttpError";
+import AnswerButton from "../../../../components/buttons/AnswerButton";
+import {ActivityIndicator, View, Text, StyleSheet} from "react-native";
+import BlueButton from "../../../../components/buttons/BlueButton";
+import {ButtonsStyles} from "../../../../styles/ButtonsStyles";
+
+
+interface Props {
+ quizInformations?: QuizInformations;
+ runId?: string;
+ actualQuestion: Question;
+ fetchActualQuestion: () => void;
+ score: number;
+ setScore: (score: number) => void;
+ navigation: NavigationProp<any>;
+}
+
+enum QuizState {
+ ANSWERING= "Answering",
+ LOADING= "Loading",
+ SHOWING_RESULTS= "ShowingResults",
+}
+
+const getStyleOfAnswerButtonText = (answerId: number, selectedAnswerIndex: number | null, correctAnswerId: number | null, quizState: QuizState) => {
+ if(quizState === QuizState.LOADING)
+ {
+ return styles.loadingText;
+ }
+ if(quizState === QuizState.ANSWERING)
+ {
+ return styles.answerText;
+
+ }
+ if(quizState === QuizState.SHOWING_RESULTS)
+ {
+ if(answerId === correctAnswerId) return styles.correctText;
+ if(answerId !== correctAnswerId && selectedAnswerIndex === answerId) return styles.incorrectText;
+ }
+ return styles.answerText;
+}
+
+const getStyleOfAnswerButton = (answerId: number, selectedAnswerIndex: number | null, correctAnswerId: number | null, quizState: QuizState) => {
+ if(quizState === QuizState.LOADING)
+ {
+ return styles.loadingAnswer;
+ }
+ if(quizState === QuizState.ANSWERING)
+ {
+ if(selectedAnswerIndex === null) return styles.answerButton;
+ if(selectedAnswerIndex === answerId) return styles.selectedAnswer;
+
+ }
+ if(quizState === QuizState.SHOWING_RESULTS)
+ {
+ if(answerId === correctAnswerId) return styles.correctAnswer;
+ if(answerId !== correctAnswerId && selectedAnswerIndex === answerId) return styles.incorrectAnswer;
+ }
+ return styles.answerButton;
+}
+
+export default function PlayingQuizMultiModeBody({ quizInformations, runId, actualQuestion, fetchActualQuestion, score, setScore, navigation }: Props) {
+ const [selectedAnswerId, setSelectedAnswerId] = useState<number | null>(null);
+ const [quizState, setQuizState] = useState(QuizState.ANSWERING);
+ const [correctAnswerId, setCorrectAnswerId] = useState<number | null>(null);
+ const [isLastQuestion, setIsLastQuestion] = useState(false);
+
+ const {answerQuestion} = useQuizService();
+ const getCorrectAnswer = (answers: Answer[]): Answer => {
+ const correctAnswer = answers.find((answer) => answer.isCorrect);
+ if (!correctAnswer) throw new Error("No correct answer found");
+ return correctAnswer;
+ };
+ const onValidation = async () => {
+ if(selectedAnswerId === null) return;
+ setQuizState(QuizState.LOADING);
+ const answerId = actualQuestion.answers.find((answer) => answer.id === selectedAnswerId)?.id;
+ if(!answerId || !runId) return;
+ const answereFetched = await answerQuestion(runId, actualQuestion.id, answerId);
+
+ if (HttpError.isHttpError(answereFetched)) {
+ return;
+ }
+ setScore(answereFetched.score);
+ const correctAnswerIdFetched = getCorrectAnswer(answereFetched.answers.answers).id;
+ setCorrectAnswerId(correctAnswerIdFetched);
+ setQuizState(QuizState.SHOWING_RESULTS);
+
+ if (quizInformations === undefined) return;
+ // Check si c'est la dernière question
+ if(answereFetched.answers.order === quizInformations.questionCount - 1) {
+ setIsLastQuestion(true);
+ return;
+ }
+
+ };
+ const onContinue = () => {
+ if(isLastQuestion) {
+ navigation.reset({
+ index: 0,
+ routes: [
+ {
+ name: "EndQuiz",
+ params: {quizInformations: quizInformations, score: score},
+ },
+ ]
+ });
+ return;
+ }
+ fetchActualQuestion();
+ setQuizState(QuizState.ANSWERING);
+ setSelectedAnswerId(null);
+ setCorrectAnswerId(null);
+ }
+
+ const onAnsweredButtonClicked = (answerId: number) => {
+ if(quizState === QuizState.SHOWING_RESULTS || quizState === QuizState.LOADING) {
+ return;
+ }
+ setSelectedAnswerId(answerId);
+ }
+
+ return (
+ <View style={styles.buttonContainer}>
+ {actualQuestion ? (
+ <>
+ {actualQuestion.answers.map((answer, index) => (
+ <AnswerButton
+ key={index}
+ text={answer.text}
+ handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
+ buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ buttonText={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ />
+ ))}
+ <View style={styles.playButtonContainer}>
+ <BlueButton onPress={() => quizState === QuizState.ANSWERING ? onValidation() : onContinue()} text={quizState === QuizState.ANSWERING ? "CONFIRM" : "CONTINUE"} buttonStyle={{borderRadius: 50}} isDisabled={false}/>
+ </View>
+ </>
+ ) : (
+ <View style={styles.loadingContainer}>
+ <ActivityIndicator size="large" color="#2b73fe" />
+ <Text style={styles.loadingText}>Loading...</Text>
+ </View>
+ )}
+ </View>
+ );
+
+}
+
+const styles = StyleSheet.create({
+ buttonContainer: {
+ display: 'flex',
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ width: '100%',
+ marginVertical: '3%',
+ },
+ loadingContainer: {
+ flex: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ },
+ playButtonContainer: {
+ marginTop: 20, // Ajoute un espacement au-dessus du bouton Play
+ width: '80%', // S'assure que le bouton prend toute la largeur disponible
+ alignItems: 'center', // Centre le bouton horizontalement
+ },
+ correctAnswer: {
+ ...ButtonsStyles.answerButton,
+ borderColor: 'green',
+ borderWidth: 2,
+ },
+ incorrectAnswer: {
+ ...ButtonsStyles.answerButton,
+ borderColor: 'red',
+ borderWidth: 2,
+ },
+ loadingAnswer: {
+ ...ButtonsStyles.answerButton,
+ backgroundColor: '#4F6367',
+ borderWidth: 2,
+ },
+ selectedAnswer: {
+ ...ButtonsStyles.answerButton,
+ borderColor: 'grey',
+ borderWidth: 2,
+ },
+ answerText: {
+ color: 'black',
+ textAlign: 'center',
+ },
+ correctText: {
+ fontWeight: 'bold',
+ color: 'green',
+ },
+ incorrectText: {
+ fontWeight: 'bold',
+ color: 'red',
+ },
+ loadingText: {
+ color: 'black',
+ textAlign: 'center',
+ },
+ answerButton: {
+ backgroundColor: "#F3F3F3",
+ height: '15%',
+ alignItems: 'center',
+ width: '80%',
+ marginVertical: '3%',
+ justifyContent: "center",
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.25,
+ shadowRadius: 3.5,
+ elevation: 5,
+ },
+});
+
diff --git a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx
new file mode 100644
index 0000000..c5da7d2
--- /dev/null
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx
@@ -0,0 +1,95 @@
+import {QuizInformations} from "../../../../models/QuizInformations";
+import {Question} from "../../../../models/Question";
+import {NavigationProp} from "@react-navigation/native";
+import {useTranslation} from "react-i18next";
+import {useState} from "react";
+import {View, Text, StyleSheet} from "react-native";
+import GoHomeButton from "../../../../components/PlayingQuiz/GoHomeButton";
+import {TextsStyles} from "../../../../styles/TextsStyles";
+import ConfirmModal from "../../../../components/PlayingQuiz/ComfirmModal";
+
+interface Props {
+ quizInformations?: QuizInformations;
+ runId?: string;
+ actualQuestion: Question;
+ score: number;
+ navigation: NavigationProp<any>
+}
+
+export default function PlayingQuizMultiModeHeader({quizInformations, runId, actualQuestion, score, navigation}: Props) {
+ const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
+ const {t} = useTranslation();
+
+ const handleConfirmModalConfirm = () => {
+ navigation.reset({
+ index: 0,
+ routes: [
+ {
+ name: "TabNavigator",
+ },
+ ]
+ });
+ }
+
+ return (
+ <View style={styles.container}>
+ <View style={styles.header}>
+ <GoHomeButton navigation={navigation} onPress={setIsConfirmModalVisible}/>
+ <Text style={styles.codeQuizText}>ID QUIZZ : {runId}</Text>
+ </View>
+ <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>
+ </View>
+ <View style={styles.InformationsContainer}>
+ <Text style={TextsStyles.titleText}>{t("app.screens.question.score")}</Text>
+ <Text style={TextsStyles.titleText}>{score}/{quizInformations ? quizInformations.questionCount : "?"}</Text>
+ </View>
+ </View>
+ <View style={styles.QuizQuestionContainer}>
+ <Text style={TextsStyles.subtitleText}>{actualQuestion ? actualQuestion.text : "Loading..."}</Text>
+ </View>
+ <ConfirmModal visible={isConfirmModalVisible} onClose={()=>setIsConfirmModalVisible(false)} onConfirm={handleConfirmModalConfirm}/>
+
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ marginHorizontal: '5%',
+ },
+ questionAndScoreContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ marginVertical: '2%',
+ },
+ InformationsContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: '5%',
+ },
+ QuizNumContainer: {
+ },
+ QuizQuestionContainer: {
+ marginVertical: "2.5%",
+ },
+ infoQuizContainer: {
+ marginBottom: '5%',
+ },
+ codeQuizText: {
+ fontSize: 18,
+ color: '#000000',
+ },
+ header: {
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "flex-start",
+ gap: '5%',
+ }
+});
\ No newline at end of file
--
GitLab
From 646d6dfff279ade7c9a768daa0727cb8ca20accf Mon Sep 17 00:00:00 2001
From: GOEPP THOMAS <thomas@saturne-digital.fr>
Date: Mon, 13 Jan 2025 02:40:45 +0100
Subject: [PATCH 2/2] feat: play game with websockets
---
components/Multiplayer/ModalInvitePlayer.tsx | 7 +-
models/Response/AnswerWsResponse.ts | 5 +
routes/StackNavigator.tsx | 3 +-
screens/Multiplayer/Lobby/Lobby.tsx | 69 +++++++--
.../PlayingQuizMultiMode.tsx | 134 ++++++------------
.../PlayingQuizMultiModeBody.tsx | 95 +++++++------
.../PlayingQuizMultiModeHeader.tsx | 8 +-
.../MultiInformationsOfQuiz.tsx | 2 +-
.../OnlineQuiz/OnlineCreateLobby.tsx | 3 +-
.../Multiplayer/OnlineQuiz/OnlinePlayQuiz.tsx | 47 +++---
.../OnlineQuiz/OnlineSelectMode.tsx | 2 +-
screens/PlayingQuiz/PlayingQuizHeader.tsx | 2 +-
12 files changed, 192 insertions(+), 185 deletions(-)
create mode 100644 models/Response/AnswerWsResponse.ts
diff --git a/components/Multiplayer/ModalInvitePlayer.tsx b/components/Multiplayer/ModalInvitePlayer.tsx
index dbf2294..2c5fab8 100644
--- a/components/Multiplayer/ModalInvitePlayer.tsx
+++ b/components/Multiplayer/ModalInvitePlayer.tsx
@@ -4,9 +4,10 @@ import WhiteButton from "../buttons/WhiteButton";
interface Props {
showModal: boolean;
onClosePressed: () => void;
+ roomId: string;
}
-export default function ModalInvitePlayer({showModal, onClosePressed,}: Props) {
+export default function ModalInvitePlayer({showModal, onClosePressed, roomId}: Props) {
return (
<Modal visible={showModal} animationType="slide" transparent={true}>
<View style={styles.centeredView}>
@@ -14,7 +15,7 @@ export default function ModalInvitePlayer({showModal, onClosePressed,}: Props) {
<Text style={styles.title}>JOIN</Text>
<Image source={require('../../assets/favicon.png')}/>
<Text style={styles.or}>OR</Text>
- <Text style={styles.link}>https://klebert-host.com/join_quiz/6975</Text>
+ <Text style={styles.link}>Room ID: {roomId}</Text>
<View style={styles.buttonGroup}>
<WhiteButton text="CLOSE" onPress={onClosePressed} isDisabled={false}/>
</View>
@@ -68,5 +69,7 @@ const styles = StyleSheet.create({
},
link: {
color: '#0000EE',
+ fontSize: 22,
+ fontWeight: "bold",
}
});
\ No newline at end of file
diff --git a/models/Response/AnswerWsResponse.ts b/models/Response/AnswerWsResponse.ts
new file mode 100644
index 0000000..41d72db
--- /dev/null
+++ b/models/Response/AnswerWsResponse.ts
@@ -0,0 +1,5 @@
+import {Answer} from "../Answer";
+
+export interface AnswerWsResponse {
+ answers: Answer[];
+}
\ No newline at end of file
diff --git a/routes/StackNavigator.tsx b/routes/StackNavigator.tsx
index 86ab70b..58dd246 100644
--- a/routes/StackNavigator.tsx
+++ b/routes/StackNavigator.tsx
@@ -15,6 +15,7 @@ import MyQuizzes from "../screens/Home/MyQuizzes/MyQuizzes";
import InformationsOfQuiz from "../screens/Community/InformationsOfQuiz/InformationsOfQuiz";
import MultiInformationsOfQuiz from "../screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz";
import InformationsOfRuns from "../screens/Home/MyQuizzes/InformationsOfRuns";
+import PlayingQuizMultiMode from "../screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode";
const Stack = createNativeStackNavigator();
@@ -31,7 +32,7 @@ export default function StackNavigator() {
<Stack.Screen name="MyQuizzes" component={MyQuizzes} options={{ headerShown: false }}/>
<Stack.Screen name="InformationsOfQuiz" component={InformationsOfQuiz} options={{ headerShown: false }}/>
<Stack.Screen name="InformationsOfRuns" component={InformationsOfRuns} options={{ headerShown: false }}/>
-
+ <Stack.Screen name="PlayingQuizMultiMode" component={PlayingQuizMultiMode} options={{ headerShown: false }}/>
<Stack.Screen name="Multiplayer" component={Multiplayer} options={{ headerShown: false }}/>
<Stack.Screen name="MultiplayerCommunity" component={MultiplayerCommunity} options={{ headerShown: false }}/>
<Stack.Screen name="OnlineQuiz" component={OnlineQuiz} options={{ headerShown: false }}/>
diff --git a/screens/Multiplayer/Lobby/Lobby.tsx b/screens/Multiplayer/Lobby/Lobby.tsx
index c5a24eb..bdcdb42 100644
--- a/screens/Multiplayer/Lobby/Lobby.tsx
+++ b/screens/Multiplayer/Lobby/Lobby.tsx
@@ -18,19 +18,24 @@ interface Props {
type RoutePropsType = {
Lobby: {
- runId: string;
+ quizIdOrRoomId: string;
nbPlayers: number;
+ isHost: boolean;
};
};
+
+
export default function Lobby({navigation, route}: Props) {
- const { runId, nbPlayers} = route.params;
+ const { quizIdOrRoomId, nbPlayers, isHost} = route.params;
- const [isHost, setIsHost] = useState<boolean>(true);
+ // const [isHost, setIsHost] = useState<boolean>(true);
const [showModal, setShowModal] = useState<boolean>(false);
const [players, setPlayers] = useState<User[]>([{ id: 0, username: 'Invite', email: 'invite@email.com'}]);
const {getCookie} = useCookie('access_token');
const [socket, setSocket] = useState<Socket | null>(null);
+ const [roomId, setRoomId] = useState<string>("");
+ const [runId, setRunId] = useState<string>("");
const userInvite = { id: 0, username: 'Invite', email: 'invite@email.com'}
const initSocket = async () => {
@@ -43,11 +48,39 @@ export default function Lobby({navigation, route}: Props) {
});
setSocket(newSocket);
+ console.log(isHost);
- newSocket.on("connect", () => {
- console.log("Connected to the socket server id :",runId);
- newSocket.emit("joinRoom", { roomId: runId });
- });
+ if(isHost) {
+ newSocket.on("roomCreated", (data) => {
+ console.log("Room created : ", data.id);
+ console.log("Connected to the server");
+
+ setRoomId(data.id);
+ console.log("Host id room : ", data.id);
+ newSocket.emit("joinRoom", { roomId: data.id });
+
+ setTimeout(() => {
+ console.log("Sending generateRun");
+ newSocket.emit("generateRun");
+ },1000);
+ });
+
+ newSocket.on("connect", () => {
+ newSocket.emit("createRoom", { quizId: quizIdOrRoomId });
+ });
+ console.log("Host");
+
+ }
+ else {
+ console.log("pas Host id room : ", quizIdOrRoomId);
+ newSocket.emit("joinRoom", { roomId: quizIdOrRoomId });
+
+ setTimeout(() => {
+ console.log("Sending generateRun");
+ newSocket.emit("generateRun");
+ },1000);
+
+ }
newSocket.on("connect_error", (err) => {
console.error("Connection error: ", err.message);
@@ -63,16 +96,22 @@ export default function Lobby({navigation, route}: Props) {
setPlayers([userInvite, ...data]);
});
- // Nettoyez la connexion lorsque le composant est démonté
- return () => {
- newSocket.disconnect();
- setSocket(null);
- };
+ newSocket.on("runId", (data) => {
+ console.log("Run ID:", data);
+ setRunId(data);
+ });
}
+
+
useEffect(() => {
initSocket();
- }, [runId]);
+ // return () => {
+ // if(socket === null) return;
+ // socket.disconnect();
+ // setSocket(null);
+ // };
+ }, []);
const item = ({ item }: { item: User }) => {
return (
@@ -101,7 +140,7 @@ export default function Lobby({navigation, route}: Props) {
};
const onPlayPressed = () => {
- navigation.navigate("PlayingQuiz", {quizId: 1});//TODO : changer le quizId
+ navigation.navigate("PlayingQuizMultiMode", {runId: runId, socket: socket, roomId: roomId});
};
const onCancelPressed = () => {
@@ -142,7 +181,7 @@ export default function Lobby({navigation, route}: Props) {
}
</View>
</TemplateMenu>
- <ModalInvitePlayer showModal={showModal} onClosePressed={() => setShowModal(false)}/>
+ <ModalInvitePlayer showModal={showModal} onClosePressed={() => setShowModal(false)} roomId={roomId} />
</View>
)
}
diff --git a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx
index e2e6bfc..78c1760 100644
--- a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx
@@ -3,124 +3,82 @@ import {useQuizService} from "../../../../services/QuizService";
import React, {useEffect, useState} from "react";
import {QuizInformations} from "../../../../models/QuizInformations";
import {Question} from "../../../../models/Question";
-import {shuffleAnswers} from "../../../../helper/QuizHelper";
import TemplateDuo from "../../../../templates/TemplateDuo";
import HttpError from "../../../../services/HttpError";
import PlayingQuizMultiModeHeader from "./PlayingQuizMultiModeHeader";
import PlayingQuizMultiModeBody from "./PlayingQuizMultiModeBody";
+import {Socket} from "socket.io-client";
+import {QuestionResponse} from "../../../../models/Response/QuestionResponse";
+import {RunInformations} from "../../../../models/RunInformations";
type RoutePropsType = {
- PlayingQuiz: {
+ PlayingQuizMultiMode: {
runId: string;
- quizId: string;
+ socket: Socket;
+ roomId: string;
};
};
interface Props {
- route: RouteProp<RoutePropsType, "PlayingQuiz">;
+ route: RouteProp<RoutePropsType, "PlayingQuizMultiMode">;
navigation: NavigationProp<any>;
}
export default function PlayingQuizMultiMode({route, navigation}:Props) {
- const {runId, quizId} = route.params;
- const { getQuizInformations, getActualQuestionOfAQuiz } = useQuizService();
+ const {runId, socket, roomId} = route.params;
+ const { getQuizInformations, getRunsInfo } = useQuizService();
const [quizInformations, setQuizInformations] = useState<QuizInformations | undefined>(undefined);
- const [actualQuestion, setActualQuestion] = useState<Question | undefined>(undefined);
+ const [runInformations, setRunInformations] = useState<RunInformations>();
+ const [actualQuestion, setActualQuestion] = useState<QuestionResponse | undefined>(undefined);
const [score, setScore] = useState(0);
- const fetchQuizInformations = async () => {
- // const quizInformationsFetched = await getQuizInformations(quizId);
- // if (HttpError.isHttpError(quizInformationsFetched)) {
- // return;
- // }
- const quizInformationsFetched: QuizInformations = {
- id: 1,
- name: "Quiz de Test",
- description: "Ceci est un quiz de test pour vérifier l'interface.",
- isCommunity: true,
- questionCount: 10,
- categoryId: 2,
- difficultyId: 3,
- authorId: {
- id: 42,
- username: "TestAuthor",
- email: "testauthor@example.com"
- },
- createdAt: "2025-01-10T10:00:00Z",
- updatedAt: "2025-01-11T12:00:00Z",
- category: {
- id: 2,
- name: "Science"
- },
- difficulty: {
- id: 3,
- name: "Moyenne"
- }
- };
+ const initSocket = async () => {
+ socket.on("gameStarted", (data) => {
+ console.log("Game started:", data);
+ });
+
+ socket.on("newQuestion", (data) => {
+ const question: QuestionResponse = data as QuestionResponse
+ setActualQuestion(question);
+ // console.log(JSON.stringify(question, null, 2)); // Beautifie le JSON avec 2 espaces d'indentation
+ });
- setQuizInformations(quizInformationsFetched);
}
- const fetchActualQuestion = async () => {
- const actualQuestionFetched = await getActualQuestionOfAQuiz(runId);
- if (HttpError.isHttpError(actualQuestionFetched)) {
+ const fetchRuns = async () => {
+ if(runId === undefined) return;
+ const runFetched = await getRunsInfo(runId);
+ if (runFetched instanceof HttpError) {
+ console.log("Error fetching runs info", runFetched);
return;
}
- // const actualQuestionFetched: Question = {
- // id: 1,
- // text: "Quelle image correspond à une étoile ?",
- // type: "imae",
- // categoryId: 2,
- // quizId: "quiz123",
- // order: 1,
- // answers: [
- // {
- // id: 1,
- // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- // isCorrect: true,
- // questionId: 1
- // },
- // {
- // id: 2,
- // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- // isCorrect: false,
- // questionId: 1
- // },
- // {
- // id: 3,
- // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- // isCorrect: false,
- // questionId: 1
- // },
- // {
- // id: 4,
- // text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- // isCorrect: false,
- // questionId: 1
- // }
- // ],
- // category: {
- // id: 2,
- // name: "Astronomie"
- // }
- // };
- const actualQuestionFetchedShuffle = shuffleAnswers(actualQuestionFetched);
- setActualQuestion(actualQuestionFetchedShuffle);
- }
+ const quizInformationsFetched = await getQuizInformations(runFetched.quizId);
+ if (quizInformationsFetched instanceof HttpError) {
+ console.log("Error fetching quiz info", quizInformationsFetched);
+ return;
+ }
+ setQuizInformations(quizInformationsFetched);
+ setRunInformations(runFetched);
+ };
useEffect(() => {
- fetchQuizInformations();
- }, []);
+ console.log("PlayingQuizMultiMode starting");
+ initSocket();
+ fetchRuns();
+ setTimeout(() => {
+ socket.emit("startGame")
+ },500);
- useEffect(() => {
- fetchActualQuestion();
- }, [quizId]);
+ setTimeout(() => {
+ socket.emit("nextQuestion");
+ },2000);
+ }, []);
return (
<TemplateDuo
- childrenHeader={<PlayingQuizMultiModeHeader quizInformations={quizInformations} runId={runId} actualQuestion={actualQuestion} score={score} navigation={navigation}></PlayingQuizMultiModeHeader>}
- childrenBody={<PlayingQuizMultiModeBody quizInformations={quizInformations} runId={runId} actualQuestion={actualQuestion} fetchActualQuestion={fetchActualQuestion} setScore={setScore} navigation={navigation}></PlayingQuizMultiModeBody>}
+ childrenHeader={<PlayingQuizMultiModeHeader quizInformations={quizInformations} runId={runId} actualQuestion={actualQuestion} score={score} navigation={navigation}></PlayingQuizMultiModeHeader>}
+ childrenBody={<PlayingQuizMultiModeBody runId={runId} actualQuestion={actualQuestion} socket={socket} fetchActualQuestion={()=>{}} roomId={roomId} navigation={navigation}></PlayingQuizMultiModeBody>}
/>
);
}
\ No newline at end of file
diff --git a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx
index f6fc5f5..1a5d713 100644
--- a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx
@@ -1,7 +1,7 @@
import {QuizInformations} from "../../../../models/QuizInformations";
import {Question} from "../../../../models/Question";
import {NavigationProp} from "@react-navigation/native";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
import {useQuizService} from "../../../../services/QuizService";
import {Answer} from "../../../../models/Answer";
import HttpError from "../../../../services/HttpError";
@@ -9,15 +9,18 @@ import AnswerButton from "../../../../components/buttons/AnswerButton";
import {ActivityIndicator, View, Text, StyleSheet} from "react-native";
import BlueButton from "../../../../components/buttons/BlueButton";
import {ButtonsStyles} from "../../../../styles/ButtonsStyles";
+import {QuestionResponse} from "../../../../models/Response/QuestionResponse";
+import {RunInformations} from "../../../../models/RunInformations";
+import {Socket} from "socket.io-client";
+import {AnswerWsResponse} from "../../../../models/Response/AnswerWsResponse";
interface Props {
- quizInformations?: QuizInformations;
runId?: string;
- actualQuestion: Question;
+ actualQuestion?: QuestionResponse;
fetchActualQuestion: () => void;
- score: number;
- setScore: (score: number) => void;
+ socket: Socket;
+ roomId: string;
navigation: NavigationProp<any>;
}
@@ -46,6 +49,9 @@ const getStyleOfAnswerButtonText = (answerId: number, selectedAnswerIndex: numbe
}
const getStyleOfAnswerButton = (answerId: number, selectedAnswerIndex: number | null, correctAnswerId: number | null, quizState: QuizState) => {
+ console.log("answerId :", answerId);
+ console.log("selectedAnswerIndex :", selectedAnswerIndex);
+ console.log("correctAnswerId :", correctAnswerId);
if(quizState === QuizState.LOADING)
{
return styles.loadingAnswer;
@@ -64,58 +70,61 @@ const getStyleOfAnswerButton = (answerId: number, selectedAnswerIndex: number |
return styles.answerButton;
}
-export default function PlayingQuizMultiModeBody({ quizInformations, runId, actualQuestion, fetchActualQuestion, score, setScore, navigation }: Props) {
+export default function PlayingQuizMultiModeBody({runId, actualQuestion, fetchActualQuestion, roomId, socket, navigation }: Props) {
const [selectedAnswerId, setSelectedAnswerId] = useState<number | null>(null);
const [quizState, setQuizState] = useState(QuizState.ANSWERING);
const [correctAnswerId, setCorrectAnswerId] = useState<number | null>(null);
const [isLastQuestion, setIsLastQuestion] = useState(false);
+ const [quizInformations, setQuizInformations] = useState<QuizInformations>();
+ const [runInformations, setRunInformations] = useState<RunInformations>();
- const {answerQuestion} = useQuizService();
+ const {answerQuestion, getRunsInfo, getQuizInformations} = useQuizService();
const getCorrectAnswer = (answers: Answer[]): Answer => {
+ console.log("starting getCorrectAnswer");
const correctAnswer = answers.find((answer) => answer.isCorrect);
- if (!correctAnswer) throw new Error("No correct answer found");
+ if (!correctAnswer) return answers[0];
return correctAnswer;
};
- const onValidation = async () => {
- if(selectedAnswerId === null) return;
- setQuizState(QuizState.LOADING);
- const answerId = actualQuestion.answers.find((answer) => answer.id === selectedAnswerId)?.id;
- if(!answerId || !runId) return;
- const answereFetched = await answerQuestion(runId, actualQuestion.id, answerId);
- if (HttpError.isHttpError(answereFetched)) {
- return;
- }
- setScore(answereFetched.score);
- const correctAnswerIdFetched = getCorrectAnswer(answereFetched.answers.answers).id;
- setCorrectAnswerId(correctAnswerIdFetched);
- setQuizState(QuizState.SHOWING_RESULTS);
-
- if (quizInformations === undefined) return;
- // Check si c'est la dernière question
- if(answereFetched.answers.order === quizInformations.questionCount - 1) {
- setIsLastQuestion(true);
- return;
- }
+ const initSocket = async () => {
+ console.log("init socket in body");
+ socket.on("answersRevealed", (data: AnswerWsResponse) => {
+ const correctAnswerIdFetched = getCorrectAnswer(data.answers).id;
+ console.log("correctAnswerIdFetched", correctAnswerIdFetched);
+ setCorrectAnswerId(correctAnswerIdFetched);
+ setQuizState(QuizState.SHOWING_RESULTS);
+ });
+ // socket.on("score", (data) => {
+ // console.log("Score:", data);
+ // });
+ }
+
+ useEffect(() => {
+ initSocket();
+ }, []);
+
+
+ const onValidation = async () => {
+
+ if(selectedAnswerId === null || actualQuestion === undefined) return;
+ setQuizState(QuizState.LOADING);
+ socket.emit("submitAnswer", {
+ roomId,
+ runId,
+ questionId: actualQuestion.question.id,
+ answerId: selectedAnswerId,
+ });
+
+ setTimeout(() => {
+ socket.emit("revealAnswer", {runId: runId});
+ },500);
};
const onContinue = () => {
- if(isLastQuestion) {
- navigation.reset({
- index: 0,
- routes: [
- {
- name: "EndQuiz",
- params: {quizInformations: quizInformations, score: score},
- },
- ]
- });
- return;
- }
- fetchActualQuestion();
+ socket.emit("nextQuestion");
setQuizState(QuizState.ANSWERING);
- setSelectedAnswerId(null);
setCorrectAnswerId(null);
+ setSelectedAnswerId(null);
}
const onAnsweredButtonClicked = (answerId: number) => {
@@ -129,7 +138,7 @@ export default function PlayingQuizMultiModeBody({ quizInformations, runId, actu
<View style={styles.buttonContainer}>
{actualQuestion ? (
<>
- {actualQuestion.answers.map((answer, index) => (
+ {actualQuestion.question.answers.map((answer, index) => (
<AnswerButton
key={index}
text={answer.text}
diff --git a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx
index c5da7d2..427c8cd 100644
--- a/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx
@@ -7,11 +7,12 @@ import {View, Text, StyleSheet} from "react-native";
import GoHomeButton from "../../../../components/PlayingQuiz/GoHomeButton";
import {TextsStyles} from "../../../../styles/TextsStyles";
import ConfirmModal from "../../../../components/PlayingQuiz/ComfirmModal";
+import {QuestionResponse} from "../../../../models/Response/QuestionResponse";
interface Props {
quizInformations?: QuizInformations;
runId?: string;
- actualQuestion: Question;
+ actualQuestion?: QuestionResponse;
score: number;
navigation: NavigationProp<any>
}
@@ -20,6 +21,7 @@ export default function PlayingQuizMultiModeHeader({quizInformations, runId, act
const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
const {t} = useTranslation();
+
const handleConfirmModalConfirm = () => {
navigation.reset({
index: 0,
@@ -40,7 +42,7 @@ 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.question.order + 1 :"?"}/{quizInformations ? quizInformations.questionCount : "?"}</Text>
</View>
<View style={styles.InformationsContainer}>
<Text style={TextsStyles.titleText}>{t("app.screens.question.score")}</Text>
@@ -48,7 +50,7 @@ export default function PlayingQuizMultiModeHeader({quizInformations, runId, act
</View>
</View>
<View style={styles.QuizQuestionContainer}>
- <Text style={TextsStyles.subtitleText}>{actualQuestion ? actualQuestion.text : "Loading..."}</Text>
+ <Text style={TextsStyles.subtitleText}>{actualQuestion ? actualQuestion.question.text : "Loading..."}</Text>
</View>
<ConfirmModal visible={isConfirmModalVisible} onClose={()=>setIsConfirmModalVisible(false)} onConfirm={handleConfirmModalConfirm}/>
diff --git a/screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz.tsx b/screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz.tsx
index 8f45d5c..14b3875 100644
--- a/screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz.tsx
+++ b/screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz.tsx
@@ -29,7 +29,7 @@ export default function MultiInformationsOfQuiz({ navigation, route }: Props) {
const onPlayPressed = async (nbPlayer: number) => {
setShowModal(false);
- navigation.navigate("Lobby", {quiz: quiz, nbPlayer: nbPlayer});
+ navigation.navigate("Lobby", {quiz: quiz, nbPlayer: nbPlayer, isHost: true});
};
return (
diff --git a/screens/Multiplayer/OnlineQuiz/OnlineCreateLobby.tsx b/screens/Multiplayer/OnlineQuiz/OnlineCreateLobby.tsx
index c31decb..f8f5d1a 100644
--- a/screens/Multiplayer/OnlineQuiz/OnlineCreateLobby.tsx
+++ b/screens/Multiplayer/OnlineQuiz/OnlineCreateLobby.tsx
@@ -61,8 +61,9 @@ export default function OnlineCreateLobby({navigation}: Props) {
}
navigation.navigate("Lobby", {
- runId: quizGenerated.id,
+ quizIdOrRoomId: quizGenerated.quizId,
nbPlayers: parseInt(nbPlayers),
+ isHost: true,
});
};
diff --git a/screens/Multiplayer/OnlineQuiz/OnlinePlayQuiz.tsx b/screens/Multiplayer/OnlineQuiz/OnlinePlayQuiz.tsx
index d298d8c..03aba42 100644
--- a/screens/Multiplayer/OnlineQuiz/OnlinePlayQuiz.tsx
+++ b/screens/Multiplayer/OnlineQuiz/OnlinePlayQuiz.tsx
@@ -14,38 +14,28 @@ interface Props {
}
export default function OnlinePlayQuiz({navigation}: Props) {
const [codeQuiz, setCodeQuiz] = React.useState("");
- const [quiz, setQuiz] = React.useState<Quiz>();
const [error, setError] = React.useState<string>("");
+ const {getRunsInfo} = useQuizService();
- const { remainingQuiz } = useQuizService();
-
- useEffect(() => {
- fetchQuiz();
- }, [codeQuiz]);
-
- const fetchQuiz = async () => {
- if(codeQuiz === "")
- {
- return;
+ const checkRoomExist = async () : Promise<boolean> => {
+ const runFetched = await getRunsInfo(codeQuiz);
+ if(runFetched instanceof HttpError) {
+ return false;
}
- const quizFetched = await remainingQuiz(codeQuiz);
- if (quizFetched instanceof HttpError) {
- setError("The quiz does not exist");
+ return true;
+ }
+
+ const joinLobby = async () => {
+ const response = await checkRoomExist()
+ if(!response) {
+ setError("The room does not exist");
return;
}
setError("");
- setQuiz(quizFetched);
- };
-
- const handlePlayButtonPress = () => {
- navigation.reset({
- index: 0,
- routes: [
- {
- name: "PlayingQuiz",
- params: {quizRecovered: quiz},
- },
- ]
+ navigation.navigate("Lobby", {
+ quizIdOrRoomId: codeQuiz,
+ nbPlayers: 10,
+ isHost: false,
});
};
@@ -54,11 +44,10 @@ export default function OnlinePlayQuiz({navigation}: Props) {
<View style={styles.contentContainer}>
<View style={styles.fieldContainer}>
{error ? <Text style={styles.errorText}>{error}</Text> : null}
- <InputPlayQuiz placeholder={"Enter quiz ID"} setText={setCodeQuiz} noTitle={true} />
- <AboutAQuiz quiz={quiz} />
+ <InputPlayQuiz placeholder={"Enter room ID"} setText={setCodeQuiz} noTitle={true} />
</View>
<View style={styles.buttonPlayContainer}>
- <BlueButton onPress={handlePlayButtonPress} text={"JOIN"} isDisabled={codeQuiz==="" || error!==""}/>
+ <BlueButton onPress={joinLobby} text={"JOIN"} isDisabled={codeQuiz==="" || error!==""}/>
</View>
</View>
</View>
diff --git a/screens/Multiplayer/OnlineQuiz/OnlineSelectMode.tsx b/screens/Multiplayer/OnlineQuiz/OnlineSelectMode.tsx
index bf33162..cc45226 100644
--- a/screens/Multiplayer/OnlineQuiz/OnlineSelectMode.tsx
+++ b/screens/Multiplayer/OnlineQuiz/OnlineSelectMode.tsx
@@ -18,7 +18,7 @@ export default function OnlineSelectMode({ mode, setMode }: Props) {
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={() => setMode("join")}>
- <Text style={[styles.text, mode === "join" && styles.activeText]}>JOIN A QUIZ</Text>
+ <Text style={[styles.text, mode === "join" && styles.activeText]}>JOIN A ROOM</Text>
</TouchableOpacity>
<View style={[styles.bar, mode === "join" ? styles.activeBar : styles.inactiveBar]} />
</View>
diff --git a/screens/PlayingQuiz/PlayingQuizHeader.tsx b/screens/PlayingQuiz/PlayingQuizHeader.tsx
index ffba640..c03c6d0 100644
--- a/screens/PlayingQuiz/PlayingQuizHeader.tsx
+++ b/screens/PlayingQuiz/PlayingQuizHeader.tsx
@@ -13,7 +13,7 @@ import {Question} from "../../models/Question";
interface Props {
quizInformations?: QuizInformations;
runId?: string;
- actualQuestion: Question;
+ actualQuestion?: Question;
score: number;
navigation: NavigationProp<any>
}
--
GitLab