diff --git a/components/Multiplayer/ModalInvitePlayer.tsx b/components/Multiplayer/ModalInvitePlayer.tsx
index dbf2294f16f7a4234ee76366e0aa0b1e7f750a7c..2c5fab893542021363ecce5ddc114fa2e68baeaf 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 0000000000000000000000000000000000000000..41d72db73366819090f8461760ecc9413f3f7743
--- /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 86ab70bcabc6d6e1105e0fbc05266bda348c041d..58dd246ee94f4a6054e18ce1dad669b4620e16ea 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 c5a24eb20513eab93c92c1f781a017cd08ada889..bdcdb42ee12f4957bd1ddbe5fffe03b6f0b68615 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
new file mode 100644
index 0000000000000000000000000000000000000000..78c1760b98b0afb0b4e00bc52ca97547349364c4
--- /dev/null
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiMode.tsx
@@ -0,0 +1,84 @@
+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 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 = {
+ PlayingQuizMultiMode: {
+ runId: string;
+ socket: Socket;
+ roomId: string;
+ };
+};
+
+interface Props {
+ route: RouteProp<RoutePropsType, "PlayingQuizMultiMode">;
+ navigation: NavigationProp<any>;
+}
+
+export default function PlayingQuizMultiMode({route, navigation}:Props) {
+ const {runId, socket, roomId} = route.params;
+ const { getQuizInformations, getRunsInfo } = useQuizService();
+ const [quizInformations, setQuizInformations] = useState<QuizInformations | undefined>(undefined);
+ const [runInformations, setRunInformations] = useState<RunInformations>();
+ const [actualQuestion, setActualQuestion] = useState<QuestionResponse | undefined>(undefined);
+ const [score, setScore] = useState(0);
+
+ 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
+ });
+
+ }
+
+ 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 quizInformationsFetched = await getQuizInformations(runFetched.quizId);
+ if (quizInformationsFetched instanceof HttpError) {
+ console.log("Error fetching quiz info", quizInformationsFetched);
+ return;
+ }
+ setQuizInformations(quizInformationsFetched);
+ setRunInformations(runFetched);
+ };
+
+ useEffect(() => {
+ console.log("PlayingQuizMultiMode starting");
+ initSocket();
+ fetchRuns();
+ setTimeout(() => {
+ socket.emit("startGame")
+ },500);
+
+ setTimeout(() => {
+ socket.emit("nextQuestion");
+ },2000);
+ }, []);
+
+ return (
+ <TemplateDuo
+ 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
new file mode 100644
index 0000000000000000000000000000000000000000..1a5d7130725faf716240eb28f916b7ed5a85acfc
--- /dev/null
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeBody.tsx
@@ -0,0 +1,234 @@
+import {QuizInformations} from "../../../../models/QuizInformations";
+import {Question} from "../../../../models/Question";
+import {NavigationProp} from "@react-navigation/native";
+import React, {useEffect, 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";
+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 {
+ runId?: string;
+ actualQuestion?: QuestionResponse;
+ fetchActualQuestion: () => void;
+ socket: Socket;
+ roomId: string;
+ 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) => {
+ console.log("answerId :", answerId);
+ console.log("selectedAnswerIndex :", selectedAnswerIndex);
+ console.log("correctAnswerId :", correctAnswerId);
+ 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({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, getRunsInfo, getQuizInformations} = useQuizService();
+ const getCorrectAnswer = (answers: Answer[]): Answer => {
+ console.log("starting getCorrectAnswer");
+ const correctAnswer = answers.find((answer) => answer.isCorrect);
+ if (!correctAnswer) return answers[0];
+ return correctAnswer;
+ };
+
+ 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 = () => {
+ socket.emit("nextQuestion");
+ setQuizState(QuizState.ANSWERING);
+ setCorrectAnswerId(null);
+ setSelectedAnswerId(null);
+ }
+
+ const onAnsweredButtonClicked = (answerId: number) => {
+ if(quizState === QuizState.SHOWING_RESULTS || quizState === QuizState.LOADING) {
+ return;
+ }
+ setSelectedAnswerId(answerId);
+ }
+
+ return (
+ <View style={styles.buttonContainer}>
+ {actualQuestion ? (
+ <>
+ {actualQuestion.question.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 0000000000000000000000000000000000000000..427c8cdf405bdc174a46e3d4c8d0d7e0360e2440
--- /dev/null
+++ b/screens/Multiplayer/Lobby/PlayingQuizMultiMode/PlayingQuizMultiModeHeader.tsx
@@ -0,0 +1,97 @@
+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";
+import {QuestionResponse} from "../../../../models/Response/QuestionResponse";
+
+interface Props {
+ quizInformations?: QuizInformations;
+ runId?: string;
+ actualQuestion?: QuestionResponse;
+ 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.question.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.question.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
diff --git a/screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz.tsx b/screens/Multiplayer/MultiplayerCommunity/InformationsOfQuiz/MultiInformationsOfQuiz.tsx
index 8f45d5cf20b72675c9e430a07651640bc7253122..14b38759b5dc821b9239f195927ecf5cf2b21e6f 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 c31decbf6e27d21981c0f6ed0d05df88d50764c2..f8f5d1a0bc0fb590240a1fbcb0534fe18230456d 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 d298d8c4afb418bd9e48e5173d4a28ae77ddd783..03aba42ec9319504dc907b6476958634eb04a686 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 bf33162a6d1cbece6cfa53b5a6069448f3e79f48..cc4522640d44e3d16132801687df1facc86c8c7b 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 ffba6407daae70759220f654ab629afbf88bd33d..c03c6d08648ab9def1de43428bfb1d4a41d6605b 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>
}