feat: Implement AI-powered 2D game builder with new landing page, credit system, and authentication.

Author: Teja-Budumuru

apps/web/public/file.svg

@@ -2,6 +2,8 @@ import { NextRequest, NextResponse } from "next/server";
 import { auth } from "@/auth";
 import { prisma } from "@packages/model/db/client";
 import { Controller } from "@packages/controller/index";
+import { consumeCredit } from "@/lib/credits";
+import crypto from "crypto";
 
 export async function POST(req: NextRequest) {
   try {
@@ -18,14 +20,23 @@ export async function POST(req: NextRequest) {
       prompt?: string;
     };
 
+    const isGuest = session.user.email === "[email protected]";
+    const actualUserId = isGuest ? null : userId;
+    let deviceId = req.cookies.get("guest_device_id")?.value;
+    let newDeviceId = false;
+
+    if (isGuest && !deviceId) {
+      deviceId = crypto.randomUUID();
+      newDeviceId = true;
+    }
+
     // New game flow — create session and start
     if (!sessionId && prompt) {
-      // Guest mode: delete previous sessions to enforce single-slot
-      // if (session.user.email === "[email protected]") {
-      //   await prisma.session.deleteMany({
-      //     where: { userId },
-      //   });
-      // }
+      const creditStatus = await consumeCredit(actualUserId, deviceId);
+      
+      if (!creditStatus.allowed) {
+        return NextResponse.json({ error: "Insufficient credits. Please try again tomorrow." }, { status: 403 });
+      }
 
       const newSession = await prisma.session.create({
         data: {
@@ -38,11 +49,17 @@ export async function POST(req: NextRequest) {
       const controller = new Controller(newSession.id);
       const result = await controller.start();
 
-      return NextResponse.json({
+      const response = NextResponse.json({
         type: result.type,
         data: result.data,
         sessionId: newSession.id,
       });
+
+      if (newDeviceId && deviceId) {
+        response.cookies.set("guest_device_id", deviceId, { maxAge: 60 * 60 * 24 * 365, httpOnly: true });
+      }
+
+      return response;
     }
 
     // Existing game flow — continue session

apps/web/public/globe.svg

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@/auth";
+import { getCreditsInfo } from "@/lib/credits";
+
+export async function GET(req: NextRequest) {
+  try {
+    const session = await auth();
+    let userId = session?.user?.id;
+
+    // If guestuser@gmail.com, we treat them as guest
+    if (session?.user?.email === "[email protected]") {
+      userId = undefined;
+    }
+
+    const deviceId = req.cookies.get("guest_device_id")?.value;
+
+    const info = await getCreditsInfo(userId, deviceId);
+
+    if (!info) {
+      return NextResponse.json({ credits: 0, maxCredits: 0, error: "Unable to find credit info" }, { status: 400 });
+    }
+
+    return NextResponse.json(info);
+  } catch (error) {
+    console.error("[/api/credits] Error:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}

apps/web/public/next.svg

@@ -2,7 +2,8 @@
 
 import { useState } from "react";
 import { GameBuilderProvider, useGameBuilder } from "@/context/GameBuilderContext";
-import { MessageSquare, Code2, Play, PanelRightClose, PanelRightOpen } from "lucide-react";
+import { CreditsProvider, useCredits } from "@/context/CreditsContext";
+import { MessageSquare, Code2, Play, PanelRightClose, PanelRightOpen, Coins } from "lucide-react";
 import SessionHistory from "@/components/SessionHistory";
 import ChatInterface from "@/components/ChatInterface";
 import CodeViewer from "@/components/CodeViewer";
@@ -21,6 +22,8 @@ function BuilderLayout() {
   const { data: session } = useSession();
   const [activeTab, setActiveTab] = useState<MobileTab>("chat");
   const [showHistoryPanel, setShowHistoryPanel] = useState(false);
+  const [showCredits, setShowCredits] = useState(false);
+  const { credits, maxCredits, isGuest, isLoading } = useCredits();
 
   const tabs: { id: MobileTab; label: string; icon: typeof MessageSquare }[] = [
     { id: "chat", label: "Chat", icon: MessageSquare },
@@ -66,8 +69,19 @@ function BuilderLayout() {
         </div>
 
         {/* Bottom User Actions */}
-        <div className="flex flex-col gap-4 items-center shrink-0 w-full mt-auto">
-          <div className="w-10 h-10 rounded-full bg-slate-100 border-2 border-white shadow-sm flex items-center justify-center cursor-pointer hover:bg-slate-200 transition-colors overflow-hidden">
+        <div className="flex flex-col gap-4 items-center shrink-0 w-full mt-auto relative">
+          {showCredits && (
+            <div className="absolute bottom-full left-14 mb-2 p-3 bg-white shadow-xl border border-slate-200 rounded-xl w-48 z-50 animate-fade-in text-center flex flex-col items-center">
+              <Coins className="w-6 h-6 text-amber-500 mb-1" />
+              <h4 className="font-bold text-slate-800 text-sm">{isGuest ? "Guest Credits" : "Daily Credits"}</h4>
+              <p className="text-2xl font-black text-indigo-600 my-1">{isLoading ? "..." : credits} <span className="text-sm text-slate-400 font-medium">/ {maxCredits}</span></p>
+              <p className="text-[10px] text-slate-500 font-medium uppercase tracking-wider">Refreshes at midnight</p>
+            </div>
+          )}
+
+          <div 
+            onClick={() => setShowCredits(!showCredits)}
+            className="w-10 h-10 rounded-full bg-slate-100 border-2 border-white shadow-sm flex items-center justify-center cursor-pointer hover:bg-slate-200 transition-colors overflow-hidden">
             {session?.user?.image ? (
               <img src={session.user.image} alt="User" className="w-full h-full object-cover" />
             ) : (
@@ -149,8 +163,10 @@ function BuilderLayout() {
 
 export default function BuilderPage() {
   return (
-    <GameBuilderProvider>
-      <BuilderLayout />
-    </GameBuilderProvider>
+    <CreditsProvider>
+      <GameBuilderProvider>
+        <BuilderLayout />
+      </GameBuilderProvider>
+    </CreditsProvider>
   );
 }

apps/web/public/vercel.svg

@@ -115,9 +115,14 @@ function LoginContent() {
           </div>
 
           {/* Footer note */}
-          <p className="text-xs text-muted-foreground/70 text-center mt-7">
-            Guest mode saves only your latest game. Sign in to keep history.
-          </p>
+          <div className="text-xs text-muted-foreground/80 text-center mt-7 space-y-2 border-t border-border/40 pt-5">
+            <p>
+              🎁 <span className="font-semibold text-slate-700">Daily Free Credits:</span> Guests get 2 credits, Registered users get 5!
+            </p>
+            <p className="opacity-80">
+              Guest mode saves only your latest game. Sign in to keep history.
+            </p>
+          </div>
         </div>
       </div>
     </div>

apps/web/public/window.svg

@@ -164,6 +164,11 @@ export default function LandingPage() {
             </Link>
           </motion.div>
 
+          {/* Daily Credits Marketing Text */}
+          <motion.div variants={fadeInUp} className="mt-8 text-sm font-medium text-slate-500 max-w-lg mx-auto pointer-events-none">
+            Refreshed Daily: <span className="text-indigo-500 font-bold">5 free credits</span> for logged-in users, or <span className="text-slate-600 font-semibold">2 credits</span> as a guest! Every game generation consumes 1 credit.
+          </motion.div>
+
           {/* Social Proof Placeholder */}
           <motion.div
             variants={fadeInUp}
@@ -414,6 +419,7 @@ export default function LandingPage() {
             </Link>
           </div>
           <p className="mt-8 text-sm text-slate-400 font-medium">No credit card required. Free tier includes Gemini 3.1 Pro access.</p>
+          <p className="mt-3 text-sm text-slate-400 font-medium">Guests receive 2 free credits daily, logged in users receive 5.</p>
         </motion.div>
       </section>