add playback

app/src/stores/entities.store.ts

@@ -9,6 +9,7 @@ interface EntitiesStore {
   selectedEntity: number | undefined;
   selectEntity: (index: number) => void;
   deselectEntity: () => void;
+  setEntities: (entities: z.input<typeof AnimatedEntities>) => void;
   updateEntity: (
     index: number,
     entity: Partial<z.input<typeof AnimatedEntity>>
@@ -24,6 +25,7 @@ const useEntitiesStore = create<EntitiesStore>((set) => ({
   selectEntity: (index) => set(() => ({ selectedEntity: index })),
   deselectEntity: () => set(() => ({ selectedEntity: undefined })),
   selectedEntity: undefined,
+  setEntities: (entities) => set({ entities }),
   updateEntityById: (id, entity) =>
     set(({ entities }) => {
       const nextEntities = produce(entities, (draft) => {

app/src/stores/render-state.store.ts

@@ -4,6 +4,8 @@ import { create } from "zustand";
 
 interface RenderStateStore {
   renderState: z.infer<typeof RenderState>;
+  playing: boolean;
+  setPlaying: (playing: boolean) => void;
   setCurrentFrame: (target: number) => void;
 }
 
@@ -11,6 +13,8 @@ const useRenderStateStore = create<RenderStateStore>((set) => ({
   renderState: {
     curr_frame: 20,
   },
+  playing: false,
+  setPlaying: (playing) => set({ playing }),
   setCurrentFrame: (target) =>
     set((store) => {
       store.renderState = {

app/src/stores/timeline.store.ts

@@ -7,8 +7,8 @@ interface TimelineStore {
 }
 
 const useTimelineStore = create<TimelineStore>((set) => ({
-  fps: 60,
-  size: [1920, 1080],
+  fps: 120,
+  size: [1280, 720],
   duration: 10.0,
 }));