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/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>
|
||||
Reference in New Issue
Block a user