add app

app/src/stores/entities.store.ts

@@ -0,0 +1,35 @@
+import { EXAMPLE_ANIMATED_ENTITIES } from "example";
+import { produce } from "immer";
+import { AnimatedEntities, AnimatedEntity } from "primitives/AnimatedEntities";
+import { z } from "zod";
+import { create } from "zustand";
+
+interface EntitiesStore {
+  entities: z.input<typeof AnimatedEntities>;
+  selectedEntity: number | undefined;
+  selectEntity: (index: number) => void;
+  deselectEntity: () => void;
+  updateEntity: (
+    index: number,
+    entity: Partial<z.input<typeof AnimatedEntity>>
+  ) => void;
+}
+
+const useEntitiesStore = create<EntitiesStore>((set) => ({
+  entities: EXAMPLE_ANIMATED_ENTITIES,
+  selectEntity: (index) => set(() => ({ selectedEntity: index })),
+  deselectEntity: () => set(() => ({ selectedEntity: undefined })),
+  selectedEntity: undefined,
+  updateEntity: (index, entity) =>
+    set(({ entities }) => {
+      const nextEntities = produce(entities, (draft) => {
+        draft[index] = { ...draft[index], ...entity } as z.infer<
+          typeof AnimatedEntity
+        >;
+      });
+
+      return { entities: nextEntities };
+    }),
+}));
+
+export { useEntitiesStore };

app/src/stores/fonts.store.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface FontsStore {
+  fonts: Array<string>;
+  setFonts: (fonts: Array<string>) => void;
+}
+
+const useFontsStore = create<FontsStore>((set) => ({
+  fonts: [],
+  setFonts: (fonts) => ({ fonts }),
+}));
+
+export { useFontsStore };

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

@@ -0,0 +1,24 @@
+import { RenderState } from "primitives/Timeline";
+import { z } from "zod";
+import { create } from "zustand";
+
+interface RenderStateStore {
+  renderState: z.infer<typeof RenderState>;
+  setCurrentFrame: (target: number) => void;
+}
+
+const useRenderStateStore = create<RenderStateStore>((set) => ({
+  renderState: {
+    curr_frame: 20,
+  },
+  setCurrentFrame: (target) =>
+    set((store) => {
+      store.renderState = {
+        curr_frame: target,
+      };
+
+      return { renderState: store.renderState };
+    }),
+}));
+
+export { useRenderStateStore };

app/src/stores/timeline.store.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface TimelineStore {
+  fps: number;
+  duration: number;
+  size: [number, number];
+}
+
+const useTimelineStore = create<TimelineStore>((set) => ({
+  fps: 60,
+  size: [1920, 1080],
+  duration: 10.0,
+}));
+
+export { useTimelineStore };