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)

nuxt-snatchgame/app/components/GameScreen.vue

@@ -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>

nuxt-snatchgame/app/components/HomeScreen.vue

@@ -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>

nuxt-snatchgame/app/components/SettingsModal.vue

@@ -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>

nuxt-snatchgame/app/components/game/PlayerCard.vue

@@ -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>

nuxt-snatchgame/app/components/game/TradeOfferCard.vue

@@ -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>