feat: Migración completa de SnatchGame a Nuxt 4
- Creado nuevo proyecto Nuxt 4 con estructura app/ - Servidor Colyseus separado para evitar problemas con decoradores - Migrado GameRoom y toda la lógica del juego - Implementado cliente con composables useGameClient - Panel de administración funcional - Componentes Vue migrados (HomeScreen, GameScreen, PlayerCard, etc) - Configuración para ejecutar ambos servidores (npm run dev:all)
This commit is contained in:
3
nuxt-snatchgame/.env.example
Normal file
3
nuxt-snatchgame/.env.example
Normal file
@@ -0,0 +1,3 @@
|
||||
NUXT_PUBLIC_GAME_NAME=SnatchGame
|
||||
NUXT_PUBLIC_WS_URL=ws://localhost:2567
|
||||
NODE_ENV=development
|
||||
24
nuxt-snatchgame/.gitignore
vendored
Normal file
24
nuxt-snatchgame/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
74
nuxt-snatchgame/README.md
Normal file
74
nuxt-snatchgame/README.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# Snatch Game - Nuxt 3 Migration
|
||||
|
||||
Migración completa del juego SnatchGame a una aplicación unificada Nuxt 3.
|
||||
|
||||
## Arquitectura
|
||||
|
||||
- **Frontend**: Nuxt 3 (SSR deshabilitado)
|
||||
- **Backend de juego**: Servidor Colyseus independiente (puerto 2567)
|
||||
- **Comunicación**: WebSocket para tiempo real
|
||||
|
||||
## Instalación
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## Desarrollo
|
||||
|
||||
Ejecutar ambos servidores (Nuxt + Colyseus):
|
||||
|
||||
```bash
|
||||
npm run dev:all
|
||||
```
|
||||
|
||||
O ejecutar por separado:
|
||||
|
||||
```bash
|
||||
# Terminal 1 - Servidor Nuxt (puerto 3000)
|
||||
npm run dev
|
||||
|
||||
# Terminal 2 - Servidor Colyseus (puerto 2567)
|
||||
npm run dev:colyseus
|
||||
```
|
||||
|
||||
## URLs
|
||||
|
||||
- Cliente del juego: http://localhost:3000
|
||||
- Panel admin: http://localhost:3000/admin
|
||||
- WebSocket Colyseus: ws://localhost:2567
|
||||
- Monitor Colyseus: http://localhost:2567/monitor
|
||||
|
||||
## Estructura del proyecto
|
||||
|
||||
```
|
||||
nuxt-snatchgame/
|
||||
├── pages/ # Páginas de Nuxt
|
||||
│ ├── index.vue # Cliente del juego
|
||||
│ └── admin.vue # Panel de administración
|
||||
├── components/ # Componentes Vue
|
||||
│ ├── game/ # Componentes del juego
|
||||
│ └── admin/ # Componentes admin
|
||||
├── composables/ # Composables Vue
|
||||
│ ├── useGameClient.ts # Cliente Colyseus
|
||||
│ └── useAdminService.ts # Servicio admin
|
||||
├── server/ # Backend
|
||||
│ ├── colyseus-server.ts # Servidor Colyseus
|
||||
│ └── rooms/ # Salas de juego
|
||||
│ └── GameRoom.ts # Lógica del juego
|
||||
└── public/ # Assets estáticos
|
||||
```
|
||||
|
||||
## Características implementadas
|
||||
|
||||
✅ Cliente del juego con conexión WebSocket
|
||||
✅ Panel de administración
|
||||
✅ Sistema de intercambio de tokens
|
||||
✅ Gestión de jugadores y salas
|
||||
✅ Control administrativo del juego
|
||||
|
||||
## Notas de la migración
|
||||
|
||||
- El servidor Colyseus se ejecuta de forma independiente para evitar problemas con decoradores TypeScript
|
||||
- SSR deshabilitado ya que es una aplicación de juego en tiempo real
|
||||
- Los endpoints admin se conectan directamente al servidor Colyseus
|
||||
3
nuxt-snatchgame/app/app.vue
Normal file
3
nuxt-snatchgame/app/app.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<NuxtPage />
|
||||
</template>
|
||||
328
nuxt-snatchgame/app/components/GameScreen.vue
Normal file
328
nuxt-snatchgame/app/components/GameScreen.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<div class="game-container">
|
||||
<div v-if="!gameState" class="loading">
|
||||
<h2>Esperando estado del juego...</h2>
|
||||
</div>
|
||||
|
||||
<div v-else class="game-content">
|
||||
<!-- Game Header -->
|
||||
<div class="game-header">
|
||||
<div class="game-info">
|
||||
<h2>Snatch Game</h2>
|
||||
<div class="game-status">
|
||||
<span>Ronda: {{ gameState.round }}</span>
|
||||
<span>Fase: {{ gamePhaseDisplay }}</span>
|
||||
<span>Jugadores: {{ playerCount }}/{{ gameState.maxPlayers }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Waiting Screen -->
|
||||
<div v-if="gameState.gamePhase === 'waiting'" class="waiting-room">
|
||||
<h3>Esperando jugadores...</h3>
|
||||
<p>Se necesitan {{ gameState.minPlayers }} jugadores para comenzar</p>
|
||||
<div class="players-waiting">
|
||||
<div v-for="[id, player] in gameState.players" :key="id" class="player-waiting">
|
||||
{{ player.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Trading Phase -->
|
||||
<div v-else-if="gameState.gamePhase === 'trading'" class="trading-phase">
|
||||
<div class="my-info">
|
||||
<h3>Tu información</h3>
|
||||
<div class="role">Productor de: {{ currentPlayer?.producerRole }}</div>
|
||||
<div class="tokens">
|
||||
<div>🦃 Pavos: {{ currentPlayer?.tokens.turkey || 0 }}</div>
|
||||
<div>☕ Café: {{ currentPlayer?.tokens.coffee || 0 }}</div>
|
||||
<div>🌽 Maíz: {{ currentPlayer?.tokens.corn || 0 }}</div>
|
||||
</div>
|
||||
<div class="points">Puntos: {{ currentPlayer?.points || 0 }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Other Players -->
|
||||
<div class="other-players">
|
||||
<h3>Otros jugadores</h3>
|
||||
<div class="players-grid">
|
||||
<div v-for="[id, player] in otherPlayers" :key="id" class="player-card">
|
||||
<PlayerCard :player="player" :is-current="false" @make-offer="onMakeOffer(id)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Trade Offers -->
|
||||
<div v-if="activeOffers.length > 0" class="trade-offers">
|
||||
<h3>Ofertas de intercambio</h3>
|
||||
<div v-for="offer in activeOffers" :key="offer.id" class="offer-card">
|
||||
<TradeOfferCard
|
||||
:offer="offer"
|
||||
:current-player-id="currentPlayerId"
|
||||
@respond="onRespondToOffer"
|
||||
@cancel="onCancelOffer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paused Phase -->
|
||||
<div v-else-if="gameState.gamePhase === 'paused'" class="paused-phase">
|
||||
<h2>⏸️ Juego pausado</h2>
|
||||
<p>El administrador ha pausado el juego</p>
|
||||
</div>
|
||||
|
||||
<!-- Results Phase -->
|
||||
<div v-else-if="gameState.gamePhase === 'results'" class="results-phase">
|
||||
<h2>Resultados de la ronda {{ gameState.round }}</h2>
|
||||
<div class="results-grid">
|
||||
<div v-for="[id, player] in gameState.players" :key="id" class="result-card">
|
||||
<h4>{{ player.name }}</h4>
|
||||
<p>Puntos: {{ player.points }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
gameClient: any
|
||||
}>()
|
||||
|
||||
const gameState = computed(() => props.gameClient?.gameState.value)
|
||||
const currentPlayerId = computed(() => props.gameClient?.currentPlayerId.value)
|
||||
const currentPlayer = computed(() => {
|
||||
if (!gameState.value || !currentPlayerId.value) return null
|
||||
return gameState.value.players.get(currentPlayerId.value)
|
||||
})
|
||||
|
||||
const otherPlayers = computed(() => {
|
||||
if (!gameState.value) return new Map()
|
||||
const others = new Map()
|
||||
gameState.value.players.forEach((player, id) => {
|
||||
if (id !== currentPlayerId.value) {
|
||||
others.set(id, player)
|
||||
}
|
||||
})
|
||||
return others
|
||||
})
|
||||
|
||||
const playerCount = computed(() => gameState.value?.players.size || 0)
|
||||
|
||||
const gamePhaseDisplay = computed(() => {
|
||||
const phase = gameState.value?.gamePhase
|
||||
switch (phase) {
|
||||
case 'waiting': return 'Esperando jugadores'
|
||||
case 'trading': return 'Intercambio'
|
||||
case 'paused': return 'Pausado'
|
||||
case 'results': return 'Resultados'
|
||||
default: return phase
|
||||
}
|
||||
})
|
||||
|
||||
const activeOffers = computed(() => {
|
||||
if (!gameState.value) return []
|
||||
return gameState.value.activeTradeOffers.filter(offer =>
|
||||
offer.status === 'pending' &&
|
||||
(offer.offererId === currentPlayerId.value || offer.targetId === currentPlayerId.value)
|
||||
)
|
||||
})
|
||||
|
||||
const onMakeOffer = (targetId: string) => {
|
||||
// This would open a modal or form to create an offer
|
||||
console.log('Make offer to:', targetId)
|
||||
// For now, create a simple offer
|
||||
props.gameClient.makeOffer(targetId,
|
||||
{ turkey: 1, coffee: 0, corn: 0 },
|
||||
{ turkey: 0, coffee: 1, corn: 0 }
|
||||
)
|
||||
}
|
||||
|
||||
const onRespondToOffer = (offerId: string, response: string) => {
|
||||
props.gameClient.respondToOffer(offerId, response)
|
||||
}
|
||||
|
||||
const onCancelOffer = (offerId: string) => {
|
||||
props.gameClient.cancelOffer(offerId)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.game-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.game-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.game-header {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.game-info h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.game-status {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.waiting-room {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.players-waiting {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.player-waiting {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.trading-phase {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.my-info {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.my-info h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.role {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.tokens {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.points {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.other-players {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.other-players h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.players-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.trade-offers {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.trade-offers h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.offer-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.paused-phase {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.results-phase {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-card h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.result-card p {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: #ffd700;
|
||||
}
|
||||
</style>
|
||||
160
nuxt-snatchgame/app/components/HomeScreen.vue
Normal file
160
nuxt-snatchgame/app/components/HomeScreen.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="branding">
|
||||
<img src="/assets/logo.svg" alt="Snatch Game Logo" class="logo" />
|
||||
<h1>Snatch Game</h1>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button @click="onJoin" :disabled="isConnecting">
|
||||
{{ isConnecting ? 'Conectando...' : 'Unirse a partida' }}
|
||||
</button>
|
||||
<button @click="onSettings">Configuración</button>
|
||||
<button @click="onLogin">Iniciar sesión</button>
|
||||
</div>
|
||||
|
||||
<div v-if="connectionStatus" class="connection-status">
|
||||
{{ connectionStatus }}
|
||||
</div>
|
||||
|
||||
<div class="footer">NucleoServices</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useGameClient } from '~/composables/useGameClient'
|
||||
|
||||
const emit = defineEmits<{
|
||||
'join-game': [client: any]
|
||||
'show-settings': []
|
||||
}>()
|
||||
|
||||
const gameClient = useGameClient()
|
||||
const isConnecting = ref(false)
|
||||
const connectionStatus = computed(() => gameClient.connectionStatus.value)
|
||||
|
||||
const onJoin = async () => {
|
||||
if (isConnecting.value) return
|
||||
|
||||
isConnecting.value = true
|
||||
|
||||
try {
|
||||
await gameClient.connect('Jugador Test', 'classic')
|
||||
console.log('Connected successfully')
|
||||
|
||||
// Emit the join-game event with the game client
|
||||
emit('join-game', gameClient)
|
||||
} catch (error) {
|
||||
console.error('Error connecting:', error)
|
||||
} finally {
|
||||
isConnecting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onSettings = () => {
|
||||
emit('show-settings')
|
||||
}
|
||||
|
||||
const onLogin = () => {
|
||||
console.log('Login clicked')
|
||||
// TODO: implement login logic
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.branding {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
margin-top: 2rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(10px);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
289
nuxt-snatchgame/app/components/SettingsModal.vue
Normal file
289
nuxt-snatchgame/app/components/SettingsModal.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div class="modal-overlay" @click="$emit('close')">
|
||||
<div class="modal-content" @click.stop>
|
||||
<div class="modal-header">
|
||||
<h2>Configuración</h2>
|
||||
<button class="close-button" @click="$emit('close')">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="settings-section">
|
||||
<h3>Audio</h3>
|
||||
<div class="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" v-model="settings.soundEnabled" />
|
||||
Efectos de sonido
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" v-model="settings.musicEnabled" />
|
||||
Música de fondo
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label>
|
||||
Volumen
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
v-model="settings.volume"
|
||||
class="volume-slider"
|
||||
/>
|
||||
<span>{{ settings.volume }}%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>Notificaciones</h3>
|
||||
<div class="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" v-model="settings.notifications" />
|
||||
Notificaciones del juego
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" v-model="settings.tradeAlerts" />
|
||||
Alertas de intercambio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>Apariencia</h3>
|
||||
<div class="setting-item">
|
||||
<label>
|
||||
<input type="checkbox" v-model="settings.animations" />
|
||||
Animaciones
|
||||
</label>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<label>
|
||||
Tema
|
||||
<select v-model="settings.theme">
|
||||
<option value="light">Claro</option>
|
||||
<option value="dark">Oscuro</option>
|
||||
<option value="auto">Automático</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button @click="saveSettings" class="btn-save">Guardar</button>
|
||||
<button @click="$emit('close')" class="btn-cancel">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
'close': []
|
||||
}>()
|
||||
|
||||
const settings = reactive({
|
||||
soundEnabled: true,
|
||||
musicEnabled: true,
|
||||
volume: 50,
|
||||
notifications: true,
|
||||
tradeAlerts: true,
|
||||
animations: true,
|
||||
theme: 'dark'
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// Load settings from localStorage
|
||||
const savedSettings = localStorage.getItem('gameSettings')
|
||||
if (savedSettings) {
|
||||
Object.assign(settings, JSON.parse(savedSettings))
|
||||
}
|
||||
})
|
||||
|
||||
const saveSettings = () => {
|
||||
// Save settings to localStorage
|
||||
localStorage.setItem('gameSettings', JSON.stringify(settings))
|
||||
console.log('Settings saved:', settings)
|
||||
emit('close')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.settings-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.setting-item label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.setting-item input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
flex: 1;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select option {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.modal-footer button {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-save {
|
||||
background: rgba(76, 175, 80, 0.8);
|
||||
}
|
||||
|
||||
.btn-save:hover {
|
||||
background: rgba(76, 175, 80, 1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: rgba(158, 158, 158, 0.8);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: rgba(158, 158, 158, 1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.modal-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
</style>
|
||||
146
nuxt-snatchgame/app/components/game/PlayerCard.vue
Normal file
146
nuxt-snatchgame/app/components/game/PlayerCard.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="player-card" :class="{ 'is-current': isCurrent }">
|
||||
<div class="player-header">
|
||||
<h4>{{ player.name }}</h4>
|
||||
<span class="role">{{ player.producerRole }}</span>
|
||||
</div>
|
||||
|
||||
<div class="player-tokens">
|
||||
<div class="token">🦃 {{ player.tokens.turkey }}</div>
|
||||
<div class="token">☕ {{ player.tokens.coffee }}</div>
|
||||
<div class="token">🌽 {{ player.tokens.corn }}</div>
|
||||
</div>
|
||||
|
||||
<div class="player-stats">
|
||||
<div class="stat">
|
||||
<span>Puntos:</span>
|
||||
<span class="value">{{ player.points }}</span>
|
||||
</div>
|
||||
<div v-if="player.shameTokens > 0" class="stat shame">
|
||||
<span>Vergüenza:</span>
|
||||
<span class="value">{{ player.shameTokens }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button v-if="!isCurrent" @click="$emit('make-offer')" class="offer-button">
|
||||
Hacer oferta
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
player: {
|
||||
name: string
|
||||
producerRole: string
|
||||
tokens: {
|
||||
turkey: number
|
||||
coffee: number
|
||||
corn: number
|
||||
}
|
||||
points: number
|
||||
shameTokens: number
|
||||
role: string
|
||||
}
|
||||
isCurrent: boolean
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
'make-offer': []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.player-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.player-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.player-card.is-current {
|
||||
border-color: #ffd700;
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
}
|
||||
|
||||
.player-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.player-header h4 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.role {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.player-tokens {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.token {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.player-stats {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stat.shame {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.offer-button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: rgba(103, 126, 234, 0.8);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.offer-button:hover {
|
||||
background: rgba(103, 126, 234, 1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
290
nuxt-snatchgame/app/components/game/TradeOfferCard.vue
Normal file
290
nuxt-snatchgame/app/components/game/TradeOfferCard.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<div class="offer-card" :class="offerClass">
|
||||
<div class="offer-header">
|
||||
<span class="offer-type">{{ offerTypeText }}</span>
|
||||
<span class="offer-status" :class="'status-' + offer.status">
|
||||
{{ statusText }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="offer-content">
|
||||
<div class="offer-section">
|
||||
<h5>Ofrece:</h5>
|
||||
<div class="tokens">
|
||||
<span v-if="offer.offering.turkey > 0">🦃 {{ offer.offering.turkey }}</span>
|
||||
<span v-if="offer.offering.coffee > 0">☕ {{ offer.offering.coffee }}</span>
|
||||
<span v-if="offer.offering.corn > 0">🌽 {{ offer.offering.corn }}</span>
|
||||
<span v-if="totalOffering === 0">Nada</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exchange-icon">⇄</div>
|
||||
|
||||
<div class="offer-section">
|
||||
<h5>Solicita:</h5>
|
||||
<div class="tokens">
|
||||
<span v-if="offer.requesting.turkey > 0">🦃 {{ offer.requesting.turkey }}</span>
|
||||
<span v-if="offer.requesting.coffee > 0">☕ {{ offer.requesting.coffee }}</span>
|
||||
<span v-if="offer.requesting.corn > 0">🌽 {{ offer.requesting.corn }}</span>
|
||||
<span v-if="totalRequesting === 0">Nada</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="offer.status === 'pending'" class="offer-actions">
|
||||
<template v-if="isMyOffer">
|
||||
<button @click="$emit('cancel', offer.id)" class="btn-cancel">
|
||||
Cancelar
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button @click="$emit('respond', offer.id, 'accept')" class="btn-accept">
|
||||
Aceptar
|
||||
</button>
|
||||
<button @click="$emit('respond', offer.id, 'reject')" class="btn-reject">
|
||||
Rechazar
|
||||
</button>
|
||||
<button @click="$emit('respond', offer.id, 'snatch')" class="btn-snatch">
|
||||
Robar
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
offer: {
|
||||
id: string
|
||||
offererId: string
|
||||
targetId: string
|
||||
offering: {
|
||||
turkey: number
|
||||
coffee: number
|
||||
corn: number
|
||||
}
|
||||
requesting: {
|
||||
turkey: number
|
||||
coffee: number
|
||||
corn: number
|
||||
}
|
||||
status: string
|
||||
}
|
||||
currentPlayerId: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'respond': [offerId: string, response: string]
|
||||
'cancel': [offerId: string]
|
||||
}>()
|
||||
|
||||
const isMyOffer = computed(() => props.offer.offererId === props.currentPlayerId)
|
||||
const isTargetedAtMe = computed(() => props.offer.targetId === props.currentPlayerId)
|
||||
|
||||
const offerClass = computed(() => ({
|
||||
'my-offer': isMyOffer.value,
|
||||
'targeted-at-me': isTargetedAtMe.value,
|
||||
'status-pending': props.offer.status === 'pending',
|
||||
'status-accepted': props.offer.status === 'accepted',
|
||||
'status-rejected': props.offer.status === 'rejected',
|
||||
'status-snatched': props.offer.status === 'snatched',
|
||||
'status-cancelled': props.offer.status === 'cancelled'
|
||||
}))
|
||||
|
||||
const offerTypeText = computed(() => {
|
||||
if (isMyOffer.value) return 'Tu oferta'
|
||||
if (isTargetedAtMe.value) return 'Oferta para ti'
|
||||
return 'Oferta'
|
||||
})
|
||||
|
||||
const statusText = computed(() => {
|
||||
switch (props.offer.status) {
|
||||
case 'pending': return 'Pendiente'
|
||||
case 'accepted': return 'Aceptada'
|
||||
case 'rejected': return 'Rechazada'
|
||||
case 'snatched': return '¡Robada!'
|
||||
case 'cancelled': return 'Cancelada'
|
||||
default: return props.offer.status
|
||||
}
|
||||
})
|
||||
|
||||
const totalOffering = computed(() =>
|
||||
props.offer.offering.turkey + props.offer.offering.coffee + props.offer.offering.corn
|
||||
)
|
||||
|
||||
const totalRequesting = computed(() =>
|
||||
props.offer.requesting.turkey + props.offer.requesting.coffee + props.offer.requesting.corn
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.offer-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.offer-card.my-offer {
|
||||
border-color: rgba(103, 126, 234, 0.5);
|
||||
background: rgba(103, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.offer-card.targeted-at-me {
|
||||
border-color: rgba(255, 215, 0, 0.5);
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
}
|
||||
|
||||
.offer-card.status-accepted {
|
||||
border-color: rgba(76, 175, 80, 0.5);
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.offer-card.status-rejected {
|
||||
border-color: rgba(244, 67, 54, 0.5);
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
}
|
||||
|
||||
.offer-card.status-snatched {
|
||||
border-color: rgba(255, 107, 107, 0.7);
|
||||
background: rgba(255, 107, 107, 0.2);
|
||||
}
|
||||
|
||||
.offer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.offer-type {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.offer-status {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: rgba(255, 193, 7, 0.2);
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.status-accepted {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.status-rejected {
|
||||
background: rgba(244, 67, 54, 0.2);
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.status-snatched {
|
||||
background: rgba(255, 107, 107, 0.3);
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background: rgba(158, 158, 158, 0.2);
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.offer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.offer-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.offer-section h5 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tokens {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.exchange-icon {
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.offer-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-accept {
|
||||
background: rgba(76, 175, 80, 0.8);
|
||||
}
|
||||
|
||||
.btn-accept:hover {
|
||||
background: rgba(76, 175, 80, 1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-reject {
|
||||
background: rgba(244, 67, 54, 0.8);
|
||||
}
|
||||
|
||||
.btn-reject:hover {
|
||||
background: rgba(244, 67, 54, 1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-snatch {
|
||||
background: rgba(255, 107, 107, 0.8);
|
||||
}
|
||||
|
||||
.btn-snatch:hover {
|
||||
background: rgba(255, 107, 107, 1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: rgba(158, 158, 158, 0.8);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: rgba(158, 158, 158, 1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
176
nuxt-snatchgame/app/composables/useAdminService.ts
Normal file
176
nuxt-snatchgame/app/composables/useAdminService.ts
Normal file
@@ -0,0 +1,176 @@
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
export interface AdminStats {
|
||||
connectedPlayers: number
|
||||
activeGames: number
|
||||
currentRound: string
|
||||
gameState: string
|
||||
players: any[]
|
||||
rooms: any[]
|
||||
timestamp?: number
|
||||
}
|
||||
|
||||
export const useAdminService = () => {
|
||||
const stats = ref<AdminStats>({
|
||||
connectedPlayers: 0,
|
||||
activeGames: 0,
|
||||
currentRound: 'waiting',
|
||||
gameState: 'waiting_for_players',
|
||||
players: [],
|
||||
rooms: []
|
||||
})
|
||||
|
||||
const isConnected = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
let eventSource: EventSource | null = null
|
||||
|
||||
const connect = () => {
|
||||
if (eventSource) {
|
||||
console.warn('Already connected to admin stream')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
eventSource = new EventSource('/api/admin/stream')
|
||||
|
||||
eventSource.onopen = () => {
|
||||
console.log('Connected to admin stream')
|
||||
isConnected.value = true
|
||||
error.value = null
|
||||
}
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data)
|
||||
stats.value = data
|
||||
} catch (err) {
|
||||
console.error('Failed to parse admin stats:', err)
|
||||
error.value = 'Failed to parse stats data'
|
||||
}
|
||||
}
|
||||
|
||||
eventSource.onerror = (err) => {
|
||||
console.error('Admin stream error:', err)
|
||||
isConnected.value = false
|
||||
error.value = 'Connection lost'
|
||||
|
||||
// Attempt to reconnect after 5 seconds
|
||||
setTimeout(() => {
|
||||
if (!eventSource) return
|
||||
console.log('Attempting to reconnect to admin stream...')
|
||||
disconnect()
|
||||
connect()
|
||||
}, 5000)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to connect to admin stream:', err)
|
||||
error.value = 'Failed to connect'
|
||||
isConnected.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const disconnect = () => {
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
eventSource = null
|
||||
isConnected.value = false
|
||||
console.log('Disconnected from admin stream')
|
||||
}
|
||||
}
|
||||
|
||||
const kickPlayer = async (playerId: string) => {
|
||||
try {
|
||||
const response = await $fetch('/api/admin/kick-player', {
|
||||
method: 'POST',
|
||||
body: { playerId }
|
||||
})
|
||||
return response
|
||||
} catch (err) {
|
||||
console.error('Failed to kick player:', err)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
const pauseGame = async () => {
|
||||
try {
|
||||
const response = await $fetch('/api/admin/pause-game', {
|
||||
method: 'POST'
|
||||
})
|
||||
return response
|
||||
} catch (err) {
|
||||
console.error('Failed to pause game:', err)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
const resumeGame = async () => {
|
||||
try {
|
||||
const response = await $fetch('/api/admin/resume-game', {
|
||||
method: 'POST'
|
||||
})
|
||||
return response
|
||||
} catch (err) {
|
||||
console.error('Failed to resume game:', err)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
const kickAllPlayers = async () => {
|
||||
try {
|
||||
const response = await $fetch('/api/admin/kick-all-players', {
|
||||
method: 'POST'
|
||||
})
|
||||
return response
|
||||
} catch (err) {
|
||||
console.error('Failed to kick all players:', err)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
const advanceRound = async () => {
|
||||
try {
|
||||
const response = await $fetch('/api/admin/advance-round', {
|
||||
method: 'POST'
|
||||
})
|
||||
return response
|
||||
} catch (err) {
|
||||
console.error('Failed to advance round:', err)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
const previousRound = async () => {
|
||||
try {
|
||||
const response = await $fetch('/api/admin/previous-round', {
|
||||
method: 'POST'
|
||||
})
|
||||
return response
|
||||
} catch (err) {
|
||||
console.error('Failed to go to previous round:', err)
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up on unmount
|
||||
onUnmounted(() => {
|
||||
disconnect()
|
||||
})
|
||||
|
||||
return {
|
||||
// State
|
||||
stats: readonly(stats),
|
||||
isConnected: readonly(isConnected),
|
||||
error: readonly(error),
|
||||
|
||||
// Methods
|
||||
connect,
|
||||
disconnect,
|
||||
kickPlayer,
|
||||
pauseGame,
|
||||
resumeGame,
|
||||
kickAllPlayers,
|
||||
advanceRound,
|
||||
previousRound
|
||||
}
|
||||
}
|
||||
214
nuxt-snatchgame/app/composables/useGameClient.ts
Normal file
214
nuxt-snatchgame/app/composables/useGameClient.ts
Normal file
@@ -0,0 +1,214 @@
|
||||
import { Client, Room } from 'colyseus.js'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
export interface TokenInventory {
|
||||
turkey: number
|
||||
coffee: number
|
||||
corn: number
|
||||
}
|
||||
|
||||
export interface TradeOffer {
|
||||
id: string
|
||||
offererId: string
|
||||
targetId: string
|
||||
offering: TokenInventory
|
||||
requesting: TokenInventory
|
||||
status: string
|
||||
}
|
||||
|
||||
export interface Player {
|
||||
id: string
|
||||
name: string
|
||||
producerRole: string
|
||||
tokens: TokenInventory
|
||||
points: number
|
||||
shameTokens: number
|
||||
isSuspended: boolean
|
||||
role: string
|
||||
}
|
||||
|
||||
export interface GameState {
|
||||
players: Map<string, Player>
|
||||
activeTradeOffers: TradeOffer[]
|
||||
round: number
|
||||
gamePhase: string
|
||||
gameStarted: boolean
|
||||
minPlayers: number
|
||||
maxPlayers: number
|
||||
}
|
||||
|
||||
export const useGameClient = () => {
|
||||
const client = ref<Client | null>(null)
|
||||
const room = ref<Room | null>(null)
|
||||
const gameState = ref<GameState | null>(null)
|
||||
const currentPlayerId = ref('')
|
||||
const isConnected = ref(false)
|
||||
const connectionStatus = ref('')
|
||||
|
||||
// Event callbacks
|
||||
const onStateChangeCallbacks = ref<((state: GameState) => void)[]>([])
|
||||
const onGamePhaseChangeCallbacks = ref<((phase: string) => void)[]>([])
|
||||
const onAdminKickedCallbacks = ref<((data: any) => void)[]>([])
|
||||
const onRoundChangedCallbacks = ref<((data: any) => void)[]>([])
|
||||
|
||||
const connect = async (playerName: string, gameMode: string = 'classic') => {
|
||||
try {
|
||||
connectionStatus.value = 'Conectando...'
|
||||
|
||||
// Use runtime config for WebSocket URL
|
||||
const config = useRuntimeConfig()
|
||||
const wsUrl = config.public.wsUrl || 'ws://localhost:2567'
|
||||
|
||||
client.value = new Client(wsUrl)
|
||||
console.log('Connecting to:', wsUrl)
|
||||
|
||||
room.value = await client.value.joinOrCreate('game', {
|
||||
playerName,
|
||||
gameMode
|
||||
})
|
||||
|
||||
currentPlayerId.value = room.value.sessionId
|
||||
isConnected.value = true
|
||||
connectionStatus.value = 'Conectado exitosamente!'
|
||||
|
||||
console.log('Successfully joined room:', room.value.id)
|
||||
console.log('Player ID:', currentPlayerId.value)
|
||||
|
||||
// Setup event listeners
|
||||
room.value.onStateChange((state) => {
|
||||
console.log('State changed:', state)
|
||||
const previousPhase = gameState.value?.gamePhase
|
||||
gameState.value = state
|
||||
|
||||
// Notify all state change callbacks
|
||||
onStateChangeCallbacks.value.forEach(callback => callback(state))
|
||||
|
||||
// Notify phase change if it changed
|
||||
if (previousPhase !== state.gamePhase) {
|
||||
console.log('Game phase changed:', previousPhase, '->', state.gamePhase)
|
||||
onGamePhaseChangeCallbacks.value.forEach(callback => callback(state.gamePhase))
|
||||
}
|
||||
})
|
||||
|
||||
room.value.onMessage('adminKicked', (data) => {
|
||||
console.log('Admin kicked:', data)
|
||||
onAdminKickedCallbacks.value.forEach(callback => callback(data))
|
||||
})
|
||||
|
||||
room.value.onMessage('roundChanged', (data) => {
|
||||
console.log('Round changed:', data)
|
||||
onRoundChangedCallbacks.value.forEach(callback => callback(data))
|
||||
})
|
||||
|
||||
room.value.onMessage('gamePaused', (data) => {
|
||||
console.log('Game paused:', data)
|
||||
alert(`⏸️ ${data.message}`)
|
||||
})
|
||||
|
||||
room.value.onMessage('gameResumed', (data) => {
|
||||
console.log('Game resumed:', data)
|
||||
alert(`▶️ ${data.message}`)
|
||||
})
|
||||
|
||||
room.value.onLeave((code) => {
|
||||
console.log('Left room with code:', code)
|
||||
isConnected.value = false
|
||||
connectionStatus.value = 'Desconectado'
|
||||
|
||||
// Handle forced disconnect by admin
|
||||
if (code === 4000) {
|
||||
console.log('Disconnected by admin (code 4000)')
|
||||
}
|
||||
})
|
||||
|
||||
room.value.onError((code, message) => {
|
||||
console.error('Room error:', code, message)
|
||||
connectionStatus.value = `Error: ${message}`
|
||||
})
|
||||
|
||||
return room.value
|
||||
} catch (error) {
|
||||
console.error('Failed to connect:', error)
|
||||
connectionStatus.value = 'Error de conexión: ' + (error as Error).message
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
const disconnect = () => {
|
||||
if (room.value) {
|
||||
room.value.leave()
|
||||
room.value = null
|
||||
}
|
||||
client.value = null
|
||||
isConnected.value = false
|
||||
gameState.value = null
|
||||
currentPlayerId.value = ''
|
||||
connectionStatus.value = 'Desconectado'
|
||||
}
|
||||
|
||||
const makeOffer = (targetId: string, offering: TokenInventory, requesting: TokenInventory) => {
|
||||
if (!room.value) return
|
||||
|
||||
room.value.send('makeOffer', {
|
||||
targetId,
|
||||
offering,
|
||||
requesting
|
||||
})
|
||||
}
|
||||
|
||||
const respondToOffer = (offerId: string, response: 'accept' | 'reject' | 'snatch') => {
|
||||
if (!room.value) return
|
||||
|
||||
room.value.send('respondToOffer', {
|
||||
offerId,
|
||||
response
|
||||
})
|
||||
}
|
||||
|
||||
const cancelOffer = (offerId: string) => {
|
||||
if (!room.value) return
|
||||
|
||||
room.value.send('cancelOffer', {
|
||||
offerId
|
||||
})
|
||||
}
|
||||
|
||||
const onStateChange = (callback: (state: GameState) => void) => {
|
||||
onStateChangeCallbacks.value.push(callback)
|
||||
}
|
||||
|
||||
const onGamePhaseChange = (callback: (phase: string) => void) => {
|
||||
onGamePhaseChangeCallbacks.value.push(callback)
|
||||
}
|
||||
|
||||
const onAdminKicked = (callback: (data: any) => void) => {
|
||||
onAdminKickedCallbacks.value.push(callback)
|
||||
}
|
||||
|
||||
const onRoundChanged = (callback: (data: any) => void) => {
|
||||
onRoundChangedCallbacks.value.push(callback)
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
client: readonly(client),
|
||||
room: readonly(room),
|
||||
gameState: readonly(gameState),
|
||||
currentPlayerId: readonly(currentPlayerId),
|
||||
isConnected: readonly(isConnected),
|
||||
connectionStatus: readonly(connectionStatus),
|
||||
|
||||
// Methods
|
||||
connect,
|
||||
disconnect,
|
||||
makeOffer,
|
||||
respondToOffer,
|
||||
cancelOffer,
|
||||
|
||||
// Event handlers
|
||||
onStateChange,
|
||||
onGamePhaseChange,
|
||||
onAdminKicked,
|
||||
onRoundChanged
|
||||
}
|
||||
}
|
||||
395
nuxt-snatchgame/app/pages/admin.vue
Normal file
395
nuxt-snatchgame/app/pages/admin.vue
Normal file
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<div class="admin-dashboard">
|
||||
<div class="dashboard-header">
|
||||
<h1>Panel de Administración - Snatch Game</h1>
|
||||
<div class="connection-status" :class="{ connected: isConnected }">
|
||||
{{ isConnected ? '🟢 Conectado' : '🔴 Desconectado' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-content">
|
||||
<!-- Statistics Cards -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<h3>Jugadores Conectados</h3>
|
||||
<div class="stat-value">{{ stats.connectedPlayers }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Juegos Activos</h3>
|
||||
<div class="stat-value">{{ stats.activeGames }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Ronda Actual</h3>
|
||||
<div class="stat-value">{{ stats.currentRound }}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Estado del Juego</h3>
|
||||
<div class="stat-value">{{ gameStateDisplay }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Control Panel -->
|
||||
<div class="control-panel">
|
||||
<h2>Controles del Juego</h2>
|
||||
<div class="controls-grid">
|
||||
<button @click="pauseGame" class="control-btn pause">
|
||||
⏸️ Pausar Juego
|
||||
</button>
|
||||
<button @click="resumeGame" class="control-btn resume">
|
||||
▶️ Reanudar Juego
|
||||
</button>
|
||||
<button @click="advanceRound" class="control-btn advance">
|
||||
⏭️ Avanzar Ronda
|
||||
</button>
|
||||
<button @click="previousRound" class="control-btn previous">
|
||||
⏮️ Retroceder Ronda
|
||||
</button>
|
||||
<button @click="kickAllPlayers" class="control-btn danger">
|
||||
🚫 Expulsar a Todos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Players List -->
|
||||
<div class="players-section">
|
||||
<h2>Jugadores Activos ({{ stats.players.length }})</h2>
|
||||
<div v-if="stats.players.length === 0" class="no-players">
|
||||
No hay jugadores conectados
|
||||
</div>
|
||||
<div v-else class="players-grid">
|
||||
<div v-for="player in stats.players" :key="player.id" class="player-admin-card">
|
||||
<div class="player-info">
|
||||
<h4>{{ player.name }}</h4>
|
||||
<div class="player-details">
|
||||
<span>Sala: {{ player.roomId?.substring(0, 8) || 'N/A' }}</span>
|
||||
<span>Rol: {{ player.producerRole }}</span>
|
||||
<span>Puntos: {{ player.points }}</span>
|
||||
</div>
|
||||
<div class="player-tokens">
|
||||
<span>🦃 {{ player.tokens.turkeys }}</span>
|
||||
<span>☕ {{ player.tokens.coffee }}</span>
|
||||
<span>🌽 {{ player.tokens.corn }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="kickPlayer(player.id)" class="kick-btn">
|
||||
Expulsar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rooms List -->
|
||||
<div class="rooms-section">
|
||||
<h2>Salas Activas ({{ stats.rooms.length }})</h2>
|
||||
<div v-if="stats.rooms.length === 0" class="no-rooms">
|
||||
No hay salas activas
|
||||
</div>
|
||||
<div v-else class="rooms-grid">
|
||||
<div v-for="room in stats.rooms" :key="room.roomId" class="room-card">
|
||||
<h4>Sala: {{ room.roomId.substring(0, 8) }}</h4>
|
||||
<div class="room-details">
|
||||
<span>Jugadores: {{ room.players }}/{{ room.maxPlayers }}</span>
|
||||
<span>Estado: {{ room.locked ? 'Cerrada' : 'Abierta' }}</span>
|
||||
<span>Fase: {{ room.metadata?.gamePhase || 'N/A' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, computed } from 'vue'
|
||||
import { useAdminService } from '~/composables/useAdminService'
|
||||
|
||||
const adminService = useAdminService()
|
||||
const stats = computed(() => adminService.stats.value)
|
||||
const isConnected = computed(() => adminService.isConnected.value)
|
||||
|
||||
const gameStateDisplay = computed(() => {
|
||||
const state = stats.value.gameState
|
||||
switch (state) {
|
||||
case 'waiting_for_players': return 'Esperando jugadores'
|
||||
case 'in_progress': return 'En progreso'
|
||||
case 'paused': return 'Pausado'
|
||||
default: return state
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
adminService.connect()
|
||||
})
|
||||
|
||||
const pauseGame = async () => {
|
||||
try {
|
||||
const result = await adminService.pauseGame()
|
||||
console.log('Game paused:', result)
|
||||
} catch (error) {
|
||||
console.error('Failed to pause game:', error)
|
||||
alert('Error al pausar el juego')
|
||||
}
|
||||
}
|
||||
|
||||
const resumeGame = async () => {
|
||||
try {
|
||||
const result = await adminService.resumeGame()
|
||||
console.log('Game resumed:', result)
|
||||
} catch (error) {
|
||||
console.error('Failed to resume game:', error)
|
||||
alert('Error al reanudar el juego')
|
||||
}
|
||||
}
|
||||
|
||||
const advanceRound = async () => {
|
||||
try {
|
||||
const result = await adminService.advanceRound()
|
||||
console.log('Round advanced:', result)
|
||||
} catch (error) {
|
||||
console.error('Failed to advance round:', error)
|
||||
alert('Error al avanzar la ronda')
|
||||
}
|
||||
}
|
||||
|
||||
const previousRound = async () => {
|
||||
try {
|
||||
const result = await adminService.previousRound()
|
||||
console.log('Round went back:', result)
|
||||
} catch (error) {
|
||||
console.error('Failed to go to previous round:', error)
|
||||
alert('Error al retroceder la ronda')
|
||||
}
|
||||
}
|
||||
|
||||
const kickPlayer = async (playerId: string) => {
|
||||
if (!confirm(`¿Estás seguro de expulsar al jugador ${playerId}?`)) return
|
||||
|
||||
try {
|
||||
const result = await adminService.kickPlayer(playerId)
|
||||
console.log('Player kicked:', result)
|
||||
} catch (error) {
|
||||
console.error('Failed to kick player:', error)
|
||||
alert('Error al expulsar al jugador')
|
||||
}
|
||||
}
|
||||
|
||||
const kickAllPlayers = async () => {
|
||||
if (!confirm('¿Estás seguro de expulsar a TODOS los jugadores?')) return
|
||||
|
||||
try {
|
||||
const result = await adminService.kickAllPlayers()
|
||||
console.log('All players kicked:', result)
|
||||
} catch (error) {
|
||||
console.error('Failed to kick all players:', error)
|
||||
alert('Error al expulsar a todos los jugadores')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-dashboard {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.dashboard-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.connection-status.connected {
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.control-panel h2 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.controls-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.control-btn.pause {
|
||||
background: rgba(255, 193, 7, 0.8);
|
||||
}
|
||||
|
||||
.control-btn.resume {
|
||||
background: rgba(76, 175, 80, 0.8);
|
||||
}
|
||||
|
||||
.control-btn.advance, .control-btn.previous {
|
||||
background: rgba(33, 150, 243, 0.8);
|
||||
}
|
||||
|
||||
.control-btn.danger {
|
||||
background: rgba(244, 67, 54, 0.8);
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.players-section, .rooms-section {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.players-section h2, .rooms-section h2 {
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.no-players, .no-rooms {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.players-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.player-admin-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-info h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.player-details {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.player-tokens {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.kick-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: rgba(244, 67, 54, 0.8);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.kick-btn:hover {
|
||||
background: rgba(244, 67, 54, 1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.rooms-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.room-card {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.room-card h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.room-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
70
nuxt-snatchgame/app/pages/index.vue
Normal file
70
nuxt-snatchgame/app/pages/index.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<HomeScreen
|
||||
v-if="currentScreen === 'home'"
|
||||
@join-game="onJoinGame"
|
||||
@show-settings="showSettings = true"
|
||||
/>
|
||||
<GameScreen
|
||||
v-else-if="currentScreen === 'game'"
|
||||
:game-client="gameClient"
|
||||
/>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<SettingsModal
|
||||
v-if="showSettings"
|
||||
@close="showSettings = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const currentScreen = ref<'home' | 'game'>('home')
|
||||
const gameClient = ref<any>(null)
|
||||
const showSettings = ref(false)
|
||||
|
||||
const onJoinGame = (client: any) => {
|
||||
gameClient.value = client
|
||||
currentScreen.value = 'game'
|
||||
console.log('Transitioning to game screen')
|
||||
|
||||
// Handle admin kick notification
|
||||
client.onAdminKicked((data: any) => {
|
||||
// Show alert message
|
||||
alert(`🚫 ${data.message}`)
|
||||
|
||||
// Return to home screen
|
||||
currentScreen.value = 'home'
|
||||
gameClient.value = null
|
||||
|
||||
console.log('Player kicked by admin, returned to home screen')
|
||||
})
|
||||
|
||||
// Handle round change notification
|
||||
client.onRoundChanged((data: any) => {
|
||||
// Show alert message
|
||||
alert(`🎯 ${data.message}`)
|
||||
|
||||
console.log('Round changed by admin:', data)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
59
nuxt-snatchgame/nuxt.config.ts
Normal file
59
nuxt-snatchgame/nuxt.config.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
future: {
|
||||
compatibilityVersion: 4,
|
||||
},
|
||||
compatibilityDate: '2025-07-15',
|
||||
devtools: { enabled: true },
|
||||
|
||||
// Configure server
|
||||
nitro: {
|
||||
experimental: {
|
||||
websocket: true
|
||||
},
|
||||
// Enable WebSocket support
|
||||
devProxy: {
|
||||
'/ws': {
|
||||
target: 'ws://localhost:3000',
|
||||
ws: true,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Environment variables
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
gameName: 'SnatchGame',
|
||||
wsUrl: process.env.NUXT_PUBLIC_WS_URL || 'ws://localhost:2567'
|
||||
}
|
||||
},
|
||||
|
||||
// TypeScript configuration
|
||||
typescript: {
|
||||
strict: true,
|
||||
shim: false,
|
||||
tsConfig: {
|
||||
compilerOptions: {
|
||||
experimentalDecorators: true,
|
||||
emitDecoratorMetadata: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Disable SSR for game application
|
||||
ssr: false,
|
||||
|
||||
// Vite configuration for WebSocket support
|
||||
vite: {
|
||||
server: {
|
||||
proxy: {
|
||||
'/ws': {
|
||||
target: 'ws://localhost:3000',
|
||||
ws: true,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
13939
nuxt-snatchgame/package-lock.json
generated
Normal file
13939
nuxt-snatchgame/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
nuxt-snatchgame/package.json
Normal file
35
nuxt-snatchgame/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"dev:colyseus": "tsx watch server/colyseus-server.ts",
|
||||
"dev:all": "concurrently \"npm run dev\" \"npm run dev:colyseus\"",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@colyseus/core": "^0.16.19",
|
||||
"@colyseus/schema": "^3.0.49",
|
||||
"@colyseus/ws-transport": "^0.16.5",
|
||||
"colyseus": "^0.16.4",
|
||||
"colyseus.js": "^0.16.19",
|
||||
"nuxt": "^4.0.1",
|
||||
"reflect-metadata": "^0.2.2",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@colyseus/monitor": "^0.16.7",
|
||||
"@colyseus/tools": "^0.16.13",
|
||||
"@types/cors": "^2.8.19",
|
||||
"@types/express": "^5.0.3",
|
||||
"concurrently": "^9.2.0",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^5.1.0",
|
||||
"tsx": "^4.20.3"
|
||||
}
|
||||
}
|
||||
10
nuxt-snatchgame/public/assets/logo.svg
Normal file
10
nuxt-snatchgame/public/assets/logo.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="100" cy="100" r="90" fill="url(#grad1)" />
|
||||
<text x="100" y="110" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="white" text-anchor="middle">SG</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 509 B |
BIN
nuxt-snatchgame/public/favicon.ico
Normal file
BIN
nuxt-snatchgame/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
2
nuxt-snatchgame/public/robots.txt
Normal file
2
nuxt-snatchgame/public/robots.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
User-Agent: *
|
||||
Disallow:
|
||||
42
nuxt-snatchgame/server/colyseus-server.ts
Normal file
42
nuxt-snatchgame/server/colyseus-server.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import 'reflect-metadata'
|
||||
import { listen } from '@colyseus/tools'
|
||||
import { monitor } from '@colyseus/monitor'
|
||||
import { Server } from 'colyseus'
|
||||
import { WebSocketTransport } from '@colyseus/ws-transport'
|
||||
import { createServer } from 'http'
|
||||
import express from 'express'
|
||||
import cors from 'cors'
|
||||
import { GameRoom } from './rooms/GameRoom'
|
||||
|
||||
const port = parseInt(process.env.PORT || '2567', 10)
|
||||
const app = express()
|
||||
|
||||
// Enable CORS
|
||||
app.use(cors())
|
||||
app.use(express.json())
|
||||
|
||||
// Create HTTP & WebSocket servers
|
||||
const server = createServer(app)
|
||||
|
||||
const gameServer = new Server({
|
||||
transport: new WebSocketTransport({
|
||||
server
|
||||
})
|
||||
})
|
||||
|
||||
// Register GameRoom
|
||||
gameServer.define('game', GameRoom)
|
||||
.filterBy(['gameMode'])
|
||||
.sortBy({ clients: 1 })
|
||||
|
||||
// Health check
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({ status: 'healthy' })
|
||||
})
|
||||
|
||||
// Colyseus monitor
|
||||
app.use('/monitor', monitor())
|
||||
|
||||
gameServer.listen(port)
|
||||
|
||||
console.log(`🎮 Colyseus server is listening on ws://localhost:${port}`)
|
||||
0
nuxt-snatchgame/server/plugins/.gitkeep
Normal file
0
nuxt-snatchgame/server/plugins/.gitkeep
Normal file
416
nuxt-snatchgame/server/rooms/GameRoom.ts
Normal file
416
nuxt-snatchgame/server/rooms/GameRoom.ts
Normal file
@@ -0,0 +1,416 @@
|
||||
import { Room, Client } from "colyseus";
|
||||
import { Schema, MapSchema, ArraySchema, type } from "@colyseus/schema";
|
||||
|
||||
export interface GameRoomOptions {
|
||||
gameMode?: string;
|
||||
playerName?: string;
|
||||
}
|
||||
|
||||
export class TokenInventory extends Schema {
|
||||
@type("number") turkey: number = 0;
|
||||
@type("number") coffee: number = 0;
|
||||
@type("number") corn: number = 0;
|
||||
}
|
||||
|
||||
export class TradeOffer extends Schema {
|
||||
@type("string") id: string = "";
|
||||
@type("string") offererId: string = "";
|
||||
@type("string") targetId: string = "";
|
||||
@type(TokenInventory) offering = new TokenInventory();
|
||||
@type(TokenInventory) requesting = new TokenInventory();
|
||||
@type("string") status: string = "pending"; // "pending" | "accepted" | "rejected" | "snatched" | "cancelled"
|
||||
}
|
||||
|
||||
export class Player extends Schema {
|
||||
@type("string") id: string = "";
|
||||
@type("string") name: string = "";
|
||||
@type("string") producerRole: string = "turkey"; // "turkey" | "coffee" | "corn"
|
||||
@type(TokenInventory) tokens = new TokenInventory();
|
||||
@type("number") points: number = 0;
|
||||
@type("number") shameTokens: number = 0;
|
||||
@type("boolean") isSuspended: boolean = false;
|
||||
@type("string") role: string = "trader"; // "trader" | "judge"
|
||||
}
|
||||
|
||||
export class GameState extends Schema {
|
||||
@type({ map: Player }) players = new MapSchema<Player>();
|
||||
@type({ array: TradeOffer }) activeTradeOffers = new ArraySchema<TradeOffer>();
|
||||
@type("number") round: number = 1;
|
||||
@type("string") gamePhase: string = "waiting"; // "waiting" | "trading" | "judging" | "results"
|
||||
@type("boolean") gameStarted: boolean = false;
|
||||
@type("number") minPlayers: number = 3;
|
||||
@type("number") maxPlayers: number = 3;
|
||||
}
|
||||
|
||||
export class GameRoom extends Room<GameState> {
|
||||
maxClients = 3;
|
||||
private producerRoles = ["turkey", "coffee", "corn"];
|
||||
|
||||
onCreate(options: GameRoomOptions) {
|
||||
console.log(`GameRoom created with options:`, options);
|
||||
|
||||
this.setState(new GameState());
|
||||
this.state.gamePhase = "waiting";
|
||||
|
||||
this.onMessage("makeOffer", (client, message) => {
|
||||
this.handleMakeOffer(client, message);
|
||||
});
|
||||
|
||||
this.onMessage("respondToOffer", (client, message) => {
|
||||
this.handleRespondToOffer(client, message);
|
||||
});
|
||||
|
||||
this.onMessage("cancelOffer", (client, message) => {
|
||||
this.handleCancelOffer(client, message);
|
||||
});
|
||||
|
||||
this.onMessage("*", (client, type, message) => {
|
||||
console.log(`Message from ${client.sessionId}:`, type, message);
|
||||
});
|
||||
}
|
||||
|
||||
private assignProducerRoles() {
|
||||
const playerIds = Array.from(this.state.players.keys());
|
||||
const shuffledRoles = [...this.producerRoles].sort(() => Math.random() - 0.5);
|
||||
|
||||
playerIds.forEach((playerId, index) => {
|
||||
const player = this.state.players.get(playerId);
|
||||
if (player) {
|
||||
player.producerRole = shuffledRoles[index];
|
||||
|
||||
// Initialize tokens based on producer role
|
||||
player.tokens.turkey = 0;
|
||||
player.tokens.coffee = 0;
|
||||
player.tokens.corn = 0;
|
||||
|
||||
switch (player.producerRole) {
|
||||
case "turkey":
|
||||
player.tokens.turkey = 5;
|
||||
break;
|
||||
case "coffee":
|
||||
player.tokens.coffee = 5;
|
||||
break;
|
||||
case "corn":
|
||||
player.tokens.corn = 5;
|
||||
break;
|
||||
}
|
||||
|
||||
console.log(`🎭 Player ${player.name} assigned role: ${player.producerRole}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private calculatePoints(player: Player): number {
|
||||
const ownTokens = Number(player.tokens[player.producerRole as keyof TokenInventory]) || 0;
|
||||
const totalTokens = Number(player.tokens.turkey || 0) + Number(player.tokens.coffee || 0) + Number(player.tokens.corn || 0);
|
||||
const otherTokens = totalTokens - ownTokens;
|
||||
return ownTokens * 1 + otherTokens * 2;
|
||||
}
|
||||
|
||||
private updateAllPlayerPoints() {
|
||||
this.state.players.forEach(player => {
|
||||
player.points = this.calculatePoints(player);
|
||||
});
|
||||
}
|
||||
|
||||
private handleMakeOffer(client: Client, message: any) {
|
||||
const player = this.state.players.get(client.sessionId);
|
||||
|
||||
if (!player || this.state.gamePhase !== "trading") {
|
||||
console.log(`Offer rejected - invalid state`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Cannot offer to self
|
||||
if (message.targetId === client.sessionId) {
|
||||
console.log(`Offer rejected - cannot offer to self`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Count existing offers from THIS player to THIS target
|
||||
const existingOffers = this.state.activeTradeOffers.filter(offer =>
|
||||
offer.offererId === client.sessionId &&
|
||||
offer.targetId === message.targetId &&
|
||||
offer.status === "pending"
|
||||
);
|
||||
|
||||
if (existingOffers.length >= 2) {
|
||||
console.log(`Offer rejected - maximum 2 offers per target reached`);
|
||||
return;
|
||||
}
|
||||
|
||||
const offer = new TradeOffer();
|
||||
offer.id = `${client.sessionId}-${Date.now()}`;
|
||||
offer.offererId = client.sessionId;
|
||||
offer.targetId = message.targetId;
|
||||
offer.offering.turkey = message.offering.turkey || 0;
|
||||
offer.offering.coffee = message.offering.coffee || 0;
|
||||
offer.offering.corn = message.offering.corn || 0;
|
||||
offer.requesting.turkey = message.requesting.turkey || 0;
|
||||
offer.requesting.coffee = message.requesting.coffee || 0;
|
||||
offer.requesting.corn = message.requesting.corn || 0;
|
||||
offer.status = "pending";
|
||||
|
||||
this.state.activeTradeOffers.push(offer);
|
||||
console.log(`📝 Trade offer created: ${offer.id}`);
|
||||
}
|
||||
|
||||
private handleRespondToOffer(client: Client, message: any) {
|
||||
const offer = this.state.activeTradeOffers.find(o => o.id === message.offerId);
|
||||
|
||||
if (!offer || offer.targetId !== client.sessionId || offer.status !== "pending") {
|
||||
console.log(`Response rejected - invalid offer`);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = message.response; // "accept" | "reject" | "snatch"
|
||||
offer.status = response === "accept" ? "accepted" : response === "reject" ? "rejected" : "snatched";
|
||||
|
||||
if (response === "accept" || response === "snatch") {
|
||||
this.executeTradeOffer(offer, response === "snatch");
|
||||
}
|
||||
|
||||
console.log(`✅ Trade offer ${offer.id} ${response}ed`);
|
||||
this.updateAllPlayerPoints();
|
||||
}
|
||||
|
||||
private handleCancelOffer(client: Client, message: any) {
|
||||
const offer = this.state.activeTradeOffers.find(o => o.id === message.offerId);
|
||||
|
||||
if (!offer || offer.offererId !== client.sessionId || offer.status !== "pending") {
|
||||
console.log(`Cancel rejected - invalid offer`);
|
||||
return;
|
||||
}
|
||||
|
||||
offer.status = "cancelled";
|
||||
console.log(`❌ Trade offer ${offer.id} cancelled`);
|
||||
}
|
||||
|
||||
private executeTradeOffer(offer: TradeOffer, isSnatch: boolean) {
|
||||
const offerer = this.state.players.get(offer.offererId);
|
||||
const target = this.state.players.get(offer.targetId);
|
||||
|
||||
if (!offerer || !target) return;
|
||||
|
||||
// Calculate what can actually be transferred
|
||||
const actualOffering = {
|
||||
turkey: Math.min(offer.offering.turkey, offerer.tokens.turkey),
|
||||
coffee: Math.min(offer.offering.coffee, offerer.tokens.coffee),
|
||||
corn: Math.min(offer.offering.corn, offerer.tokens.corn)
|
||||
};
|
||||
|
||||
const actualRequesting = isSnatch ? { turkey: 0, coffee: 0, corn: 0 } : {
|
||||
turkey: Math.min(offer.requesting.turkey, target.tokens.turkey),
|
||||
coffee: Math.min(offer.requesting.coffee, target.tokens.coffee),
|
||||
corn: Math.min(offer.requesting.corn, target.tokens.corn)
|
||||
};
|
||||
|
||||
// Transfer tokens
|
||||
offerer.tokens.turkey -= actualOffering.turkey;
|
||||
offerer.tokens.coffee -= actualOffering.coffee;
|
||||
offerer.tokens.corn -= actualOffering.corn;
|
||||
offerer.tokens.turkey += actualRequesting.turkey;
|
||||
offerer.tokens.coffee += actualRequesting.coffee;
|
||||
offerer.tokens.corn += actualRequesting.corn;
|
||||
|
||||
target.tokens.turkey += actualOffering.turkey;
|
||||
target.tokens.coffee += actualOffering.coffee;
|
||||
target.tokens.corn += actualOffering.corn;
|
||||
target.tokens.turkey -= actualRequesting.turkey;
|
||||
target.tokens.coffee -= actualRequesting.coffee;
|
||||
target.tokens.corn -= actualRequesting.corn;
|
||||
|
||||
console.log(`🔄 Trade executed: ${isSnatch ? 'SNATCH' : 'FAIR'}`);
|
||||
}
|
||||
|
||||
private checkGameStart() {
|
||||
const playerCount = this.state.players.size;
|
||||
|
||||
if (playerCount === this.state.minPlayers && this.state.gamePhase === "waiting") {
|
||||
this.assignProducerRoles();
|
||||
this.state.gamePhase = "trading";
|
||||
this.state.gameStarted = true;
|
||||
this.state.round = 1;
|
||||
console.log(`🚀 Game started! Round ${this.state.round} - Trading phase`);
|
||||
} else if (playerCount < this.state.minPlayers && this.state.gameStarted) {
|
||||
this.state.gamePhase = "waiting";
|
||||
this.state.gameStarted = false;
|
||||
console.log(`⏸️ Game paused - not enough players (${playerCount}/${this.state.minPlayers})`);
|
||||
}
|
||||
}
|
||||
|
||||
onJoin(client: Client, options: any) {
|
||||
console.log(`Client ${client.sessionId} joined the room`);
|
||||
|
||||
const player = new Player();
|
||||
player.id = client.sessionId;
|
||||
player.name = options.playerName || `Player ${this.state.players.size + 1}`;
|
||||
player.producerRole = "turkey"; // Will be reassigned when game starts
|
||||
player.tokens = new TokenInventory();
|
||||
player.points = 0;
|
||||
player.shameTokens = 0;
|
||||
player.isSuspended = false;
|
||||
player.role = "trader";
|
||||
|
||||
this.state.players.set(client.sessionId, player);
|
||||
|
||||
// Check if we can start the game
|
||||
this.checkGameStart();
|
||||
}
|
||||
|
||||
onLeave(client: Client, consented: boolean) {
|
||||
console.log(`Client ${client.sessionId} left the room`);
|
||||
this.state.players.delete(client.sessionId);
|
||||
|
||||
// Check if we need to pause the game
|
||||
this.checkGameStart();
|
||||
}
|
||||
|
||||
onDispose() {
|
||||
console.log(`GameRoom ${this.roomId} disposed`);
|
||||
}
|
||||
|
||||
// Method for admin monitoring - used by Colyseus monitor and admin API
|
||||
getInspectData() {
|
||||
const stateSize = JSON.stringify(this.state).length;
|
||||
const roomElapsedTime = this.clock.elapsedTime;
|
||||
|
||||
// Gather client information
|
||||
const clients = this.clients.map((client) => ({
|
||||
sessionId: client.sessionId,
|
||||
elapsedTime: roomElapsedTime - (client as any)._joinedAt || 0
|
||||
}));
|
||||
|
||||
// Return comprehensive room data
|
||||
return {
|
||||
roomId: this.roomId,
|
||||
name: 'game',
|
||||
clientCount: clients.length,
|
||||
maxClients: this.maxClients,
|
||||
locked: this.locked,
|
||||
state: this.state,
|
||||
stateSize,
|
||||
clients: clients,
|
||||
elapsedTime: roomElapsedTime,
|
||||
metadata: {
|
||||
gamePhase: this.state.gamePhase,
|
||||
gameStarted: this.state.gameStarted,
|
||||
round: this.state.round,
|
||||
playerCount: this.state.players.size,
|
||||
activeOffers: this.state.activeTradeOffers.length
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Admin methods for game control
|
||||
pauseGame() {
|
||||
if (this.state.gameStarted && this.state.gamePhase !== 'paused') {
|
||||
this.state.gamePhase = 'paused';
|
||||
console.log(`⏸️ Game paused in room ${this.roomId} by admin`);
|
||||
|
||||
// Broadcast pause message to all clients
|
||||
this.broadcast("gamePaused", {
|
||||
message: "El juego ha sido pausado por el administrador",
|
||||
timestamp: Date.now()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
resumeGame() {
|
||||
if (this.state.gameStarted && this.state.gamePhase === 'paused') {
|
||||
this.state.gamePhase = 'trading'; // Resume to trading phase
|
||||
console.log(`▶️ Game resumed in room ${this.roomId} by admin`);
|
||||
|
||||
// Broadcast resume message to all clients
|
||||
this.broadcast("gameResumed", {
|
||||
message: "El juego ha sido reanudado por el administrador",
|
||||
timestamp: Date.now()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_forceClientDisconnect(sessionId: string) {
|
||||
const client = this.clients.find(c => c.sessionId === sessionId);
|
||||
if (client) {
|
||||
console.log(`🚫 Admin force disconnect player ${sessionId} from room ${this.roomId}`);
|
||||
|
||||
// Send notification to the specific client before disconnecting
|
||||
client.send("adminKicked", {
|
||||
message: "Has sido expulsado del juego por el administrador",
|
||||
reason: "admin_kick",
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
// Give client time to process the message, then disconnect
|
||||
setTimeout(() => {
|
||||
client.leave(4000); // Force disconnect with code 4000
|
||||
}, 1000);
|
||||
} else {
|
||||
throw new Error(`Player ${sessionId} not found in room ${this.roomId}`);
|
||||
}
|
||||
}
|
||||
|
||||
_forceDisconnectAllClients() {
|
||||
console.log(`🚫🚫 Admin force disconnect ALL players from room ${this.roomId}`);
|
||||
|
||||
if (this.clients.length === 0) {
|
||||
return { success: true, kickedPlayers: 0 };
|
||||
}
|
||||
|
||||
// Send notification to all clients first
|
||||
this.broadcast("adminKicked", {
|
||||
message: "Todos los jugadores han sido expulsados por el administrador",
|
||||
reason: "admin_kick_all",
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
const kickedCount = this.clients.length;
|
||||
|
||||
// Give clients time to process the message, then disconnect all
|
||||
setTimeout(() => {
|
||||
// Create a copy of clients array since it will be modified during iteration
|
||||
const clientsToDisconnect = [...this.clients];
|
||||
clientsToDisconnect.forEach(client => {
|
||||
client.leave(4000); // Force disconnect with code 4000
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return { success: true, kickedPlayers: kickedCount };
|
||||
}
|
||||
|
||||
advanceRound() {
|
||||
const oldRound = this.state.round;
|
||||
this.state.round = Math.min(oldRound + 1, 10); // Max 10 rounds
|
||||
const newRound = this.state.round;
|
||||
|
||||
console.log(`⏭️ Round advanced from ${oldRound} to ${newRound} in room ${this.roomId}`);
|
||||
|
||||
// Broadcast round change to all clients
|
||||
this.broadcast("roundChanged", {
|
||||
oldRound,
|
||||
newRound,
|
||||
message: `Ronda ${newRound} - Cambio realizado por el administrador`,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
return { success: true, newRound, oldRound };
|
||||
}
|
||||
|
||||
previousRound() {
|
||||
const oldRound = this.state.round;
|
||||
this.state.round = Math.max(oldRound - 1, 1); // Min round 1
|
||||
const newRound = this.state.round;
|
||||
|
||||
console.log(`⏮️ Round went back from ${oldRound} to ${newRound} in room ${this.roomId}`);
|
||||
|
||||
// Broadcast round change to all clients
|
||||
this.broadcast("roundChanged", {
|
||||
oldRound,
|
||||
newRound,
|
||||
message: `Ronda ${newRound} - Cambio realizado por el administrador`,
|
||||
timestamp: Date.now()
|
||||
});
|
||||
|
||||
return { success: true, newRound, oldRound };
|
||||
}
|
||||
}
|
||||
25
nuxt-snatchgame/tsconfig.json
Normal file
25
nuxt-snatchgame/tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"compilerOptions": {
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.server.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.shared.json"
|
||||
},
|
||||
{
|
||||
"path": "./.nuxt/tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user