Implemented Spectator Chat with Emojis and Voting for Live Debates

[rixitgithub]

Implemented Spectator Chat with Emojis and Voting for Live Debates

This pull request introduces a new spectator chat feature for live debates, allowing users to join as spectators, chat with others, send emoji reactions, and vote on debate outcomes. The feature is built from scratch to enhance audience engagement during live debate sessions.

Key Features

1. Spectator Chat:

   • Implemented RoomChatHandler in the backend to manage WebSocket connections for spectators, associating each connection with a username.
   • Supports real-time chat in debate rooms, with messages displaying usernames for clear identification.

2. Message Timestamps:

   • Added timestamps to each chat message, displayed in a readable format (e.g., local time) to show when messages were sent.

3. Emoji Reactions:

   • Introduced a reaction system where spectators can send emojis (😂, ❤️, 👍) that appear as animated floating elements in the UI.
   • Reactions are broadcast to all spectators in the room for a shared experience.

4. Voting System:

   • Added a voting mechanism allowing spectators to vote "FOR" or "AGAINST" the debate topic.
   • Vote counts are displayed directly inside the buttons below the "Vote FOR" and "Vote AGAINST" text, streamlining the UI.
   • Each user’s vote is immediately reflected in their UI, with votes broadcast to others for real-time updates.

5. WebSocket Management:

   • Configured WebSocket connections to handle up to 10 spectators per debate room, with proper connection cleanup when users leave.
   • Ensured messages are sent only when the WebSocket is open, preventing connection errors.

6. UI Design:

   • Built a clean chat interface with a reverse chronological message display for easy reading.
   • Integrated voting buttons with counts inside for a compact and intuitive design.
   • Added a floating emoji layer for dynamic reaction animations.

Video Demonstration

To showcase the new spectator chat feature, a video has been recorded:

spectator_room.mp4

This feature creates an engaging and interactive experience for spectators, allowing them to actively participate in live debates through chat, reactions, and voting.