RRBEC-site/src/pages/JogosPage.jsx

import { Link } from 'react-router-dom'
import Swal from 'sweetalert2'
import styles from './JogosPage.module.css'

const jogos = [
    {
        id: 1,
        title: 'Tarefa de Bêbado',
        description: 'Objetivo: Ficar bêbado 🥴 e pagar mico 🤣.',
        image: '/rrbec/images/jogos/tarefa_bebado.png',
        playUrl: '/jogos/tarefa-de-bebado',
        internal: true,
        rules: `
      <strong>Objetivo:</strong> Ficar bêbado 🥴 e pagar mico 🤣.<br><br>
      <strong>Como Jogar:</strong><br><br>
      1 - Reúna os jogadores em volta da mesa.<br><br>
      2 - Cada jogador sorteia apenas uma tarefa por rodada.<br><br>
      3 - O jogo segue em sentido horário.<br><br>
      4 - O jogador que iniciar o jogo clica em SORTEAR.<br><br>
      5 - O jogador deverá cumprir a tarefa que aparecer.<br><br>
      6 - Se não cumprir, os outros jogadores escolhem um prenda a ser paga.<br><br>
      7 - Se a prenda não for paga, o jogador será eliminado.<br><br>
      <strong>Liberdade Total:</strong> Sintam-se à vontade para mudar as regras e usar a criatividade!<br><br>
      Divirtam-se! 🥳
    `,
    },
    {
        id: 2,
        title: 'Eu Nunca',
        description: 'Frases picantes e engraçadas para animar a mesa.',
        image: '/rrbec/images/jogos/eu_nunca.png',
        playUrl: '/jogos/eu-nunca',
        internal: true,
        rules: `
      <strong>Como Jogar:</strong><br><br>
      1 - Um jogador lê a frase da carta.<br><br>
      2 - Todos os jogadores que <strong>JÁ FIZERAM</strong> o que está escrito na carta devem beber um gole.<br><br>
      3 - Quem nunca fez, não bebe.<br><br>
      4 - Clique em PRÓXIMA para mudar a frase.<br><br>
      Divirtam-se com moderação! 🥃
    `,
    },
    {
        id: 3,
        title: 'Quem é Mais Provável?',
        description: 'Um jogo de apontar dedos e descobrir o que seus amigos pensam de você.',
        image: '/rrbec/images/jogos/quem_mais_provavel.png',
        playUrl: '/jogos/quem-e-mais-provavel',
        internal: true,
        rules: `
      <strong>Como Jogar:</strong><br><br>
      1 - O grupo lê a pergunta da tela.<br><br>
      2 - Alguém conta "3... 2... 1...".<br><br>
      3 - No "JÁ!", todos devem apontar para a pessoa que acham que mais provavelmente faria aquilo.<br><br>
      4 - A pessoa mais votada bebe um gole (ou paga uma prenda)!<br><br>
      Divirtam-se! 🍻
    `,
    },
    {
        id: 4,
        title: 'Roleta de Toque',
        description: 'Decida quem paga a rodada com um toque na tela. Rápido e emocionante!',
        image: '/rrbec/images/jogos/roleta_toque.png',
        playUrl: '/jogos/dedo-no-copo',
        internal: true,
        rules: `
      <strong>Como Jogar:</strong><br><br>
      1 - Todos os jogadores colocam um dedo na tela.<br><br>
      2 - Quando houver 2 ou mais dedos, uma contagem de <strong>5 segundos</strong> iniciará automaticamente.<br><br>
      3 - Se um novo amigo entrar na roda durante a contagem, o tempo reinicia para dar chance a todos!<br><br>
      4 - Após os 5 segundos, o anel dourado começará a carregar. Não tire o dedo!<br><br>
      5 - No final, apenas um círculo ficará iluminado. O "Eleito" paga a rodada! 🍺<br><br>
      <em>Dica: Se alguém tirar o dedo antes da roleta terminar, o jogo volta para o início.</em>
    `,
    },
]

export default function JogosPage() {
    function showRules(jogo) {
        Swal.fire({
            title: 'Regras do Jogo',
            html: `<div style="text-align:left;font-size:15px;line-height:1.6">${jogo.rules}</div>`,
            showCloseButton: true,
            showConfirmButton: false,
            background: '#2a2a2a',
            color: '#efc7b8',
        })
    }

    return (
        <div className={styles.page}>
            <h2 className={styles.heading}>
                <i className="fas fa-gamepad" /> Jogos de Bar
            </h2>

            <div className={styles.grid}>
                {jogos.map(jogo => (
                    <div key={jogo.id} className={styles.card}>
                        <div className={styles.imgWrap}>
                            <img src={jogo.image} alt={jogo.title} className={styles.img} />
                            <div className={styles.imgOverlay} />
                        </div>

                        <div className={styles.body}>
                            <h3 className={styles.title}>{jogo.title}</h3>
                            <p className={styles.desc}>{jogo.description}</p>

                            <div className={styles.actions}>
                                <button
                                    onClick={() => showRules(jogo)}
                                    className={styles.rulesBtn}
                                >
                                    <i className="fas fa-book" /> Regras
                                </button>
                                {jogo.internal ? (
                                    <Link
                                        to={jogo.playUrl}
                                        className={styles.playBtn}
                                    >
                                        <i className="fas fa-play" /> Jogar
                                    </Link>
                                ) : (
                                    <a
                                        href={jogo.playUrl}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className={styles.playBtn}
                                    >
                                        <i className="fas fa-play" /> Jogar
                                    </a>
                                )}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}