141 lines
5.1 KiB
Vue
141 lines
5.1 KiB
Vue
<template>
|
|
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300">
|
|
<div class="card-body">
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<h3 class="card-title text-lg font-bold">{{ puzzle.title }}</h3>
|
|
<p class="text-sm text-base-content/70 mb-2">by {{ puzzle.author_name }}</p>
|
|
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<div class="badge badge-primary badge-sm">{{ puzzle.steam_item_id }}</div>
|
|
<div class="badge badge-ghost badge-sm">Order: {{ puzzle.order_index + 1 }}</div>
|
|
</div>
|
|
|
|
<p v-if="puzzle.description" class="text-sm text-base-content/80 mb-4 line-clamp-2">
|
|
{{ puzzle.description }}
|
|
</p>
|
|
|
|
<div v-if="puzzle.tags && puzzle.tags.length > 0" class="flex flex-wrap gap-1 mb-4">
|
|
<span
|
|
v-for="tag in puzzle.tags.slice(0, 3)"
|
|
:key="tag"
|
|
class="badge badge-outline badge-xs"
|
|
>
|
|
{{ tag }}
|
|
</span>
|
|
<span v-if="puzzle.tags.length > 3" class="badge badge-outline badge-xs">
|
|
+{{ puzzle.tags.length - 3 }} more
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-end gap-2">
|
|
<div class="tooltip" data-tip="View on Steam Workshop">
|
|
<a
|
|
:href="`https://steamcommunity.com/workshop/filedetails/?id=${puzzle.steam_item_id}`"
|
|
target="_blank"
|
|
class="btn btn-ghost btn-sm btn-square"
|
|
>
|
|
<i class="mdi mdi-steam text-lg"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Responses Table -->
|
|
<div v-if="responses && responses.length > 0" class="mt-6">
|
|
<div class="divider">
|
|
<span class="text-sm font-medium">Solutions ({{ responses.length }})</span>
|
|
</div>
|
|
|
|
<div>
|
|
<table class="table table-xs">
|
|
<thead>
|
|
<tr>
|
|
<th>Cost</th>
|
|
<th>Cycles</th>
|
|
<th>Area</th>
|
|
<th>Files</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="response in responses" :key="response.id" class="hover">
|
|
<td>
|
|
<span v-if="response.final_cost || response.cost" class="badge badge-success badge-xs">
|
|
{{ response.final_cost || response.cost }}
|
|
</span>
|
|
<span v-else class="text-base-content/50">-</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="response.final_cycles || response.cycles" class="badge badge-info badge-xs">
|
|
{{ response.final_cycles || response.cycles }}
|
|
</span>
|
|
<span v-else class="text-base-content/50">-</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="response.final_area || response.area" class="badge badge-warning badge-xs">
|
|
{{ response.final_area || response.area }}
|
|
</span>
|
|
<span v-else class="text-base-content/50">-</span>
|
|
</td>
|
|
<td>
|
|
<div class="flex items-center gap-1">
|
|
<span class="badge badge-ghost badge-xs">{{ response.files?.length || 0 }}</span>
|
|
<div v-if="response.files?.length" class="tooltip" :data-tip="response.files.map(f => f.original_filename || f.file?.name).join(', ')">
|
|
<i class="mdi mdi-information-outline text-xs"></i>
|
|
</div>
|
|
<div v-if="response.needs_manual_validation" class="tooltip" data-tip="Needs manual validation">
|
|
<i class="mdi mdi-alert-circle text-xs text-warning"></i>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- No responses state -->
|
|
<div v-else class="mt-6 text-center py-4 border-2 border-dashed border-base-300 rounded-lg">
|
|
<i class="mdi mdi-upload text-2xl text-base-content/40"></i>
|
|
<p class="text-sm text-base-content/60 mt-2">No solutions yet</p>
|
|
<p class="text-xs text-base-content/40">Upload solutions using the submit button</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { SteamCollectionItem, PuzzleResponse } from '@/types'
|
|
|
|
interface Props {
|
|
puzzle: SteamCollectionItem
|
|
responses?: PuzzleResponse[]
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
const formatFileSize = (bytes: number): string => {
|
|
if (bytes === 0) return '0 Bytes'
|
|
|
|
const k = 1024
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
|
}
|
|
|
|
const formatDate = (dateString: string): string => {
|
|
return new Date(dateString).toLocaleDateString()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|