From 2bbe6b0ff0e639bc16e706ad69ee2a52aa0a7e87 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 5 Apr 2025 22:40:40 +0200
Subject: [PATCH] Improvements

---
 src/App.vue                        |  39 +++++----
 src/components/FileUploader.vue    |  25 ++++--
 src/components/utilities/Modal.vue | 124 ++++++++++++++++++++++++++---
 tailwind.config.js                 |  28 ++++---
 4 files changed, 174 insertions(+), 42 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index af54112..4185f21 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,35 @@
 <template>
-  <div class="min-h-screen bg-gray-100 p-4">
-    <h1 class="text-2xl font-bold text-center mb-6">Spritesheet Generator</h1>
-    <div class="max-w-4xl mx-auto bg-white rounded-lg shadow p-6">
-      <file-uploader @upload-sprites="handleSpritesUpload" />
+  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-6">
+    <div class="max-w-6xl mx-auto">
+      <h1 class="text-4xl font-bold text-center mb-8 text-gray-900 tracking-tight">Spritesheet Generator</h1>
 
-      <div v-if="sprites.length > 0">
-        <div class="mt-4 flex items-center gap-4">
-          <div class="flex items-center">
-            <label for="columns" class="mr-2">Columns:</label>
-            <input id="columns" type="number" v-model="columns" min="1" max="10" class="border rounded px-2 py-1 w-16" />
+      <div class="bg-white rounded-2xl shadow-soft p-8">
+        <file-uploader @upload-sprites="handleSpritesUpload" />
+
+        <div v-if="sprites.length > 0" class="mt-8">
+          <div class="flex flex-wrap items-center gap-6 mb-8">
+            <div class="flex items-center space-x-3">
+              <label for="columns" class="text-gray-700 font-medium">Columns:</label>
+              <input id="columns" type="number" v-model="columns" min="1" max="10" class="w-20 px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all" />
+            </div>
+
+            <button @click="downloadSpritesheet" class="px-6 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors flex items-center space-x-2">
+              <i class="fas fa-download"></i>
+              <span>Download Spritesheet</span>
+            </button>
+
+            <button @click="openPreviewModal" class="px-6 py-2.5 bg-green-500 hover:bg-green-600 text-white font-medium rounded-lg transition-colors flex items-center space-x-2">
+              <i class="fas fa-play"></i>
+              <span>Preview Animation</span>
+            </button>
           </div>
 
-          <button @click="downloadSpritesheet" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Download Spritesheet</button>
-
-          <button @click="openPreviewModal" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">Preview</button>
+          <sprite-canvas :sprites="sprites" :columns="columns" @update-sprite="updateSpritePosition" />
         </div>
-
-        <sprite-canvas :sprites="sprites" :columns="columns" @update-sprite="updateSpritePosition" />
       </div>
     </div>
 
-    <Modal :is-open="isPreviewModalOpen" @close="closePreviewModal" :initial-width="800" :initial-height="600" title="Preview">
+    <Modal :is-open="isPreviewModalOpen" @close="closePreviewModal" :initial-width="800" :initial-height="600" title="Animation Preview">
       <sprite-preview :sprites="sprites" :columns="columns" @update-sprite="updateSpritePosition" />
     </Modal>
   </div>
diff --git a/src/components/FileUploader.vue b/src/components/FileUploader.vue
index 18027ce..62b31af 100644
--- a/src/components/FileUploader.vue
+++ b/src/components/FileUploader.vue
@@ -1,15 +1,28 @@
 <template>
-  <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center" :class="{ 'bg-blue-50 border-blue-300': isDragging }" @dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @dragover.prevent @drop.prevent="handleDrop">
+  <div
+    class="border-2 border-dashed rounded-xl p-8 text-center transition-all duration-200"
+    :class="{
+      'border-blue-300 bg-blue-50': isDragging,
+      'border-gray-200 hover:border-blue-300 hover:bg-gray-50': !isDragging,
+    }"
+    @dragenter.prevent="isDragging = true"
+    @dragleave.prevent="isDragging = false"
+    @dragover.prevent
+    @drop.prevent="handleDrop"
+  >
     <input ref="fileInput" type="file" multiple accept="image/*" class="hidden" @change="handleFileChange" />
 
-    <div class="mb-4">
-      <img src="@/assets/images/file.svg" alt="File upload" class="w-16 h-16 mx-auto mb-4" />
+    <div class="mb-6">
+      <img src="@/assets/images/file.svg" alt="File upload" class="w-20 h-20 mx-auto mb-4 opacity-75" />
     </div>
 
-    <p class="text-lg mb-2">Drag and drop your sprite images here</p>
-    <p class="text-sm text-gray-500 mb-4">or</p>
+    <p class="text-xl font-medium text-gray-700 mb-2">Drag and drop your sprite images here</p>
+    <p class="text-sm text-gray-500 mb-6">or</p>
 
-    <button @click="openFileDialog" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Select Files</button>
+    <button @click="openFileDialog" class="px-6 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors inline-flex items-center space-x-2">
+      <i class="fas fa-folder-open"></i>
+      <span>Select Files</span>
+    </button>
   </div>
 </template>
 
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 50e393b..77b48e8 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,20 +1,27 @@
 <template>
   <Teleport to="body">
     <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center">
-      <!-- Modal content -->
-      <div class="relative bg-white border-gray-300 border-2 rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col">
-        <!-- Header -->
-        <div class="flex justify-between items-center p-4 border-b border-b-gray-400">
-          <h3 class="text-xl font-semibold">{{ title }}</h3>
-          <button @click="close" class="text-gray-500 hover:text-gray-700">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <div
+        ref="modalRef"
+        :style="{
+          position: 'absolute',
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+        }"
+        class="bg-white rounded-2xl border-2 border-gray-300 shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col"
+      >
+        <!-- Header - Make it the drag handle -->
+        <div class="flex justify-between items-center p-6 border-b border-gray-100 cursor-move" @mousedown="startDrag" @touchstart="startDrag">
+          <h3 class="text-2xl font-semibold text-gray-900">{{ title }}</h3>
+          <button @click="close" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
         </div>
 
         <!-- Body -->
-        <div class="p-4 flex-1 overflow-auto">
+        <div class="p-6 flex-1 overflow-auto">
           <slot></slot>
         </div>
       </div>
@@ -23,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted } from 'vue';
+  import { ref, onMounted, onUnmounted, watch } from 'vue';
 
   const props = defineProps<{
     isOpen: boolean;
@@ -34,8 +41,78 @@
     (e: 'close'): void;
   }>();
 
+  const modalRef = ref<HTMLElement | null>(null);
+  const position = ref({ x: 0, y: 0 });
+  const isDragging = ref(false);
+  const dragOffset = ref({ x: 0, y: 0 });
+
+  // Center the modal when it opens
+  const centerModal = () => {
+    if (!modalRef.value) return;
+
+    const modalRect = modalRef.value.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    position.value = {
+      x: (viewportWidth - modalRect.width) / 2,
+      y: (viewportHeight - modalRect.height) / 2,
+    };
+  };
+
+  const startDrag = (event: MouseEvent | TouchEvent) => {
+    if (!modalRef.value) return;
+    event.preventDefault();
+
+    isDragging.value = true;
+
+    const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+    const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+
+    dragOffset.value = {
+      x: clientX - position.value.x,
+      y: clientY - position.value.y,
+    };
+
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('touchmove', drag, { passive: false });
+    document.addEventListener('mouseup', stopDrag);
+    document.addEventListener('touchend', stopDrag);
+  };
+
+  const drag = (event: MouseEvent | TouchEvent) => {
+    if (!isDragging.value || !modalRef.value) return;
+    event.preventDefault();
+
+    const clientX = 'touches' in event ? event.touches[0].clientX : event.clientX;
+    const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+
+    const modalRect = modalRef.value.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    // Calculate new position
+    let newX = clientX - dragOffset.value.x;
+    let newY = clientY - dragOffset.value.y;
+
+    // Constrain to viewport bounds
+    newX = Math.max(0, Math.min(newX, viewportWidth - modalRect.width));
+    newY = Math.max(0, Math.min(newY, viewportHeight - modalRect.height));
+
+    position.value = { x: newX, y: newY };
+  };
+
+  const stopDrag = () => {
+    isDragging.value = false;
+    document.removeEventListener('mousemove', drag);
+    document.removeEventListener('touchmove', drag);
+    document.removeEventListener('mouseup', stopDrag);
+    document.removeEventListener('touchend', stopDrag);
+  };
+
   const close = () => {
     emit('close');
+    position.value = { x: 0, y: 0 };
   };
 
   // Handle ESC key to close modal
@@ -45,11 +122,40 @@
     }
   };
 
+  // Handle window resize
+  const handleResize = () => {
+    if (!isDragging.value) {
+      centerModal();
+    }
+  };
+
+  // Watch for modal opening
+  watch(
+    () => props.isOpen,
+    newValue => {
+      if (newValue) {
+        // Use nextTick to ensure the modal is mounted
+        Vue.nextTick(() => {
+          centerModal();
+        });
+      }
+    }
+  );
+
   onMounted(() => {
     document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('resize', handleResize);
+    if (props.isOpen) {
+      centerModal();
+    }
   });
 
   onUnmounted(() => {
     document.removeEventListener('keydown', handleKeyDown);
+    window.removeEventListener('resize', handleResize);
+    document.removeEventListener('mousemove', drag);
+    document.removeEventListener('touchmove', drag);
+    document.removeEventListener('mouseup', stopDrag);
+    document.removeEventListener('touchend', stopDrag);
   });
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index a741393..ee85865 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,29 +1,33 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
         gray: {
-          900: '#121212', // bg-primary
-          800: '#1e1e1e', // bg-secondary
-          700: '#252525', // bg-tertiary
-          600: '#333333', // border
-          400: '#a0a0a0', // text-secondary
-          200: '#e0e0e0', // text-primary
+          900: '#111827', // bg-primary
+          800: '#1F2937', // bg-secondary
+          700: '#374151', // bg-tertiary
+          600: '#4B5563', // border
+          400: '#9CA3AF', // text-secondary
+          200: '#E5E7EB', // text-primary
         },
         blue: {
-          500: '#0096ff', // accent
-          600: '#0077cc', // accent-hover
+          500: '#3B82F6', // accent
+          600: '#2563EB', // accent-hover
         },
         red: {
-          500: '#e53935', // danger
-          600: '#c62828', // danger-hover
+          500: '#EF4444', // danger
+          600: '#DC2626', // danger-hover
         },
         green: {
-          500: '#43a047', // success
+          500: '#10B981', // success
+          600: '#059669', // success-hover
         }
+      },
+      boxShadow: {
+        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
       }
     },
   },