working on cutscenes

cutsceneEditor/src/components/RightPanel/CutsceneProperties.tsx

@@ -0,0 +1,72 @@
+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>
+  );
+}