first commit

src/stores/counter.js

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

src/stores/photoboothStore.js

@@ -0,0 +1,54 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { useLocalStorage } from '@vueuse/core'
+import { DEFAULT_STRIP_THEME_ID, STRIP_THEME_MAP } from '../data/stripThemes'
+
+export const usePhotoboothStore = defineStore('photobooth', () => {
+  // photos: array of objects { src: string, transform: { x,y,scale,rotate, outputWidth, outputHeight } | null }
+  const photos = ref([])
+  const currentStep = ref(0)
+  const savedTheme = useLocalStorage('photobooth:theme', DEFAULT_STRIP_THEME_ID)
+  if (!STRIP_THEME_MAP[savedTheme.value]) {
+    savedTheme.value = DEFAULT_STRIP_THEME_ID
+  }
+  const stripTheme = ref(savedTheme.value)
+  const sessionActive = ref(false)
+
+  function addPhoto(base64) {
+    if (photos.value.length >= 3) return
+    // store original `src`, optional `preview` for flattened edited image, and `transform` metadata
+    photos.value.push({ src: base64, preview: null, transform: null })
+  }
+
+  function resetSession() {
+    photos.value = []
+    currentStep.value = 0
+    sessionActive.value = false
+  }
+
+  function setTheme(theme) {
+    if (!STRIP_THEME_MAP[theme]) return
+    stripTheme.value = theme
+    savedTheme.value = theme
+  }
+
+  function setStep(step) {
+    currentStep.value = step
+  }
+
+  function setSessionActive(active) {
+    sessionActive.value = active
+  }
+
+  return {
+    photos,
+    currentStep,
+    stripTheme,
+    sessionActive,
+    addPhoto,
+    resetSession,
+    setTheme,
+    setStep,
+    setSessionActive,
+  }
+})