Scribble Fighters
Draw your champion. Bring it to life. Fight!
or
setJoinCode(e.target.value.toUpperCase())}
onKeyDown={(e) => e.key === "Enter" && handleJoin()}
maxLength={6}
className="flex-1 text-center text-2xl tracking-[0.2em] uppercase transition-shadow focus:shadow-[2px_2px_0_#1a1a1a]"
/>
How to Play
1. Create or join a room with a friend
2. Draw your creature—the AI brings it to life with unique abilities
[truncated — 670 more characters] ``` ### src/app/api/analyzeSummon/route.ts ```typescript import { NextRequest, NextResponse } from "next/server"; import { analyzeDrawing } from "@/lib/ai"; /** * API endpoint to analyze a summoned fighter drawing */ export async function POST(request: NextRequest) { try { const { imageData, inkSpent } = await request.json(); if (!imageData) { return NextResponse.json({ error: "Missing imageData" }, { status: 400 }); } // Analyze the drawing using AI // Use provided inkSpent or default to 80 for summoned fighters const config = await analyzeDrawing(imageData, inkSpent ?? 80); return NextResponse.json({ config }); } catch (error) { console.error("Error analyzing summon:", error); return NextResponse.json( { error: "Failed to analyze drawing" }, { status: 500 } ); } } ``` ### src/app/api/analyze/route.ts ```typescript import { NextRequest, NextResponse } from "next/server"; import { analyzeDrawing, fallbackFighterConfig } from "@/lib/ai"; export async function POST(request: NextRequest) { try { const body = await request.json(); const { imageData, inkSpent } = body; if (!imageData || typeof imageData !== "string") { return NextResponse.json( { error: "Missing or invalid imageData" }, { status: 400 } ); } if (!process.env.OPENAI_API_KEY) { console.warn( "[analyze] No OPENAI_API_KEY - using fallback. Set OPENAI_API_KEY in production!" ); return NextResponse.json(fallbackFighterConfig()); } const config = await analyzeDrawing(imageData, inkSpent || 100); return NextResponse.json(config); } catch (error) { console.error("[analyze] AI analysis failed:", error); return NextResponse.json(fallbackFighterConfig()); } } ``` ### src/app/api/commentary/route.ts ```typescript import { NextRequest, NextResponse } from "next/server"; import OpenAI from "openai"; const openai = process.env.OPENAI_API_KEY ? new OpenAI({ apiKey: process.env.OPENAI_API_KEY }) : null; export async function POST(request: NextRequest) { if (!openai) { return NextResponse.json({ line: null }, { status: 200 }); } try { const body = await request.json().catch(() => ({})); const { eventType, attackerName, targetName, action, amount } = body as { eventType: string; attackerName?: string; targetName?: string; action?: string; amount?: number; }; const context = eventType === "attack" ? `"${attackerName}" (attacker) just hit "${targetName}" (target) with ${action}` : eventType === "damage" ? attackerName ? `"${attackerName}" (attacker) just hit "${targetName}" (target) - ranged/projectile` : `"${targetName}" (target) just took a hit` : eventType === "death" ? `"${targetName}" was just knocked out` : eventType === "battleStart" ? "battle is starting" : ""; const completion = await openai.chat.completions.create({ model: "gpt-4o-mini", max_tokens: 40, messages: [ { role: "system", content: `You're a CHAOTIC Gen-Z battle commentator for a silly drawing battle game. Characters have creative names (e.g. "Ferocious Feline", "Ink Demon", "Scribble Dragon"). Rules: - ONE short line only (max 14 words). NO quotes around your response. - NEVER mention damage numbers (no "20 damage", "15 hp", etc.). Describe WHAT happened in a creative way. - Use the CHARACTER NAMES—they're fun! Make the commentary fit the character. If "Ferocious Feline" attacks, say something about scratching/pouncing/claws. If "Ink Blob" hits, maybe splat/ooze/smear. Get creative! - Be unhinged, funny, dramatic. Use slang, hyperbole. Gen-Z energy. - Examples: "OUCH! Ferocious Feline just landed a huge scratch!", "That Ink Demon really went splat on them", "RIP Scribble Dragon, you will be missed", "Bro the pounce was INSANE". Make it flavorful and character-relevant.`, }, { role: "user", content: `Comment on this: ${context}`, }, ], }); const line = completion.choices[0]?.message?.content?.trim(); if (!line) return NextResponse.json({ line: null }, { status: 200 }); return NextResponse.json({ line }); } catch (err) { console.warn("Commentary API error:", err); return NextResponse.json({ line: null }, { status: 200 }); } } ``` [35 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]