gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Correction

Browse source
This commit is contained in:
NouhailaAater 2025-02-21 20:15:32 -05:00
parent 29924a6786
commit fd9f04d116
6 changed files with 164 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/StudentWaitPage/StudentWaitPage.tsx
View file

@ -10,17 +10,23 @@ interface Props {
students: StudentType[];
launchQuiz: () => void;
setQuizMode: (mode: 'student' | 'teacher') => void;
setIsRoomSelectionVisible: (visible: boolean) => void;
}
const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode }) => {
const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode, setIsRoomSelectionVisible }) => {
const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
const handleLaunchClick = () => {
setIsDialogOpen(true);
setIsRoomSelectionVisible(false);
};
return (
<div className="wait">
<div className='button'>
<Button
variant="contained"
onClick={() => setIsDialogOpen(true)}
onClick={handleLaunchClick}
startIcon={<PlayArrow />}
fullWidth
sx={{ fontWeight: 600, fontSize: 20 }}

10
client/src/pages/Student/JoinRoom/JoinRoom.tsx
View file

@ -60,6 +60,8 @@ const JoinRoom: React.FC = () => {
console.log('Failed to join the room.');
setConnectionError(`Erreur de connexion : ${message}`);
setIsConnecting(false);
setRoomName(''); // Réinitialise le nom de la salle
setUsername(''); // Réinitialise le nom d'utilisateur
});
socket.on('connect_error', (error) => {
switch (error.message) {
@ -96,6 +98,8 @@ const JoinRoom: React.FC = () => {
}
if (username && roomName) {
console.log(`Tentative de rejoindre : ${roomName}, utilisateur : ${username}`);
webSocketService.joinRoom(roomName, username);
}
};
@ -160,12 +164,12 @@ const JoinRoom: React.FC = () => {
error={connectionError}>
<TextField
type="number"
label="Numéro de la salle"
type="text"
label="Nom de la salle"
variant="outlined"
value={roomName}
onChange={(e) => setRoomName(e.target.value)}
placeholder="Numéro de la salle"
placeholder="Nom de la salle"
sx={{ marginBottom: '1rem' }}
fullWidth
/>

107
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -43,34 +43,35 @@ const ManageRoom: React.FC = () => {
const [selectedRoomId, setSelectedRoomId] = useState<string>('');
const [openDialog, setOpenDialog] = useState(false);
const [newRoomTitle, setNewRoomTitle] = useState('');
const [isRoomSelectionVisible, setIsRoomSelectionVisible] = useState(true);
useEffect(() => {
const fetchData = async () => {
if (!ApiService.isLoggedIn()) {
navigate('/teacher/login');
return;
} else {
const userRooms = await ApiService.getUserRooms();
setRooms(userRooms as RoomType[]);
}
const userRooms = await ApiService.getUserRooms();
setRooms(userRooms as RoomType[]);
};
fetchData();
}, []);
const handleSelectRoom = (event: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedRoomId(event.target.value);
const roomId = event.target.value;
setSelectedRoomId(roomId);
const selectedRoom = rooms.find((room) => room._id === roomId);
setRoomName(selectedRoom?.title || '');
};
useEffect(() => {
if (selectedRoomId && rooms.length > 0) {
const selectedRoom = rooms.find((room) => room._id === selectedRoomId);
setRoomName(selectedRoom ? selectedRoom.title : '');
} else {
setRoomName('');
if (rooms.length > 0 && !selectedRoomId) {
setSelectedRoomId(rooms[0]._id);
}
}, [selectedRoomId, rooms]);
}, [rooms]);
const handleDialogClose = () => {
setOpenDialog(false);
@ -81,16 +82,21 @@ const ManageRoom: React.FC = () => {
};
const handleSubmitRoom = async () => {
try {
if (newRoomTitle) {
await ApiService.createRoom(newRoomTitle);
const userRooms = await ApiService.getUserRooms();
setRooms(userRooms as RoomType[]);
const newlyCreatedRoom = userRooms[userRooms.length - 1] as RoomType;
setSelectedRoomId(newlyCreatedRoom._id);
if (newRoomTitle.trim()) {
const createdRoom = await ApiService.createRoom(newRoomTitle);
const updatedRooms = await ApiService.getUserRooms();
setRooms(updatedRooms as RoomType[]);
if (createdRoom && createdRoom) {
setSelectedRoomId(createdRoom);
setRoomName(createdRoom);
}
setOpenDialog(false);
setNewRoomTitle('');
}
} catch (error) {
console.error('Error creating Room:', error);
console.error('Error creating Room::', error);
}
};
@ -131,6 +137,25 @@ const ManageRoom: React.FC = () => {
}
}, [quizId]);
useEffect(() => {
if (rooms.length > 0 && !selectedRoomId) {
setSelectedRoomId(rooms[0].title);
}
}, [rooms]);
useEffect(() => {
if (!newRoomTitle && !selectedRoomId) {
setConnectingError('Aucun nom de salle sélectionné ou créé.');
}
}, [newRoomTitle, selectedRoomId]);
useEffect(() => {
if (selectedRoomId && selectedRoomId.trim() !== '') {
console.log(`Sélection d'une nouvelle salle: ${selectedRoomId}`);
createWebSocketRoom();
}
}, [selectedRoomId]);
const disconnectWebSocket = () => {
if (socket) {
webSocketService.endQuiz(roomName);
@ -146,42 +171,34 @@ const ManageRoom: React.FC = () => {
const createWebSocketRoom = () => {
console.log('Creating WebSocket room...');
setConnectingError('');
const targetRoom = rooms.find((room) => room._id === selectedRoomId) || rooms[0];
if (!targetRoom) {
setConnectingError('Aucune salle disponible');
return;
}
console.log('Création WebSocket pour:', targetRoom.title);
const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL);
socket.on('connect', () => {
webSocketService.createRoom(selectedRoomId);
console.error('socket.on(connect:)');
webSocketService.createRoom(targetRoom.title);
setRoomName(targetRoom.title);
});
socket.on('connect_error', (error) => {
setConnectingError('Erreur lors de la connexion... Veuillez réessayer');
console.error('ManageRoom: WebSocket connection error:', error);
});
socket.on('create-success', (roomName: string) => {
console.log('create-success', roomName);
setRoomName(roomName);
console.error('create-success', roomName);
});
socket.on('create-failure', () => {
console.log('Error creating room.');
});
socket.on('user-joined', (student: StudentType) => {
console.log(`Student joined: name = ${student.name}, id = ${student.id}`);
setStudents((prevStudents) => [...prevStudents, student]);
if (quizMode === 'teacher') {
webSocketService.nextQuestion(roomName, currentQuestion);
} else if (quizMode === 'student') {
webSocketService.launchStudentModeQuiz(roomName, quizQuestions);
}
});
socket.on('join-failure', (message) => {
setConnectingError(message);
setSocket(null);
});
socket.on('user-disconnected', (userId: string) => {
console.log(`Student left: id = ${userId}`);
setStudents((prevUsers) => prevUsers.filter((user) => user.id !== userId));
});
setSocket(socket);
};
@ -477,7 +494,8 @@ const ManageRoom: React.FC = () => {
<div className="dumb"></div>
</div>
<div className="room">
{isRoomSelectionVisible && (
<div className="roomSelection">
<div className="select">
<NativeSelect
id="select-room"
@ -489,13 +507,16 @@ const ManageRoom: React.FC = () => {
{rooms.map((room: RoomType) => (
<option value={room._id} key={room._id}>
{' '}
{room.title}{' '}
{room.title}
</option>
))}
</NativeSelect>
</div>
<div className="actions" style={{ display: 'flex', justifyContent: 'flex-end' }}>
<div
className="actions"
style={{ display: 'flex', justifyContent: 'flex-end' }}
>
<Button
variant="contained"
color="primary"
@ -535,6 +556,7 @@ const ManageRoom: React.FC = () => {
</DialogActions>
</Dialog>
</div>
)}
{/* the following breaks the css (if 'room' classes are nested) */}
<div className="">
@ -612,6 +634,7 @@ const ManageRoom: React.FC = () => {
students={students}
launchQuiz={launchQuiz}
setQuizMode={setQuizMode}
setIsRoomSelectionVisible={setIsRoomSelectionVisible}
/>
)}
</div>

4
client/src/services/WebsocketService.tsx
View file

@ -1,4 +1,3 @@
// WebSocketService.tsx
import { io, Socket } from 'socket.io-client';
// Must (manually) sync these types to server/socket/socket.js
@ -48,8 +47,7 @@ class WebSocketService {
createRoom(roomName: string) {
if (this.socket) {
const nameToSend = roomName;
this.socket.emit('create-room', nameToSend);
this.socket.emit('create-room', roomName);
}
}

38
server/socket/socket.js
View file

@ -24,29 +24,51 @@ const setupWebsocket = (io) => {
);
socket.on("create-room", (sentRoomName) => {
console.log(`Demande de création de salle avec le nom : ${sentRoomName}`);
if (sentRoomName) {
const roomName = sentRoomName.toUpperCase();
if (!io.sockets.adapter.rooms.get(roomName)) {
socket.join(roomName);
socket.emit("create-success", roomName);
console.log(`Salle créée avec succès : ${roomName}`);
} else {
socket.emit("create-failure");
socket.emit("create-failure", `La salle ${roomName} existe déjà.`);
console.log(`Échec de création : ${roomName} existe déjà`);
}
} else {
const roomName = generateRoomName();
console.log(`Génération d'une salle aléatoire : ${roomName}`);
if (!io.sockets.adapter.rooms.get(roomName)) {
socket.join(roomName);
socket.emit("create-success", roomName);
console.log(`Salle créée avec succès : ${roomName}`);
} else {
socket.emit("create-failure");
socket.emit(
"create-failure",
"Échec de création de la salle aléatoire"
);
console.log(`Échec de création de la salle aléatoire`);
}
}
console.log(
"Salles existantes après la tentative de création : ",
Array.from(io.sockets.adapter.rooms.keys())
);
});
socket.on("join-room", ({ enteredRoomName, username }) => {
if (io.sockets.adapter.rooms.has(enteredRoomName)) {
const clientsInRoom =
io.sockets.adapter.rooms.get(enteredRoomName).size;
const roomToCheck = enteredRoomName.toUpperCase();
console.log(
`Requête de connexion : salle="${roomToCheck}", utilisateur="${username}"`
);
console.log(
"Salles existantes :",
Array.from(io.sockets.adapter.rooms.keys())
);
if (io.sockets.adapter.rooms.has(roomToCheck)) {
const clientsInRoom = io.sockets.adapter.rooms.get(roomToCheck).size;
if (clientsInRoom <= MAX_USERS_PER_ROOM) {
const newStudent = {
@ -54,10 +76,8 @@ const setupWebsocket = (io) => {
name: username,
answers: [],
};
socket.join(enteredRoomName);
socket
.to(enteredRoomName)
.emit("user-joined", newStudent);
socket.join(roomToCheck);
socket.to(roomToCheck).emit("user-joined", newStudent);
socket.emit("join-success");
} else {
socket.emit("join-failure", "La salle est remplie");