interactive-story/frontend/src/pages/NewCampaign.jsx

/* Starting a campaign, in one screen.
 *
 * `BROWSER-UX-SPEC.md` §41-42 and §7 of the M8 brief. What it replaced was a
 * scenario gallery followed by a placeholder modal: to begin a story you first
 * picked a *world*, and to make a world you opened an editor with a JSON stat
 * schema, a story-card table and an art picker. That is a fine way to build a
 * D&D module and a poor way to start a mystery.
 *
 * Two rules shaped this form.
 *
 * **Only the name is required.** Everything else has a sensible blank. A reader
 * who types "Westhaven" and presses Start gets a working campaign and can write
 * the first line themselves; the rest of the fields are there for someone who
 * already knows what they want. §7 is explicit that the data model must not be
 * a gate on beginning.
 *
 * **No genre is privileged.** There is no fantasy vocabulary in the labels, the
 * placeholders or the composed instructions — the same form has to fit a
 * western and a horror story. Genre and tone are free text with suggestions
 * rather than a closed list, because a closed list is a judgement about which
 * stories this product is for.
 *
 * The style answers are composed into the campaign's narrator instructions
 * (`ai_instructions`), which is the field the prompt builder already reads. No
 * new backend concept was invented to hold "tone" — it is a sentence in the
 * instructions, which is what it would have to become anyway.
 */

import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { api } from '../api'
import { useToast } from '../components'
import { classifyError } from '../errors'
import { blocksPlay, useModelStatus } from '../modelStatus'
import { ModelSetupNotice } from '../ModelSetupNotice'

const GENRES = [
  'Fantasy', 'Science fiction', 'Mystery', 'Historical',
  'Western', 'Horror', 'Thriller', 'Literary',
]
const TONES = [
  'Grounded and restrained', 'Warm and hopeful', 'Bleak', 'Wry',
  'Tense', 'Whimsical', 'Epic',
]
const POV = [
  { value: 'second-present', label: 'Second person, present tense ("You walk…")' },
  { value: 'first-past', label: 'First person, past tense ("I walked…")' },
  { value: 'third-past', label: 'Third person, past tense ("She walked…")' },
  { value: 'third-present', label: 'Third person, present tense ("She walks…")' },
]
const LENGTHS = [
  { value: 'brief', label: 'Brief — a paragraph or two' },
  { value: 'medium', label: 'Medium — two to four paragraphs' },
  { value: 'long', label: 'Long — four or more paragraphs' },
]

const POV_SENTENCE = {
  'second-present': 'Write in second person, present tense.',
  'first-past': 'Write in first person, past tense.',
  'third-past': 'Write in third person, past tense.',
  'third-present': 'Write in third person, present tense.',
}
const LENGTH_SENTENCE = {
  brief: 'Keep responses brief — one or two paragraphs.',
  medium: 'Keep responses to roughly two to four paragraphs.',
  long: 'Write at length — four or more paragraphs.',
}

/**
 * Turns the style answers into narrator instructions.
 *
 * Exported because the composition is the one piece of real logic on this
 * screen and a component test can check it without rendering anything.
 */
export function composeInstructions({ genre, tone, pov, length, style }) {
  const lines = []
  if (genre.trim()) lines.push(`This is a ${genre.trim().toLowerCase()} story.`)
  if (tone.trim()) lines.push(`The tone is ${tone.trim().toLowerCase()}.`)
  if (POV_SENTENCE[pov]) lines.push(POV_SENTENCE[pov])
  if (LENGTH_SENTENCE[length]) lines.push(LENGTH_SENTENCE[length])
  // Always last, so a reader's own words can override anything above them.
  if (style.trim()) lines.push(style.trim())
  return lines.join(' ')
}

/** A text field with a datalist of suggestions — open, not a closed set. */
function SuggestField({ id, label, value, onChange, options, placeholder, hint }) {
  return (
    <div className="field">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        type="text"
        value={value}
        list={`${id}-options`}
        placeholder={placeholder}
        autoComplete="off"
        onChange={(e) => onChange(e.target.value)}
      />
      <datalist id={`${id}-options`}>
        {options.map((o) => <option key={o} value={o} />)}
      </datalist>
      {hint && <p className="field-hint">{hint}</p>}
    </div>
  )
}

export default function NewCampaign() {
  const navigate = useNavigate()
  const toast = useToast()
  const { status } = useModelStatus()

  const [title, setTitle] = useState('')
  const [genre, setGenre] = useState('')
  const [tone, setTone] = useState('')
  const [pov, setPov] = useState('second-present')
  const [length, setLength] = useState('medium')
  const [style, setStyle] = useState('')
  const [protagonist, setProtagonist] = useState('')
  const [pronouns, setPronouns] = useState('')
  const [protagonistDesc, setProtagonistDesc] = useState('')
  const [opening, setOpening] = useState('')
  const [canon, setCanon] = useState('')
  const [creating, setCreating] = useState(false)

  const start = async (event) => {
    event.preventDefault()
    if (!title.trim() || creating) return
    setCreating(true)
    try {
      const campaign = await api.createAdventure({
        title: title.trim(),
        opening: opening.trim(),
        // One rule per line is the lightest editor that produces a list, and it
        // is what a person writing rules actually does.
        canon_rules: canon.split('\n').map((r) => r.trim()).filter(Boolean),
        persona_name: protagonist.trim(),
        persona_pronouns: pronouns.trim(),
        persona_desc: protagonistDesc.trim(),
        // M11 (post-M8 finding C): sent as data as well as prose. The sentence
        // below still goes into the instructions where the reader can edit it;
        // this is what the prompt builder turns into an actual word range.
        narration_length: length,
      })
      const instructions = composeInstructions({ genre, tone, pov, length, style })
      if (instructions) {
        await api.updateAdventure(campaign.id, { ai_instructions: instructions })
      }
      navigate(`/play/${campaign.id}`)
    } catch (err) {
      toast(classifyError(err.message).detail, 'error')
      setCreating(false)
    }
  }

  return (
    <div className="page setup">
      <h1>New campaign</h1>
      <p className="setup-lede">
        Only a name is needed. Everything else can be changed later, or left to
        the story to decide.
      </p>

      {blocksPlay(status) && <ModelSetupNotice />}

      <form onSubmit={start}>
        <section className="setup-section">
          <h2>Name</h2>
          <div className="field">
            <label htmlFor="campaign-title">What is this story called?</label>
            <input
              id="campaign-title"
              type="text"
              required
              autoFocus
              maxLength={120}
              value={title}
              placeholder="The Westhaven Enquiry"
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
        </section>

        <section className="setup-section">
          <h2>Story profile</h2>
          <div className="field-row">
            <SuggestField
              id="campaign-genre" label="Genre" value={genre} onChange={setGenre}
              options={GENRES} placeholder="Mystery"
            />
            <SuggestField
              id="campaign-tone" label="Tone" value={tone} onChange={setTone}
              options={TONES} placeholder="Grounded and restrained"
            />
          </div>
          <div className="field-row">
            <div className="field">
              <label htmlFor="campaign-pov">Voice</label>
              <select id="campaign-pov" value={pov} onChange={(e) => setPov(e.target.value)}>
                {POV.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
              </select>
            </div>
            <div className="field">
              <label htmlFor="campaign-length">Narration length</label>
              <select
                id="campaign-length" value={length}
                onChange={(e) => setLength(e.target.value)}
              >
                {LENGTHS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
              </select>
            </div>
          </div>
          <div className="field">
            <label htmlFor="campaign-style">Anything else the narrator should know</label>
            <textarea
              id="campaign-style" rows={2} maxLength={2000} value={style}
              placeholder="Never resolve a scene with violence without warning me first."
              onChange={(e) => setStyle(e.target.value)}
            />
          </div>
        </section>

        <section className="setup-section">
          <h2>Protagonist</h2>
          <div className="field-row">
            <div className="field">
              <label htmlFor="campaign-protagonist">Name</label>
              <input
                id="campaign-protagonist" type="text" maxLength={80} value={protagonist}
                placeholder="Aldric" autoComplete="off"
                onChange={(e) => setProtagonist(e.target.value)}
              />
            </div>
            <div className="field">
              <label htmlFor="campaign-pronouns">Pronouns</label>
              <input
                id="campaign-pronouns" type="text" maxLength={40} value={pronouns}
                placeholder="they/them" autoComplete="off"
                onChange={(e) => setPronouns(e.target.value)}
              />
            </div>
          </div>
          <div className="field">
            <label htmlFor="campaign-protagonist-desc">Who are they?</label>
            <textarea
              id="campaign-protagonist-desc" rows={2} maxLength={2000} value={protagonistDesc}
              placeholder="A traveling investigator, patient and hard to lie to."
              onChange={(e) => setProtagonistDesc(e.target.value)}
            />
          </div>
        </section>

        <section className="setup-section">
          <h2>Opening scene</h2>
          <div className="field">
            <label htmlFor="campaign-opening">Where does the story begin?</label>
            <textarea
              id="campaign-opening" rows={4} maxLength={8000} value={opening}
              placeholder={
                'You sit at a shared table in the Crooked Lantern Tavern. In your '
                + 'pocket is a small silver key you took from a missing scholar’s desk.'
              }
              onChange={(e) => setOpening(e.target.value)}
            />
            <p className="field-hint">
              Left blank, the story opens on an empty page and begins with
              whatever you write first.
            </p>
          </div>
        </section>

        <section className="setup-section">
          <h2>Canon</h2>
          <div className="field">
            <label htmlFor="campaign-canon">
              What is true in this story, and must stay true?
            </label>
            <textarea
              id="campaign-canon" rows={4} maxLength={8000} value={canon}
              placeholder={'One rule per line.\nResurrection is impossible.\nNobody in this town owns a car.'}
              onChange={(e) => setCanon(e.target.value)}
            />
            <p className="field-hint">
              One per line. These carry more authority than anything the story
              later invents — the narrator is told them, and a turn that
              contradicts one is refused. You can change them at any time.
            </p>
          </div>
        </section>

        <div className="setup-actions">
          <button type="submit" className="primary" disabled={!title.trim() || creating}>
            {creating ? 'Starting…' : 'Start campaign'}
          </button>
          <button type="button" onClick={() => navigate('/')} disabled={creating}>
            Cancel
          </button>
        </div>
      </form>
    </div>
  )
}