Skip to content
Snippets Groups Projects
Commit 09f0fcb6 authored by GOEPP THOMAS's avatar GOEPP THOMAS
Browse files

refactor: lobby

parent 4bd7cbb9
Branches
2 merge requests!132V4.0,!129Feature/135 refacto lobby
Hide whitespace changes
Inline Side-by-side
screens/Multiplayer/Lobby/Lobby.tsx
+ 47
− 74
View file @ 09f0fcb6
import { View, Text, StyleSheet, Button, Image, ScrollView, FlatList } from "react-native";
import TemplateMenu from "../../../templates/TemplateMenu";
import {View, Text, StyleSheet, Image, FlatList} from "react-native";
import {NavigationProp, RouteProp} from "@react-navigation/native";
import React, {useEffect, useState} from "react";
import WhiteButton from "../../../components/buttons/WhiteButton";
import BlueButton from "../../../components/buttons/BlueButton";
import { TouchableOpacity } from "react-native";
import ModalInvitePlayer from "../../../components/Multiplayer/ModalInvitePlayer";
import {User} from "../../../models/User";
import {QuizGenerateAnswer} from "../../../models/QuizGenerateAnswer";
import {io, Socket} from "socket.io-client";
import useCookie from "../../../hooks/UseCookie";
import {useMultiService} from "../../../services/MultiService";
import HttpError from "../../../services/HttpError";
import TemplateMenu from "../../../templates/TemplateMenu";
import BlueButton from "../../../components/buttons/BlueButton";
import WhiteButton from "../../../components/buttons/WhiteButton";
import ModalInvitePlayer from "../../../components/Multiplayer/ModalInvitePlayer";
import EventSource from "react-native-sse";
interface Props {
navigation: NavigationProp<any>;
route: RouteProp<RoutePropsType, "Lobby">;
......@@ -18,98 +19,70 @@ interface Props {
type RoutePropsType = {
Lobby: {
quizIdOrRoomId: string;
quizId?: string;
roomId?: string;
nbPlayers: number;
isHost: boolean;
};
};
type CustomEventType = "userJoined" | "nextQuestion"
export default function Lobby({navigation, route}: Props) {
const { quizIdOrRoomId, nbPlayers, isHost} = route.params;
const { quizId, roomId, nbPlayers, isHost} = route.params;
// 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 [roomIdCreated, setRoomIdCreated] = useState<string | undefined>(roomId);
const [runId, setRunId] = useState<string>("");
const [showModal, setShowModal] = useState<boolean>(false);
const userInvite = { id: 0, username: 'Invite', email: 'invite@email.com'}
const initSocket = async () => {
const cookie = await getCookie();
const newSocket = io("http://klebert-host.com:33053/party", {
transports: ["websocket"], // Utilise WebSocket uniquement
extraHeaders: {
Cookie: `access_token=${cookie}`,
},
});
const {createParty} = useMultiService();
setSocket(newSocket);
const userInvite = { id: 0, username: 'Invite', email: 'invite@email.com'}
let goodId = roomId;
const initSSE = async () => {
console.log("Init SSE for quiz ID:", quizId);
if(isHost && quizId) {
const response = await createParty(quizId);
if (HttpError.isHttpError(response)) {
console.error("Failed to create party:", response.message);
return;
}
console.log("Created party with ID:", response);
goodId = response;
setRoomIdCreated(response);
}
console.log("User try to joined party with ID:", goodId);
console.log(`https://klebert-host.com:33037/party/join/${goodId}`)
if(isHost) {
newSocket.on("roomCreated", (data) => {
console.log("Room created : ", data.id);
console.log("Connected to the server");
const es = new EventSource<CustomEventType>(`https://klebert-host.com:33037/party/join/${goodId}`);
setRoomId(data.id);
console.log("Host id room : ", data.id);
newSocket.emit("joinRoom", { roomId: data.id });
es.addEventListener("userJoined", (event) => {
console.log("User joined event data:", event.data);
if(!event.data) return;
setTimeout(() => {
console.log("Sending generateRun");
newSocket.emit("generateRun");
},1000);
});
const newUsers: User[] = JSON.parse(event.data);
newSocket.on("connect", () => {
newSocket.emit("createRoom", { quizId: quizIdOrRoomId });
setPlayers((prevPlayers) => {
const ids = new Set(prevPlayers.map((player) => player.id));
const filteredNewUsers = newUsers.filter((user) => !ids.has(user.id));
return [...prevPlayers, ...filteredNewUsers];
});
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);
});
newSocket.on("error", (err) => {
console.error("Socket error: ", err.message);
es.addEventListener("error", (err) => {
console.error("Error with SSE:", err);
});
// Mettez à jour la liste des joueurs lorsque quelqu'un rejoint
newSocket.on("userJoined", (data: User[]) => {
console.log("Updated user list:", data);
setPlayers([userInvite, ...data]);
});
newSocket.on("runId", (data) => {
console.log("Run ID:", data);
setRunId(data);
});
}
return () => es.close();
};
useEffect(() => {
initSocket();
// return () => {
// if(socket === null) return;
// socket.disconnect();
// setSocket(null);
// };
initSSE();
}, []);
const item = ({ item }: { item: User }) => {
......@@ -139,7 +112,7 @@ export default function Lobby({navigation, route}: Props) {
};
const onPlayPressed = () => {
navigation.navigate("PlayingQuizMultiMode", {runId: runId, socket: socket, roomId: roomId});
navigation.navigate("PlayingQuizMultiMode", {runId: runId, socket: socket, roomId: roomIdCreated});
};
const onCancelPressed = () => {
......@@ -180,7 +153,7 @@ export default function Lobby({navigation, route}: Props) {
}
</View>
</TemplateMenu>
<ModalInvitePlayer showModal={showModal} onClosePressed={() => setShowModal(false)} roomId={roomId} />
<ModalInvitePlayer showModal={showModal} onClosePressed={() => setShowModal(false)} roomId={roomIdCreated} />
</View>
)
}
......
screens/Multiplayer/OnlineQuiz/OnlineCreateLobby.tsx
+ 3
− 2
View file @ 09f0fcb6
import { Text,View, StyleSheet } from "react-native";
import { View, StyleSheet } from "react-native";
import React, {useEffect, useState} from "react";
import InputPlayQuiz from "../../../components/PlayQuiz/InputPlayQuiz";
import {useQuizService} from "../../../services/QuizService";
......@@ -61,7 +61,8 @@ export default function OnlineCreateLobby({navigation}: Props) {
}
navigation.navigate("Lobby", {
quizIdOrRoomId: quizGenerated.quizId,
quizId: quizGenerated.quizId,
roomId: null,
nbPlayers: parseInt(nbPlayers),
isHost: true,
});
......
screens/Multiplayer/OnlineQuiz/OnlinePlayQuiz.tsx
+ 3
− 4
View file @ 09f0fcb6
import { StyleSheet, View, Text } from "react-native";
import AboutAQuiz from "../../../components/PlayQuiz/AboutAQuiz";
import React, { useEffect } from "react";
import React from "react";
import InputPlayQuiz from "../../../components/PlayQuiz/InputPlayQuiz";
import {Quiz} from "../../../models/Quiz";
import { useQuizService } from "../../../services/QuizService";
import HttpError from "../../../services/HttpError";
// import {getIdOfCategory} from "../../../helper/QuizHelper";
......@@ -33,7 +31,8 @@ export default function OnlinePlayQuiz({navigation}: Props) {
}
setError("");
navigation.navigate("Lobby", {
quizIdOrRoomId: codeQuiz,
quizId: null,
roomId: codeQuiz,
nbPlayers: 10,
isHost: false,
});
......
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