Sword Clash Composer

Required key.

Add this in your Lovable project under Settings → Secrets before pasting the prompt below.

Paste into a fresh Lovable project. Make sure the key above is set first. read the build strategy →

Build "Sword Clash Composer" as a ONE-SHOT Lovable build. The participant has only
5 credits — this single message must produce a working demo with no follow-ups.
Single-page TanStack Start app. Cut scope ruthlessly.

CONCEPT
Sword Clash Composer composes combat foley generation in the browser, then writes the finished HTML and assets straight into a live Sprite so the user opens a real URL.
Discipline: Game Design & Interactive Media (combat foley generation).
Recipe: Filesystem Drop (instant asset push) as the single Sprites primitive.
Why Sprites: Filesystem Drop suits combat foley generation in Game Design & Interactive Media because the output is a file the user needs to see live — push generated HTML or assets straight into a running sandbox and share a URL that renders it immediately.

SPRITES PRIMER (assume the reader has never used Sprites)
- What they are: fly.io micro-sandboxes (tiny disposable Linux VMs) managed via
  a REST API at `https://api.sprites.dev/v1`. Each sprite gets a public URL at
  `https://{name}.sprites.run` when created with `url_settings.auth: "public"`.
- Sign-up: create a free account at https://sprites.dev, then copy the 4-part
  token (`org-slug/org-id/token-id/token-value`) from https://sprites.dev/account.
- Full API docs: https://docs.sprites.dev/ (only needed if you go beyond the
  snippet below).
- Sprite name rules: lowercase letters, digits, and hyphens only. Max ~63 chars.
- Auth: every request sends `Authorization: Bearer <SPRITES_TOKEN>`. Server-side
  only — the token is a bearer secret, never ship it to the browser.
- Four primitives exist (create / fs.write / services / exec). This build uses
  exactly one, wired end-to-end in the snippet below.

LOVABLE BUDGET (HARD CAP: ONE-SHOT, ~5 CREDITS TOTAL):
The participant has FIVE Lovable credits for the whole build. This prompt MUST
ship a working demo on the FIRST message with zero follow-ups. Engineer for that.
- ONE TanStack Start app, ONE route (`src/routes/index.tsx`). No extra pages, no auth, no nav.
- ONE TanStack server function in `src/lib/sprites.functions.ts` that proxies the Sprites call.
- ONE client surface (a textarea + launch button, or console box, or compose form) wired to it.
- NO database, NO Lovable Cloud, NO auth, NO file uploads to Lovable, NO extra integrations.
- NO tests, NO docs pages, NO settings screens, NO theming toggles.
- Libraries: template defaults + `zod`. Nothing else.
- Keep the diff small enough to land in one build pass. If a feature is not on
  screen in the user flow below, do not build it. Cut scope before adding scope.

STACK
- TanStack Start app, the index route only.
- fly.io Sprites (api.sprites.dev/v1) is the only backend. All calls live inside a
  `createServerFn` handler so `SPRITES_TOKEN` stays on the server.
- Client surface fits the primitive: a form/prompt that returns the sprite URL or stdout.
- Tailwind + shadcn. Editorial look: gold accent on a dark or warm-cream
  background, generous type, one strong headline, one primary action.
- Footer renders: "Built during the Sprites Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

SERVER FUNCTION (src/lib/sprites.functions.ts) — create a Sprite and drop an index.html:
```ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

const API = "https://api.sprites.dev/v1";
const auth = () => ({ Authorization: `Bearer ${process.env.SPRITES_TOKEN!}` });

/** Built during the Sprites Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const publish = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ html: z.string().min(10).max(200_000), slug: z.string().min(1).max(48) }).parse(d))
  .handler(async ({ data }) => {
    const name = `combat-foley-generation-${data.slug.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 40)}-${Math.random().toString(36).slice(2, 6)}`;

    // 1. Create the sprite (409 already-exists is fine).
    const c = await fetch(`${API}/sprites`, {
      method: "POST",
      headers: { ...auth(), "Content-Type": "application/json" },
      body: JSON.stringify({ name, url_settings: { auth: "public" } }),
    });
    if (!c.ok && c.status !== 409) throw new Error(`Sprite create failed: ${c.status}`);

    // 2. Write the composed HTML straight into /root/www — parents auto-created.
    const w = await fetch(`${API}/sprites/${name}/fs/write?path=/root/www/index.html&workingDir=/`, {
      method: "PUT",
      headers: { ...auth(), "Content-Type": "application/octet-stream" },
      body: data.html,
    });
    if (!w.ok) throw new Error(`Sprite fs write failed: ${w.status}`);

    // 3. Start a python http.server on port 8080 (wake-on-request).
    await fetch(`${API}/sprites/${name}/services/webapp`, { method: "DELETE", headers: auth() });
    await fetch(`${API}/sprites/${name}/services/webapp`, {
      method: "PUT",
      headers: { ...auth(), "Content-Type": "application/json" },
      body: JSON.stringify({ cmd: "python3", args: ["-m", "http.server", "8080"], dir: "/root/www", needs: [], http_port: 8080 }),
    });
    await fetch(`${API}/sprites/${name}/services/webapp/start`, {
      method: "POST",
      headers: { ...auth(), Accept: "application/x-ndjson" },
    });

    return { name, url: `https://${name}.sprites.run` };
  });
```

CLIENT: compose surface for combat foley generation (textarea, form, or generator). On submit, POST the finished
HTML to the server fn, then render the returned URL as a live `<iframe>` and a copyable share link.

Serve from `/root/www` — `/home/sprite` may not exist and the service fails to start with
`cd: No such file or directory`. `http_port` is REQUIRED for wake-on-request; without it the
sprite reports Running but every request 502s.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the sandbox does for combat foley generation.
2. The primary action (a compose surface that pushes freshly-authored HTML, JSON, or media into the live sandbox) is one tap away; the rest of the layout supports it.
3. Sprites runs the primitive server-side, the URL or stdout lands on screen, the user
   can share, retry, or copy.

GOTCHAS (universal — apply to every Sprites call in this build)
- Token MUST be the 4-part `org-slug/org-id/token-id/token-value` from
  sprites.dev/account. A raw Fly.io org token returns 401 authentication failed.
- Create is POST-only: `POST /sprites`. `PUT /sprites/{name}` returns 404.
- Services are PUT-addressed at `/sprites/{name}/services/{service}`. `POST`ing
  the services collection returns 405.
- `http_port` is REQUIRED in the service PUT body. Omit it and the sprite shows
  "Running" but every request 502s.
- Serve files from `/root/www`. `/home/sprite` may not exist — services fail to
  start with `cd: No such file or directory`.
- `/exec`: send `Authorization` ONLY. Adding `Accept: application/octet-stream`
  returns 406. The response body ends with `0x03 <exitCode>` — strip those two
  bytes before decoding stdout.
- Cold boot: after `services/{name}/start`, warm-poll the public URL (up to
  ~12x @ 1s, 4s fetch timeout) before returning it, or the user's first click
  hits a 502.
- Never call `api.sprites.dev` from the browser. Every fetch lives inside a
  `createServerFn` handler so `SPRITES_TOKEN` stays server-side.

KEY — only ONE secret is required:
1. `SPRITES_TOKEN`. Grab the 4-part token (org-slug/org-id/token-id/token-value)
   from https://sprites.dev/account and paste it into Project Settings ->
   Secrets. Read it only on the server via `process.env.SPRITES_TOKEN`. Never
   prefix with `VITE_`, never expose to the client. This single token unlocks
   create, filesystem, services, and exec on api.sprites.dev.

CREDIT (must appear in UI footer AND as JSDoc on the server function):
Built during the Sprites Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14

Market sizing.

Indicative figures for hackathon pitches — refine with your own research before raising.