import React, { useState, useEffect } from "react";
import { saveAs } from "file-saver";
// Botões do menu principal
const menuButtons = [
{ emoji: "", name: "Meus Trabalhos", color: "#FF3333" },
{ emoji: "", name: "Piadas Stand-Up", color: "#A020F0" },
{ emoji: "", name: "Textos Stand-Up", color: "#33CC66" },
{ emoji: "", name: "Anedotas", color: "#FFCC33" },
{ emoji: "❓", name: "Adivinhas", color: "#3399FF" },
{ emoji: "", name: "Vídeos", color: "#FF9933" },
{ emoji: "️", name: "Imagens", color: "#CC9966" },
{ emoji: "ℹ️", name: "Informações", color: "#AAAAAA" },
];
// Função para gerar nota aleatória (simula IA)
const generateScore = () => Math.floor(Math.random() * 21);
function App() {
const [screen, setScreen] = useState("splash");
const [currentCategory, setCurrentCategory] = useState("");
const [theme, setTheme] = useState("");
const [searchResults, setSearchResults] = useState([]);
const [myWorks, setMyWorks] = useState(() => {
return JSON.parse(localStorage.getItem("myWorks")) || {
piadas: [],
textos: [],
anedotas: [],
imagens: [],
adivinhas: [],
};
});
useEffect(() => {
localStorage.setItem("myWorks", JSON.stringify(myWorks));
}, [myWorks]);
// Avaliação IA simulada
const evaluateJoke = (text) => {
const score = generateScore();
alert(`Nota atribuída pelo comediante profissional: ${score}/20`);
return score;
};
// Pesquisa de anedotas reais (simulada)
const searchJokes = async () => {
// Aqui você pode integrar API real ou IA para buscar anedotas existentes na internet
const fakeResults = Array.from({ length: 20 }, (_, i) => ({
id: `${theme}-${i}-${Date.now()}`,
title: `Anedota ${i + 1}`,
text: `Exemplo de anedota real sobre "${theme}" nº ${i + 1}`,
score: generateScore(),
}));
setSearchResults(fakeResults);
};
const saveItem = (category, item) => {
setMyWorks({
...myWorks,
[category]: [...myWorks[category], item],
});
alert("Guardado com sucesso!");
};
const createImageFromText = (item) => {
const canvas = document.createElement("canvas");
canvas.width = 1080; // 9:16
canvas.height = 1920;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Ajuste automático do tamanho do título
ctx.fillStyle = "#FFFF00";
ctx.textAlign = "center";
let titleFontSize = 60;
do {
ctx.font = `bold ${titleFontSize}px Arial`;
titleFontSize -= 2;
} while (ctx.measureText(item.title).width > canvas.width - 40);
ctx.fillText(item.title, canvas.width / 2, 150);
// Ajuste automático do texto
ctx.fillStyle = "#FFFFFF";
let textFontSize = 40;
let lines = [];
const words = item.text.split(" ");
let line = "";
words.forEach((word) => {
const testLine = line + word + " ";
ctx.font = `bold ${textFontSize}px Arial`;
if (ctx.measureText(testLine).width > canvas.width - 60) {
lines.push(line);
line = word + " ";
} else {
line = testLine;
}
});
lines.push(line);
while (lines.length * (textFontSize + 10) > canvas.height - 300) {
textFontSize -= 2;
lines = [];
line = "";
words.forEach((word) => {
const testLine = line + word + " ";
ctx.font = `bold ${textFontSize}px Arial`;
if (ctx.measureText(testLine).width > canvas.width - 60) {
lines.push(line);
line = word + " ";
} else {
line = testLine;
}
});
lines.push(line);
}
lines.forEach((line, i) => {
ctx.fillText(line, canvas.width / 2, 250 + i * (textFontSize + 10));
});
// Rodapé
ctx.fillStyle = "#87CEFA";
let footerFontSize = 30;
ctx.font = `bold ${footerFontSize}px Arial`;
ctx.fillText("CARLINHOSDAFANSA.COM", canvas.width / 2, canvas.height - 50);
canvas.toBlob((blob) => {
const newImage = {
id: `${item.id}-img-${Date.now()}`,
title: item.title,
text: item.text,
blob: blob,
};
setMyWorks((prev) => ({
...prev,
imagens: [...prev.imagens, newImage],
}));
saveAs(blob, `${item.title}.png`);
});
};
return (
<div className="min-h-screen bg-black text-white">
{/* Header */}
<header className="fixed top-0 w-full bg-black text-blue-300 p-4 flex justify-center items-center text-3xl font-bold">
Caderno de Piadas
</header>
{/* Footer */}
<footer className="fixed bottom-0 w-full bg-black text-white text-sm text-center p-2">
<a
href="https://carlinhosdafansa.com/"
target="_blank"
rel="noopener noreferrer"
className="underline text-white"
>
App criada por carlinhosdafansa.com
</a>
</footer>
{/* Conteúdo */}
<main className="pt-24 pb-16 px-4">
{/* Splash */}
{screen === "splash" && (
<div className="flex flex-col items-center justify-center h-[80vh]">
<h1 className="text-5xl mb-10" style={{ color: "rainbow" }}>
Bem-vindo
</h1>
<button
className="bg-red-600 text-white px-10 py-4 rounded-full hover:scale-105 transition"
onClick={() => setScreen("menu")}
>
ENTRAR
</button>
</div>
)}
{/* Menu Principal */}
{screen === "menu" && (
<div className="grid grid-cols-2 gap-4">
{menuButtons.map((btn) => (
<button
key={btn.name}
className="p-6 text-2xl rounded-lg"
style={{ backgroundColor: btn.color }}
onClick={() => {
if (btn.name === "Meus Trabalhos") setScreen("meus-trabalhos");
else if (btn.name === "Anedotas") setScreen("anedotas");
else setScreen(btn.name.toLowerCase());
}}
>
{btn.emoji} {btn.name}
</button>
))}
</div>
)}
{/* Meus Trabalhos */}
{screen === "meus-trabalhos" && (
<div className="grid grid-cols-2 gap-4">
{["piadas", "textos", "anedotas", "imagens", "adivinhas"].map((cat) => (
<div key={cat} className="flex flex-col gap-2">
<h2 className="text-xl capitalize">{cat}</h2>
{myWorks[cat].map((item) => (
<div key={item.id} className="flex flex-col gap-1">
<button
className="bg-gray-800 p-2 rounded hover:bg-gray-700"
onClick={() =>
alert(`Conteúdo:\n\n${item.text}\nNota: ${item.score}`)
}
>
{item.title} | Nota: {item.score}
</button>
<button
className="bg-purple-600 p-1 rounded hover:bg-purple-500"
onClick={() => createImageFromText(item)}
>
Gerar Imagem e Download
</button>
</div>
))}
</div>
))}
</div>
)}
{/* Anedotas */}
{screen === "anedotas" && (
<div>
<input
type="text"
placeholder="Tema da anedota"
className="p-2 m-2 text-black w-full"
value={theme}
onChange