feat: persist last loaded spritesheet in localStorage

Stores the image as a data URL so it survives page reloads.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Corey Johnson 2026-01-06 13:42:21 -08:00
parent 52e6adc995
commit 6f67b133fc

View File

@ -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<number | undefined>()
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