juego pausado al irse un jugador
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user