Skip to content

Commit d46b21f

Browse files
sonyahu15r-mcgrathHadriChannamos2502
committed
working on host state
Co-authored-by: r-mcgrath <[email protected]> Co-authored-by: HadriChan <[email protected]> Co-authored-by: Nam <[email protected]>
1 parent 8d1c2ab commit d46b21f

File tree

3 files changed

+52
-56
lines changed

3 files changed

+52
-56
lines changed

‎app/src/components/left/RoomsContainer.tsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,28 @@ const RoomsContainer = () => {
3535
roomCode: store.roomSlice.roomCode,
3636
userName: store.roomSlice.userName,
3737
userList: store.roomSlice.userList,
38+
//userIsHost: store.roomSlice.userIsHost,
3839
userJoined: store.roomSlice.userJoined
3940
})
4041
);
42+
// const [userIsHost, setUserIsHost] = useState(false);
4143

4244
React.useEffect(() => {
4345
console.log('You Joined Room---:', roomCode);
4446
}, [roomCode]);
4547

48+
// React.useEffect(() => {
49+
// console.log('userName :', userName);
50+
// if (userName === userList[0]) {
51+
// console.log('setting isHost to true');
52+
// setUserIsHost(true);
53+
// } else {
54+
// setUserIsHost(false);
55+
// }
56+
// console.log('User list updated:', userList);
57+
// console.log('userList[0]-------', userList[0]);
58+
// }, [userList]);
59+
4660
function initSocketConnection(roomCode) {
4761
if (socket) socket.disconnect(); //edge case check if socket connection existed
4862

@@ -57,51 +71,38 @@ const RoomsContainer = () => {
5771
socket.emit('joining', userName, roomCode);
5872
});
5973

60-
// if host, send state to server
61-
socket.on('requesting state from host', (roomCode) => {
62-
// if (userName === userList[0]) {
63-
// console.log('host is sending state');
64-
// const newState = store.getState();
65-
// socket.emit('state from host', JSON.stringify(newState), roomCode);
66-
// }
67-
68-
console.log('receiving room code from new user------', roomCode);
69-
socket.emit('state from host', roomCode);
70-
});
71-
7274
//listening to back end for updating user list
73-
socket.on('updateUserList', (newUserList) => {
74-
console.log('received user list from back:', newUserList);
75+
socket.on('updateUserList', (newUserList: object) => {
7576
dispatch(setUserList(Object.values(newUserList)));
76-
console.log('object values new user list', Object.values(newUserList));
77-
console.log('client user list updated:', userList);
7877
});
79-
78+
//send state from host to room when new user joins
79+
socket.on('requesting state from host', () => {
80+
console.log('front received request for host state');
81+
console.log(`${userName} is host`);
82+
console.log('host is sending state');
83+
const newState = store.getState();
84+
socket.emit('state from host', JSON.stringify(newState));
85+
});
8086
// receiving the message from the back end
8187
socket.on('new state from back', (event) => {
82-
console.log('front receiving new state');
8388
let currentStore: any = JSON.stringify(store.getState());
84-
// console.log('event ', event);
8589
if (currentStore !== event) {
8690
currentStore = JSON.parse(currentStore);
8791
event = JSON.parse(event);
8892
if (
8993
JSON.stringify(currentStore.appState) !==
9094
JSON.stringify(event.appState)
9195
) {
92-
console.log('updating app state');
9396
store.dispatch(allCooperativeState(event.appState));
9497
} else if (
9598
JSON.stringify(currentStore.codePreviewSlice) !==
9699
JSON.stringify(event.codePreviewCooperative)
97100
) {
98-
console.log('updating code preview');
99101
store.dispatch(codePreviewCooperative(event.codePreviewCooperative));
100102
} else if (
101103
JSON.stringify(currentStore.styleSlice) !==
102104
JSON.stringify(event.styleSlice)
103105
) {
104-
console.log('updating style');
105106
store.dispatch(cooperativeStyle(event.styleSlice));
106107
}
107108
}
@@ -120,15 +121,13 @@ const RoomsContainer = () => {
120121

121122
if (JSON.stringify(newState) !== JSON.stringify(previousState)) {
122123
// Send the current state to the server
123-
console.log('front emitting new state');
124124
socket.emit('new state from front', JSON.stringify(newState), roomCode);
125125
previousState = newState;
126126
}
127127
}, 100);
128128

129129
store.subscribe(() => {
130130
if (socket) {
131-
//console.log('handling store change');
132131
handleStoreChange();
133132
}
134133
});
@@ -193,8 +192,7 @@ const RoomsContainer = () => {
193192
<Typography
194193
variant="body1"
195194
sx={{
196-
color: 'white', // Text color for the count
197-
borderRadius: 4 // Optional: Add rounded corners
195+
color: 'white' // Text color for the count
198196
}}
199197
>
200198
Users: {userList.length}

‎app/src/redux/reducers/slice/roomSlice.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const initialState = {
55
roomCode: '',
66
userName: '',
77
userList: [],
8+
// userIsHost: false,
89
userJoined: false
910
};
1011

@@ -22,13 +23,22 @@ const roomSlice = createSlice({
2223
setUserList: (state, action) => {
2324
state.userList = action.payload;
2425
},
26+
// setUserIsHost: (state, action) => {
27+
// state.userIsHost = action.payload;
28+
// },
2529
setUserJoined: (state, action) => {
2630
state.userJoined = action.payload;
27-
},
31+
}
2832
}
2933
});
3034

3135
// Exports the action creator function to be used with useDispatch
32-
export const { setRoomCode, setUserName, setUserList, setUserJoined } = roomSlice.actions;
36+
export const {
37+
setRoomCode,
38+
setUserName,
39+
setUserList,
40+
// setUserIsHost,
41+
setUserJoined
42+
} = roomSlice.actions;
3343
// Exports so we can combine in rootReducer
3444
export default roomSlice.reducer;

‎server/server.ts

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -98,51 +98,39 @@ const io = new Server(httpServer, {
9898
const roomLists = {}; //key: roomCode, value: Obj{ socketid: username }
9999
io.on('connection', (client) => {
100100
client.on('new state from front', (redux_store, room) => {
101-
//console.log('back receiving new state');
102101
if (room) {
103102
//sending to sender client, only if they are in room
104-
console.log('back emitting new state to room');
105103
client.to(room).emit('new state from back', redux_store);
106104
}
107-
// } else {
108-
// //send to all connected clients except the one that sent the message
109-
// console.log('back emitting new state broadcast');
110-
// client.broadcast.emit('new state from back', redux_store);
111-
// }
112105
});
113106

114-
// client.on('join-room', (roomCode) => {
115-
// //working
116-
// client.join(roomCode);
117-
// });
118-
119107
//when user Joined a room
120108
client.on('joining', (userName, roomCode) => {
121-
client.join(roomCode);
122-
if (!roomLists[roomCode]) {
109+
client.join(roomCode); //client joining a room
110+
//if room exists, get state from host
111+
if (roomLists[roomCode]) {
112+
let hostID = Object.keys(roomLists[roomCode])[0];
113+
console.log('back requesting state from host');
114+
console.log('host username:', roomLists[roomCode][hostID]);
115+
io.to(roomLists[roomCode][hostID]).emit('requesting state from host');
116+
client.on('state from host', (state) => {
117+
io.to(client.id).emit('new state from back', state);
118+
});
119+
//if no room exist, create new room in server
120+
} else if (!roomLists[roomCode]) {
123121
roomLists[roomCode] = {};
124-
} //if no room exist, create new room in server
122+
}
125123
roomLists[roomCode][client.id] = userName; // add user into the room with id: userName
126124
console.log('back emitting new user list');
127-
client.in(roomCode).emit('updateUserList', roomLists[roomCode]); //send the message to all clients in room
125+
io.to(roomCode).emit('updateUserList', roomLists[roomCode]); //send the message to all clients in room
126+
127+
//console.log for room status
128128
console.log('full room lists', roomLists);
129129
console.log(`${userName} joined room ${roomCode}`);
130130
console.log(
131131
`back sent User list of room ${roomCode}: `,
132132
roomLists[roomCode]
133133
);
134-
135-
if (roomLists[roomCode]) {
136-
//if room exists, get state from host
137-
console.log('back requesting state from host');
138-
client.in(roomCode).emit('requesting state from host', roomCode);
139-
// client.on('state from host', (state) => {
140-
// client.to(client.id).emit('state from host', state);
141-
// });
142-
client.on('state from host', (roomCode) => {
143-
console.log('Receiving roomcode from front end host', roomCode);
144-
});
145-
}
146134
});
147135

148136
client.on('disconnecting', () => {

0 commit comments

Comments
 (0)