Challenge system

Nova Cards challenge programming

Program official challenge prompts, track featured runs, and connect winner cards.

Back to cards

Existing challenges

{challenges.map((challenge) => ( ))}

Challenge editor

setForm((current) => ({ ...current, title: event.target.value }))} placeholder="Title" className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white" /> setForm((current) => ({ ...current, slug: event.target.value }))} placeholder="Slug" className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white" />

setForm((current) => ({ ...current, description: event.target.value }))} placeholder="Description" rows={3} className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white md:col-span-2" />
            <textarea value={form.prompt} onChange={(event) => setForm((current) => ({ ...current, prompt: event.target.value }))} placeholder="Prompt" rows={4} className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white md:col-span-2" />
            <label className="text-sm text-slate-300">
              <span className="mb-2 block">Status</span>
              <select value={form.status} onChange={(event) => setForm((current) => ({ ...current, status: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white">
                {['draft', 'active', 'completed', 'archived'].map((status) => <option key={status} value={status}>{status}</option>)}
              </select>
            </label>
            <label className="text-sm text-slate-300">
              <span className="mb-2 block">Winner card</span>
              <select value={form.winner_card_id} onChange={(event) => setForm((current) => ({ ...current, winner_card_id: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white">
                <option value="">No winner</option>
                {cards.map((card) => <option key={card.id} value={card.id}>{card.title}</option>)}
              </select>
            </label>
            <label className="text-sm text-slate-300">
              <span className="mb-2 block">Starts at</span>
              <input type="datetime-local" value={form.starts_at} onChange={(event) => setForm((current) => ({ ...current, starts_at: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white" />
            </label>
            <label className="text-sm text-slate-300">
              <span className="mb-2 block">Ends at</span>
              <input type="datetime-local" value={form.ends_at} onChange={(event) => setForm((current) => ({ ...current, ends_at: event.target.value }))} className="w-full rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 text-white" />
            </label>
            <textarea value={JSON.stringify(form.rules_json || {}, null, 2)} onChange={(event) => {
              try {
                setForm((current) => ({ ...current, rules_json: JSON.parse(event.target.value || '{}') }))
              } catch {
                // ignore invalid json until fixed
              }
            }} rows={10} className="rounded-2xl border border-white/10 bg-[#0d1726] px-4 py-3 font-mono text-sm text-white md:col-span-2" />
          </div>
          <div className="mt-5 flex items-center justify-between gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-200">
            <label className="flex items-center gap-2"><input type="checkbox" checked={Boolean(form.official)} onChange={(event) => setForm((current) => ({ ...current, official: event.target.checked }))} className="h-4 w-4" /> Official</label>
            <label className="flex items-center gap-2"><input type="checkbox" checked={Boolean(form.featured)} onChange={(event) => setForm((current) => ({ ...current, featured: event.target.checked }))} className="h-4 w-4" /> Featured</label>
          </div>
          <button type="button" onClick={saveChallenge} className="mt-5 w-full rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">{selectedId ? 'Update challenge' : 'Create challenge'}</button>
        </section>
      </div>
    </div>
  )
}