111 lines
4.1 KiB
TypeScript
111 lines
4.1 KiB
TypeScript
import { ChoiceNode, ChoiceOption } from '../../../types/dialogue';
|
||
import { useDialogueStore } from '../../../store/dialogueStore';
|
||
import { SpeakerField } from '../shared/SpeakerField';
|
||
import { useValidation } from '../../../hooks/useValidation';
|
||
import styles from '../RightPanel.module.css';
|
||
|
||
interface Props {
|
||
node: ChoiceNode;
|
||
dialogueId: string;
|
||
}
|
||
|
||
export function ChoiceInspector({ node, dialogueId }: Props) {
|
||
const { updateNode, deleteNode, file } = useDialogueStore();
|
||
const { issuesByNodeId } = useValidation();
|
||
const issues = issuesByNodeId[node.id] ?? [];
|
||
|
||
const dialogue = file?.dialogues.find(d => d.id === dialogueId);
|
||
const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
|
||
|
||
function updateChoice(idx: number, patch: Partial<ChoiceOption>) {
|
||
const choices = node.choices.map((c, i) => i === idx ? { ...c, ...patch } : c);
|
||
updateNode(dialogueId, node.id, { choices });
|
||
}
|
||
|
||
function addChoice() {
|
||
const newId = `choice_${Date.now()}`;
|
||
const choices: ChoiceOption[] = [...node.choices, { id: newId, kind: 'Optional', text: '', next: '' }];
|
||
updateNode(dialogueId, node.id, { choices });
|
||
}
|
||
|
||
function removeChoice(idx: number) {
|
||
const choices = node.choices.filter((_, i) => i !== idx);
|
||
updateNode(dialogueId, node.id, { choices });
|
||
}
|
||
|
||
return (
|
||
<div className={styles.inspector}>
|
||
<div className={styles.inspectorHeader}>
|
||
<span className={styles.nodeTypeBadge} style={{ background: '#df8e1d' }}>Choice</span>
|
||
<span className={styles.nodeIdLabel}>{node.id}</span>
|
||
<button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
|
||
</div>
|
||
|
||
{issues.length > 0 && (
|
||
<div className={styles.issueList}>
|
||
{issues.map((issue, i) => (
|
||
<div key={i} className={issue.severity === 'error' ? styles.issueError : styles.issueWarning}>
|
||
{issue.severity === 'error' ? '⚠' : '!'} {issue.message}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<label className={styles.label}>Node ID</label>
|
||
<input className={styles.input} value={node.id} readOnly />
|
||
</div>
|
||
|
||
<SpeakerField
|
||
speaker={node.speaker}
|
||
portrait={node.portrait}
|
||
onSpeakerChange={(s, p) => updateNode(dialogueId, node.id, { speaker: s, portrait: p })}
|
||
/>
|
||
|
||
<div style={{ marginTop: 12 }}>
|
||
<div className={styles.sectionHeader}>
|
||
<span className={styles.label}>Choices</span>
|
||
<button className={styles.addBtn} onClick={addChoice}>+ Add</button>
|
||
</div>
|
||
|
||
{node.choices.map((choice, idx) => (
|
||
<div key={choice.id} className={styles.choiceEditorRow}>
|
||
<div className={styles.choiceEditorHeader}>
|
||
<select
|
||
className={styles.selectSmall}
|
||
value={choice.kind}
|
||
onChange={e => updateChoice(idx, { kind: e.target.value as 'Main' | 'Optional' })}
|
||
>
|
||
<option value="Main">Main</option>
|
||
<option value="Optional">Optional</option>
|
||
</select>
|
||
<span className={styles.choiceIdLabel}>#{idx + 1}</span>
|
||
<button className={styles.removeBtn} onClick={() => removeChoice(idx)}>×</button>
|
||
</div>
|
||
<input
|
||
className={styles.input}
|
||
value={choice.text}
|
||
placeholder="Choice text..."
|
||
onChange={e => updateChoice(idx, { text: e.target.value })}
|
||
/>
|
||
<input
|
||
className={styles.input}
|
||
value={choice.next}
|
||
placeholder="Next node ID..."
|
||
onChange={e => updateChoice(idx, { next: e.target.value })}
|
||
list={`nodelist-choice-${choice.id}`}
|
||
/>
|
||
<datalist id={`nodelist-choice-${choice.id}`}>
|
||
{nodeIds.map(id => <option key={id} value={id} />)}
|
||
</datalist>
|
||
</div>
|
||
))}
|
||
|
||
{node.choices.length === 0 && (
|
||
<div className={styles.emptyHint}>No choices yet. Click "+ Add".</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|