Pixel perfect fixes

public/CHANGELOG.md

@@ -1,5 +1,11 @@
 All notable changes to this project will be documented in this file.
 
+## [1.0.1] - 2025-04-06
+
+### Added
+- 📝 Help modal with instructions and tips
+- 🎨 Pixel perfect mode for better sprite alignment
+
 ## [1.0.0] - 2025-04-06
 
 ### Added

src/assets/main.css

@@ -1,6 +1 @@
 @import 'tailwindcss';
-
-canvas {
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
-}

src/components/SpriteCanvas.vue

@@ -8,7 +8,7 @@
     </div>
 
     <div class="relative border border-gray-300 rounded-lg">
-      <canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full"></canvas>
+      <canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}"></canvas>
     </div>
   </div>
 </template>

src/components/SpritePreview.vue

@@ -89,7 +89,7 @@
               <div v-for="(sprite, index) in props.sprites" :key="sprite.id" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-50 cursor-pointer" @click="toggleHiddenFrame(index)">
                 <input type="checkbox" :checked="!hiddenFrames.includes(index)" class="w-4 h-4 text-blue-500 focus:ring-blue-400 rounded border-gray-300" @click.stop @change="toggleHiddenFrame(index)" />
                 <div class="w-12 h-12 bg-gray-100 rounded flex items-center justify-center overflow-hidden">
-                  <img :src="sprite.img.src" class="max-w-full max-h-full object-contain" style="image-rendering: pixelated" />
+                  <img :src="sprite.img.src" class="max-w-full max-h-full object-contain" :style="settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}" />
                 </div>
                 <span class="text-sm">Frame {{ index + 1 }}</span>
               </div>
@@ -111,7 +111,7 @@
         @touchend="stopDrag"
         class="block"
         :class="{ 'cursor-move': isDraggable }"
-        :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left' }"
+        :style="{ transform: `scale(${zoom})`, transformOrigin: 'top left', ...(settingsStore.pixelPerfect ? { 'image-rendering': 'pixelated' } : {}) }"
       >
       </canvas>
     </div>