juego pausado al irse un jugador

This commit is contained in:
2025-08-11 18:47:59 -06:00
parent ee0243d456
commit deb63d4e38
2 changed files with 34 additions and 1 deletions

View File

@@ -54,6 +54,15 @@
<button @click="leaveGame" class="btn btn-leave">Leave Game</button> <button @click="leaveGame" class="btn btn-leave">Leave Game</button>
</div> </div>
</div> </div>
<!-- Pause overlay to block all interactions -->
<div v-if="gameStatus === 'paused'" class="pause-overlay">
<div class="pause-box">
<div class="icon"></div>
<div class="title">Juego en pausa</div>
<div class="hint">Esperando a que ambos jugadores estén conectados</div>
</div>
</div>
</div> </div>
</template> </template>
@@ -232,4 +241,11 @@ function leaveGame() {
.spinner { width:40px; height:40px; border: 4px solid #eee; border-top:4px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 8px; } .spinner { width:40px; height:40px; border: 4px solid #eee; border-top:4px solid #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 8px; }
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} } @keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.outcome-box { display:flex; gap: 24px; background:#f5f5f5; padding: 12px; border-radius: 8px; } .outcome-box { display:flex; gap: 24px; background:#f5f5f5; padding: 12px; border-radius: 8px; }
/* Full-screen overlay while paused */
.pause-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center; z-index: 1000; }
.pause-box { background: white; color:#333; border-radius: 16px; padding: 24px 32px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.pause-box .icon { font-size: 48px; margin-bottom: 8px; }
.pause-box .title { font-weight: 800; font-size: 20px; }
.pause-box .hint { margin-top: 6px; color:#666; font-size: 14px; }
</style> </style>

View File

@@ -252,7 +252,24 @@ export class GameRoom extends Room<GameState> {
} }
} }
this.allowReconnection(client, 30); // Allow reconnection; when it happens, mark player connected and resume if both are present
const reconnection = this.allowReconnection(client, 30);
reconnection.then((newClient) => {
const p = this.state.players.get(client.sessionId);
if (p) {
p.connected = true;
}
// Provide basic identity back to the reconnecting client
try {
newClient.send("playerInfo", { sessionId: client.sessionId, name: p?.name || "player", roomId: this.roomId });
} catch {}
if (this.state.gameStatus === GameStatus.PAUSED && this.getConnectedPlayersCount() === 2) {
this.state.resumeGame();
this.setMetadata({ gameStatus: 'playing' });
}
}).catch(() => {
// reconnection window expired; nothing to do here
});
} }
async onReconnect(client: Client) { async onReconnect(client: Client) {