Sprite Forge — sprite sheet animator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_217":218,"_219":220},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_104":85,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":122,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",15,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","app.js","latestPath","fileId","2c0cc892-5e39-11f1-a35a-1607ee4eb77e","name","fileType","script","content","import defaultSprite from \"/default-sprite.js\";\n\nconst $ = (id) => document.getElementById(id);\nconst clampInt = (v, lo, hi) => Math.min(hi, Math.max(lo, Math.round(+v) || lo));\n\nconst canvas = $(\"view\");\nconst ctx = canvas.getContext(\"2d\");\nconst stage = $(\"stage\");\nconst stripEl = $(\"strip\");\n\nconst state = {\n img: null,\n cols: 4,\n rows: 4,\n fps: 8,\n scale: 2,\n mode: \"loop\", // \"loop\" | \"pingpong\"\n row: \"all\", // \"all\" | number\n playing: true,\n};\n\nlet frameIndex = 0;\nlet dir = 1;\nlet last = 0;\nlet acc = 0;\nlet raf = null;\n\n// ---------- geometry ----------\nfunction frameSize() {\n return {\n w: state.img.naturalWidth / state.cols,\n h: state.img.naturalHeight / state.rows,\n };\n}\n\nfunction activeCells() {\n if (state.row === \"all\") {\n const out = [];\n for (let r = 0; r < state.rows; r++)\n for (let c = 0; c < state.cols; c++) out.push([r, c]);\n return out;\n }\n return Array.from({ length: state.cols }, (_, c) => [state.row, c]);\n}\n\nfunction sequence() {\n const { w, h } = frameSize();\n return activeCells().map(([r, c]) => ({ sx: c * w, sy: r * h, sw: w, sh: h }));\n}\n\n// ---------- rendering ----------\nfunction applyScale() {\n const { w, h } = frameSize();\n canvas.style.width = Math.round(w * state.scale) + \"px\";\n canvas.style.height = Math.round(h * state.scale) + \"px\";\n}\n\nfunction resizeCanvas() {\n const { w, h } = frameSize();\n canvas.width = Math.round(w);\n canvas.height = Math.round(h);\n applyScale();\n}\n\nfunction render() {\n if (!state.img) return;\n const seq = sequence();\n if (!seq.length) return;\n if (frameIndex >= seq.length) frameIndex = 0;\n const f = seq[frameIndex];\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.imageSmoothingEnabled = false;\n ctx.drawImage(state.img, f.sx, f.sy, f.sw, f.sh, 0, 0, canvas.width, canvas.height);\n highlightStrip();\n $(\"frameLabel\").textContent = `frame ${frameIndex + 1} / ${seq.length}`;\n}\n\n// ---------- frames strip ----------\nfunction buildStrip() {\n const { w, h } = frameSize();\n stripEl.innerHTML = \"\";\n activeCells().forEach(([r, c], i) => {\n const cv = document.createElement(\"canvas\");\n cv.width = Math.round(w);\n cv.height = Math.round(h);\n const cx = cv.getContext(\"2d\");\n cx.imageSmoothingEnabled = false;\n cx.drawImage(state.img, c * w, r * h, w, h, 0, 0, cv.width, cv.height);\n cv.className = \"thumb\";\n cv.title = `frame ${i + 1}`;\n cv.addEventListener(\"click\", () => {\n pause();\n frameIndex = i;\n render();\n });\n stripEl.appendChild(cv);\n });\n highlightStrip();\n}\n\nfunction highlightStrip() {\n [...stripEl.children].forEach((el, i) => el.classList.toggle(\"active\", i === frameIndex));\n}\n\n// ---------- animation loop ----------\nfunction tick(t) {\n if (!state.playing) return;\n if (!last) last = t;\n acc += (t - last) / 1000;\n last = t;\n const seq = sequence();\n const spf = 1 / state.fps;\n let advanced = false;\n while (acc >= spf) {\n acc -= spf;\n advanced = true;\n if (state.mode === \"pingpong\") {\n frameIndex += dir;\n if (frameIndex >= seq.length - 1) {\n frameIndex = seq.length - 1;\n dir = -1;\n } else if (frameIndex <= 0) {\n frameIndex = 0;\n dir = 1;\n }\n } else {\n frameIndex = (frameIndex + 1) % seq.length;\n }\n }\n if (advanced) render();\n raf = requestAnimationFrame(tick);\n}\n\nfunction startLoop() {\n if (!state.playing || !state.img) return;\n cancelAnimationFrame(raf);\n last = 0;\n raf = requestAnimationFrame(tick);\n}\nfunction play() {\n state.playing = true;\n $(\"playBtn\").textContent = \"⏸ Pause\";\n startLoop();\n}\nfunction pause() {\n state.playing = false;\n cancelAnimationFrame(raf);\n raf = null;\n $(\"playBtn\").textContent = \"▶ Play\";\n}\nconst toggle = () => (state.playing ? pause() : play());\n\n// ---------- row selector ----------\nfunction rebuildRowSelect() {\n const sel = $(\"rowSel\");\n const prev = sel.value;\n sel.innerHTML = ``;\n for (let r = 0; r < state.rows; r++) {\n const o = document.createElement(\"option\");\n o.value = String(r);\n o.textContent = `Row ${r + 1}`;\n sel.appendChild(o);\n }\n if (prev === \"all\" || (prev !== \"\" && +prev < state.rows)) sel.value = prev;\n else sel.value = \"all\";\n state.row = sel.value === \"all\" ? \"all\" : +sel.value;\n}\n\nfunction refresh() {\n if (!state.img) return;\n resizeCanvas();\n buildStrip();\n render();\n}\n\n// ---------- image loading ----------\nfunction loadImage(src, name) {\n const img = new Image();\n img.onload = () => {\n state.img = img;\n const { w, h } = { w: img.naturalWidth / state.cols, h: img.naturalHeight / state.rows };\n state.scale = clampInt(Math.round(180 / Math.max(w, h)), 1, 16);\n $(\"scale\").value = state.scale;\n $(\"scaleVal\").textContent = state.scale + \"×\";\n $(\"sheetName\").textContent = `${name} · ${img.naturalWidth}×${img.naturalHeight}`;\n frameIndex = 0;\n dir = 1;\n refresh();\n startLoop();\n };\n img.onerror = () => alert(\"Couldn't load that image.\");\n img.src = src;\n}\n\nfunction handleFile(file) {\n if (!file || !file.type.startsWith(\"image/\")) return;\n const reader = new FileReader();\n reader.onload = () => loadImage(reader.result, file.name);\n reader.readAsDataURL(file);\n}\n\n// ---------- controls ----------\nfunction bindControls() {\n $(\"cols\").addEventListener(\"input\", (e) => {\n state.cols = clampInt(e.target.value, 1, 64);\n frameIndex = 0;\n rebuildRowSelect();\n refresh();\n });\n $(\"rows\").addEventListener(\"input\", (e) => {\n state.rows = clampInt(e.target.value, 1, 64);\n frameIndex = 0;\n rebuildRowSelect();\n refresh();\n });\n $(\"fps\").addEventListener(\"input\", (e) => {\n state.fps = +e.target.value;\n $(\"fpsVal\").textContent = state.fps + \" fps\";\n });\n $(\"scale\").addEventListener(\"input\", (e) => {\n if (!state.img) return;\n state.scale = +e.target.value;\n $(\"scaleVal\").textContent = state.scale + \"×\";\n applyScale();\n });\n $(\"mode\").addEventListener(\"change\", (e) => {\n state.mode = e.target.value;\n dir = 1;\n });\n $(\"rowSel\").addEventListener(\"change\", (e) => {\n state.row = e.target.value === \"all\" ? \"all\" : +e.target.value;\n frameIndex = 0;\n refresh();\n });\n $(\"playBtn\").addEventListener(\"click\", toggle);\n $(\"resetBtn\").addEventListener(\"click\", () => {\n state.cols = 4;\n state.rows = 4;\n $(\"cols\").value = 4;\n $(\"rows\").value = 4;\n rebuildRowSelect();\n loadImage(defaultSprite, \"default sprite\");\n });\n}\n\nfunction bindDropAndPaste() {\n $(\"file\").addEventListener(\"change\", (e) => handleFile(e.target.files[0]));\n [\"dragenter\", \"dragover\"].forEach((ev) =>\n stage.addEventListener(ev, (e) => {\n e.preventDefault();\n stage.classList.add(\"drag\");\n })\n );\n [\"dragleave\", \"drop\"].forEach((ev) =>\n stage.addEventListener(ev, (e) => {\n e.preventDefault();\n stage.classList.remove(\"drag\");\n })\n );\n stage.addEventListener(\"drop\", (e) => handleFile(e.dataTransfer.files[0]));\n window.addEventListener(\"paste\", (e) => {\n const item = [...(e.clipboardData?.items || [])].find((i) => i.type.startsWith(\"image/\"));\n if (item) handleFile(item.getAsFile());\n });\n}\n\n// ---------- init ----------\nbindControls();\nbindDropAndPaste();\nrebuildRowSelect();\nloadImage(defaultSprite, \"default sprite\");\n","// Sprite Forge — client. Vanilla JS, canvas-based sprite-sheet animation.\n// Talks to the JSON API in main.ts; sheets (incl. the built-in sample) come\n// from /api/sheets and their pixels from /api/sheets/:id/image.\n\nconst $ = (id) => document.getElementById(id);\nconst clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));\n\n// ---- DOM refs ----\nconst canvas = $(\"canvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst stage = $(\"stage\");\nconst stageTitle = $(\"stage-title\");\nconst playBtn = $(\"play-btn\");\nconst frameReadout = $(\"frame-readout\");\nconst dimsReadout = $(\"dims-readout\");\nconst strip = $(\"strip\");\nconst gallery = $(\"gallery\");\n\nconst colsInput = $(\"cols\");\nconst rowsInput = $(\"rows\");\nconst fpsInput = $(\"fps\");\nconst fpsVal = $(\"fps-val\");\nconst scaleInput = $(\"scale\");\nconst scaleVal = $(\"scale-val\");\n\nconst modeToggle = $(\"mode-toggle\");\nconst dirToggle = $(\"dir-toggle\");\nconst bgToggle = $(\"bg-toggle\");\n\nconst saveRow = $(\"save-row\");\nconst saveBtn = $(\"save-btn\");\nconst saveStatus = $(\"save-status\");\nconst uploadBtn = $(\"upload-btn\");\n\n// modal\nconst modal = $(\"modal\");\nconst mClose = $(\"m-close\");\nconst mCancel = $(\"m-cancel\");\nconst mAdd = $(\"m-add\");\nconst drop = $(\"drop\");\nconst fileInput = $(\"file\");\nconst previewWrap = $(\"preview-wrap\");\nconst previewImg = $(\"preview\");\nconst previewGrid = $(\"preview-grid\");\nconst dropText = $(\"drop-text\");\nconst mName = $(\"m-name\");\nconst mCols = $(\"m-cols\");\nconst mRows = $(\"m-rows\");\nconst mFps = $(\"m-fps\");\nconst mError = $(\"m-error\");\n\n// ---- state ----\nconst state = {\n sheets: [],\n sheet: null,\n img: null,\n imgW: 0,\n imgH: 0,\n cols: 4,\n rows: 4,\n fps: 6,\n scale: 4,\n mode: \"row\", // \"row\" | \"all\"\n dir: \"loop\", // \"loop\" | \"pingpong\"\n row: 0,\n bg: \"checker\",\n playing: true,\n seq: [], // global frame indices to play, in order\n pos: 0, // index into seq\n cur: 0, // current global frame index\n lastTs: 0,\n};\n\nconst imageUrl = (s) => `/api/sheets/${s.id}/image?v=${s.createdAt}`;\nconst frameW = () => Math.max(1, Math.floor(state.imgW / state.cols));\nconst frameH = () => Math.max(1, Math.floor(state.imgH / state.rows));\n\n// ---- sequence / drawing ----\nfunction baseSeq() {\n const total = state.cols * state.rows;\n if (state.mode === \"all\") return Array.from({ length: total }, (_, i) => i);\n const start = clamp(state.row, 0, state.rows - 1) * state.cols;\n const out = [];\n for (let i = 0; i < state.cols && start + i < total; i++) out.push(start + i);\n return out;\n}\n\nfunction buildSeq() {\n const base = baseSeq();\n state.seq =\n state.dir === \"pingpong\" && base.length > 2\n ? base.concat(base.slice(1, -1).reverse())\n : base;\n if (state.pos >= state.seq.length) state.pos = 0;\n}\n\nfunction setupCanvas() {\n canvas.width = frameW() * state.scale;\n canvas.height = frameH() * state.scale;\n ctx.imageSmoothingEnabled = false;\n}\n\nfunction drawFrame(idx) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n if (!state.img) return;\n const fw = frameW();\n const fh = frameH();\n const sx = (idx % state.cols) * fw;\n const sy = Math.floor(idx / state.cols) * fh;\n ctx.drawImage(state.img, sx, sy, fw, fh, 0, 0, fw * state.scale, fh * state.scale);\n}\n\nfunction updateReadout() {\n frameReadout.textContent = state.seq.length\n ? `frame ${state.pos + 1} / ${state.seq.length}`\n : \"frame 0 / 0\";\n dimsReadout.textContent = state.img ? `${frameW()}×${frameH()} px` : \"— px\";\n}\n\n// Restart on anything that changes geometry or the sequence.\nfunction restart() {\n buildSeq();\n setupCanvas();\n if (state.pos >= state.seq.length) state.pos = 0;\n state.cur = state.seq.length ? state.seq[state.pos] : 0;\n state.lastTs = 0;\n drawFrame(state.cur);\n highlightStrip();\n updateReadout();\n}\n\n// rAF loop — reads fps & playing live, so changing them never restarts.\nfunction loop(ts) {\n requestAnimationFrame(loop);\n if (!state.seq.length) return;\n if (!state.playing) {\n state.lastTs = ts;\n return;\n }\n if (!state.lastTs) state.lastTs = ts;\n if (ts - state.lastTs >= 1000 / state.fps) {\n state.lastTs = ts;\n state.pos = (state.pos + 1) % state.seq.length;\n state.cur = state.seq[state.pos];\n drawFrame(state.cur);\n highlightStrip();\n updateReadout();\n }\n}\n\n// ---- frame strip (shows the whole grid) ----\nfunction renderStrip() {\n strip.innerHTML = \"\";\n if (!state.img || !state.sheet) return;\n const total = state.cols * state.rows;\n const url = imageUrl(state.sheet);\n for (let i = 0; i < total; i++) {\n const col = i % state.cols;\n const r = Math.floor(i / state.cols);\n const cell = document.createElement(\"div\");\n cell.className = \"frame-cell\";\n cell.dataset.idx = i;\n cell.style.backgroundImage = `url(\"${url}\")`;\n cell.style.backgroundSize = `${state.cols * 100}% ${state.rows * 100}%`;\n cell.style.backgroundPosition = `${state.cols > 1 ? (col / (state.cols - 1)) * 100 : 0}% ${\n state.rows > 1 ? (r / (state.rows - 1)) * 100 : 0\n }%`;\n const tag = document.createElement(\"span\");\n tag.className = \"idx\";\n tag.textContent = i;\n cell.appendChild(tag);\n cell.addEventListener(\"click\", () => {\n state.mode = \"row\";\n reflectMode();\n state.row = r;\n state.playing = true;\n reflectPlay();\n restart();\n const local = state.seq.indexOf(i);\n if (local >= 0) {\n state.pos = local;\n state.cur = i;\n drawFrame(i);\n highlightStrip();\n updateReadout();\n }\n });\n strip.appendChild(cell);\n }\n highlightStrip();\n}\n\nfunction highlightStrip() {\n for (const cell of strip.children) {\n const i = +cell.dataset.idx;\n const r = Math.floor(i / state.cols);\n cell.classList.toggle(\"current\", i === state.cur);\n cell.classList.toggle(\"in-row\", state.mode === \"row\" && r === state.row);\n }\n}\n\n// ---- gallery ----\nfunction renderGallery() {\n gallery.innerHTML = \"\";\n for (const s of state.sheets) {\n const card = document.createElement(\"div\");\n card.className = \"sheet-card\" + (state.sheet && s.id === state.sheet.id ? \" active\" : \"\");\n\n const thumb = document.createElement(\"div\");\n thumb.className = \"sheet-thumb\";\n thumb.style.backgroundImage = `url(\"${imageUrl(s)}\")`;\n thumb.style.backgroundSize = `${s.cols * 100}% ${s.rows * 100}%`;\n thumb.style.backgroundPosition = \"0% 0%\";\n\n const info = document.createElement(\"div\");\n info.className = \"sheet-info\";\n const name = document.createElement(\"div\");\n name.className = \"sheet-name\";\n name.textContent = s.name;\n const meta = document.createElement(\"div\");\n meta.className = \"sheet-meta\";\n meta.textContent = `${s.cols}×${s.rows} · ${s.fps} fps`;\n info.append(name, meta);\n\n card.append(thumb, info);\n\n if (s.builtin) {\n const tag = document.createElement(\"span\");\n tag.className = \"sheet-tag\";\n tag.textContent = \"SAMPLE\";\n card.appendChild(tag);\n } else {\n const del = document.createElement(\"button\");\n del.className = \"sheet-del\";\n del.type = \"button\";\n del.textContent = \"✕\";\n del.title = \"Delete sheet\";\n del.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n deleteSheet(s);\n });\n card.appendChild(del);\n }\n\n card.addEventListener(\"click\", () => selectSheet(s.id));\n gallery.appendChild(card);\n }\n}\n\nasync function selectSheet(id) {\n const s = state.sheets.find((x) => x.id === id);\n if (!s) return;\n state.sheet = s;\n state.cols = s.cols;\n state.rows = s.rows;\n state.fps = s.fps;\n state.row = 0;\n state.pos = 0;\n\n colsInput.value = s.cols;\n rowsInput.value = s.rows;\n fpsInput.value = clamp(s.fps, 1, 60);\n fpsVal.textContent = `${s.fps} fps`;\n stageTitle.textContent = s.name;\n saveRow.hidden = !!s.builtin;\n saveStatus.textContent = \"\";\n\n renderGallery();\n await loadImage(s);\n renderStrip();\n restart();\n}\n\nfunction loadImage(s) {\n return new Promise((resolve) => {\n const img = new Image();\n img.onload = () => {\n state.img = img;\n state.imgW = img.naturalWidth;\n state.imgH = img.naturalHeight;\n resolve();\n };\n img.onerror = () => {\n state.img = null;\n state.imgW = 0;\n state.imgH = 0;\n resolve();\n };\n img.src = imageUrl(s);\n });\n}\n\nasync function refreshSheets() {\n const res = await fetch(\"/api/sheets\");\n state.sheets = await res.json();\n renderGallery();\n}\n\n// ---- save / delete ----\nasync function saveGrid() {\n if (!state.sheet || state.sheet.builtin) return;\n saveStatus.textContent = \"Saving…\";\n try {\n const res = await fetch(`/api/sheets/${state.sheet.id}`, {\n method: \"PATCH\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ cols: state.cols, rows: state.rows, fps: state.fps }),\n });\n if (!res.ok) throw new Error();\n const updated = await res.json();\n const i = state.sheets.findIndex((x) => x.id === updated.id);\n if (i >= 0) state.sheets[i] = updated;\n state.sheet = updated;\n saveStatus.textContent = \"Saved ✓\";\n renderGallery();\n } catch {\n saveStatus.textContent = \"Save failed\";\n }\n}\n\nasync function deleteSheet(s) {\n if (s.builtin) return;\n if (!confirm(`Delete \"${s.name}\"?`)) return;\n await fetch(`/api/sheets/${s.id}`, { method: \"DELETE\" });\n const wasCurrent = state.sheet && state.sheet.id === s.id;\n await refreshSheets();\n if (wasCurrent) await selectSheet(\"sample\");\n}\n\n// ---- upload modal ----\nlet pendingFile = null;\nlet pendingUrl = null;\n\nfunction openModal() {\n modal.hidden = false;\n mError.textContent = \"\";\n}\n\nfunction closeModal() {\n modal.hidden = true;\n pendingFile = null;\n if (pendingUrl) {\n URL.revokeObjectURL(pendingUrl);\n pendingUrl = null;\n }\n fileInput.value = \"\";\n previewWrap.hidden = true;\n previewImg.removeAttribute(\"src\");\n dropText.textContent = \"Drop an image here · click to browse · or paste\";\n mError.textContent = \"\";\n mName.value = \"\";\n}\n\nfunction setPreviewFile(file) {\n if (!file || !file.type.startsWith(\"image/\")) {\n mError.textContent = \"Please choose an image file.\";\n return;\n }\n mError.textContent = \"\";\n pendingFile = file;\n if (pendingUrl) URL.revokeObjectURL(pendingUrl);\n pendingUrl = URL.createObjectURL(file);\n previewImg.onload = () => {\n previewWrap.hidden = false;\n dropText.textContent = file.name;\n drawPreviewGrid();\n };\n previewImg.src = pendingUrl;\n if (!mName.value.trim()) mName.value = file.name.replace(/\\.[^.]+$/, \"\");\n}\n\nfunction drawPreviewGrid() {\n if (!previewImg.naturalWidth || previewWrap.hidden) return;\n previewGrid.width = previewImg.clientWidth;\n previewGrid.height = previewImg.clientHeight;\n const g = previewGrid.getContext(\"2d\");\n g.clearRect(0, 0, previewGrid.width, previewGrid.height);\n const cols = clamp(parseInt(mCols.value) || 1, 1, 64);\n const rows = clamp(parseInt(mRows.value) || 1, 1, 64);\n g.strokeStyle = \"rgba(91,227,139,0.85)\";\n g.lineWidth = 1;\n for (let i = 1; i < cols; i++) {\n const x = Math.round((i * previewGrid.width) / cols) + 0.5;\n g.beginPath();\n g.moveTo(x, 0);\n g.lineTo(x, previewGrid.height);\n g.stroke();\n }\n for (let j = 1; j < rows; j++) {\n const y = Math.round((j * previewGrid.height) / rows) + 0.5;\n g.beginPath();\n g.moveTo(0, y);\n g.lineTo(previewGrid.width, y);\n g.stroke();\n }\n}\n\nasync function addSheet() {\n if (!pendingFile) {\n mError.textContent = \"Pick an image first.\";\n return;\n }\n const fd = new FormData();\n fd.append(\"file\", pendingFile);\n fd.append(\"name\", mName.value.trim());\n fd.append(\"cols\", mCols.value);\n fd.append(\"rows\", mRows.value);\n fd.append(\"fps\", mFps.value);\n mAdd.disabled = true;\n mError.textContent = \"\";\n try {\n const res = await fetch(\"/api/sheets\", { method: \"POST\", body: fd });\n if (!res.ok) {\n const e = await res.json().catch(() => ({}));\n throw new Error(e.error || \"Upload failed\");\n }\n const meta = await res.json();\n await refreshSheets();\n await selectSheet(meta.id);\n closeModal();\n } catch (err) {\n mError.textContent = err.message || \"Upload failed\";\n } finally {\n mAdd.disabled = false;\n }\n}\n\n// ---- reflect UI state ----\nfunction reflectPlay() {\n playBtn.textContent = state.playing ? \"⏸ Pause\" : \"▶ Play\";\n}\nfunction setSeg(group, attr, val) {\n for (const b of group.querySelectorAll(\".seg-btn\")) b.classList.toggle(\"is-on\", b.dataset[attr] === val);\n}\nfunction reflectMode() {\n setSeg(modeToggle, \"mode\", state.mode);\n}\nfunction reflectDir() {\n setSeg(dirToggle, \"dir\", state.dir);\n}\n\nfunction applyGrid() {\n state.cols = clamp(parseInt(colsInput.value) || 1, 1, 64);\n state.rows = clamp(parseInt(rowsInput.value) || 1, 1, 64);\n colsInput.value = state.cols;\n rowsInput.value = state.rows;\n if (state.row >= state.rows) state.row = state.rows - 1;\n renderStrip();\n restart();\n}\n\n// ---- bindings ----\nfunction bindControls() {\n for (const btn of document.querySelectorAll(\"[data-step]\")) {\n btn.addEventListener(\"click\", () => {\n const input = btn.dataset.step === \"cols\" ? colsInput : rowsInput;\n input.value = clamp((parseInt(input.value) || 1) + +btn.dataset.delta, 1, 64);\n applyGrid();\n });\n }\n colsInput.addEventListener(\"change\", applyGrid);\n rowsInput.addEventListener(\"change\", applyGrid);\n\n fpsInput.addEventListener(\"input\", () => {\n state.fps = clamp(parseInt(fpsInput.value) || 1, 1, 60);\n fpsVal.textContent = `${state.fps} fps`;\n });\n scaleInput.addEventListener(\"input\", () => {\n state.scale = clamp(parseInt(scaleInput.value) || 1, 1, 12);\n scaleVal.textContent = `${state.scale}×`;\n restart();\n });\n\n playBtn.addEventListener(\"click\", () => {\n state.playing = !state.playing;\n reflectPlay();\n });\n\n for (const b of modeToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.mode = b.dataset.mode;\n reflectMode();\n restart();\n });\n for (const b of dirToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.dir = b.dataset.dir;\n reflectDir();\n restart();\n });\n for (const b of bgToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.bg = b.dataset.bg;\n stage.dataset.bg = state.bg;\n setSeg(bgToggle, \"bg\", state.bg);\n });\n\n saveBtn.addEventListener(\"click\", saveGrid);\n uploadBtn.addEventListener(\"click\", openModal);\n}\n\nfunction bindModal() {\n fileInput.addEventListener(\"change\", () => {\n if (fileInput.files[0]) setPreviewFile(fileInput.files[0]);\n });\n mCols.addEventListener(\"input\", drawPreviewGrid);\n mRows.addEventListener(\"input\", drawPreviewGrid);\n mClose.addEventListener(\"click\", closeModal);\n mCancel.addEventListener(\"click\", closeModal);\n mAdd.addEventListener(\"click\", addSheet);\n modal.addEventListener(\"click\", (e) => {\n if (e.target === modal) closeModal();\n });\n\n drop.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n drop.classList.add(\"dragging\");\n });\n drop.addEventListener(\"dragleave\", (e) => {\n e.stopPropagation();\n drop.classList.remove(\"dragging\");\n });\n drop.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n drop.classList.remove(\"dragging\");\n const f = e.dataTransfer?.files?.[0];\n if (f) setPreviewFile(f);\n });\n}\n\nfunction bindGlobal() {\n window.addEventListener(\"dragover\", (e) => e.preventDefault());\n window.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n if (!modal.hidden) return;\n const f = e.dataTransfer?.files?.[0];\n if (f && f.type.startsWith(\"image/\")) {\n openModal();\n setPreviewFile(f);\n }\n });\n window.addEventListener(\"paste\", (e) => {\n const item = [...(e.clipboardData?.items || [])].find((i) => i.type.startsWith(\"image/\"));\n if (!item) return;\n const f = item.getAsFile();\n if (f) {\n openModal();\n setPreviewFile(f);\n }\n });\n window.addEventListener(\"keydown\", (e) => {\n if (e.code !== \"Space\") return;\n const t = e.target;\n if (t && (t.tagName === \"INPUT\" || t.tagName === \"TEXTAREA\" || t.isContentEditable)) return;\n if (!modal.hidden) return;\n e.preventDefault();\n state.playing = !state.playing;\n reflectPlay();\n });\n}\n\n// ---- init ----\nfunction init() {\n bindControls();\n bindModal();\n bindGlobal();\n refreshSheets().then(() => selectSheet(\"sample\"));\n requestAnimationFrame(loop);\n}\ninit();\n","createdAt",["D",1780375120044],"branchVersion","branchId","a0f2d68a-5e37-11f1-b6c6-1607ee4eb77e","id","a0f20bce-5e37-11f1-b6c6-1607ee4eb77e","sprite-animator",["D",1780372844162],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Sprite sheet animator web app","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_103":99},"org",{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789567199&sig=e06d2452d15457d897c29ee2d4a45d8ac5b1a1a7b6bc3ec1d7706c1f90e23fa3","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":213,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":214,"_79":215,"_81":216,"_83":25},"tree",[188,189,190,191,192,193],"files",[188,189,190,191,192,193],"counts",{"_178":61,"_179":149,"_180":61,"_181":182,"_183":184},"contents",[127,128,129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":171,"_32":172,"_30":173,"_136":-5,"_41":42,"_40":174,"_138":25,"_38":175,"_13":61,"_33":20,"_35":176,"_24":25,"_142":-5,"_27":177},{"_43":168,"_32":28,"_30":31,"_136":-5,"_41":42,"_40":14,"_138":122,"_38":169,"_13":149,"_33":34,"_35":37,"_24":25,"_142":-5,"_27":170},{"_43":160,"_32":161,"_30":162,"_136":-5,"_41":42,"_40":163,"_138":122,"_38":164,"_13":165,"_33":34,"_35":166,"_24":25,"_142":-5,"_27":167},{"_43":153,"_32":154,"_30":155,"_136":-5,"_41":42,"_40":156,"_138":25,"_38":157,"_13":149,"_33":20,"_35":158,"_24":25,"_142":-5,"_27":159},{"_43":144,"_32":145,"_30":146,"_136":-5,"_41":42,"_40":147,"_138":122,"_38":148,"_13":149,"_33":150,"_35":151,"_24":25,"_142":-5,"_27":152},{"_43":133,"_32":134,"_30":135,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":139,"_13":140,"_33":20,"_35":141,"_24":25,"_142":-5,"_27":143},"86749e4c-5e3c-11f1-8189-1607ee4eb77e","style.css","fa062fd2-5e38-11f1-bf27-1607ee4eb77e","parentId",14,"latest",["D",1780374947185],4,":root {\n --bg: #0b0e17;\n --panel: #141a2b;\n --panel-2: #0f1422;\n --border: #2a3450;\n --border-bright: #3a4a6e;\n --ink: #e7ecf6;\n --ink-dim: #8b97b5;\n --green: #5be38b;\n --green-deep: #2f8f59;\n --magenta: #ff5da2;\n --shadow: #05070d;\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n background:\n radial-gradient(1200px 600px at 80% -10%, #1a2238 0%, transparent 60%),\n var(--bg);\n color: var(--ink);\n font-family: \"IBM Plex Mono\", ui-monospace, monospace;\n font-size: 14px;\n line-height: 1.5;\n min-height: 100vh;\n}\n\n/* CRT scanline overlay */\n.scanlines {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 9999;\n background: repeating-linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 0,\n rgba(0, 0, 0, 0) 2px,\n rgba(0, 0, 0, 0.06) 3px,\n rgba(0, 0, 0, 0.06) 3px\n );\n mix-blend-mode: multiply;\n}\n\nimg, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }\n\n/* ---------- buttons ---------- */\n.btn {\n font-family: \"Press Start 2P\", monospace;\n font-size: 9px;\n letter-spacing: 0.5px;\n color: var(--ink);\n background: var(--panel);\n border: 2px solid var(--border);\n border-radius: 6px;\n padding: 10px 12px;\n cursor: pointer;\n box-shadow: 3px 3px 0 var(--shadow);\n transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.12s ease;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n line-height: 1.4;\n}\n.btn:hover { background: #1b2236; }\n.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow); }\n.btn.full { width: 100%; justify-content: center; }\n.btn-accent { color: #06210f; background: var(--green); border-color: var(--green-deep); }\n.btn-accent:hover { background: #6ff0a0; }\n.btn-ghost { background: transparent; color: var(--ink-dim); }\n.btn-ghost:hover { color: var(--ink); background: #161d2f; }\n\n/* ---------- topbar ---------- */\n.topbar {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 16px;\n padding: 22px clamp(16px, 4vw, 40px) 14px;\n border-bottom: 2px solid var(--border);\n flex-wrap: wrap;\n animation: fade 0.4s both;\n}\n.brand h1 {\n font-family: \"Press Start 2P\", monospace;\n font-size: clamp(18px, 3.4vw, 30px);\n margin: 0;\n color: var(--green);\n text-shadow: 0 0 10px rgba(91, 227, 139, 0.35), 3px 3px 0 var(--shadow);\n}\n.brand h1 span { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 93, 162, 0.35), 3px 3px 0 var(--shadow); }\n.tagline { margin: 8px 0 0; color: var(--ink-dim); font-size: 12px; }\n.topbar-actions { display: flex; gap: 10px; }\n\n/* ---------- layout ---------- */\n.layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 320px;\n gap: 18px;\n padding: 18px clamp(16px, 4vw, 40px) 48px;\n align-items: start;\n}\n@media (max-width: 820px) {\n .layout { grid-template-columns: 1fr; }\n}\n\n.panel {\n background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);\n border: 2px solid var(--border);\n border-radius: 12px;\n padding: 16px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n animation: fade 0.5s both;\n}\n.side-panel { animation-delay: 0.08s; }\n\n.panel-head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-bottom: 14px;\n flex-wrap: wrap;\n}\n.panel-head h2 {\n font-family: \"Press Start 2P\", monospace;\n font-size: 11px;\n margin: 0;\n color: var(--ink);\n}\n\n/* ---------- segmented toggles ---------- */\n.seg { display: inline-flex; border: 2px solid var(--border); border-radius: 6px; overflow: hidden; }\n.seg.full { display: flex; width: 100%; margin-bottom: 14px; }\n.seg.full .seg-btn { flex: 1; }\n.seg-btn {\n font-family: \"Press Start 2P\", monospace;\n font-size: 8px;\n color: var(--ink-dim);\n background: var(--panel-2);\n border: 0;\n border-right: 2px solid var(--border);\n padding: 8px 10px;\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n}\n.seg-btn:last-child { border-right: 0; }\n.seg-btn:hover { color: var(--ink); }\n.seg-btn.is-on { color: #06210f; background: var(--green); }\n\n/* ---------- stage ---------- */\n.stage {\n position: relative;\n display: grid;\n place-items: center;\n min-height: 320px;\n border: 2px solid var(--border);\n border-radius: 10px;\n padding: 24px;\n overflow: hidden;\n}\n.stage[data-bg=\"checker\"] {\n background:\n repeating-conic-gradient(#1b2236 0% 25%, #232d46 0% 50%) 50% / 22px 22px;\n}\n.stage[data-bg=\"dark\"] { background: #0c1018; }\n.stage[data-bg=\"light\"] { background: #d9dee8; }\n#canvas {\n display: block;\n filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));\n max-width: 100%;\n}\n\n/* ---------- transport ---------- */\n.transport {\n display: flex;\n align-items: center;\n gap: 14px;\n margin: 14px 0 4px;\n flex-wrap: wrap;\n}\n.readout {\n font-size: 12px;\n color: var(--ink-dim);\n background: var(--panel-2);\n border: 1px solid var(--border);\n border-radius: 5px;\n padding: 5px 9px;\n}\n.readout.dim { color: var(--green); }\n\n/* ---------- frame strip ---------- */\n.strip-wrap { margin-top: 14px; }\n.strip-head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-bottom: 10px;\n flex-wrap: wrap;\n}\n.strip-label { font-family: \"Press Start 2P\", monospace; font-size: 9px; color: var(--ink-dim); }\n.strip {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 54px;\n gap: 8px;\n overflow-x: auto;\n padding: 6px 2px 12px;\n scrollbar-width: thin;\n scrollbar-color: var(--border) transparent;\n}\n.frame-cell {\n position: relative;\n width: 54px;\n height: 54px;\n border: 2px solid var(--border);\n border-radius: 6px;\n background-color: #0c1018;\n background-repeat: no-repeat;\n cursor: pointer;\n transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s;\n}\n.frame-cell:hover { transform: translateY(-2px); border-color: #44557a; }\n.frame-cell.in-row { border-color: rgba(91, 227, 139, 0.5); }\n.frame-cell.current {\n border-color: var(--magenta);\n box-shadow: 0 0 0 2px rgba(255, 93, 162, 0.35), 0 0 14px rgba(255, 93, 162, 0.45);\n}\n.frame-cell .idx {\n position: absolute;\n bottom: 2px;\n right: 3px;\n font-size: 9px;\n color: var(--ink-dim);\n background: rgba(8, 11, 20, 0.7);\n padding: 0 3px;\n border-radius: 3px;\n}\n.hint { color: var(--ink-dim); font-size: 11px; margin: 2px 0 0; }\n\n/* ---------- side controls ---------- */\n.control-block { margin-bottom: 20px; }\n.control-block:last-child { margin-bottom: 0; }\n.control-block h3 {\n font-family: \"Press Start 2P\", monospace;\n font-size: 9px;\n color: var(--magenta);\n margin: 0 0 12px;\n letter-spacing: 0.5px;\n}\n\n.stepper-row { display: flex; gap: 12px; }\n.stepper-label { flex: 1; font-size: 11px; color: var(--ink-dim); display: block; }\n.stepper {\n display: flex;\n margin-top: 6px;\n border: 2px solid var(--border);\n border-radius: 6px;\n overflow: hidden;\n}\n.stepper button {\n width: 30px;\n border: 0;\n background: var(--panel-2);\n color: var(--green);\n font-size: 16px;\n cursor: pointer;\n font-family: \"IBM Plex Mono\", monospace;\n}\n.stepper button:hover { background: #1b2236; }\n.stepper input {\n flex: 1;\n width: 0;\n text-align: center;\n border: 0;\n border-left: 2px solid var(--border);\n border-right: 2px solid var(--border);\n background: #0c1018;\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 14px;\n padding: 7px 0;\n}\n.stepper input::-webkit-outer-spin-button,\n.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n.stepper input { -moz-appearance: textfield; }\n\n.slider { display: block; margin-bottom: 14px; }\n.slider:last-child { margin-bottom: 0; }\n.slider span {\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n color: var(--ink-dim);\n margin-bottom: 7px;\n}\n.slider b { color: var(--green); font-weight: 600; }\ninput[type=\"range\"] {\n width: 100%;\n accent-color: var(--green);\n height: 6px;\n cursor: pointer;\n}\n\n.save-status { display: block; margin-top: 8px; font-size: 11px; color: var(--green); min-height: 14px; }\n\n/* ---------- gallery ---------- */\n.gallery { display: flex; flex-direction: column; gap: 8px; }\n.sheet-card {\n position: relative;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px;\n border: 2px solid var(--border);\n border-radius: 8px;\n background: var(--panel-2);\n cursor: pointer;\n transition: border-color 0.12s, background 0.12s;\n}\n.sheet-card:hover { background: #1b2236; }\n.sheet-card.active { border-color: var(--green); box-shadow: 0 0 0 1px rgba(91, 227, 139, 0.4) inset; }\n.sheet-thumb {\n width: 40px;\n height: 40px;\n flex: 0 0 40px;\n border: 1px solid var(--border);\n border-radius: 4px;\n background-color: #0c1018;\n background-repeat: no-repeat;\n}\n.sheet-info { min-width: 0; flex: 1; }\n.sheet-name {\n font-size: 12px;\n color: var(--ink);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.sheet-meta { font-size: 10px; color: var(--ink-dim); }\n.sheet-del {\n border: 0;\n background: transparent;\n color: var(--ink-dim);\n cursor: pointer;\n font-size: 14px;\n padding: 4px 6px;\n border-radius: 4px;\n}\n.sheet-del:hover { color: var(--magenta); background: rgba(255, 93, 162, 0.12); }\n.sheet-tag {\n font-size: 8px;\n font-family: \"Press Start 2P\", monospace;\n color: var(--green);\n border: 1px solid var(--green-deep);\n border-radius: 4px;\n padding: 2px 4px;\n}\n\n/* ---------- modal ---------- */\n.modal {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: grid;\n place-items: center;\n padding: 20px;\n background: rgba(5, 7, 13, 0.78);\n backdrop-filter: blur(3px);\n animation: fade 0.18s both;\n}\n.modal[hidden] { display: none; }\n.modal-card {\n width: min(560px, 100%);\n background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);\n border: 2px solid var(--border);\n border-radius: 14px;\n padding: 18px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n}\n.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }\n.modal-head h2 { font-family: \"Press Start 2P\", monospace; font-size: 12px; margin: 0; color: var(--green); }\n.x { border: 0; background: transparent; color: var(--ink-dim); font-size: 16px; cursor: pointer; }\n.x:hover { color: var(--magenta); }\n\n.drop {\n display: grid;\n place-items: center;\n min-height: 180px;\n border: 2px dashed var(--border);\n border-radius: 10px;\n padding: 16px;\n cursor: pointer;\n text-align: center;\n transition: border-color 0.12s, background 0.12s;\n}\n.drop:hover, .drop.dragging { border-color: var(--green); background: rgba(91, 227, 139, 0.06); }\n.drop-text { color: var(--ink-dim); font-size: 12px; }\n.preview-wrap { position: relative; display: inline-block; line-height: 0; }\n.preview-wrap img { max-width: 100%; max-height: 220px; border-radius: 6px; }\n.preview-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\n\n.modal-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin: 16px 0 4px;\n}\n.modal-grid label { font-size: 11px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; }\n.modal-grid input {\n background: #0c1018;\n border: 2px solid var(--border);\n border-radius: 6px;\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 14px;\n padding: 8px 10px;\n}\n.modal-grid input:focus { outline: none; border-color: var(--green); }\n.m-error { color: var(--magenta); font-size: 12px; min-height: 16px; margin: 8px 0 0; }\n.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }\n\n@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n","label",[134],"f2e4f438-5e3b-11f1-880a-1607ee4eb77e","main.ts","a0f721e0-5e37-11f1-b6c6-1607ee4eb77e",10,["D",1780374699593],1,"http","// Sprite Forge — server.\n// Serves the static frontend and a small JSON API for sprite sheets.\n// Uploaded sheets are stored in std/blob; the built-in sample is embedded.\n\nimport { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { decodeBase64, encodeBase64 } from \"jsr:@std/encoding@1/base64\";\nimport { SAMPLE_B64, SAMPLE_META } from \"./default-sprite.js\";\n\ntype SheetMeta = {\n id: string;\n name: string;\n cols: number;\n rows: number;\n fps: number;\n contentType: string;\n builtin?: boolean;\n createdAt: number;\n};\n\nconst INDEX_KEY = \"sprite:index\";\nconst metaKey = (id: string) => `sprite:meta:${id}`;\nconst imgKey = (id: string) => `sprite:img:${id}`;\n\nasync function getIndex(): Promise {\n try {\n const v = await blob.getJSON(INDEX_KEY);\n return Array.isArray(v) ? v : [];\n } catch {\n return [];\n }\n}\nconst setIndex = (ids: string[]) => blob.setJSON(INDEX_KEY, ids);\n\nasync function listSheets(): Promise {\n const ids = await getIndex();\n const out: SheetMeta[] = [];\n for (const id of ids) {\n try {\n const m = (await blob.getJSON(metaKey(id))) as SheetMeta | null;\n if (m) out.push(m);\n } catch {\n /* skip a missing/corrupt entry */\n }\n }\n out.sort((a, b) => b.createdAt - a.createdAt);\n return [SAMPLE_META as SheetMeta, ...out];\n}\n\nfunction clampInt(v: unknown, lo: number, hi: number, dflt: number): number {\n const n = parseInt(String(v ?? \"\"), 10);\n if (Number.isNaN(n)) return dflt;\n return Math.min(hi, Math.max(lo, n));\n}\n\nconst IMG_HEADERS = { \"cache-control\": \"public, max-age=31536000, immutable\" };\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/api/sheets\", async (c) => c.json(await listSheets()));\n\napp.get(\"/api/sheets/:id/image\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") {\n return new Response(decodeBase64(SAMPLE_B64), {\n headers: { ...IMG_HEADERS, \"content-type\": SAMPLE_META.contentType },\n });\n }\n try {\n const [meta, stored] = await Promise.all([\n blob.getJSON(metaKey(id)) as Promise,\n blob.getJSON(imgKey(id)) as Promise<{ b64: string } | null>,\n ]);\n if (!meta || !stored?.b64) return c.notFound();\n return new Response(decodeBase64(stored.b64), {\n headers: { ...IMG_HEADERS, \"content-type\": meta.contentType },\n });\n } catch {\n return c.notFound();\n }\n});\n\napp.post(\"/api/sheets\", async (c) => {\n let form: FormData;\n try {\n form = await c.req.formData();\n } catch {\n return c.json({ error: \"Expected multipart form data with a file\" }, 400);\n }\n const file = form.get(\"file\");\n if (!(file instanceof File)) return c.json({ error: \"No image file provided\" }, 400);\n\n const bytes = new Uint8Array(await file.arrayBuffer());\n if (bytes.byteLength === 0) return c.json({ error: \"That file is empty\" }, 400);\n if (bytes.byteLength > 8 * 1024 * 1024) {\n return c.json({ error: \"Image too large (8 MB max)\" }, 413);\n }\n\n const meta: SheetMeta = {\n id: crypto.randomUUID().slice(0, 8),\n name: String(form.get(\"name\") ?? \"\").trim() || file.name || \"Untitled sheet\",\n cols: clampInt(form.get(\"cols\"), 1, 64, 4),\n rows: clampInt(form.get(\"rows\"), 1, 64, 4),\n fps: clampInt(form.get(\"fps\"), 1, 60, 6),\n contentType: file.type || \"image/png\",\n createdAt: Date.now(),\n };\n\n await blob.setJSON(imgKey(meta.id), { b64: encodeBase64(bytes) });\n await blob.setJSON(metaKey(meta.id), meta);\n await setIndex([meta.id, ...(await getIndex())]);\n return c.json(meta, 201);\n});\n\napp.patch(\"/api/sheets/:id\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") return c.json({ error: \"The sample sheet can't be edited\" }, 400);\n const meta = (await blob.getJSON(metaKey(id))) as SheetMeta | null;\n if (!meta) return c.notFound();\n const body = await c.req.json().catch(() => ({} as Record));\n const next: SheetMeta = {\n ...meta,\n name: typeof body.name === \"string\" && body.name.trim() ? body.name.trim() : meta.name,\n cols: body.cols != null ? clampInt(body.cols, 1, 64, meta.cols) : meta.cols,\n rows: body.rows != null ? clampInt(body.rows, 1, 64, meta.rows) : meta.rows,\n fps: body.fps != null ? clampInt(body.fps, 1, 60, meta.fps) : meta.fps,\n };\n await blob.setJSON(metaKey(id), next);\n return c.json(next);\n});\n\napp.delete(\"/api/sheets/:id\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") return c.json({ error: \"The sample sheet can't be deleted\" }, 400);\n await Promise.all([\n blob.delete(imgKey(id)).catch(() => {}),\n blob.delete(metaKey(id)).catch(() => {}),\n ]);\n await setIndex((await getIndex()).filter((x) => x !== id));\n return c.json({ ok: true });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal(import.meta.url).links.self.val));\n\n// static assets\napp.get(\"/\", () => serveFile(\"/index.html\"));\napp.get(\"/app.js\", () => serveFile(\"/app.js\"));\napp.get(\"/style.css\", () => serveFile(\"/style.css\"));\n\nexport default app.fetch;\n",[145],"5fafbcc4-5e3c-11f1-8d50-1607ee4eb77e","index.html","edce9aba-5e38-11f1-9839-1607ee4eb77e",11,["D",1780374882139],"\n\n\n\n\nSprite Forge — sprite sheet animator\n\n\n\n\n\n\n\n\n

\n\n\n\n

Sample · walk cycle

\n \n \n \n

\n\n

\n \n frame 0 / 0\n — px\n

\n\n

\n Frames\n

\n \n \n

Click a frame to play that row.

\n\n \n

\n\n\n\n\n\n\n",[154],"b96c395a-5e3b-11f1-9366-1607ee4eb77e","default-sprite.js","e689993a-5e38-11f1-8147-1607ee4eb77e",9,["D",1780374603199],2,"// Built-in sample sprite sheet.\n// A 64x96 PNG: 4 columns x 4 rows (16x24 px cells) walk cycle, recovered to\n// native pixel resolution and embedded as base64 so the app works on first\n// load with no upload required.\n// Rows (top -> bottom): walk-down, walk-up, walk-side, walk-side(alt).\n\nexport const SAMPLE_META = {\n id: \"sample\",\n name: \"Sample \\u00b7 walk cycle\",\n cols: 4,\n rows: 4,\n fps: 6,\n contentType: \"image/png\",\n builtin: true,\n createdAt: 0,\n};\n\nexport const SAMPLE_B64 =\n \"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\";\n",[161],"ed7c8fe6-5e3c-11f1-bec0-1607ee4eb77e",["D",1780375120044],[28],"79a2fde0-5e3b-11f1-b956-1607ee4eb77e","README.md","79a2feda-5e3b-11f1-b956-1607ee4eb77e",8,["D",1780374496179],"# 🎞️ sprite-animator\n\nA browser-based sprite-sheet animator. Loads a default sheet, lets you set the grid\n(columns × rows), pick a row to play, and scrub the walk cycle. Drag-drop, paste, or\nupload any other sheet to animate it instead.\n\n**Live:** \n\n## Use it\n- **Columns / Rows** — match the sheet's grid. Frame size is derived automatically.\n- **Play** — animate a single row, or `All` to run every frame left-to-right, top-to-bottom.\n- **Direction** — `Loop` or `Ping-pong` (good for 3-frame RPG-Maker-style cycles).\n- **Speed / Zoom** — fps and nearest-neighbour scale (pixels stay crisp).\n- **Upload / drag-drop / paste** an image to swap sheets. Click a thumbnail to freeze a frame.\n\nThe bundled default is a 4×4 sheet — rows are **down / up / left / right**.\n\n## How it works\n\n```mermaid\nflowchart LR\n B[Browser] -->|GET /| M[main.ts · Hono]\n M -->|index.html| B\n M -->|app.js| B\n M -->|style.css| B\n M -->|default-sprite.js| B\n subgraph client [app.js]\n L[requestAnimationFrame loop] --> C[\"canvas drawImage()
source-rect per frame\"]\n end\n B --> client\n```\n\n| File | Role |\n| --- | --- |\n| `main.ts` | Hono server — serves the static files, `/source` redirect |\n| `index.html` | Markup + controls |\n| `style.css` | Styles |\n| `app.js` | All animation logic (geometry, loop, strip, upload/paste) |\n| `default-sprite.js` | Bundled default sheet as a base64 data-URI |\n\n## Swap the default sheet\nReplace the data-URI string exported from `default-sprite.js`. Anything an\n`` can load works (PNG/JPEG/GIF/WebP, data-URI or URL).\n",[172],"pulls","branches","forks","envVars",{"_185":61,"_187":61},"connections",{"_185":61,"_186":61},"count","unfilledCount","emptyCount",{"_43":171,"_32":172,"_30":173,"_136":-5,"_41":42,"_40":174,"_138":25,"_38":210,"_13":61,"_33":20,"_35":176,"_24":25,"_142":-5,"_195":211,"_27":212},{"_43":168,"_32":28,"_30":31,"_136":-5,"_41":42,"_40":14,"_138":122,"_38":207,"_13":149,"_33":34,"_35":37,"_24":25,"_142":-5,"_195":208,"_27":209},{"_43":160,"_32":161,"_30":162,"_136":-5,"_41":42,"_40":163,"_138":122,"_38":204,"_13":165,"_33":34,"_35":166,"_24":25,"_142":-5,"_195":205,"_27":206},{"_43":153,"_32":154,"_30":155,"_136":-5,"_41":42,"_40":156,"_138":25,"_38":201,"_13":149,"_33":20,"_35":158,"_24":25,"_142":-5,"_195":202,"_27":203},{"_43":144,"_32":145,"_30":146,"_136":-5,"_41":42,"_40":147,"_138":122,"_38":198,"_13":149,"_33":150,"_35":151,"_24":25,"_142":-5,"_195":199,"_27":200},{"_43":133,"_32":134,"_30":135,"_136":-5,"_41":42,"_40":137,"_138":25,"_38":194,"_13":140,"_33":20,"_35":141,"_24":25,"_142":-5,"_195":196,"_27":197},["D",1780374947185],"children",[],[134],["D",1780374699593],[],[145],["D",1780374882139],[],[154],["D",1780374603199],[],[161],["D",1780375120044],[],[28],["D",1780374496179],[],[172],["D",1780372844162],{"_95":94,"_103":99},{"_95":94,"_96":97,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_124":250,"_251":252,"_253":254,"_255":25,"_256":25,"_257":25,"_258":122,"_259":-5,"_260":-7,"_261":-7,"_262":61,"_263":25,"_264":25,"_265":-5,"_266":25,"_267":25,"_268":25,"_269":-5},"ENV",{"_221":222,"_223":224,"_225":85,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Sample · walk cycle

Add a sprite sheet

Diff · v15