valtech-components 4.0.395 → 4.0.397

package/fesm2022/valtech-components.mjs

@@ -58,7 +58,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.395';
+const VERSION = '4.0.397';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -61587,13 +61587,14 @@ const COLLECTION_PATH = 'miniGames/chessimals/games';
 const GAME_TTL_MS = 24 * 60 * 60 * 1000;
 class ChessimalsOnlineService {
     constructor() {
-        this.auth = inject(Auth);
+        this.firebaseAuth = inject(Auth);
+        this.auth = inject(AuthService);
         this.firestore = inject(Firestore);
         this.firebase = inject(FirebaseService);
         this.profiles = inject(MiniGamePlayerProfileService);
     }
     get currentUid() {
-        return this.auth.currentUser?.uid;
+        return this.firebaseAuth.currentUser?.uid;
     }
     normalizeGameId(value) {
         const raw = (value ?? '').trim().toUpperCase();
@@ -61663,11 +61664,11 @@ class ChessimalsOnlineService {
             this.assertNotExpired(state);
             if (this.isParticipant(state, uid))
                 return;
-            if (state.status === 'waiting' && state.online?.lobby?.uid === uid)
+            if (this.isHostWaiting(state, uid))
                 return;
             if (state.status !== 'waiting' || !state.online?.lobby)
                 return;
-            if (state.online.pendingGuest?.uid === uid)
+            if (this.isPendingGuest(state, uid))
                 return;
             const now = new Date();
             const guest = this.createParticipant(uid, now.toISOString());
@@ -61692,7 +61693,7 @@ class ChessimalsOnlineService {
                 throw new Error('CHESSIMALS_GAME_NOT_FOUND');
             const state = snapshot.data();
             this.assertNotExpired(state);
-            if (state.status !== 'waiting' || state.online?.lobby?.uid !== uid || !state.online.pendingGuest)
+            if (!this.isHostWaiting(state, uid) || !state.online.pendingGuest)
                 return;
             const now = new Date();
             const [hostSide, guestSide] = Math.random() > 0.5 ? ['white', 'black'] : ['black', 'white'];
@@ -61728,7 +61729,7 @@ class ChessimalsOnlineService {
                 throw new Error('CHESSIMALS_GAME_NOT_FOUND');
             const state = snapshot.data();
             this.assertNotExpired(state);
-            if (state.status !== 'waiting' || state.online?.lobby?.uid !== uid || !state.online.pendingGuest)
+            if (!this.isHostWaiting(state, uid) || !state.online.pendingGuest)
                 return;
             const now = new Date();
             const online = { ...state.online, updatedAt: now.toISOString() };
@@ -61830,8 +61831,12 @@ class ChessimalsOnlineService {
             const participants = state.online?.participants;
             if (!participants?.white || !participants.black || !state.online)
                 return;
-            const requests = Array.from(new Set([...(state.online.rematchRequests ?? []), uid]));
-            const bothReady = [participants.white.uid, participants.black.uid].every((item) => requests.includes(item));
+            const currentParticipant = this.participantForSide(state, this.participantSide(state, uid));
+            const requestKey = this.participantKey(currentParticipant);
+            if (!requestKey)
+                return;
+            const requests = Array.from(new Set([...(state.online.rematchRequests ?? []), requestKey]));
+            const bothReady = [participants.white, participants.black].every((item) => this.participantRequestKeys(item).some((key) => requests.includes(key)));
             const now = new Date();
             if (!bothReady) {
                 transaction.set(ref, {
@@ -61862,20 +61867,62 @@ class ChessimalsOnlineService {
         });
     }
     participantSide(state, uid = this.currentUid) {
-        if (!uid)
-            return undefined;
-        const participants = state.online?.participants;
-        if (participants?.white?.uid === uid)
-            return 'white';
-        if (participants?.black?.uid === uid)
-            return 'black';
+        const entries = this.participantEntries(state);
+        const currentSeatKey = this.currentSeatKey(uid);
+        if (currentSeatKey) {
+            const seatMatch = entries.find(([, participant]) => this.participantKey(participant) === currentSeatKey);
+            if (seatMatch)
+                return seatMatch[0];
+        }
+        if (uid) {
+            const currentProfile = this.profiles.activeProfile();
+            if (currentProfile) {
+                const legacyProfileMatch = entries.find(([, participant]) => participant.uid === uid
+                    && participant.avatar === currentProfile.avatar
+                    && this.normalizeColor(participant.color) === this.normalizeColor(currentProfile.color));
+                if (legacyProfileMatch)
+                    return legacyProfileMatch[0];
+            }
+            const uidMatches = entries.filter(([, participant]) => participant.uid === uid);
+            if (uidMatches.length === 1)
+                return uidMatches[0][0];
+        }
+        const accountUserId = this.auth.user()?.userId;
+        if (accountUserId) {
+            const accountMatches = entries.filter(([, participant]) => participant.accountUserId === accountUserId);
+            if (accountMatches.length === 1)
+                return accountMatches[0][0];
+        }
         return undefined;
     }
     isParticipant(state, uid = this.currentUid) {
         return !!this.participantSide(state, uid);
     }
     isHostWaiting(state, uid = this.currentUid) {
-        return !!uid && state.status === 'waiting' && state.online?.lobby?.uid === uid;
+        return state.status === 'waiting' && this.matchesCurrentParticipant(state.online?.lobby, uid);
+    }
+    isPendingGuest(state, uid = this.currentUid) {
+        return state.status === 'waiting' && this.matchesCurrentParticipant(state.online?.pendingGuest, uid);
+    }
+    hasCurrentRematchRequest(state, uid = this.currentUid) {
+        const side = this.participantSide(state, uid);
+        const participant = this.participantForSide(state, side);
+        return this.participantRequestKeys(participant).some((key) => (state.online?.rematchRequests ?? []).includes(key));
+    }
+    hasOpponentRematchRequest(state, uid = this.currentUid) {
+        const side = this.participantSide(state, uid);
+        if (!side)
+            return false;
+        const opponent = this.participantForSide(state, side === 'white' ? 'black' : 'white');
+        return this.participantRequestKeys(opponent).some((key) => (state.online?.rematchRequests ?? []).includes(key));
+    }
+    participantKey(participant) {
+        return participant?.seatKey
+            || this.buildSeatKey(participant?.uid, participant?.profileId)
+            || participant?.profileId
+            || participant?.accountUserId
+            || participant?.uid
+            || '';
     }
     shareUrl(gameId, baseRoute = '/mini-games') {
         const origin = typeof window === 'undefined' ? '' : window.location.origin;
@@ -61905,7 +61952,7 @@ class ChessimalsOnlineService {
     }
     async ensureUser() {
         await this.firebase.whenFirebaseAuthReady();
-        const user = this.auth.currentUser;
+        const user = this.firebaseAuth.currentUser;
         if (user?.uid) {
             await user.getIdToken();
             return user.uid;
@@ -61921,16 +61968,88 @@ class ChessimalsOnlineService {
         }
     }
     createParticipant(uid, joinedAt) {
+        const user = this.auth.user();
+        const firebaseUser = this.firebaseAuth.currentUser;
         const profile = this.profiles.activeProfile();
+        const handle = this.normalizeHandle(user?.handle);
+        const avatarUrl = user?.avatarUrl?.trim() || firebaseUser?.photoURL?.trim() || undefined;
+        const email = user?.email?.trim() || firebaseUser?.email?.trim() || undefined;
+        const profileId = profile?.id ?? user?.userId ?? uid;
         return {
             uid,
-            profileId: profile?.id ?? 'local-player',
-            name: this.profiles.displayName(profile, 'Jugador'),
+            accountUserId: user?.userId,
+            profileId,
+            seatKey: this.buildSeatKey(uid, profileId),
+            name: user?.name?.trim()
+                || firebaseUser?.displayName?.trim()
+                || email
+                || this.profiles.displayName(profile, 'Jugador'),
+            handle,
+            email,
             avatar: profile?.avatar ?? '♟️',
+            avatarUrl,
             color: profile?.color ?? '#ff00b2',
             joinedAt,
         };
     }
+    normalizeHandle(handle) {
+        const trimmed = handle?.trim();
+        if (!trimmed)
+            return undefined;
+        return trimmed.startsWith('@') ? trimmed : `@${trimmed}`;
+    }
+    buildSeatKey(uid, profileId) {
+        const normalizedUid = uid?.trim();
+        const normalizedProfileId = profileId?.trim();
+        if (!normalizedUid || !normalizedProfileId)
+            return undefined;
+        return `${normalizedUid}:${normalizedProfileId}`;
+    }
+    currentSeatKey(uid = this.currentUid) {
+        return this.buildSeatKey(uid, this.profiles.activeProfile()?.id);
+    }
+    participantForSide(state, side) {
+        if (!side)
+            return undefined;
+        return state.online?.participants?.[side];
+    }
+    participantEntries(state) {
+        const participants = state.online?.participants;
+        return ['white', 'black']
+            .map((side) => [side, participants?.[side]])
+            .filter((entry) => !!entry[1]);
+    }
+    participantRequestKeys(participant) {
+        if (!participant)
+            return [];
+        const keys = [
+            this.participantKey(participant),
+            participant.uid,
+            participant.accountUserId,
+            participant.profileId,
+        ];
+        return Array.from(new Set(keys.filter((key) => !!key)));
+    }
+    matchesCurrentParticipant(participant, uid = this.currentUid) {
+        if (!participant)
+            return false;
+        const seatKey = this.currentSeatKey(uid);
+        if (seatKey && this.participantKey(participant) === seatKey)
+            return true;
+        const profile = this.profiles.activeProfile();
+        if (uid && profile) {
+            return participant.uid === uid
+                && participant.avatar === profile.avatar
+                && this.normalizeColor(participant.color) === this.normalizeColor(profile.color);
+        }
+        if (uid && participant.uid === uid)
+            return true;
+        const accountUserId = this.auth.user()?.userId;
+        return !!accountUserId && participant.accountUserId === accountUserId;
+    }
+    normalizeColor(color) {
+        return (color ?? '').trim().toLowerCase();
+    }
     withUpdatedAt(state, date = new Date()) {
         if (!state.online)
             return state;
@@ -61949,10 +62068,13 @@ class ChessimalsOnlineService {
         };
     }
     createMoveLogEntry(args) {
+        const participant = this.participantForSide(args.state, args.side);
         return this.withoutUndefined({
             id: args.id,
             at: new Date().toISOString(),
             uid: args.uid,
+            profileId: participant?.profileId,
+            seatKey: this.participantKey(participant) || undefined,
             side: args.side,
             status: args.status,
             code: args.code,
@@ -61977,8 +62099,8 @@ class ChessimalsOnlineService {
         if (!state.online)
             return undefined;
         const side = this.participantSide(state, uid);
-        const isLobbyHost = state.online.lobby?.uid === uid;
-        const isPendingGuest = state.online.pendingGuest?.uid === uid;
+        const isLobbyHost = this.isHostWaiting(state, uid);
+        const isPendingGuest = this.isPendingGuest(state, uid);
         if (!side && !isLobbyHost && !isPendingGuest)
             return undefined;
         const opponent = side
@@ -63172,7 +63294,7 @@ class ChessimalsGameComponent {
                 return 'spectator';
             if (this.online.isHostWaiting(game, uid))
                 return 'waiting';
-            if (game.status === 'waiting' && game.online?.pendingGuest?.uid === uid)
+            if (this.online.isPendingGuest(game, uid))
                 return 'pending';
             return this.online.participantSide(game, uid) ?? 'spectator';
         });
@@ -63194,9 +63316,8 @@ class ChessimalsGameComponent {
             const uid = this.onlineUid();
             if (!uid || this.onlineRole() === 'spectator')
                 return 'none';
-            const requests = game.online?.rematchRequests ?? [];
-            const hasMine = requests.includes(uid);
-            const hasOther = requests.some((item) => item !== uid);
+            const hasMine = this.online.hasCurrentRematchRequest(game, uid);
+            const hasOther = this.online.hasOpponentRematchRequest(game, uid);
             if (hasOther && !hasMine)
                 return 'incoming';
             if (hasMine)
@@ -63918,13 +64039,33 @@ class ChessimalsGameComponent {
         const uid = this.onlineUid();
         return !!uid
             && game.mode === 'online'
-            && game.status === 'waiting'
-            && game.online?.lobby?.uid === uid
+            && this.online.isHostWaiting(game, uid)
             && !!game.online.pendingGuest;
     }
     pendingGuestName() {
         return this.game().online?.pendingGuest?.name ?? this.t('defaultPlayerName');
     }
+    pendingGuestHandle() {
+        return this.game().online?.pendingGuest?.handle ?? '';
+    }
+    pendingGuestAvatar() {
+        return this.game().online?.pendingGuest?.avatar ?? '♟️';
+    }
+    pendingGuestAvatarUrl() {
+        return this.game().online?.pendingGuest?.avatarUrl ?? '';
+    }
+    pendingGuestAvatarProps() {
+        const guest = this.game().online?.pendingGuest;
+        return {
+            user: {
+                name: guest?.name,
+                handle: guest?.handle,
+                avatarUrl: guest?.avatarUrl,
+            },
+            size: 'small',
+            bordered: true,
+        };
+    }
     waitingTitle() {
         if (this.canReviewPendingGuest())
             return this.t('chessimalsJoinRequestTitle');
@@ -64079,12 +64220,12 @@ class ChessimalsGameComponent {
                 this.game.set(state);
                 this.selectedBoardSize.set(state.boardSize);
                 this.resumeSplashVisible.set(false);
-                const previousPendingUid = previous.id === state.id ? previous.online?.pendingGuest?.uid : undefined;
-                const nextPendingUid = state.online?.pendingGuest?.uid;
+                const previousPendingKey = previous.id === state.id ? this.online.participantKey(previous.online?.pendingGuest) : '';
+                const nextPendingKey = this.online.participantKey(state.online?.pendingGuest);
                 if (state.status === 'waiting' &&
-                    state.online?.lobby?.uid === this.online.currentUid &&
-                    !!nextPendingUid &&
-                    nextPendingUid !== previousPendingUid) {
+                    this.online.isHostWaiting(state, this.online.currentUid) &&
+                    !!nextPendingKey &&
+                    nextPendingKey !== previousPendingKey) {
                     this.audio.chessimalsJoinRequest();
                     void this.haptics.success();
                 }
@@ -64312,12 +64453,19 @@ class ChessimalsGameComponent {
               </div>
               @if (canReviewPendingGuest()) {
                 <div class="chessimals-pending-player">
-                  <span class="chessimals-player-strip__avatar" aria-hidden="true">
-                    {{ game().online?.pendingGuest?.avatar ?? '♟️' }}
-                  </span>
+                  @if (pendingGuestAvatarUrl()) {
+                    <val-user-avatar [props]="pendingGuestAvatarProps()" />
+                  } @else {
+                    <span class="chessimals-player-strip__avatar" aria-hidden="true">
+                      {{ pendingGuestAvatar() }}
+                    </span>
+                  }
                   <div>
                     <small>{{ t('chessimalsJoinRequestPlayer') }}</small>
                     <strong>{{ pendingGuestName() }}</strong>
+                    @if (pendingGuestHandle()) {
+                      <small>{{ pendingGuestHandle() }}</small>
+                    }
                   </div>
                 </div>
               }
@@ -64876,12 +65024,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               </div>
               @if (canReviewPendingGuest()) {
                 <div class="chessimals-pending-player">
-                  <span class="chessimals-player-strip__avatar" aria-hidden="true">
-                    {{ game().online?.pendingGuest?.avatar ?? '♟️' }}
-                  </span>
+                  @if (pendingGuestAvatarUrl()) {
+                    <val-user-avatar [props]="pendingGuestAvatarProps()" />
+                  } @else {
+                    <span class="chessimals-player-strip__avatar" aria-hidden="true">
+                      {{ pendingGuestAvatar() }}
+                    </span>
+                  }
                   <div>
                     <small>{{ t('chessimalsJoinRequestPlayer') }}</small>
                     <strong>{{ pendingGuestName() }}</strong>
+                    @if (pendingGuestHandle()) {
+                      <small>{{ pendingGuestHandle() }}</small>
+                    }
                   </div>
                 </div>
               }