first upload

src/pages/JogosPage.jsx

@@ -0,0 +1,139 @@
+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>
+    )
+}