77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import { CutsceneStartNode, EndNode } from '../../../types/dialogue';
|
|
import { useDialogueStore } from '../../../store/dialogueStore';
|
|
import styles from '../RightPanel.module.css';
|
|
|
|
interface CutsceneProps {
|
|
node: CutsceneStartNode;
|
|
dialogueId: string;
|
|
}
|
|
|
|
export function CutsceneStartInspector({ node, dialogueId }: CutsceneProps) {
|
|
const { updateNode, deleteNode, file } = useDialogueStore();
|
|
const dialogue = file?.dialogues.find(d => d.id === dialogueId);
|
|
const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
|
|
|
|
return (
|
|
<div className={styles.inspector}>
|
|
<div className={styles.inspectorHeader}>
|
|
<span className={styles.nodeTypeBadge} style={{ background: '#4a4a5a' }}>CutsceneStart</span>
|
|
<span className={styles.nodeIdLabel}>{node.id}</span>
|
|
<button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
|
|
</div>
|
|
<div>
|
|
<label className={styles.label}>Node ID</label>
|
|
<input className={styles.input} value={node.id} readOnly />
|
|
</div>
|
|
<div style={{ marginTop: 8 }}>
|
|
<label className={styles.label}>Cutscene ID</label>
|
|
<input
|
|
className={styles.input}
|
|
value={node.cutsceneId}
|
|
placeholder="cutscene_id"
|
|
onChange={e => updateNode(dialogueId, node.id, { cutsceneId: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div style={{ marginTop: 8 }}>
|
|
<label className={styles.label}>Next node</label>
|
|
<input
|
|
className={styles.input}
|
|
value={node.next}
|
|
placeholder="node_id"
|
|
onChange={e => updateNode(dialogueId, node.id, { next: e.target.value })}
|
|
list={`nodelist-cs-${node.id}`}
|
|
/>
|
|
<datalist id={`nodelist-cs-${node.id}`}>
|
|
{nodeIds.map(id => <option key={id} value={id} />)}
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface EndProps {
|
|
node: EndNode;
|
|
dialogueId: string;
|
|
}
|
|
|
|
export function EndInspector({ node, dialogueId }: EndProps) {
|
|
const { deleteNode } = useDialogueStore();
|
|
|
|
return (
|
|
<div className={styles.inspector}>
|
|
<div className={styles.inspectorHeader}>
|
|
<span className={styles.nodeTypeBadge} style={{ background: '#f38ba8', color: '#1e1e2e' }}>End</span>
|
|
<span className={styles.nodeIdLabel}>{node.id}</span>
|
|
<button className={styles.deleteNodeBtn} onClick={() => deleteNode(dialogueId, node.id)} title="Delete node">🗑</button>
|
|
</div>
|
|
<div>
|
|
<label className={styles.label}>Node ID</label>
|
|
<input className={styles.input} value={node.id} readOnly />
|
|
</div>
|
|
<div className={styles.emptyHint} style={{ marginTop: 12 }}>
|
|
This is a terminal node. Dialogue ends here.
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|