-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbolãofelas.html
More file actions
208 lines (185 loc) · 20 KB
/
bolãofelas.html
File metadata and controls
208 lines (185 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bolão dos Felas - Mega da Virada 2025</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body class="bg-gradient-to-br from-green-900 via-green-800 to-emerald-900 min-h-screen p-4">
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react.dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect } = React;
const SUPABASE_URL = 'https://pyhkhudqlbimkowvqtxe.supabase.co';
const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InB5aGtodWRxbGJpbWtvd3ZxdHhlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY5NTQxMzIsImV4cCI6MjA4MjUzMDEzMn0.ifgPFlRb9LHZHq3_H2sHMPY7wSpvRXDtaJikI0U86eE';
const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
const SENHA_ACESSO = '2025';
const VALOR_TOTAL_BOLAO = 650.00;
const PARTICIPANTES_INICIAIS = [
{ id: 1, nome: "Kaspa", cotas: 1, valorPago: 50.00, numeros: [] },
{ id: 2, nome: "Bunis", cotas: 2, valorPago: 50.00, numeros: [] },
{ id: 3, nome: "Halinne", cotas: 1, valorPago: 50.00, numeros: [] },
{ id: 4, nome: "Lindos", cotas: 2, valorPago: 50.00, numeros: [] },
{ id: 5, nome: "Mauritz & Ju", cotas: 2, valorPado: 50.00, numeros: [] },
{ id: 6, nome: "Camis & Pastel", cotas: 2, valorPago: 50.00, numeros: [] },
{ id: 7, nome: "Cássia", cotas: 1, valorPago: 50.00, numeros: [] },
{ id: 8, nome: "FerSara", cotas: 2, valorPago: 50.00, numeros: [] },
];
function App() {
const [logado, setLogado] = useState(false);
const [senhaInput, setSenhaInput] = useState('');
const [pagina, setPagina] = useState('home');
const [participantes, setParticipantes] = useState([]);
const [participanteSelecionado, setParticipanteSelecionado] = useState(null);
const [numerosEscolhidos, setNumerosEscolhidos] = useState([]);
const [estrategia, setEstrategia] = useState('opcao-a');
const [apostas, setApostas] = useState([]);
const [aprovacoes, setAprovacoes] = useState([]);
const [nomeAprovacao, setNomeAprovacao] = useState('');
const [sugestoes, setSugestoes] = useState([]);
const [novaSugestao, setNovaSugestao] = useState('');
const carregarDados = async () => {
try {
const { data, error } = await supabaseClient
.from('bolao_felas')
.select('content')
.eq('id', 'estado_geral')
.single();
if (error && error.code !== 'PGRST116') console.error("Erro:", error);
if (data?.content) {
const c = data.content;
setParticipantes(c.participantes || PARTICIPANTES_INICIAIS);
setApostas(c.apostas || []);
setEstrategia(c.estrategia || 'opcao-a');
setAprovacoes(c.aprovacoes || []);
setSugestoes(c.sugestoes || []);
} else {
setParticipantes(PARTICIPANTES_INICIAIS);
}
} catch (err) {
console.error("Erro:", err);
setParticipantes(PARTICIPANTES_INICIAIS);
}
};
useEffect(() => {
carregarDados();
const interval = setInterval(carregarDados, 5000);
return () => clearInterval(interval);
}, []);
const syncSnapshot = async (overrides = {}) => {
const snapshot = { participantes, apostas, estrategia, aprovacoes, sugestoes, ...overrides };
try {
const { error } = await supabaseClient
.from('bolao_felas')
.upsert({ id: 'estado_geral', content: snapshot, updated_at: new Date().toISOString() });
if (error) { console.error("Erro sync:", error); return false; }
return true;
} catch (err) {
console.error("Erro:", err);
return false;
}
};
const fazerLogin = () => senhaInput === SENHA_ACESSO ? setLogado(true) : alert('Senha incorreta!');
const abrirEscolhaNumeros = (p) => { setParticipanteSelecionado(p); setNumerosEscolhidos(p.numeros || []); };
const salvarNumeros = async () => {
if (numerosEscolhidos.length === 0) return alert('Escolha pelo menos 1 número!');
const novosParticipantes = participantes.map(p => p.id === participanteSelecionado.id ? {...p, numeros: numerosEscolhidos} : p);
const sucesso = await syncSnapshot({ participantes: novosParticipantes });
if (sucesso) {
setParticipantes(novosParticipantes);
alert('Números salvos! ✅');
setParticipanteSelecionado(null);
setNumerosEscolhidos([]);
} else {
alert('Erro ao salvar.');
}
};
const toggleNumero = (num) => {
if (numerosEscolhidos.includes(num)) setNumerosEscolhidos(numerosEscolhidos.filter(n => n !== num));
else if (numerosEscolhidos.length < 6) setNumerosEscolhidos([...numerosEscolhidos, num].sort((a,b) => a-b));
};
const todosNumeros = () => {
const nums = [];
participantes.forEach(p => p.numeros && nums.push(...p.numeros));
return [...new Set(nums)].sort((a,b) => a-b);
};
const gerarApostas = async () => {
const pool = todosNumeros();
if (pool.length < 6) return alert('Mínimo 6 números!');
const resultado = [];
const sortear = (qt) => {
const nums = [], temp = [...pool];
while (nums.length < qt && temp.length > 0) {
const i = Math.floor(Math.random() * temp.length);
nums.push(temp[i]);
temp.splice(i, 1);
}
while (nums.length < qt) {
const n = Math.floor(Math.random() * 60) + 1;
if (!nums.includes(n)) nums.push(n);
}
return nums.sort((a,b) => a-b);
};
if (estrategia === 'opcao-a') {
resultado.push({tipo: '9 números', nums: sortear(9), custo: 252});
resultado.push({tipo: '8 números', nums: sortear(8), custo: 140});
resultado.push({tipo: '8 números', nums: sortear(8), custo: 140});
for (let i=0; i<23; i++) resultado.push({tipo: '6 números', nums: sortear(6), custo: 5});
} else {
resultado.push({tipo: '9 números', nums: sortear(9), custo: 252});
resultado.push({tipo: '8 números', nums: sortear(8), custo: 140});
for (let i=0; i<3; i++) resultado.push({tipo: '7 números', nums: sortear(7), custo: 35});
for (let i=0; i<30; i++) resultado.push({tipo: '6 números', nums: sortear(6), custo: 5});
}
const sucesso = await syncSnapshot({ apostas: resultado, estrategia });
if (sucesso) { setApostas(resultado); alert('Apostas geradas! ✅'); }
};
const aprovar = async () => {
if (!nomeAprovacao.trim()) return alert('Digite seu nome!');
if (aprovacoes.includes(nomeAprovacao.trim())) return alert('Você já aprovou!');
const novas = [...aprovacoes, nomeAprovacao.trim()];
const sucesso = await syncSnapshot({ aprovacoes: novas });
if (sucesso) { setAprovacoes(novas); setNomeAprovacao(''); alert('Aprovado! ✅'); }
};
const adicionarSugestao = async () => {
if (!novaSugestao.trim()) return alert('Digite uma sugestão!');
const nome = prompt('Seu nome:');
if (!nome) return;
const nova = {nome, sugestao: novaSugestao, data: new Date().toLocaleString()};
const novas = [...sugestoes, nova];
const sucesso = await syncSnapshot({ sugestoes: novas });
if (sucesso) { setSugestoes(novas); setNovaSugestao(''); alert('Sugestão enviada! ✅'); }
};
const exportar = () => {
let txt = '═══════════════════════════════════════\n BOLÃO DOS FELAS - MEGA DA VIRADA 2025\n═══════════════════════════════════════\n\n';
txt += `VALOR TOTAL: R$ ${VALOR_TOTAL_BOLAO.toFixed(2)}\nESTRATÉGIA: ${estrategia === 'opcao-a' ? 'Opção A - Equilíbrio' : 'Opção B - Diversificação'}\n\nPARTICIPANTES:\n`;
participantes.forEach((p, i) => {
txt += `${String(i+1).padStart(2, '0')}. ${p.nome} | R$ ${p.valorPago.toFixed(2)} | Números: ${p.numeros?.length > 0 ? p.numeros.join(', ') : 'Não escolheu'}\n`;
});
txt += '\nAPOSTAS:\n';
apostas.forEach((a, i) => txt += `${String(i+1).padStart(3, '0')}. [${a.tipo}] ${a.nums.map(n => String(n).padStart(2,'0')).join('-')}\n`);
const blob = new Blob([txt], {type: 'text/plain;charset=utf-8'});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'bolao-felas-2025.txt';
link.click();
};
if (!logado) return (<div className="max-w-md mx-auto mt-20"><div className="bg-white rounded-xl p-8 shadow-2xl"><div className="text-center mb-6"><div className="text-6xl mb-4">🎰</div><h1 className="text-2xl font-bold text-green-900 mb-1">Bolão dos Felas</h1><h2 className="text-xl font-bold text-green-700 mb-2">Mega da Virada 2025</h2></div><div className="mb-6"><label className="block font-bold mb-2">Senha:</label><input type="password" value={senhaInput} onChange={e => setSenhaInput(e.target.value)} onKeyPress={e => e.key === 'Enter' && fazerLogin()} placeholder="Digite a senha" className="w-full p-4 border-2 rounded-lg text-lg focus:border-green-600 outline-none" /></div><button onClick={fazerLogin} className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-4 rounded-lg text-lg">🔓 Entrar</button></div></div>);
if (participanteSelecionado) return (<div className="max-w-4xl mx-auto"><button onClick={() => {setParticipanteSelecionado(null); setNumerosEscolhidos([]);}} className="text-white mb-4">⬅️ Voltar</button><div className="bg-white rounded-xl p-6"><h2 className="text-2xl font-bold text-green-900 mb-1 text-center">{participanteSelecionado.nome}</h2><p className="text-center text-gray-600 mb-6">R$ {participanteSelecionado.valorPago.toFixed(2)}</p><div className="mb-6"><label className="block font-bold mb-2">Escolha até 6 números: <span className="text-green-600">{numerosEscolhidos.length}/6</span></label>{numerosEscolhidos.length > 0 && (<div className="mb-3 flex gap-2 flex-wrap">{numerosEscolhidos.map(n => <span key={n} className="bg-green-600 text-white px-4 py-2 rounded-full font-bold">{String(n).padStart(2, '0')}</span>)}</div>)}<div className="grid grid-cols-10 gap-2">{Array.from({length: 60}, (_, i) => i+1).map(num => (<button key={num} onClick={() => toggleNumero(num)} className={`aspect-square rounded-lg font-bold transition ${numerosEscolhidos.includes(num) ? 'bg-green-600 text-white scale-110' : 'bg-gray-100 hover:bg-gray-200'}`}>{num}</button>))}</div></div><button onClick={salvarNumeros} disabled={numerosEscolhidos.length === 0} className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white font-bold py-4 rounded-lg">✅ Salvar</button></div></div>);
if (pagina === 'home') {
const totalComNumeros = participantes.filter(p => p.numeros?.length > 0).length;
return (<div className="max-w-6xl mx-auto"><div className="text-center mb-6 text-white"><h1 className="text-4xl font-bold mb-2">🎰 Bolão dos Felas 🎰</h1><h2 className="text-2xl font-bold mb-3">Mega da Virada 2025</h2><div className="inline-block bg-yellow-400 text-green-900 px-6 py-3 rounded-full font-bold text-xl">R$ {VALOR_TOTAL_BOLAO.toFixed(2)}</div></div><div className="grid md:grid-cols-3 gap-4 mb-6"><div className="bg-white rounded-lg p-4 text-center"><p className="text-3xl font-bold text-green-900">{participantes.length}</p><p className="text-sm">Participantes</p></div><div className="bg-white rounded-lg p-4 text-center"><p className="text-3xl font-bold text-blue-900">{totalComNumeros}/{participantes.length}</p><p className="text-sm">Escolheram</p></div><div className="bg-white rounded-lg p-4 text-center"><p className="text-3xl font-bold text-purple-900">{apostas.length}</p><p className="text-sm">Jogos</p></div></div><div className="bg-white rounded-xl p-6 mb-6"><h3 className="text-2xl font-bold mb-4">👥 Participantes</h3><div className="grid md:grid-cols-2 gap-3 max-h-96 overflow-y-auto">{participantes.map(p => (<div key={p.id} className="border-2 border-green-200 rounded-lg p-4 bg-green-50"><div className="flex justify-between items-start mb-3"><div className="flex-1"><h4 className="font-bold text-lg">{p.nome}</h4><p className="text-sm text-gray-600">R$ {p.valorPago.toFixed(2)}</p></div><button onClick={() => abrirEscolhaNumeros(p)} className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-bold text-sm ml-2">{p.numeros?.length > 0 ? '✏️' : '➕'}</button></div>{p.numeros?.length > 0 ? (<div className="flex gap-1 flex-wrap">{p.numeros.map(n => (<span key={n} className="bg-green-600 text-white w-8 h-8 flex items-center justify-center rounded-full text-xs font-bold">{String(n).padStart(2, '0')}</span>))}</div>) : <p className="text-sm text-gray-500 italic">Aguardando</p>}</div>))}</div></div><div className="grid md:grid-cols-2 gap-4"><button onClick={() => setPagina('consulta')} className="bg-white rounded-xl p-6 shadow-xl"><div className="text-5xl mb-3">🎰</div><h3 className="text-xl font-bold text-blue-900">Ver Jogos</h3></button><button onClick={() => setPagina('admin')} className="bg-white rounded-xl p-6 shadow-xl"><div className="text-5xl mb-3">💡</div><h3 className="text-xl font-bold text-purple-900">Estratégias</h3></button></div></div>);
}
if (pagina === 'consulta') return (<div className="max-w-6xl mx-auto"><button onClick={() => setPagina('home')} className="text-white mb-4">⬅️ Voltar</button><div className="bg-white rounded-xl p-6"><h2 className="text-3xl font-bold text-center mb-6">🎰 Jogos</h2>{apostas.length === 0 ? (<div className="text-center py-12"><div className="text-6xl mb-4">⏳</div><h3 className="text-2xl font-bold">Aguardando</h3></div>) : (<><div className="mb-6"><div className="grid md:grid-cols-3 gap-3 max-h-96 overflow-y-auto">{apostas.map((a, i) => (<div key={i} className="bg-green-50 border p-3 rounded-lg"><div className="flex justify-between text-xs mb-2"><span>#{i+1}</span><span className="font-bold">{a.tipo}</span></div><div className="flex gap-1 flex-wrap justify-center">{a.nums.map((n, j) => (<span key={j} className="bg-green-600 text-white w-7 h-7 flex items-center justify-center rounded-full text-xs font-bold">{String(n).padStart(2, '0')}</span>))}</div></div>))}</div></div><div className="bg-green-50 border-2 border-green-300 rounded-lg p-6"><h3 className="font-bold text-xl mb-4 text-center">✅ Aprovar</h3>{aprovacoes.length > 0 && (<div className="mb-4"><p className="font-bold mb-2">Aprovaram ({aprovacoes.length}):</p><div className="flex flex-wrap gap-2">{aprovacoes.map((a, i) => <span key={i} className="bg-green-600 text-white px-3 py-1 rounded-full text-sm">{a} ✅</span>)}</div></div>)}<div className="flex gap-2"><input type="text" value={nomeAprovacao} onChange={e => setNomeAprovacao(e.target.value)} placeholder="Seu nome" className="flex-1 p-3 border-2 rounded-lg" /><button onClick={aprovar} className="bg-green-600 text-white px-6 py-3 rounded-lg font-bold">✅</button></div></div></>)}</div></div>);
if (pagina === 'admin') {
return (<div className="max-w-6xl mx-auto pb-8"><button onClick={() => setPagina('home')} className="text-white mb-4">⬅️ Voltar</button><div className="bg-white rounded-xl p-6"><h2 className="text-3xl font-bold mb-6 text-center">🔐 Escolha a Estratégia (R$ 650)</h2><div className="grid md:grid-cols-2 gap-6 mb-6"><button onClick={() => setEstrategia('opcao-a')} className={`p-6 border-3 rounded-xl transition-all ${estrategia === 'opcao-a' ? 'border-green-600 bg-green-50 shadow-lg' : 'border-gray-300'}`}><div className="text-4xl mb-3">🎯</div><h3 className="text-2xl font-bold text-green-900 mb-3">Opção A - Equilíbrio</h3><div className="text-left bg-white p-4 rounded-lg mb-3"><p className="text-sm font-bold mb-2">Composição:</p><ul className="text-sm space-y-1"><li>• 1 jogo de 9 números (84 comb)</li><li>• 2 jogos de 8 números (56 comb)</li><li>• 23 jogos simples</li></ul></div><div className="bg-yellow-100 border-2 border-yellow-400 p-3 rounded-lg"><p className="font-bold text-green-800">Total: R$ 647,00</p><p className="text-sm text-green-700">163 combinações</p></div></button><button onClick={() => setEstrategia('opcao-b')} className={`p-6 border-3 rounded-xl transition-all ${estrategia === 'opcao-b' ? 'border-purple-600 bg-purple-50 shadow-lg' : 'border-gray-300'}`}><div className="text-4xl mb-3">🚀</div><h3 className="text-2xl font-bold text-purple-900 mb-3">Opção B - Diversificação</h3><div className="text-left bg-white p-4 rounded-lg mb-3"><p className="text-sm font-bold mb-2">Composição:</p><ul className="text-sm space-y-1"><li>• 1 jogo de 9 números (84 comb)</li><li>• 1 jogo de 8 números (28 comb)</li><li>• 3 jogos de 7 números (21 comb)</li><li>• 30 jogos simples</li></ul></div><div className="bg-purple-100 border-2 border-purple-400 p-3 rounded-lg"><p className="font-bold text-purple-800">Total: R$ 647,00</p><p className="text-sm text-purple-700">163 combinações</p></div></button></div><div className="bg-blue-50 border-2 border-blue-300 rounded-lg p-4 mb-6"><h4 className="font-bold text-blue-900 mb-2">💡 Estratégia Otimizada</h4><p className="text-sm text-blue-800">Ambas as opções maximizam o uso do orçamento de R$ 650 com <strong>163 combinações</strong>!</p></div><div className="bg-gray-50 border-2 border-gray-300 rounded-lg p-6 mb-6"><h3 className="text-xl font-bold mb-4">💬 Sugestões</h3><div className="mb-4"><textarea value={novaSugestao} onChange={e => setNovaSugestao(e.target.value)} placeholder="Sugira uma estratégia..." className="w-full p-3 border-2 rounded-lg h-24 text-sm" /><button onClick={adicionarSugestao} className="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-bold text-sm">📝 Enviar</button></div>{sugestoes.length > 0 && (<div className="space-y-2"><p className="font-bold text-sm mb-2">Recebidas ({sugestoes.length}):</p>{sugestoes.map((s, i) => (<div key={i} className="bg-white p-3 rounded-lg border"><div className="flex justify-between mb-1"><span className="font-bold text-sm">{s.nome}</span><span className="text-xs text-gray-500">{s.data}</span></div><p className="text-sm">{s.sugestao}</p></div>))}</div>)}</div><button onClick={gerarApostas} disabled={todosNumeros().length < 6} className="w-full bg-purple-600 text-white font-bold py-4 rounded-lg mb-4 disabled:bg-gray-400 text-lg">✨ Gerar Apostas</button>{apostas.length > 0 && (<button onClick={exportar} className="w-full bg-blue-600 text-white font-bold py-4 rounded-lg">💾 Exportar</button>)}</div></div>);
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>