feat: allow role switching

Author: Wolftousen

client/src/Session.tsx

@@ -407,6 +407,18 @@ export const Session = () => {
     localStorage.setItem(STORAGE_KEY_DARK_MODE, String(newMode));
   };
 
+  const toggleRole = () => {
+    const currentUser = users.find(u => u.id === currentUserId);
+    if (!currentUser) return;
+
+    const newRole = currentUser.role === 'observer' ? 'participant' : 'observer';
+    sendMessage({
+      type: MessageType.CHANGE_ROLE,
+      role: newRole,
+    });
+    setNotification(`Switched to ${newRole} role`);
+  };
+
   const colors = darkMode ? {
     background: '#1a1a1a',
     surface: '#2d2d2d',
@@ -465,6 +477,9 @@ export const Session = () => {
           <button onClick={toggleDarkMode} style={styles.darkModeButton}>
             {darkMode ? '☀️' : '🌙'}
           </button>
+          <button onClick={toggleRole} style={styles.roleButton}>
+            {users.find(u => u.id === currentUserId)?.role === 'observer' ? '👤 Join as Participant' : '👁️ Switch to Observer'}
+          </button>
           <button onClick={copySessionId} style={styles.copyButton}>
             Copy Session ID
           </button>
@@ -630,6 +645,15 @@ const getStyles = (colors: any): { [key: string]: React.CSSProperties } => ({
     borderRadius: '4px',
     cursor: 'pointer',
   },
+  roleButton: {
+    padding: '8px 16px',
+    fontSize: '14px',
+    backgroundColor: colors.surface,
+    color: colors.text,
+    border: `2px solid ${colors.border}`,
+    borderRadius: '4px',
+    cursor: 'pointer',
+  },
   copyButton: {
     padding: '8px 16px',
     fontSize: '14px',

client/src/types.ts

@@ -19,6 +19,8 @@ export enum MessageType {
   STORY_FOCUSED = 'story_focused',
   UNFOCUS_STORY = 'unfocus_story',
   STORY_UNFOCUSED = 'story_unfocused',
+  CHANGE_ROLE = 'change_role',
+  ROLE_CHANGED = 'role_changed',
   AI_ANALYSIS_STARTED = 'ai_analysis_started',
   AI_RECOMMENDATION = 'ai_recommendation',
   LOAD_MORE_STORIES = 'load_more_stories',
@@ -108,6 +110,11 @@ export interface UnfocusStoryMessage {
   type: MessageType.UNFOCUS_STORY;
 }
 
+export interface ChangeRoleMessage {
+  type: MessageType.CHANGE_ROLE;
+  role: string;
+}
+
 export interface LoadMoreStoriesMessage {
   type: MessageType.LOAD_MORE_STORIES;
   offset: number;
@@ -125,6 +132,7 @@ export type ClientMessage =
   | ResetVotesMessage
   | SetFocusedStoryMessage
   | UnfocusStoryMessage
+  | ChangeRoleMessage
   | LoadMoreStoriesMessage;
 
 export interface UserJoinedMessage {
@@ -181,6 +189,12 @@ export interface StoryUnfocusedMessage {
   type: MessageType.STORY_UNFOCUSED;
 }
 
+export interface RoleChangedMessage {
+  type: MessageType.ROLE_CHANGED;
+  userId: string;
+  role: string;
+}
+
 export interface AIAnalysisStartedMessage {
   type: MessageType.AI_ANALYSIS_STARTED;
   storyId: string;
@@ -236,6 +250,7 @@ export type ServerMessage =
   | VotesResetMessage
   | StoryFocusedMessage
   | StoryUnfocusedMessage
+  | RoleChangedMessage
   | AIAnalysisStartedMessage
   | AIRecommendationMessage
   | PastStoriesLoadedMessage

client/src/useWebSocket.ts

@@ -255,6 +255,19 @@ export const useWebSocket = (
             })));
             break;
 
+          case MessageType.ROLE_CHANGED:
+            setUsers((prev) => prev.map(user =>
+              user.id === message.userId
+                ? { ...user, role: message.role }
+                : user
+            ));
+            // Update localStorage if it's the current user
+            const roleChangedUser = users.find(u => u.name === userName);
+            if (roleChangedUser?.id === message.userId) {
+              localStorage.setItem('planning_poker_user_role', message.role);
+            }
+            break;
+
           case MessageType.AI_ANALYSIS_STARTED:
             setAiLoadingMap((prev) => {
               const newMap = new Map(prev);

server/src/index.ts

@@ -22,6 +22,7 @@ import {
   VotesResetMessage,
   StoryFocusedMessage,
   StoryUnfocusedMessage,
+  RoleChangedMessage,
   AIAnalysisStartedMessage,
   AIRecommendationMessage,
   PastStoriesLoadedMessage,
@@ -513,6 +514,36 @@ wss.on('connection', (ws: WebSocket) => {
           break;
         }
 
+        case MessageType.CHANGE_ROLE: {
+          const sessionInfo = userToSession.get(ws);
+          if (!sessionInfo) return;
+
+          const { role } = message;
+
+          // Validate role
+          if (role !== 'participant' && role !== 'observer') {
+            const error: ErrorMessage = {
+              type: MessageType.ERROR,
+              message: 'Invalid role. Must be "participant" or "observer"',
+            };
+            ws.send(JSON.stringify(error));
+            break;
+          }
+
+          const success = await sessionManager.changeUserRole(sessionInfo.userId, role);
+
+          if (success) {
+            const roleChanged: RoleChangedMessage = {
+              type: MessageType.ROLE_CHANGED,
+              userId: sessionInfo.userId,
+              role,
+            };
+            await sessionManager.broadcast(sessionInfo.sessionId, roleChanged);
+            console.log(`User ${sessionInfo.userId} changed role to ${role} in session ${sessionInfo.sessionId}`);
+          }
+          break;
+        }
+
         case MessageType.DELETE_STORY: {
           const sessionInfo = userToSession.get(ws);
           if (!sessionInfo) return;

server/src/sessionManager.ts

@@ -747,6 +747,19 @@ export class SessionManager {
     }
   }
 
+  async changeUserRole(userId: string, role: string): Promise<boolean> {
+    try {
+      await this.prisma.user.update({
+        where: { id: userId },
+        data: { role },
+      });
+      return true;
+    } catch (error) {
+      console.error('Error changing user role:', error);
+      return false;
+    }
+  }
+
   async getUserName(sessionId: string, userId: string): Promise<string | null> {
     try {
       const user = await this.prisma.user.findUnique({

server/src/types.ts

@@ -49,6 +49,8 @@ export enum MessageType {
   STORY_FOCUSED = 'story_focused',
   UNFOCUS_STORY = 'unfocus_story',
   STORY_UNFOCUSED = 'story_unfocused',
+  CHANGE_ROLE = 'change_role',
+  ROLE_CHANGED = 'role_changed',
   AI_ANALYSIS_STARTED = 'ai_analysis_started',
   AI_RECOMMENDATION = 'ai_recommendation',
   LOAD_MORE_STORIES = 'load_more_stories',
@@ -110,6 +112,11 @@ export interface UnfocusStoryMessage {
   type: MessageType.UNFOCUS_STORY;
 }
 
+export interface ChangeRoleMessage {
+  type: MessageType.CHANGE_ROLE;
+  role: string;
+}
+
 export interface DeleteStoryMessage {
   type: MessageType.DELETE_STORY;
   storyId: string;
@@ -132,6 +139,7 @@ export type ClientMessage =
   | ResetVotesMessage
   | SetFocusedStoryMessage
   | UnfocusStoryMessage
+  | ChangeRoleMessage
   | LoadMoreStoriesMessage;
 
 export interface UserJoinedMessage {
@@ -196,6 +204,12 @@ export interface StoryUnfocusedMessage {
   type: MessageType.STORY_UNFOCUSED;
 }
 
+export interface RoleChangedMessage {
+  type: MessageType.ROLE_CHANGED;
+  userId: string;
+  role: string;
+}
+
 export interface StoryDeletedMessage {
   type: MessageType.STORY_DELETED;
   storyId: string;
@@ -264,6 +278,7 @@ export type ServerMessage =
   | VotesResetMessage
   | StoryFocusedMessage
   | StoryUnfocusedMessage
+  | RoleChangedMessage
   | AIAnalysisStartedMessage
   | AIRecommendationMessage
   | PastStoriesLoadedMessage