sin-titulo

<script>
// --- LÓGICA ARREGLADA PARA QUE COINCIDA ---
const emotions = [
  { id: 'joy', name: 'Alegría', color: '#ffd65a', symbol: '☀️' },
  { id: 'sadness', name: 'Tristeza', color: '#77b9e8', symbol: '🌧️' },
  { id: 'anger', name: 'Ira', color: '#f27969', symbol: '🔥' },
  { id: 'fear', name: 'Miedo', color: '#b49ce6', symbol: '👀' },
  { id: 'surprise', name: 'Sorpresa', color: '#ffa957', symbol: '💥' },
  { id: 'disgust', name: 'Asco', color: '#8bca83', symbol: '🤢' }
];

let names = [];
const brainBtn = document.getElementById('brain-btn');
const spinBtn = document.getElementById('spin-btn');
const resultArea = document.getElementById('result-area');
const resultValue = document.getElementById('result-value');
const emotionResult = document.getElementById('emotion-result');

function spin() {
  if (names.length < 2) {
    document.getElementById('form-message').textContent = 'Agrega al menos 2 nombres';
    document.getElementById('form-message').classList.remove('hidden');
    return;
  }

  brainBtn.classList.add('is-spinning');
  spinBtn.disabled = true;
  brainBtn.classList.remove('has-selection');
  document.querySelectorAll('.zone-outline,.emotion-zone').forEach(e => e.classList.remove('selected'));

  setTimeout(() => {
    const randomName = names[Math.floor(Math.random() * names.length)];
    const randomEmotionIndex = Math.floor(Math.random() * 6);
    const emotion = emotions[randomEmotionIndex];

    // AQUÍ ES DONDE HACEMOS QUE COINCIDA
    brainBtn.classList.remove('is-spinning');
    brainBtn.classList.add('has-selection');

    // Iluminar zona correcta
    document.querySelector(`[data-zone="${randomEmotionIndex}"]`).classList.add('selected');
    document.querySelector(`[data-outline="${randomEmotionIndex}"]`).classList.add('selected');

    // Mostrar resultado que coincide con la zona
    resultArea.classList.remove('hidden');
    resultValue.textContent = randomName;
    emotionResult.textContent = emotion.name;
    emotionResult.style.color = emotion.color;

    // Guardar para la vista de info
    localStorage.setItem('lastWinner', randomName);
    localStorage.setItem('lastEmotion', JSON.stringify(emotion));
    localStorage.setItem('lastEmotionIndex', randomEmotionIndex);

    // Ir a info después de 1.2s
    setTimeout(() => showInfo(randomName, emotion), 1200);

    spinBtn.disabled = false;
  }, 900);
}

brainBtn.addEventListener('click', spin);
spinBtn.addEventListener('click', spin);

function showInfo(name, emotion) {
  document.getElementById('play-view').classList.add('hidden');
  document.getElementById('info-view').classList.remove('hidden');
  document.getElementById('info-winner').textContent = name;
  document.getElementById('emotion-disc').style.background = emotion.color;
  document.getElementById('disc-symbol').textContent = emotion.symbol;
  // ocultar todas las tarjetas y mostrar solo la que coincide
  document.querySelectorAll('.info-card').forEach(c => c.classList.add('hidden'));
  document.querySelector(`[data-template-id="${emotion.id}-card"]`).classList.remove('hidden');
  document.querySelector(`[data-template-id="${emotion.id}-card"]`).classList.add('info-entrance');
}
</script>