107 lines
4.3 KiB
Vue
107 lines
4.3 KiB
Vue
<template>
|
||
<div class="flex flex-col gap-6">
|
||
<!-- Upload Card -->
|
||
<div class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
|
||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||
<i class="fas fa-upload text-blue-500"></i>
|
||
<span>Upload sprites</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<drop-zone @files-uploaded="handleUpload" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Actions -->
|
||
<div class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
|
||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||
<i class="fas fa-bolt text-blue-500"></i>
|
||
<span>Quick Actions</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex flex-col gap-3">
|
||
<button @click="openSpritesModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
|
||
<i class="fas fa-images"></i> Manage sprites
|
||
<span v-if="sprites.length > 0" class="ml-auto bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
|
||
{{ sprites.length }}
|
||
</span>
|
||
</button>
|
||
|
||
<button @click="openSettingsModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-cog"></i> Settings & tools</button>
|
||
|
||
<button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600">
|
||
<i class="fas fa-play"></i> Preview animation
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats Card -->
|
||
<div v-if="sprites.length > 0" class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
|
||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||
<i class="fas fa-chart-bar text-blue-500"></i>
|
||
<span>Stats</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4">
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="bg-gray-700 p-3 rounded">
|
||
<div class="text-sm text-gray-400">Sprites</div>
|
||
<div class="text-xl font-semibold">{{ sprites.length }}</div>
|
||
</div>
|
||
<div class="bg-gray-700 p-3 rounded">
|
||
<div class="text-sm text-gray-400">Cell Size</div>
|
||
<div class="text-xl font-semibold">{{ cellSize.width }}×{{ cellSize.height }}</div>
|
||
</div>
|
||
<div class="bg-gray-700 p-3 rounded">
|
||
<div class="text-sm text-gray-400">Zoom</div>
|
||
<div class="text-xl font-semibold">{{ Math.round(zoomLevel * 100) }}%</div>
|
||
</div>
|
||
<div class="bg-gray-700 p-3 rounded">
|
||
<div class="text-sm text-gray-400">Columns</div>
|
||
<div class="text-xl font-semibold">{{ columns }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { type Sprite, useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||
import DropZone from './DropZone.vue';
|
||
|
||
const store = useSpritesheetStore();
|
||
const sprites = computed(() => store.sprites.value);
|
||
const cellSize = computed(() => store.cellSize);
|
||
const zoomLevel = computed(() => store.zoomLevel.value);
|
||
const columns = computed(() => store.columns.value);
|
||
|
||
const handleUpload = (sprites: Sprite[]) => {
|
||
// The dropzone component handles adding sprites to the store
|
||
// This is just for event handling if needed
|
||
};
|
||
|
||
const openPreviewModal = () => {
|
||
if (store.sprites.value.length === 0) {
|
||
store.showNotification('Please add sprites first', 'error');
|
||
return;
|
||
}
|
||
|
||
store.isModalOpen.value = true;
|
||
};
|
||
|
||
const openSpritesModal = () => {
|
||
store.isSpritesModalOpen.value = true;
|
||
};
|
||
|
||
const openSettingsModal = () => {
|
||
store.isSettingsModalOpen.value = true;
|
||
};
|
||
</script>
|