use api in front

opus_submitter/src/components/SubmissionForm.vue

@@ -22,7 +22,7 @@
          </div>
          
          <!-- File Upload -->
-         <FileUpload v-model="submissionFiles" />
+         <FileUpload v-model="submissionFiles" :puzzles="puzzles" />
         
         <!-- Notes -->
         <div class="form-control">
@@ -57,7 +57,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import FileUpload from './FileUpload.vue'
-import type { SteamCollectionItem, SubmissionFile, Submission, PuzzleResponse } from '@/types'
+import type { SteamCollectionItem, SubmissionFile } from '@/types'
 
 interface Props {
   puzzles: SteamCollectionItem[]
@@ -65,7 +65,7 @@ interface Props {
 }
 
 interface Emits {
-  submit: [submission: Submission]
+  submit: [submissionData: { files: SubmissionFile[], notes?: string }]
 }
 
 const props = defineProps<Props>()
@@ -108,31 +108,11 @@ const handleSubmit = async () => {
   isSubmitting.value = true
   
   try {
-    const responses: PuzzleResponse[] = []
-    
-    // Create responses for each detected puzzle
-    Object.entries(responsesByPuzzle.value).forEach(([puzzleName, data]) => {
-      if (data.puzzle) {
-        // Get OCR data from the first file with complete data
-        const fileWithOCR = data.files.find(f => f.ocrData?.cost || f.ocrData?.cycles || f.ocrData?.area)
-        
-        responses.push({
-          puzzle_id: data.puzzle.id,
-          puzzle_name: puzzleName,
-          cost: fileWithOCR?.ocrData?.cost,
-          cycles: fileWithOCR?.ocrData?.cycles,
-          area: fileWithOCR?.ocrData?.area,
-          files: data.files
-        })
-      }
-    })
-    
-    const submission: Submission = {
-      responses,
+    // Emit the files and notes for the parent to handle API submission
+    emit('submit', {
+      files: submissionFiles.value,
       notes: notes.value.trim() || undefined
-    }
-    
-    emit('submit', submission)
+    })
     
     // Reset form
     submissionFiles.value = []