const { createCanvas, loadImage, registerFont } = require('canvas'); const GIFEncoder = require('gif-encoder-2'); const path = require('path'); const fs = require('fs'); const { EMOJIS, COLORS, randomInt } = require('./utils'); const WIDTH = 800; const HEIGHT = 500; const FRAMES = 20; const DELAY = 100; function drawGlowBorder(ctx, x, y, w, h, color, frame) { const pulse = Math.sin(frame * 0.3) * 3; ctx.shadowColor = color; ctx.shadowBlur = 15 + pulse; ctx.strokeStyle = color; ctx.lineWidth = 3; ctx.strokeRect(x, y, w, h); ctx.shadowBlur = 0; } function drawCircularImage(ctx, img, cx, cy, radius) { ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.closePath(); ctx.clip(); ctx.drawImage(img, cx - radius, cy - radius, radius * 2, radius * 2); ctx.restore(); } function drawCircularBorder(ctx, cx, cy, radius, color, frame) { const pulse = Math.sin(frame * 0.3) * 2; ctx.shadowColor = color; ctx.shadowBlur = 20 + pulse; ctx.strokeStyle = color; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(cx, cy, radius + 3, 0, Math.PI * 2); ctx.closePath(); ctx.stroke(); ctx.shadowBlur = 0; } function drawNeonText(ctx, text, x, y, color, fontSize, frame) { const pulse = Math.sin(frame * 0.2) * 0.3 + 0.7; ctx.font = `bold ${fontSize}px Arial`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.shadowColor = color; ctx.shadowBlur = 20 * pulse; ctx.fillStyle = color; ctx.fillText(text, x, y); ctx.shadowBlur = 10 * pulse; ctx.fillStyle = `rgba(255,255,255,${0.3 * pulse})`; ctx.fillText(text, x - 1, y - 1); ctx.shadowBlur = 0; } function drawParticles(ctx, frame) { for (let i = 0; i < 25; i++) { const x = ((i * 137 + frame * 2) % WIDTH); const y = ((i * 251 + frame * 3) % HEIGHT); const size = (Math.sin(i + frame * 0.1) + 1) * 2; const alpha = (Math.sin(i * 2 + frame * 0.2) + 1) * 0.3; ctx.fillStyle = `rgba(0, 191, 255, ${alpha})`; ctx.shadowColor = '#00BFFF'; ctx.shadowBlur = 8; ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } } function drawGradientBackground(ctx, color1, color2) { const grad = ctx.createLinearGradient(0, 0, WIDTH, HEIGHT); grad.addColorStop(0, color1); grad.addColorStop(1, color2); ctx.fillStyle = grad; ctx.fillRect(0, 0, WIDTH, HEIGHT); } function drawScanlines(ctx, frame) { ctx.fillStyle = 'rgba(0,0,0,0.07)'; for (let y = frame % 4; y < HEIGHT; y += 4) { ctx.fillRect(0, y, WIDTH, 1); } } function drawGrid(ctx, frame) { ctx.strokeStyle = 'rgba(0, 191, 255, 0.05)'; ctx.lineWidth = 1; const offset = frame * 3; for (let x = offset % 40; x < WIDTH; x += 40) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, HEIGHT); ctx.stroke(); } for (let y = offset % 40; y < HEIGHT; y += 40) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(WIDTH, y); ctx.stroke(); } } async function criarGIF(drawCallback) { return new Promise((resolve, reject) => { const encoder = new GIFEncoder(WIDTH, HEIGHT, 'neuquant'); const canvas = createCanvas(WIDTH, HEIGHT); const ctx = canvas.getContext('2d'); encoder.setDelay(DELAY); encoder.setRepeat(0); const chunks = []; encoder.on('data', chunk => chunks.push(chunk)); encoder.on('end', () => resolve(Buffer.concat(chunks))); encoder.on('error', reject); encoder.start(); for (let f = 0; f < FRAMES; f++) { ctx.clearRect(0, 0, WIDTH, HEIGHT); drawCallback(ctx, f); encoder.addFrame(ctx); } encoder.finish(); }); } async function diarioCanvas(avatarURL, username) { const avatar = await loadImage(avatarURL); const dataAtual = new Date().toLocaleDateString('pt-BR'); return criarGIF((ctx, frame) => { drawGradientBackground(ctx, '#0A0E27', '#1A1A4E'); drawParticles(ctx, frame); // Border glow drawGlowBorder(ctx, 20, 20, WIDTH - 40, HEIGHT - 40, '#00BFFF', frame); // Avatar drawCircularImage(ctx, avatar, WIDTH / 2, 130, 55); drawCircularBorder(ctx, WIDTH / 2, 130, 55, '#00BFFF', frame); // Name drawNeonText(ctx, username, WIDTH / 2, 215, '#FFFFFF', 28, frame); // Title drawNeonText(ctx, '🎉 RECOMPENSA DIÁRIA 🎉', WIDTH / 2, 280, '#00BFFF', 32, frame); // Value drawNeonText(ctx, '+1.000.000 💎 onDIMA', WIDTH / 2, 340, '#FFD700', 36, frame); // Date drawNeonText(ctx, dataAtual, WIDTH / 2, 400, '#888888', 20, frame); // Corner glows const glowColors = ['#00BFFF', '#FFD700', '#00FF88', '#FF69B4']; for (let i = 0; i < 4; i++) { const cx = i < 2 ? 40 : WIDTH - 40; const cy = i % 2 === 0 ? 40 : HEIGHT - 40; ctx.shadowColor = glowColors[i]; ctx.shadowBlur = 30 + Math.sin(frame * 0.3 + i) * 10; ctx.fillStyle = glowColors[i]; ctx.beginPath(); ctx.arc(cx, cy, 5, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } }); } async function slotsCanvas(avatarURL, emojis, ganhou, valor, aposta) { const avatar = await loadImage(avatarURL); return criarGIF((ctx, frame) => { drawGradientBackground(ctx, '#0A0E27', '#2D0A4E'); drawGrid(ctx, frame); drawScanlines(ctx, frame); // Title drawNeonText(ctx, '🎰 CAÇA-NÍQUEIS 🎰', WIDTH / 2, 45, '#FFD700', 28, frame); // Slots const slotY = 150; const slotSize = 80; const colors = ['#FF4444', '#00FF88', '#00BFFF']; for (let i = 0; i < 3; i++) { const sx = 200 + i * 150; const flash = Math.sin(frame * 0.2 + i * 0.5) > 0; ctx.shadowColor = colors[i]; ctx.shadowBlur = flash ? 25 : 10; ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(sx, slotY - slotSize / 2, slotSize + 20, slotSize + 10); ctx.strokeStyle = flash ? colors[i] : '#333'; ctx.lineWidth = 3; ctx.strokeRect(sx, slotY - slotSize / 2, slotSize + 20, slotSize + 10); ctx.shadowBlur = 0; ctx.font = '60px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = flash ? '#FFFFFF' : '#AAAAAA'; ctx.fillText(emojis[i], sx + (slotSize + 20) / 2, slotY); } // Result const resultText = ganhou ? '🏆 GANHOU! 🏆' : '💔 PERDEU! 💔'; const resultColor = ganhou ? '#00FF88' : '#FF4444'; drawNeonText(ctx, resultText, WIDTH / 2, 270, resultColor, 32, frame); drawNeonText(ctx, `${ganhou ? '+' : '-'}${formatNumber(valor)} 💎`, WIDTH / 2, 320, '#FFFFFF', 26, frame); // Avatar drawCircularImage(ctx, avatar, WIDTH - 70, 430, 30); drawCircularBorder(ctx, WIDTH - 70, 430, 30, '#00BFFF', frame); // Aposta info ctx.font = '16px Arial'; ctx.textAlign = 'center'; ctx.fillStyle = '#888'; ctx.fillText(`Aposta: ${formatNumber(aposta)} 💎`, WIDTH / 2, 450); }); } async function roletaCanvas(avatarURL, setor, ganhou, valor, aposta) { const avatar = await loadImage(avatarURL); const setores = COLORS.roleta; const numSetores = 8; const anguloPorSetor = (Math.PI * 2) / numSetores; return criarGIF((ctx, frame) => { drawGradientBackground(ctx, '#0A0E27', '#1A0033'); drawParticles(ctx, frame); // Title drawNeonText(ctx, '🎡 ROLETA DA SORTE 🎡', WIDTH / 2, 50, '#FFD700', 28, frame); // Roleta const cx = 250; const cy = 260; const raio = 120; const rotacao = frame * 0.15; ctx.save(); ctx.translate(cx, cy); // Shadow glow ctx.shadowColor = '#00BFFF'; ctx.shadowBlur = 30; // Draw sectors for (let i = 0; i < numSetores; i++) { const anguloInicio = rotacao + i * anguloPorSetor; const anguloFim = anguloInicio + anguloPorSetor; ctx.beginPath(); ctx.moveTo(0, 0); ctx.arc(0, 0, raio, anguloInicio, anguloFim); ctx.closePath(); ctx.fillStyle = setores[i]; ctx.fill(); ctx.strokeStyle = '#FFFFFF'; ctx.lineWidth = 1; ctx.stroke(); } // Center glow const pulse = Math.sin(frame * 0.3) * 10 + 20; ctx.shadowBlur = pulse; ctx.fillStyle = '#00BFFF'; ctx.beginPath(); ctx.arc(0, 0, 20, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.restore(); // Pointer ctx.shadowColor = '#FFD700'; ctx.shadowBlur = 15; ctx.fillStyle = '#FFD700'; ctx.beginPath(); ctx.moveTo(cx, cy - raio - 20); ctx.lineTo(cx - 10, cy - raio + 10); ctx.lineTo(cx + 10, cy - raio + 10); ctx.closePath(); ctx.fill(); ctx.shadowBlur = 0; // Setor sorteado drawNeonText(ctx, `Setor: ${setor}`, WIDTH / 2, 400, '#FFFFFF', 22, frame); // Result const resultText = ganhou ? '🏆 GANHOU! 🏆' : '💔 PERDEU! 💔'; const resultColor = ganhou ? '#00FF88' : '#FF4444'; drawNeonText(ctx, resultText, 580, 200, resultColor, 28, frame); drawNeonText(ctx, `${ganhou ? '+' : '-'}${formatNumber(valor)} 💎`, 580, 250, '#FFFFFF', 24, frame); // Avatar drawCircularImage(ctx, avatar, WIDTH - 70, 440, 28); drawCircularBorder(ctx, WIDTH - 70, 440, 28, '#00BFFF', frame); }); } async function doubleCanvas(avatarURL, valorAtual, sequencia, estado) { const avatar = await loadImage(avatarURL); return criarGIF((ctx, frame) => { drawGradientBackground(ctx, '#0A0E27', '#2D004D'); drawParticles(ctx, frame); // Title drawNeonText(ctx, '🎲 DOUBLE OU NADA 🎲', WIDTH / 2, 50, '#FFD700', 28, frame); // Card const pulse = Math.sin(frame * 0.3) * 5; const cardX = 200; const cardY = 110; const cardW = 400; const cardH = 220; const estadoColors = { jogando: '#00BFFF', coletou: '#00FF88', perdeu: '#FF4444' }; const borderColor = estadoColors[estado] || '#00BFFF'; ctx.shadowColor = borderColor; ctx.shadowBlur = 30 + pulse; ctx.fillStyle = 'rgba(10, 14, 39, 0.8)'; ctx.fillRect(cardX, cardY, cardW, cardH); ctx.strokeStyle = borderColor; ctx.lineWidth = 3; ctx.strokeRect(cardX, cardY, cardW, cardH); ctx.shadowBlur = 0; // Current value drawNeonText(ctx, `${formatNumber(valorAtual)} 💎`, cardX + cardW / 2, cardY + 85, '#FFFFFF', 38, frame); // Sequence counter drawNeonText(ctx, `Sequência: ${sequencia}x`, cardX + cardW / 2, cardY + 150, borderColor, 22, frame); // State const estadoText = { jogando: '🎯 Em andamento...', coletou: '✅ Coletado com sucesso!', perdeu: '❌ Perdeu tudo!' }; drawNeonText(ctx, estadoText[estado], cardX + cardW / 2, cardY + 195, borderColor, 20, frame); // Instructions if (estado === 'jogando') { ctx.font = '16px Arial'; ctx.textAlign = 'center'; ctx.fillStyle = '#888'; ctx.fillText('Dobre ou Colete nos botões abaixo', WIDTH / 2, 420); } // Avatar drawCircularImage(ctx, avatar, WIDTH - 70, 440, 28); drawCircularBorder(ctx, WIDTH - 70, 440, 28, '#00BFFF', frame); }); } async function corridaCanvas(avatarURL, progressoJogador, progressoBot, vencedor) { const avatar = await loadImage(avatarURL); return criarGIF((ctx, frame) => { drawGradientBackground(ctx, '#001A00', '#004D40'); drawGrid(ctx, frame); // Title drawNeonText(ctx, '🏍️ CORRIDA DE MOTOS 🏍️', WIDTH / 2, 40, '#FFD700', 28, frame); // Track lines const lineOffset = (frame * 5) % 40; ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 2; ctx.setLineDash([20, 20]); ctx.lineDashOffset = -lineOffset; for (let y = 130; y <= 340; y += 100) { ctx.beginPath(); ctx.moveTo(0, y + 40); ctx.lineTo(WIDTH, y + 40); ctx.stroke(); } ctx.setLineDash([]); // Track backgrounds ctx.fillStyle = 'rgba(0,0,0,0.4)'; ctx.fillRect(50, 100, WIDTH - 100, 50); ctx.fillRect(50, 230, WIDTH - 100, 50); // Player ctx.font = '20px Arial'; ctx.textAlign = 'left'; ctx.fillStyle = '#00BFFF'; ctx.fillText('Você', 55, 120); const px = 60 + (WIDTH - 160) * (progressoJogador / 100); ctx.font = '30px Arial'; ctx.fillText('🏍️', px, 138); // Progress bar player ctx.fillStyle = 'rgba(0, 191, 255, 0.3)'; ctx.fillRect(130, 108, WIDTH - 180, 4); ctx.fillStyle = '#00BFFF'; ctx.fillRect(130, 108, (WIDTH - 180) * (progressoJogador / 100), 4); // Bot ctx.font = '20px Arial'; ctx.fillStyle = '#FF4444'; ctx.fillText('Bot', 55, 250); const bx = 60 + (WIDTH - 160) * (progressoBot / 100); ctx.font = '30px Arial'; ctx.fillText('🏍️', bx, 268); // Progress bar bot ctx.fillStyle = 'rgba(255, 68, 68, 0.3)'; ctx.fillRect(130, 238, WIDTH - 180, 4); ctx.fillStyle = '#FF4444'; ctx.fillRect(130, 238, (WIDTH - 180) * (progressoBot / 100), 4); // Progress % ctx.font = '16px Arial'; ctx.textAlign = 'right'; ctx.fillStyle = '#00BFFF'; ctx.fillText(`${Math.round(progressoJogador)}%`, WIDTH - 55, 120); ctx.fillStyle = '#FF4444'; ctx.fillText(`${Math.round(progressoBot)}%`, WIDTH - 55, 250); // Finish line ctx.strokeStyle = `rgba(255,255,255,${0.3 + Math.sin(frame * 0.3) * 0.2})`; ctx.lineWidth = 3; ctx.setLineDash([10, 10]); ctx.lineDashOffset = -frame * 2; ctx.beginPath(); ctx.moveTo(WIDTH - 105, 90); ctx.lineTo(WIDTH - 105, 290); ctx.stroke(); ctx.setLineDash([]); // Winner if (vencedor) { const nomeVencedor = vencedor === 'jogador' ? 'VOCÊ' : 'BOT'; const corVencedor = vencedor === 'jogador' ? '#00FF88' : '#FF4444'; drawNeonText(ctx, `🏆 VENCEDOR: ${nomeVencedor} 🏆`, WIDTH / 2, 390, corVencedor, 30, frame); } // Avatar drawCircularImage(ctx, avatar, WIDTH - 70, 440, 28); drawCircularBorder(ctx, WIDTH - 70, 440, 28, '#00BFFF', frame); }); } async function akinatorCanvas(avatarURL, pergunta, personagem, imagemPersonagem, fase) { const avatar = await loadImage(avatarURL); return criarGIF(async (ctx, frame) => { drawGradientBackground(ctx, '#1A0033', '#0A0E27'); // Stars for (let i = 0; i < 40; i++) { const sx = (i * 47 + frame * 1) % WIDTH; const sy = (i * 83 + frame * 2) % HEIGHT; const alpha = (Math.sin(i + frame * 0.15) + 1) * 0.3; ctx.fillStyle = `rgba(255,255,255,${alpha})`; ctx.beginPath(); ctx.arc(sx, sy, 1.5, 0, Math.PI * 2); ctx.fill(); } // Genie icon ctx.font = '60px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('🧞', WIDTH / 2, 80); if (fase === 'pergunta') { // Question drawNeonText(ctx, pergunta, WIDTH / 2, 240, '#FFFFFF', 26, frame); // Progress dots const dots = '.'.repeat((frame % 4) + 1); ctx.font = '30px Arial'; ctx.textAlign = 'center'; ctx.fillStyle = '#00BFFF'; ctx.fillText(dots, WIDTH / 2, 300); ctx.font = '18px Arial'; ctx.fillStyle = '#888'; ctx.fillText('Responda com os botões abaixo', WIDTH / 2, 370); } else if (fase === 'revelacao' && personagem) { if (imagemPersonagem) { try { const img = await loadImage(imagemPersonagem); const imgSize = 120; const pulse = Math.sin(frame * 0.3) * 3; ctx.shadowColor = '#FFD700'; ctx.shadowBlur = 30 + pulse; ctx.strokeStyle = '#FFD700'; ctx.lineWidth = 3; ctx.strokeRect(WIDTH / 2 - imgSize / 2 - 3, 150 - imgSize / 2 - 3, imgSize + 6, imgSize + 6); ctx.shadowBlur = 0; ctx.drawImage(img, WIDTH / 2 - imgSize / 2, 150 - imgSize / 2, imgSize, imgSize); } catch (e) { ctx.font = '40px Arial'; ctx.textAlign = 'center'; ctx.fillText('🎭', WIDTH / 2, 170); } } else { ctx.font = '40px Arial'; ctx.textAlign = 'center'; ctx.fillText('🎭', WIDTH / 2, 170); } drawNeonText(ctx, `É ${personagem}!`, WIDTH / 2, 290, '#FFD700', 32, frame); } // Avatar drawCircularImage(ctx, avatar, WIDTH - 70, 440, 28); drawCircularBorder(ctx, WIDTH - 70, 440, 28, '#9B59B6', frame); }); } // Re-export formatNumber for use inside canvas functions const { formatNumber } = require('./utils'); module.exports = { diarioCanvas, slotsCanvas, roletaCanvas, doubleCanvas, corridaCanvas, akinatorCanvas };