73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import { useCutsceneStore, useSelectedCutscene } from '../../store/cutsceneStore';
|
|
import type { Cutscene } from '../../types/cutscene';
|
|
import styles from './RightPanel.module.css';
|
|
|
|
type CutscenePatch = Partial<Omit<Cutscene, 'imageSegments' | 'lines'>>;
|
|
|
|
function NumField({ label, value, onChange, min }: {
|
|
label: string; value: number; onChange: (v: number) => void; min?: number;
|
|
}) {
|
|
return (
|
|
<div className={styles.field}>
|
|
<label>{label}</label>
|
|
<input
|
|
type="number"
|
|
value={value}
|
|
min={min}
|
|
onChange={e => onChange(Number(e.target.value))}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CutsceneProperties() {
|
|
const cutscene = useSelectedCutscene();
|
|
const updateCutscene = useCutsceneStore(s => s.updateCutscene);
|
|
|
|
if (!cutscene) return <div className={styles.empty}>No cutscene selected</div>;
|
|
|
|
function upd(patch: CutscenePatch) {
|
|
updateCutscene(cutscene!.id, patch);
|
|
}
|
|
|
|
return (
|
|
<div className={styles.section}>
|
|
<div className={styles.sectionTitle}>Cutscene</div>
|
|
|
|
<div className={styles.field}>
|
|
<label>ID</label>
|
|
<input
|
|
type="text"
|
|
value={cutscene.id}
|
|
onChange={e => upd({ id: e.target.value })}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.field}>
|
|
<label>Skippable</label>
|
|
<input
|
|
type="checkbox"
|
|
checked={cutscene.skippable}
|
|
onChange={e => upd({ skippable: e.target.checked })}
|
|
/>
|
|
</div>
|
|
|
|
<NumField label="Duration (ms)" value={cutscene.durationMs} onChange={v => upd({ durationMs: v })} min={0} />
|
|
<NumField label="Fade out (ms)" value={cutscene.fadeOutMs} onChange={v => upd({ fadeOutMs: v })} min={0} />
|
|
<NumField label="Fade in (ms)" value={cutscene.fadeInMs} onChange={v => upd({ fadeInMs: v })} min={0} />
|
|
<NumField label="End fade out (ms)" value={cutscene.endFadeOutMs} onChange={v => upd({ endFadeOutMs: v })} min={0} />
|
|
<NumField label="End fade in (ms)" value={cutscene.endFadeInMs} onChange={v => upd({ endFadeInMs: v })} min={0} />
|
|
|
|
<div className={styles.field}>
|
|
<label>onFadeIn callback</label>
|
|
<input
|
|
type="text"
|
|
value={cutscene.onFadeInCallback}
|
|
onChange={e => upd({ onFadeInCallback: e.target.value })}
|
|
placeholder="lua function name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|