Frownie

src/app/sticker/[slug]/page.tsx

@@ -1,5 +1,4 @@
 import { notFound } from "next/navigation";
-import Image from "next/image";
 import { StickerBuilder } from "./sticker-builder";
 import { getStickerInfoBySlug } from "@/lib/stickers";
 
@@ -25,12 +24,6 @@ const SingleStickerPage = ({ params }: Props) => {
 		<main>
 			<h1>{stickerInfo.name}</h1>
 
-			<Image
-				width="200"
-				height="200"
-				alt={stickerInfo.name}
-				src={stickerInfo.thumbnailSrc}
-			/>
 			<StickerBuilder slug={slug} />
 		</main>
 	);

src/components/canvas/canvas.tsx

@@ -8,6 +8,17 @@ export const Canvas: React.FC<{
 }> = (props) => {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 
+	const handleDownload = () => {
+		const base64 = canvasRef.current?.toDataURL("image/png");
+		if (base64 === undefined) throw new Error("Export failed");
+
+		const virtualA = document.createElement("a");
+		virtualA.href = base64;
+		virtualA.download = `sticker-${props.stickerInfo.slug}.png`;
+
+		virtualA.click();
+	};
+
 	useEffect(() => {
 		if (!canvasRef.current) return;
 
@@ -21,13 +32,19 @@ export const Canvas: React.FC<{
 	}, [props.stickerInfo, props.stickerParams]);
 
 	return (
-		<div className="flex flex-col items-center gap-8">
-			<canvas
-				ref={canvasRef}
-				width={STICKER_SIZE}
-				height={STICKER_SIZE}
-				className="h-72"
-			/>
-		</div>
+		<>
+			<div className="flex flex-col items-center gap-8">
+				<canvas
+					ref={canvasRef}
+					width={STICKER_SIZE}
+					height={STICKER_SIZE}
+					className={`size-96 ${props.stickerInfo.shape === "square" ? "rounded-md" : "rounded-full"}`}
+				/>
+			</div>
+
+			<button type="button" onClick={handleDownload}>
+				download
+			</button>
+		</>
 	);
 };

src/data/stickers/frownie.ts

@@ -0,0 +1,24 @@
+import { StickerRenderer } from "@/lib/stickers";
+
+export const frownieRenderer: StickerRenderer = async (params, ctx) => {
+	const fg = params.foregroundColor || "#fff";
+	const svg = `
+	<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Ebene_1" x="0" y="0" style="enable-background:new 0 0 1080 1080" version="1.1" viewBox="0 0 1080 1080">
+	<path d="M266.3 226c-8.7 5.7-16.9 12.4-24.6 20-60.5 60.5-60.5 158.6 0 219.1s158.6 60.5 219.1 0c40.2-40.2 53.7-97 40.4-148.4-85.7-13.2-165.4-44.9-234.9-90.7zm113.6 226c-25.2 25.2-66.1 25.2-91.3 0-25.2-25.2-25.2-66.1 0-91.3 25.2-25.2 66.1-25.2 91.3 0 25.2 25.3 25.2 66.1 0 91.3zM840.4 231.8c-72.2 45.8-154.9 76.4-243.8 87.4-12.2 50.7 1.5 106.3 41.1 145.9 60.5 60.5 158.6 60.5 219.1 0s60.5-158.6 0-219.1c-5.2-5.2-10.7-9.9-16.4-14.2zM775.9 452c-25.2 25.2-66.1 25.2-91.3 0-25.2-25.2-25.2-66.1 0-91.3 25.2-25.2 66.1-25.2 91.3 0 25.2 25.3 25.2 66.1 0 91.3z" fill="white"/>
+	<path d="M705.2 881.2c13.6-15.4 28.6-30 40.7-46.7 12.8-17.7 9.4-38.1-10-47.7-20.8-10.3-43.8-18.8-66.6-21.7-108.9-13.9-216.8-9.2-322.2 23.9-13.8 4.3-27.1 10.1-41.2 15.4 7.6 23.9 14.7 46.3 22.6 71.3-59-27.8-115.8-54.6-174.2-82.1 31.6-54.3 62.7-107.6 95.5-163.7 8.8 25 16.5 47.1 24.1 68.6 37.9-12.5 74.7-25.6 112-36.9C515.7 622.2 648 613 782.3 630.9c37.3 5 73 15.5 104.4 37.3 35 24.3 46.6 58 34.6 99-18 60.7-62.3 92.5-120.4 108.8-30.3 8.5-72 10.1-95.7 5.2z" fill="${fg}"/>
+	</svg>
+	`;
+
+	ctx.fillStyle = params.backgroundColor;
+	ctx.beginPath();
+	ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
+	ctx.fill();
+	ctx.closePath();
+
+	const image = new Image();
+
+	image.src = `data:image/svg+xml;base64,${window.btoa(svg)}`;
+	image.onload = () => {
+		ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
+	};
+};

src/data/stickers/innen.ts

@@ -0,0 +1,21 @@
+import { StickerRenderer } from "@/lib/stickers";
+
+export const innenRenderer: StickerRenderer = async (params, ctx) => {
+	const fg = params.foregroundColor || "#000";
+
+	ctx.fillStyle = params.backgroundColor;
+	ctx.beginPath();
+	ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
+	ctx.fill();
+	ctx.closePath();
+
+	const image = new Image();
+
+	image.src = `data:image/svg+xml;base64,${window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 1920 1920" viewBox="0 0 1920 1920">
+	<path fill="${fg}" d="M745.4 162.4c34.4 4.8 59.8 17.9 76.2 39.4 16.4 21.5 28.2 54 35.2 97.7 21.4 3.5 40.1 7.6 56.2 12.3 16 4.7 29.9 11.2 41.6 19.4 11.7 8.2 21.1 18.4 28.2 30.6 7 12.2 12.3 27.6 15.7 46.1 1.2 7.3 1.9 13.9 2.1 20 .2 6.1 0 12-.9 17.9-1.8 12.9-5.6 24.5-11.4 34.9-5.8 10.4-13 19.9-21.6 28.6-8.6 8.7-18.3 16.6-29.2 23.8-10.9 7.2-22.2 14.1-34.1 20.7 1.4 17.2 2.8 33 4.1 47.4 1.3 14.4 1 27.8-.7 40.1-2.1 15-7.7 28.8-16.8 41.2-9.1 12.4-24.3 24.3-45.6 35.5-26 13.9-50.3 19.3-72.9 16.1-17.2-2.4-33.5-8.9-49-19.6-15.5-10.6-31.7-24.3-48.5-40.8-20.7 11.3-40 20-57.8 26-17.8 6-35.3 7.8-52.5 5.4-22.6-3.1-44.4-15-65.7-35.4-17.4-16.7-28.8-32.2-34.1-46.6-5.4-14.4-7-29.2-4.9-44.2 1.7-12.3 5.2-25.3 10.3-38.8 5.2-13.5 10.8-28.3 16.9-44.4-19.8-18.6-36.2-38.7-49.1-60.2-12.9-21.5-17.6-44.9-14-70.1.8-5.9 2.2-11.7 4.1-17.5 1.9-5.8 4.4-12 7.5-18.7 8.4-16.9 17.6-30.2 27.8-40.1 10.1-9.8 21.9-17.1 35.5-21.7 13.5-4.7 28.6-7.1 45.3-7.2 16.7-.1 35.8 1 57.4 3.5 18.7-40.1 38.9-68.2 60.6-84.3 21.7-16.1 49.8-21.8 84.1-17z"/>
+	<path fill="${fg}" d="M1166 1153.1c-24.3 9.3-53.4 14-87.5 14-18 0-35.4-1.9-52.1-5.8-16.7-3.9-31.4-9.7-44.1-17.6-12.7-7.9-22.8-17.8-30.4-29.9-7.6-12.1-11.3-26.3-11.3-42.7V573.2c13.2-11.6 31.9-22 56.2-31.3 24.3-9.3 53.4-14 87.5-14 18 0 35.3 1.9 52.1 5.8 16.7 3.9 31.4 9.7 44.1 17.6 12.7 7.9 22.8 17.8 30.4 29.9 7.5 12.1 11.3 26.3 11.3 42.7v497.9c-13.2 11.5-31.9 22-56.2 31.3zM1548.8 569.9c8.4-7.1 17.8-13.3 28.2-18.6 10.4-5.3 21.4-9.7 33-13.3 11.6-3.5 23.5-6.2 35.7-8 12.2-1.8 24.1-2.7 35.7-2.7 18 0 35.6 1.7 52.8 5.1 17.2 3.4 32.5 9.1 45.8 17.1 13.3 8 24 18.8 32.1 32.3 8 13.5 12.1 30.4 12.1 50.6V1089c0 14.5-3.6 26.7-10.8 36.6-7.2 10-16.9 17.9-28.9 23.9-12.1 5.9-25.9 10.2-41.5 12.8-15.6 2.6-31.7 3.9-48.4 3.9-10.3 0-20.6-.6-31.1-1.7-10.4-1.1-20.3-2.8-29.6-5.1-9.3-2.2-18-4.8-26-7.7-8-2.9-14.9-6.1-20.7-9.6-13.8-17.7-26.3-34.7-37.4-51.1-11.1-16.4-21.3-32.1-30.6-47.2-9.3-15.1-18-29.5-26-43.1-8-13.7-15.7-26.6-23.1-38.8-5.5.6-9.2 2.3-11.1 5.1-1.9 2.7-2.9 6-2.9 9.9 0 4.8 1.3 9.6 3.9 14.2 2.6 4.7 5.9 10.4 10.1 17.1l60.3 97.4v25.5c-4.8 3.2-10.9 6.9-18.3 11.1-7.4 4.2-16.5 8.1-27.2 11.8-10.8 3.7-23.2 6.8-37.4 9.4-14.1 2.6-30.4 3.9-48.7 3.9-20.9 0-40.2-2.1-57.8-6.3-17.7-4.2-32.9-10.4-45.8-18.6-12.9-8.2-22.8-18.4-29.9-30.6-7.1-12.2-10.6-26.3-10.6-42.4v-483c0-8 3.5-15.7 10.6-22.9 7.1-7.2 16.7-13.4 28.9-18.6 12.2-5.1 26.5-9.2 42.9-12.3 16.4-3.1 33.9-4.6 52.5-4.6 21.2 0 40.8 2.6 58.8 7.7s31.6 11.4 41 18.8c7.1 9 14.8 19.7 23.1 32.1 8.4 12.4 17.2 26 26.5 41 9.3 14.9 19 30.8 29.2 47.7 10.1 16.9 20.5 34.1 31.1 51.8 3.2 0 6.3-1 9.4-3.1 3.1-2.1 4.6-5.5 4.6-10.4 0-3.5-1.3-7.8-3.9-12.8-2.6-5-5.3-9.9-8.2-14.7l-52.1-89.7v-26.5zM390.5 1242.8c8.4-7.1 17.8-13.3 28.2-18.6 10.4-5.3 21.4-9.7 33-13.3 11.6-3.5 23.5-6.2 35.7-8 12.2-1.8 24.1-2.7 35.7-2.7 18 0 35.6 1.7 52.8 5.1 17.2 3.4 32.5 9.1 45.8 17.1 13.3 8 24 18.8 32.1 32.3 8 13.5 12.1 30.4 12.1 50.6v456.5c0 14.5-3.6 26.7-10.8 36.6-7.2 10-16.9 17.9-28.9 23.9-12.1 5.9-25.9 10.2-41.5 12.8-15.6 2.6-31.7 3.9-48.4 3.9-10.3 0-20.6-.6-31.1-1.7-10.4-1.1-20.3-2.8-29.6-5.1-9.3-2.2-18-4.8-26-7.7-8-2.9-14.9-6.1-20.7-9.6-13.8-17.7-26.3-34.7-37.4-51.1-11.1-16.4-21.3-32.1-30.6-47.2-9.3-15.1-18-29.5-26-43.1-8-13.7-15.7-26.6-23.1-38.8-5.5.6-9.2 2.3-11.1 5.1-1.9 2.7-2.9 6-2.9 9.9 0 4.8 1.3 9.6 3.9 14.2 2.6 4.7 5.9 10.4 10.1 17.1l60.3 97.4v25.5c-4.8 3.2-10.9 6.9-18.3 11.1-7.4 4.2-16.5 8.1-27.2 11.8-10.8 3.7-23.2 6.8-37.4 9.4-14.1 2.6-30.4 3.9-48.7 3.9-20.9 0-40.2-2.1-57.8-6.3-17.7-4.2-32.9-10.4-45.8-18.6-12.9-8.2-22.8-18.4-29.9-30.6-7.1-12.2-10.6-26.3-10.6-42.4v-483c0-8 3.5-15.7 10.6-22.9 7.1-7.2 16.7-13.4 28.9-18.6 12.2-5.1 26.5-9.2 42.9-12.3 16.4-3.1 33.9-4.6 52.5-4.6 21.2 0 40.8 2.6 58.8 7.7s31.6 11.4 41 18.8c7.1 9 14.8 19.7 23.1 32.1 8.4 12.4 17.2 26 26.5 41 9.3 14.9 19 30.8 29.2 47.7s20.5 34.1 31.1 51.8c3.2 0 6.3-1 9.4-3.1 3.1-2.1 4.6-5.5 4.6-10.4 0-3.5-1.3-7.8-3.9-12.8-2.6-5-5.3-9.9-8.2-14.7l-52.1-89.7v-26.4zM1196.4 1209.5c4.2 6.7 8 14.2 11.6 22.4 3.5 8.2 6.4 16.7 8.7 25.5 2.2 8.8 4 17.7 5.3 26.5 1.3 8.8 1.9 17.1 1.9 24.8 0 33.1-6.4 57.7-19.3 73.7-12.9 16.1-30.5 24.1-53 24.1H957.3c-11.9 0-17.8 4.7-17.8 14v3.9c0 2 .3 3.2 1 3.9h230.4c2.9 4.8 5.6 10.5 8.2 17.1 2.6 6.6 4.7 13.5 6.5 20.7 1.8 7.2 3.2 14.6 4.3 22.2 1.1 7.6 1.7 14.7 1.7 21.4 0 19.3-1.9 36.6-5.8 51.8-3.9 15.3-9 27.9-15.4 37.8h-104.6c-27.3 0-49.9.7-67.7 2.2-17.8 1.4-31.9 3.3-42.2 5.5-10.3 2.3-17.5 4.7-21.7 7.5-4.2 2.7-6.3 5.5-6.3 8.4 0 2.6.4 5 1.2 7.2.8 2.3 2.7 4.2 5.5 5.8 8-2.6 16.2-4.8 24.6-6.7 8.4-1.9 17.7-3.5 28-4.6 10.3-1.1 21.8-2 34.5-2.7 12.7-.6 27.4-1 44.1-1h135.4c3.5 5.1 7.1 10.8 10.6 17.1 3.5 6.3 6.7 13.5 9.4 21.7s5 17.6 6.7 28.2c1.8 10.6 2.7 22.8 2.7 36.6 0 8.7-.6 17.9-1.9 27.7-1.3 9.8-3.2 19.5-5.8 29.2-2.6 9.6-5.9 18.8-10.1 27.5-4.2 8.7-9.2 16.2-14.9 22.7h-361c-19 0-36.6-2.3-53-7s-30.7-11.9-42.9-21.7c-12.2-9.8-21.9-22.2-28.9-37.1-7.1-14.9-10.6-32.9-10.6-53.7v-458.4c0-15.4 17.8-26.7 53.5-33.7 35.7-7.1 90.1-10.6 163.4-10.6h278zM1548.8 1242.8c8.4-7.1 17.8-13.3 28.2-18.6 10.4-5.3 21.4-9.7 33-13.3 11.6-3.5 23.5-6.2 35.7-8 12.2-1.8 24.1-2.7 35.7-2.7 18 0 35.6 1.7 52.8 5.1 17.2 3.4 32.5 9.1 45.8 17.1 13.3 8 24 18.8 32.1 32.3 8 13.5 12.1 30.4 12.1 50.6v456.5c0 14.5-3.6 26.7-10.8 36.6-7.2 10-16.9 17.9-28.9 23.9-12.1 5.9-25.9 10.2-41.5 12.8-15.6 2.6-31.7 3.9-48.4 3.9-10.3 0-20.6-.6-31.1-1.7-10.4-1.1-20.3-2.8-29.6-5.1-9.3-2.2-18-4.8-26-7.7-8-2.9-14.9-6.1-20.7-9.6-13.8-17.7-26.3-34.7-37.4-51.1-11.1-16.4-21.3-32.1-30.6-47.2-9.3-15.1-18-29.5-26-43.1-8-13.7-15.7-26.6-23.1-38.8-5.5.6-9.2 2.3-11.1 5.1-1.9 2.7-2.9 6-2.9 9.9 0 4.8 1.3 9.6 3.9 14.2 2.6 4.7 5.9 10.4 10.1 17.1l60.3 97.4v25.5c-4.8 3.2-10.9 6.9-18.3 11.1-7.4 4.2-16.5 8.1-27.2 11.8-10.8 3.7-23.2 6.8-37.4 9.4-14.1 2.6-30.4 3.9-48.7 3.9-20.9 0-40.2-2.1-57.8-6.3-17.7-4.2-32.9-10.4-45.8-18.6-12.9-8.2-22.8-18.4-29.9-30.6-7.1-12.2-10.6-26.3-10.6-42.4v-483c0-8 3.5-15.7 10.6-22.9 7.1-7.2 16.7-13.4 28.9-18.6 12.2-5.1 26.5-9.2 42.9-12.3 16.4-3.1 33.9-4.6 52.5-4.6 21.2 0 40.8 2.6 58.8 7.7s31.6 11.4 41 18.8c7.1 9 14.8 19.7 23.1 32.1 8.4 12.4 17.2 26 26.5 41 9.3 14.9 19 30.8 29.2 47.7s20.5 34.1 31.1 51.8c3.2 0 6.3-1 9.4-3.1 3.1-2.1 4.6-5.5 4.6-10.4 0-3.5-1.3-7.8-3.9-12.8-2.6-5-5.3-9.9-8.2-14.7l-52.1-89.7v-26.4z"/>
+</svg>`)}`;
+	image.onload = () => {
+		ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
+	};
+};

src/lib/stickers.ts

@@ -1,4 +1,6 @@
 import { antifaStickerRenderer } from "@/data/stickers/antifa";
+import { frownieRenderer } from "@/data/stickers/frownie";
+import { innenRenderer } from "@/data/stickers/innen";
 import { xNeinDankeStickerRenderer } from "@/data/stickers/x-nein-danke";
 
 export type StickerParams = {
@@ -28,26 +30,26 @@ export const STICKER_SIZE = 1080;
 
 export const stickers = [
 	{
-		slug: "hasst-die-afd",
+		slug: "frownie",
 		shape: "circle",
-		name: "Ganz … hasst die AfD!",
+		name: "Frownie",
 		thumbnailSrc:
 			"https://media2.giphy.com/media/ZJaXOsbM012mRodFiQ/giphy.gif?cid=47028fa8sx12d824xrvy8zo8bq3w00f23hoj11gqqzus7q0f&ep=v1_gifs&rid=giphy.gif&ct=g",
 		parameters: {
-			text1: true,
+			text1: false,
 			text2: false,
 			backgroundColor: true,
 			foregroundColor: true,
 			url: false,
 		},
 		initialValues: {
-			backgroundColor: "#000",
-			foregroundColor: "#fff",
-			text1: "Augsburg",
+			backgroundColor: "#009ee0",
+			foregroundColor: "#C1152D",
+			text1: "",
 			text2: "",
 			url: "",
 		},
-		renderer: antifaStickerRenderer,
+		renderer: frownieRenderer,
 	},
 	{
 		slug: "antifa",
@@ -107,13 +109,13 @@ export const stickers = [
 			url: false,
 		},
 		initialValues: {
-			backgroundColor: "#000000",
-			foregroundColor: "#FFFFFF",
+			backgroundColor: "#9c1c2b",
+			foregroundColor: "#f8ffe7",
 			text1: "",
 			text2: "",
 			url: "",
 		},
-		renderer: () => {},
+		renderer: innenRenderer,
 	},
 ] satisfies Array<StickerInfo>;