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:
parent
52e6adc995
commit
6f67b133fc
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user