Build MVP: launcher, constructor, and AI game generation

A self-hosted, Roblox-flavored game platform: browse/play published
browser games, build them by hand or by describing them to an LLM.
Fully independent from top-tickets — separate repo, DB, port (8082).

- Auth: email+password accounts (argon2, httpOnly session cookies),
  no admin/agent split — every account can create and play.
- Three game templates (quiz, clicker, maze), each a zod schema paired
  with a Phaser 4 Scene that renders purely from a validated instance
  of that schema — manual and AI-generated games hit the same
  renderer, so a saved game is always guaranteed to load and run. The
  maze schema BFS-validates that the exit is reachable from the start.
- Manual constructor: per-template builder forms, draft/publish/edit/
  delete, a launcher grid of published games, a full-bleed play page.
- AI generation: Anthropic API key configured under Settings → AI
  (encrypted at rest, validated with a live call before saving, same
  shape as top-tickets' mailbox/LDAP settings). Generation uses the
  SDK's zodOutputFormat/messages.parse to force schema-shaped JSON
  output, with one retry feeding back the validation error. Output
  always prefills the manual builder for review — never auto-published
  blind. Clean, distinct error message when no key is configured yet
  (no silent fallback exists here, so it doesn't pretend one does).
- Docker Compose on port 8082 (bakes in the busy_timeout=30000 SQLite
  pragma from day one — top-tickets hit this build-time race twice).

Deferred: more templates/genres, drag-and-drop level editor, likes/
leaderboards, AI-generated sprite assets, multiplayer, moderation.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH

src/components/ai-generate-form.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { Sparkles } from "lucide-react";
+import { TEMPLATE_TYPES, TEMPLATE_LABELS, type TemplateType, type GameDefinition } from "@/lib/games/types";
+import type { QuizDefinition } from "@/lib/games/quiz";
+import type { ClickerDefinition } from "@/lib/games/clicker";
+import type { MazeDefinition } from "@/lib/games/maze";
+import { QuizBuilder } from "@/components/builders/quiz-builder";
+import { ClickerBuilder } from "@/components/builders/clicker-builder";
+import { MazeBuilder } from "@/components/builders/maze-builder";
+
+export function AiGenerateForm() {
+  const [templateType, setTemplateType] = useState<TemplateType>("quiz");
+  const [title, setTitle] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [definition, setDefinition] = useState<GameDefinition | null>(null);
+
+  async function handleGenerate(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setDefinition(null);
+
+    const res = await fetch("/api/ai/generate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ templateType, prompt }),
+    });
+
+    setLoading(false);
+    if (!res.ok) {
+      const data = await res.json().catch(() => null);
+      setError(data?.error ?? "Не удалось сгенерировать игру");
+      return;
+    }
+
+    const data = await res.json();
+    setDefinition(data.definition);
+  }
+
+  if (definition) {
+    return (
+      <div className="flex flex-col gap-4">
+        <p className="rounded-md bg-accent-soft px-3 py-2 text-sm text-accent-soft-text">
+          Игра сгенерирована — проверьте и подправьте перед сохранением.
+        </p>
+        {templateType === "quiz" && (
+          <QuizBuilder mode="create" initialTitle={title} initialDefinition={definition as QuizDefinition} />
+        )}
+        {templateType === "clicker" && (
+          <ClickerBuilder mode="create" initialTitle={title} initialDefinition={definition as ClickerDefinition} />
+        )}
+        {templateType === "maze" && (
+          <MazeBuilder mode="create" initialTitle={title} initialDefinition={definition as MazeDefinition} />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleGenerate} className="card flex flex-col gap-4 p-5">
+      <div className="text-sm">
+        <span className="mb-1 block font-medium text-text-muted">Тип игры</span>
+        <div className="flex gap-2">
+          {TEMPLATE_TYPES.map((t) => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setTemplateType(t)}
+              className={`btn ${templateType === t ? "btn-primary" : "btn-ghost"}`}
+            >
+              {TEMPLATE_LABELS[t]}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <label className="text-sm">
+        <span className="mb-1 block font-medium text-text-muted">Название игры</span>
+        <input
+          required
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+        />
+      </label>
+
+      <label className="text-sm">
+        <span className="mb-1 block font-medium text-text-muted">Опишите игру</span>
+        <textarea
+          required
+          rows={5}
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Например: викторина на 5 вопросов про космос для детей"
+          className="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm outline-none focus:border-accent"
+        />
+      </label>
+
+      {error && <p className="rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text">{error}</p>}
+
+      <button type="submit" disabled={loading || !title || !prompt} className="btn btn-primary self-start">
+        <Sparkles size={15} />
+        {loading ? "Генерируем…" : "Сгенерировать"}
+      </button>
+    </form>
+  );
+}