mejoras de UI PlayerStats

server/src/rooms/GameRoom.ts

@@ -180,8 +180,14 @@ export class GameRoom extends Room<GameState> {
 
     // Use the playerName passed from the lobby - don't generate a new one!
     const playerName = options.playerName || "player";
+    const playerColor = (options.playerColor && typeof options.playerColor === 'string') ? options.playerColor : "#667eea";
     
     const player = this.state.addPlayer(client.sessionId, playerName);
+    // Persist selected color
+    const p = this.state.players.get(client.sessionId);
+    if (p) {
+      p.color = playerColor;
+    }
 
     client.send("playerInfo", {
       sessionId: client.sessionId,

server/src/rooms/LobbyRoom.ts

@@ -13,6 +13,10 @@ export class LobbyRoom extends Room<LobbyState> {
       this.handleSetName(client, playerName);
     });
 
+    this.onMessage("setColor", (client, color: string) => {
+      this.handleSetColor(client, color);
+    });
+
     this.onMessage("quickPlay", (client) => {
       this.handleQuickPlay(client);
     });
@@ -36,7 +40,8 @@ export class LobbyRoom extends Room<LobbyState> {
 
     client.send("welcome", {
       sessionId: client.sessionId,
-      assignedName: uniqueName
+      assignedName: uniqueName,
+      color: this.state.players.get(client.sessionId)?.color || "#667eea"
     });
 
     this.updateAvailableRooms();
@@ -80,6 +85,18 @@ export class LobbyRoom extends Room<LobbyState> {
     });
   }
 
+  private handleSetColor(client: Client, color: string) {
+    const currentPlayer = this.state.players.get(client.sessionId);
+    if (!currentPlayer) return;
+    const sanitized = (color || '').toString().trim();
+    // Basic validation for hex color (#rgb or #rrggbb)
+    if (!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(sanitized)) {
+      return;
+    }
+    currentPlayer.color = sanitized;
+    client.send("colorUpdated", { color: sanitized });
+  }
+
   private async handleQuickPlay(client: Client) {
     const player = this.state.players.get(client.sessionId);
     if (!player || player.inGame) return;
@@ -166,4 +183,4 @@ export class LobbyRoom extends Room<LobbyState> {
       console.error("[LobbyRoom] Error updating available rooms:", error);
     }
   }
-}
+}

server/src/rooms/schemas/LobbyState.ts

@@ -4,12 +4,14 @@ export class LobbyPlayer extends Schema {
   @type("string") sessionId: string = "";
   @type("string") name: string = "";
   @type("boolean") inGame: boolean = false;
+  @type("string") color: string = "#667eea";
 
   constructor(sessionId: string, name: string) {
     super();
     this.sessionId = sessionId;
     this.name = name;
     this.inGame = false;
+    this.color = "#667eea";
   }
 }
 
@@ -58,4 +60,4 @@ export class LobbyState extends Schema {
       player.inGame = inGame;
     }
   }
-}
+}

server/src/rooms/schemas/Player.ts

@@ -9,6 +9,7 @@ export class Player extends Schema {
   @type("number") pavoTokens: number = 0;
   @type("number") eloteTokens: number = 0;
   @type("number") shameTokens: number = 0;
+  @type("string") color: string = "#667eea";
 
   constructor(sessionId: string, name: string) {
     super();
@@ -20,6 +21,7 @@ export class Player extends Schema {
     this.pavoTokens = 0;
     this.eloteTokens = 0;
     this.shameTokens = 0;
+    this.color = "#667eea";
   }
 
   incrementClicks(): void {