diff --git a/src/dev/app.tsx b/src/dev/app.tsx index d2135ba..e33dce8 100644 --- a/src/dev/app.tsx +++ b/src/dev/app.tsx @@ -1,10 +1,26 @@ -import { useState } from "hono/jsx" +import { useState, useEffect } from "hono/jsx" import { render } from "hono/jsx/dom" +const STORAGE_KEY = "tiny-sprites-last-file" + +const loadFromStorage = () => { + try { + const stored = localStorage.getItem(STORAGE_KEY) + if (stored) return JSON.parse(stored) + } catch {} +} + +const saveToStorage = (data: { dataUrl: string; width: number; height: number }) => { + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify(data)) + } catch {} +} + const App = () => { - const [spriteUrl, setSpriteUrl] = useState("") - const [imageWidth, setImageWidth] = useState(0) - const [imageHeight, setImageHeight] = useState(0) + const stored = loadFromStorage() + const [spriteUrl, setSpriteUrl] = useState(stored?.dataUrl || "") + const [imageWidth, setImageWidth] = useState(stored?.width || 0) + const [imageHeight, setImageHeight] = useState(stored?.height || 0) const [frames, setFrames] = useState(4) const [columns, setColumns] = useState() const [frameDuration, setFrameDuration] = useState(100) @@ -13,14 +29,20 @@ const App = () => { const handleFileChange = (e: Event) => { const file = (e.target as HTMLInputElement).files?.[0] if (!file) return - const url = URL.createObjectURL(file) - const img = new Image() - img.onload = () => { - setImageWidth(img.width) - setImageHeight(img.height) - setSpriteUrl(url) + + const reader = new FileReader() + reader.onload = () => { + const dataUrl = reader.result as string + const img = new Image() + img.onload = () => { + setImageWidth(img.width) + setImageHeight(img.height) + setSpriteUrl(dataUrl) + saveToStorage({ dataUrl, width: img.width, height: img.height }) + } + img.src = dataUrl } - img.src = url + reader.readAsDataURL(file) } // Auto-calculate frame dimensions from image size and frame count