working ocr in ts
This commit is contained in:
+256
-1
@@ -1,6 +1,261 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import PuzzleCard from './components/PuzzleCard.vue'
|
||||
import SubmissionForm from './components/SubmissionForm.vue'
|
||||
import type { SteamCollection, SteamCollectionItem, Submission, PuzzleResponse } from './types'
|
||||
|
||||
// Mock data - replace with actual API calls later
|
||||
const collections = ref<SteamCollection[]>([])
|
||||
const puzzles = ref<SteamCollectionItem[]>([])
|
||||
const submissions = ref<Submission[]>([])
|
||||
const isLoading = ref(true)
|
||||
const showSubmissionModal = ref(false)
|
||||
|
||||
// Mock data for development
|
||||
const mockCollections: SteamCollection[] = [
|
||||
{
|
||||
id: 1,
|
||||
steam_id: '3479142989',
|
||||
title: 'PolyLAN 41',
|
||||
description: 'Puzzle for PolyLAN 41 fil rouge',
|
||||
author_name: 'Flame Legrems',
|
||||
total_items: 10,
|
||||
unique_visitors: 31,
|
||||
current_favorites: 1,
|
||||
created_at: '2025-05-29T11:19:24Z',
|
||||
updated_at: '2025-05-30T22:15:09Z'
|
||||
}
|
||||
]
|
||||
|
||||
const mockPuzzles: SteamCollectionItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
steam_item_id: '3479143948',
|
||||
title: 'P41-FLOC',
|
||||
author_name: 'Flame Legrems',
|
||||
description: 'A challenging puzzle involving complex molecular arrangements',
|
||||
tags: ['puzzle', 'chemistry', 'advanced'],
|
||||
order_index: 0,
|
||||
collection: 1,
|
||||
created_at: '2025-05-29T11:19:24Z',
|
||||
updated_at: '2025-05-30T22:15:09Z'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
steam_item_id: '3479143084',
|
||||
title: 'P41-40',
|
||||
author_name: 'Flame Legrems',
|
||||
description: 'Test your optimization skills with this intricate design challenge',
|
||||
tags: ['optimization', 'design'],
|
||||
order_index: 1,
|
||||
collection: 1,
|
||||
created_at: '2025-05-29T11:19:24Z',
|
||||
updated_at: '2025-05-30T22:15:09Z'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
steam_item_id: '3479143304',
|
||||
title: 'P41-39',
|
||||
author_name: 'Flame Legrems',
|
||||
description: 'A puzzle focusing on efficient resource management',
|
||||
tags: ['efficiency', 'resources'],
|
||||
order_index: 2,
|
||||
collection: 1,
|
||||
created_at: '2025-05-29T11:19:24Z',
|
||||
updated_at: '2025-05-30T22:15:09Z'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
steam_item_id: '3479143433',
|
||||
title: 'P41-38',
|
||||
author_name: 'Flame Legrems',
|
||||
description: 'Master the art of precise timing in this temporal challenge',
|
||||
tags: ['timing', 'precision'],
|
||||
order_index: 3,
|
||||
collection: 1,
|
||||
created_at: '2025-05-29T11:19:24Z',
|
||||
updated_at: '2025-05-30T22:15:09Z'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
steam_item_id: '3479143537',
|
||||
title: 'P41-37',
|
||||
author_name: 'Flame Legrems',
|
||||
description: 'Explore innovative solutions in this creative puzzle',
|
||||
tags: ['creative', 'innovation'],
|
||||
order_index: 4,
|
||||
collection: 1,
|
||||
created_at: '2025-05-29T11:19:24Z',
|
||||
updated_at: '2025-05-30T22:15:09Z'
|
||||
}
|
||||
]
|
||||
|
||||
// Computed property to get responses grouped by puzzle
|
||||
const responsesByPuzzle = computed(() => {
|
||||
const grouped: Record<number, PuzzleResponse[]> = {}
|
||||
submissions.value.forEach(submission => {
|
||||
submission.responses.forEach(response => {
|
||||
if (!grouped[response.puzzle_id]) {
|
||||
grouped[response.puzzle_id] = []
|
||||
}
|
||||
grouped[response.puzzle_id].push(response)
|
||||
})
|
||||
})
|
||||
return grouped
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
// Simulate API loading
|
||||
await new Promise(resolve => setTimeout(resolve, 500))
|
||||
|
||||
collections.value = mockCollections
|
||||
puzzles.value = mockPuzzles
|
||||
isLoading.value = false
|
||||
})
|
||||
|
||||
const handleSubmission = (submission: Submission) => {
|
||||
console.log('Submission received:', submission)
|
||||
|
||||
// Add submission to the list
|
||||
submissions.value.push({
|
||||
...submission,
|
||||
id: Date.now(), // Simple ID generation for demo
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString()
|
||||
})
|
||||
|
||||
// Show success message
|
||||
const puzzleNames = submission.responses.map(r => r.puzzle_name).join(', ')
|
||||
alert(`Solutions submitted for puzzles: ${puzzleNames}`)
|
||||
|
||||
// Close modal
|
||||
showSubmissionModal.value = false
|
||||
}
|
||||
|
||||
const openSubmissionModal = () => {
|
||||
showSubmissionModal.value = true
|
||||
}
|
||||
|
||||
const closeSubmissionModal = () => {
|
||||
showSubmissionModal.value = false
|
||||
}
|
||||
|
||||
// Function to match puzzle name from OCR to actual puzzle
|
||||
const findPuzzleByName = (ocrPuzzleName: string): SteamCollectionItem | null => {
|
||||
if (!ocrPuzzleName) return null
|
||||
|
||||
// Try exact match first
|
||||
let match = puzzles.value.find(p =>
|
||||
p.title.toLowerCase() === ocrPuzzleName.toLowerCase()
|
||||
)
|
||||
|
||||
if (!match) {
|
||||
// Try partial match
|
||||
match = puzzles.value.find(p =>
|
||||
p.title.toLowerCase().includes(ocrPuzzleName.toLowerCase()) ||
|
||||
ocrPuzzleName.toLowerCase().includes(p.title.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
return match || null
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
HELLO
|
||||
<div class="min-h-screen bg-base-200">
|
||||
<!-- Header -->
|
||||
<div class="navbar bg-base-100 shadow-lg">
|
||||
<div class="container mx-auto">
|
||||
<div class="flex-1">
|
||||
<h1 class="text-xl font-bold">Opus Magnum Puzzle Submitter</h1>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button
|
||||
@click="openSubmissionModal"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<i class="mdi mdi-plus mr-2"></i>
|
||||
Submit Solution
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="flex justify-center items-center min-h-[400px]">
|
||||
<div class="text-center">
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
<p class="mt-4 text-base-content/70">Loading puzzles...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div v-else class="space-y-8">
|
||||
<!-- Collection Info -->
|
||||
<div v-if="collections.length > 0" class="mb-8">
|
||||
<div class="card bg-base-100 shadow-lg">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl">{{ collections[0].title }}</h2>
|
||||
<p class="text-base-content/70">{{ collections[0].description }}</p>
|
||||
<div class="flex flex-wrap gap-4 mt-4">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Total Puzzles</div>
|
||||
<div class="stat-value text-primary">{{ collections[0].total_items }}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Author</div>
|
||||
<div class="stat-value text-sm">{{ collections[0].author_name }}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Visitors</div>
|
||||
<div class="stat-value text-sm">{{ collections[0].unique_visitors }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Puzzles Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<PuzzleCard
|
||||
v-for="puzzle in puzzles"
|
||||
:key="puzzle.id"
|
||||
:puzzle="puzzle"
|
||||
:responses="responsesByPuzzle[puzzle.id] || []"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="puzzles.length === 0" class="text-center py-12">
|
||||
<div class="text-6xl mb-4">🧩</div>
|
||||
<h3 class="text-xl font-bold mb-2">No Puzzles Available</h3>
|
||||
<p class="text-base-content/70">Check back later for new puzzle collections!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submission Modal -->
|
||||
<div v-if="showSubmissionModal" class="modal modal-open">
|
||||
<div class="modal-box max-w-4xl">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-lg">Submit Solution</h3>
|
||||
<button
|
||||
@click="closeSubmissionModal"
|
||||
class="btn btn-sm btn-circle btn-ghost"
|
||||
>
|
||||
<i class="mdi mdi-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SubmissionForm
|
||||
:puzzles="puzzles"
|
||||
:find-puzzle-by-name="findPuzzleByName"
|
||||
@submit="handleSubmission"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-backdrop" @click="closeSubmissionModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user