mejoras de UI PlayerStats

2025-08-10 18:14:53 -06:00
parent e6733cf5e4
commit 3c3b19b2ce
8 changed files with 155 additions and 16 deletions
--- a/client/src/services/colyseus.ts
+++ b/client/src/services/colyseus.ts
@@ -29,6 +29,7 @@ class ColyseusService {
  public gameRoom: Ref<Room | null> = ref(null);
  public playerName: Ref<string> = ref("");
  public sessionId: Ref<string> = ref("");
+  public playerColor: Ref<string> = ref("#667eea");

  constructor() {
    const defaultHost = typeof window !== "undefined" ? window.location.hostname : "localhost";
@@ -52,12 +53,17 @@ class ColyseusService {
      room.onMessage("welcome", (data) => {
        this.sessionId.value = data.sessionId;
        this.playerName.value = data.assignedName;
+        if (data.color) this.playerColor.value = data.color;
      });

      room.onMessage("nameUpdated", (data) => {
        this.playerName.value = data.name;
      });

+      room.onMessage("colorUpdated", (data) => {
+        if (data?.color) this.playerColor.value = data.color;
+      });
+
      return room;
    } catch (error) {
      console.error("Failed to join lobby:", error);
@@ -71,6 +77,12 @@ class ColyseusService {
    }
  }

+  async setPlayerColor(color: string): Promise<void> {
+    if (this.lobbyRoom.value) {
+      this.lobbyRoom.value.send("setColor", color);
+    }
+  }
+
  async quickPlay(): Promise<Room> {
    if (!this.lobbyRoom.value) {
      throw new Error("Not in lobby");
@@ -86,7 +98,8 @@ class ColyseusService {
          // Join the game room directly using the roomId
          console.log('Joining game room with name:', this.playerName.value);
          const gameRoom = await this.client.joinById(data.roomId, {
-            playerName: this.playerName.value
+            playerName: this.playerName.value,
+            playerColor: this.playerColor.value
          });
          
          // Ensure the room id is set
@@ -124,7 +137,8 @@ class ColyseusService {
  async joinGameRoom(roomId: string): Promise<Room> {
    try {
      const gameRoom = await this.client.joinById(roomId, {
-        playerName: this.playerName.value
+      playerName: this.playerName.value,
+      playerColor: this.playerColor.value
      });
      
      this.gameRoom.value = gameRoom;
--- a/client/src/views/DemoGame.vue
+++ b/client/src/views/DemoGame.vue
@@ -16,15 +16,7 @@
      </div>

      <div class="players-section">
-        <div v-for="p in players" :key="p.sessionId" class="player-card" :class="{ 'current-player': p.sessionId === sessionId }">
-          <div class="player-name">{{ p.name }}</div>
-          <div class="player-role">Role: {{ p.role || '—' }}</div>
-          <div class="player-tokens">
-            <span>🦃 {{ p.pavoTokens }}</span>
-            <span>🌽 {{ p.eloteTokens }}</span>
-            <span v-if="p.shameTokens">😶 {{ p.shameTokens }}</span>
-          </div>
-        </div>
+        <PlayerStats v-for="p in players" :key="p.sessionId" :player="p" :highlight="p.sessionId === sessionId" />
      </div>

      <div v-if="gameStatus === 'waiting'" class="waiting-area">
@@ -75,6 +67,7 @@ import G2 from './games/G2.vue';
 import G3 from './games/G3.vue';
 import G4 from './games/G4.vue';
 import G5 from './games/G5.vue';
+import PlayerStats from './games/PlayerStats.vue';
 import ChatWidget from './games/ChatWidget.vue';

 const router = useRouter();
@@ -159,12 +152,14 @@ onMounted(() => {
        pavoTokens: player.pavoTokens,
        eloteTokens: player.eloteTokens,
        shameTokens: player.shameTokens,
+        color: player.color,
      });
    }
    $(player).listen("role", (v: string) => { const p = players.value.find(x => x.sessionId === key); if (p) p.role = v; });
    $(player).listen("pavoTokens", (v: number) => { const p = players.value.find(x => x.sessionId === key); if (p) p.pavoTokens = v; });
    $(player).listen("eloteTokens", (v: number) => { const p = players.value.find(x => x.sessionId === key); if (p) p.eloteTokens = v; });
    $(player).listen("shameTokens", (v: number) => { const p = players.value.find(x => x.sessionId === key); if (p) p.shameTokens = v; });
+    $(player).listen("color", (v: string) => { const p = players.value.find(x => x.sessionId === key); if (p) p.color = v; });
  });
  $(room.state).players.onRemove((player: any, key: string) => {
    const i = players.value.findIndex(p => p.sessionId === key);
@@ -212,7 +207,6 @@ function leaveGame() { colyseusService.leaveGame();
 .btn-leave { background:#f44336; color:white; }
 .players-section { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
 .player-card { padding: 12px; background:#f8f9fa; border-radius: 10px; }
-.player-card.current-player { outline: 2px solid #667eea; }
 .player-role { color:#666; margin-top: 4px; }
 .player-tokens { display:flex; gap: 12px; margin-top: 8px; }
 .waiting-area { text-align:center; padding: 24px 0; }
--- a/client/src/views/Lobby.vue
+++ b/client/src/views/Lobby.vue
@@ -19,6 +19,13 @@
        <div class="current-name">
          Playing as: <span class="player-name">{{ playerName || 'guest' }}</span>
        </div>
+        <div class="color-picker">
+          <label class="color-label">Color:</label>
+          <input type="color" v-model="colorInput" @change="updateColor" class="color-input" />
+        </div>
+        <div class="preview">
+          <PlayerStats :player="previewPlayer" :highlight="true" />
+        </div>
      </div>

      <div class="main-actions">
@@ -72,6 +79,7 @@

 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue';
+import PlayerStats from './games/PlayerStats.vue';
 import { useRouter } from 'vue-router';
 import { colyseusService } from '../services/colyseus';
 import { getStateCallbacks } from 'colyseus.js';
@@ -79,15 +87,27 @@ import { getStateCallbacks } from 'colyseus.js';
 const router = useRouter();
 const inputName = ref('');
 const isJoining = ref(false);
+const colorInput = ref('#667eea');
 const availableRooms = ref<any[]>([]);
 const onlinePlayers = ref<any[]>([]);
 const totalPlayers = ref(0);

 const playerName = computed(() => colyseusService.playerName.value);
+const playerColor = computed(() => colyseusService.playerColor.value);
+const previewPlayer = computed(() => ({
+  sessionId: 'preview',
+  name: playerName.value || 'guest',
+  role: 'P1',
+  pavoTokens: 10,
+  eloteTokens: 0,
+  shameTokens: 0,
+  color: colorInput.value || playerColor.value
+}));

 onMounted(async () => {
  try {
    const room = await colyseusService.joinLobby();
+    colorInput.value = colyseusService.playerColor.value || '#667eea';
    const $ = getStateCallbacks(room);
    
    $(room.state).listen("availableRooms", (value: any) => {
@@ -104,7 +124,8 @@ onMounted(async () => {
        onlinePlayers.value.push({
          sessionId: player.sessionId,
          name: player.name,
-          inGame: player.inGame
+          inGame: player.inGame,
+          color: player.color
        });
      }

@@ -117,6 +138,11 @@ onMounted(async () => {
        const p = onlinePlayers.value.find(p => p.sessionId === player.sessionId);
        if (p) p.inGame = value;
      });
+
+      $(player).listen("color", (value: string) => {
+        const p = onlinePlayers.value.find(p => p.sessionId === player.sessionId);
+        if (p) p.color = value;
+      });
    });

    $(room.state).players.onRemove((player: any) => {
@@ -142,6 +168,11 @@ async function updateName() {
  }
 }

+async function updateColor() {
+  const c = colorInput.value;
+  await colyseusService.setPlayerColor(c);
+}
+
 async function handleQuickPlay() {
  isJoining.value = true;
  console.log('Starting quickPlay...');
@@ -257,6 +288,14 @@ async function joinRoom(roomId: string) {
  font-weight: bold;
 }

+.color-picker { display:flex; align-items:center; gap: 10px; margin: 12px 0 16px; }
+.color-label { font-weight: 600; color:#444; margin-right: 6px; }
+.color-input { width: 44px; height: 32px; padding: 0; border:1px solid #000; border-radius:8px; background: transparent; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
+.color-input::-webkit-color-swatch-wrapper { padding:2px; border-radius:8px; }
+.color-input::-webkit-color-swatch { border: none; border-radius:6px; }
+.color-input::-moz-color-swatch { border: none; border-radius:6px; }
+.preview { margin-top: 8px; }
+
 .btn {
  padding: 12px 24px;
  border: none;
--- a/client/src/views/games/PlayerStats.vue
+++ b/client/src/views/games/PlayerStats.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="player-card" :class="{ 'current-player': highlight }" :style="{ '--primary': primary } as any">
+    <div class="header">
+      <div class="name">{{ player.name || '—' }}</div>
+      <div class="role" :class="player.role">{{ player.role || '—' }}</div>
+    </div>
+    <div class="tokens">
+      <div class="token pill">
+        <span class="icon">🦃</span>
+        <span class="val">{{ player.pavoTokens ?? 0 }}</span>
+      </div>
+      <div class="token pill">
+        <span class="icon">🌽</span>
+        <span class="val">{{ player.eloteTokens ?? 0 }}</span>
+      </div>
+      <div v-if="(player.shameTokens ?? 0) > 0" class="token pill subtle">
+        <span class="icon">😶</span>
+        <span class="val">{{ player.shameTokens }}</span>
+      </div>
+    </div>
+    <div class="score">
+      <span class="label">Puntuación</span>
+      <span class="value">{{ displayScore }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface PlayerView {
+  sessionId?: string;
+  name: string;
+  role: 'P1' | 'P2' | '';
+  pavoTokens: number;
+  eloteTokens: number;
+  shameTokens?: number;
+}
+
+const props = defineProps<{ player: PlayerView & { color?: string }; highlight?: boolean }>();
+const highlight = computed(() => !!props.highlight);
+
+const scoreAsP1 = computed(() => (props.player.pavoTokens || 0) * 1 + (props.player.eloteTokens || 0) * 2);
+const scoreAsP2 = computed(() => (props.player.eloteTokens || 0) * 1 + (props.player.pavoTokens || 0) * 2);
+const displayScore = computed(() => props.player.role === 'P2' ? scoreAsP2.value : scoreAsP1.value);
+const primary = computed(() => props.player.color || '#667eea');
+</script>
+
+<style scoped>
+.player-card { background:#fff; border-radius:12px; padding:12px; border:1px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,0.08); }
+.player-card.current-player { outline: 0.5px solid b; box-shadow:0 1px 7px  var(--primary); }
+.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
+.name { font-weight: 700; color:#333; }
+.role { font-size:12px; padding:2px 8px; border-radius:10px; background:#f0f0f0; color:#555; }
+.role.P1 { background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); }
+.role.P2 { background: color-mix(in srgb, var(--primary) 15%, white); color: var(--primary); }
+.tokens { display:flex; gap:10px; margin:8px 0; }
+.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f7f7f7; border:1px solid #eee; }
+.pill.subtle { background:#fafafa; color:#666; }
+.icon { font-size: 16px; }
+.val { font-weight: 600; color:#333; }
+.score { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding:8px; border-radius:10px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white) 0%, #ffffff 100%); border:1px solid color-mix(in srgb, var(--primary) 30%, #e6e9ff); }
+.score .label { font-size:12px; color: var(--primary); font-weight:700; }
+.score .value { font-size:18px; font-weight:800; color: var(--primary); }
+</style>
--- a/server/src/rooms/GameRoom.ts
+++ b/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,
--- a/server/src/rooms/LobbyRoom.ts
+++ b/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);
    }
  }
-}
+}
--- a/server/src/rooms/schemas/LobbyState.ts
+++ b/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;
    }
  }
-}
+}
--- a/server/src/rooms/schemas/Player.ts
+++ b/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 {