(null)
+ const [selected, setSelected] = useState(0)
+ const [filter, setFilter] = useState('')
+ const [copied, setCopied] = useState(false)
+ const [importing, setImporting] = useState(false)
+
+ useEffect(() => {
+ let cancelled = false
+ loadSchema()
+ .then(({ schema, fromCache }) => {
+ if (cancelled) return
+ setLoad({ status: 'ready', indices: buildIndices(schema), stale: fromCache })
+ setDoc(emptyDoc(schema.sourceHash))
+ })
+ .catch((error: unknown) => {
+ if (cancelled) return
+ setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
+ })
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ const update = useCallback((path: Path, value: Value | undefined) => {
+ setDoc((current) => (current ? setAtPath(current, path, value) : current))
+ }, [])
+
+ const indices = load.status === 'ready' ? load.indices : null
+
+ const output = useMemo(
+ () => (doc && indices ? emit(doc, indices) : ''),
+ [doc, indices],
+ )
+ const issues = useMemo(
+ () => (doc && indices ? validate(doc, indices) : []),
+ [doc, indices],
+ )
+
+ if (load.status === 'loading') return Loading schema…
+
+ if (load.status === 'error') {
+ return (
+
+ Could not load the schema
+ {load.message}
+
+ This tool is driven by schema.json, published alongside the documentation.
+ If you are running locally, generate it first with{' '}
+ .scripts/generate-docs.ps1.
+
+
+ )
+ }
+
+ if (!doc || !indices) return null
+
+ const entry = doc.entries[selected]
+ const errors = issues.filter((i) => i.severity === 'error')
+ const warnings = issues.filter((i) => i.severity === 'warning')
+
+ const copy = async () => {
+ try {
+ await navigator.clipboard.writeText(output)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 1500)
+ } catch {
+ setCopied(false)
+ }
+ }
+
+ return (
+
+
+
+ {load.stale && (
+
+ Showing a cached schema — the live one could not be fetched, so this may be out of date.
+
+ )}
+
+
+
+
Entries
+ {
+ setDoc({ ...doc, entries: [...doc.entries, newNode({ Ability: '' })] })
+ setSelected(doc.entries.length)
+ }}
+ >
+ + Add
+
+
+
+ {doc.entries.map((item, index) => {
+ const ability = typeof item['Ability'] === 'string' ? item['Ability'] : ''
+ const entryIssues = issues.filter((i) => i.path[0] === index)
+ const hasError = entryIssues.some((i) => i.severity === 'error')
+ return (
+
+ setSelected(index)}
+ >
+ {ability || unnamed }
+ {entryIssues.length > 0 && (
+
+ {entryIssues.length}
+
+ )}
+
+ {doc.entries.length > 1 && (
+ {
+ setDoc({ ...doc, entries: doc.entries.filter((_, i) => i !== index) })
+ setSelected((s) => Math.max(0, Math.min(s, doc.entries.length - 2)))
+ }}
+ >
+ ×
+
+ )}
+
+ )
+ })}
+
+
+
+
+ {importing && (
+ setImporting(false)}
+ onLoad={(loaded) => {
+ setDoc(loaded)
+ setSelected(0)
+ }}
+ />
+ )}
+ {entry ? (
+ No entry selected.
+ )}
+
+
+
+
+
XComAbilityEditor.ini
+
+ {copied ? 'Copied' : 'Copy'}
+
+
+ {output}
+
+ {
+ const index = path[0]
+ if (typeof index === 'number') setSelected(index)
+ }} />
+
+
No problems found.
+ }
+
+ return (
+
+ {[...errors, ...warnings].map((issue, index) => (
+ onSelect(issue.path)}
+ >
+ {issue.title}
+ {issue.detail}
+
+ ))}
+
+ )
+}
diff --git a/app/src/components/Field.tsx b/app/src/components/Field.tsx
new file mode 100644
index 0000000..fcc2b04
--- /dev/null
+++ b/app/src/components/Field.tsx
@@ -0,0 +1,178 @@
+import type { Indices, SchemaEnum } from '../schema'
+import type { Value } from '../state'
+
+export interface EditorField {
+ config: string
+ type: string
+ description: string
+ gameField?: string | null
+ guard?: string
+ modeField?: string
+ modeEnum?: string
+ replaceOnly?: boolean
+}
+
+interface Props {
+ field: EditorField
+ value: Value | undefined
+ indices: Indices
+ onChange: (value: Value | undefined) => void
+}
+
+function enumFor(indices: Indices, type: string): SchemaEnum | undefined {
+ return indices.enumByName.get(type)
+}
+
+function defaultFor(field: EditorField, indices: Indices): Value {
+ const enumDef = enumFor(indices, field.type)
+ if (enumDef) return enumDef.values[0]?.name ?? ''
+ switch (field.type) {
+ case 'bool':
+ return true
+ case 'int':
+ case 'float':
+ return 0
+ default:
+ return field.type.startsWith('array<') ? [] : ''
+ }
+}
+
+export function Field({ field, value, indices, onChange }: Props) {
+ const enabled = value !== undefined
+ const enumDef = enumFor(indices, field.type)
+ const isArray = field.type.startsWith('array<')
+
+ return (
+
+
+ {field.config}
+
+
+
+ {enabled && (
+
+
+
+ {field.type}
+ {field.gameField && → {field.gameField} }
+
+
+
+ {field.description || (
+
+ {field.gameField ? `Sets ${field.gameField}.` : 'No description yet.'}
+
+ )}
+
+
onChange(next)} />
+ }
+
+ if (enumDef) {
+ return (
+ onChange(event.target.value)}>
+ {enumDef.values.map((option, index) => (
+
+ {option.name}
+ {index === 0 ? ' (default)' : ''}
+
+ ))}
+
+ )
+ }
+
+ if (field.type === 'bool') {
+ return (
+ onChange(event.target.value === 'true')}
+ >
+ true
+ false
+
+ )
+ }
+
+ if (field.type === 'int' || field.type === 'float') {
+ return (
+
+ {items.map((item, index) => (
+
+ onChange(items.filter((_, i) => i !== index))}
+ >
+ ×
+
+
+ ))}
+ onChange([...items, ''])}>
+ + add
+
+
+ )
+}
diff --git a/app/src/components/ImportPanel.tsx b/app/src/components/ImportPanel.tsx
new file mode 100644
index 0000000..4f32d1f
--- /dev/null
+++ b/app/src/components/ImportPanel.tsx
@@ -0,0 +1,107 @@
+import { useState } from 'react'
+
+import { parseConfig, type ParseProblem } from '../parse'
+import type { Indices } from '../schema'
+import type { Doc } from '../state'
+
+/**
+ * Paste an existing config to load it into the editor and have it checked.
+ */
+
+interface Props {
+ indices: Indices
+ onLoad: (doc: Doc) => void
+ onClose: () => void
+}
+
+export function ImportPanel({ indices, onLoad, onClose }: Props) {
+ const [text, setText] = useState('')
+ const [problems, setProblems] = useState(null)
+ const [count, setCount] = useState(0)
+ const [pending, setPending] = useState(null)
+
+ const check = () => {
+ const result = parseConfig(text, indices)
+ setProblems(result.problems)
+ setCount(result.entryCount)
+ setPending(result.doc)
+ }
+
+ const errors = problems?.filter((p) => p.severity === 'error') ?? []
+ const warnings = problems?.filter((p) => p.severity === 'warning') ?? []
+
+ return (
+
+
+
Check an existing config
+
+ Close
+
+
+
+
+ Paste `+AbilityEdits` entries below. Anything the mod would silently ignore is listed
+ here, and loading replaces what is currently in the editor.
+
+
+