🎮 GIF to Sprite Tool

\n \n {!gifFile && !loading ? (\n e.preventDefault()}\n onClick={() => fileInputRef.current?.click()}\n >\n \n

\n 📁\n

Drop a GIF here or click to upload

\n ) : (\n <>\n

\n \n {frames.length > 0 && (\n <>\n \n \n \n )}\n \n {frames.length} frames • {selectedFrames.size} selected\n \n \n

\n\n {loading && (\n

{progress}

\n {frames.length > 0 && (\n

({frames.length} frames extracted so far)

\n )}\n

\n )}\n\n {frames.length > 0 && (\n <>\n

Frames (click to select, shift+click for range)

\n {frames.map((frame, i) => (\n {\n if (e.shiftKey && selectedFrames.size > 0) {\n const lastSelected = Math.max(...Array.from(selectedFrames));\n selectRange(lastSelected, i);\n } else {\n toggleFrame(i);\n }\n }}\n >\n {`Frame

\n {i}\n {selectedFrames.has(i) && ✓}\n

\n ))}\n

\n \n\n {sprites.length > 0 && (\n

Sprites Gallery

\n {sprites.map(sprite => (\n deleteSprite(sprite.id)}\n onUpdateName={(name) => updateSpriteName(sprite.id, name)}\n onDownload={() => downloadSprite(sprite)}\n onTogglePreview={() => togglePreview(sprite.id)}\n isEditing={editingSprite === sprite.id}\n setEditing={(editing) => setEditingSprite(editing ? sprite.id : null)}\n />\n ))}\n

\n )}\n \n )}\n \n )}\n \n );\n}\n\nfunction SpriteCard({ \n sprite, \n frames, \n onDelete, \n onUpdateName, \n onDownload,\n onTogglePreview,\n isEditing,\n setEditing\n}: {\n sprite: Sprite;\n frames: Frame[];\n onDelete: () => void;\n onUpdateName: (name: string) => void;\n onDownload: () => void;\n onTogglePreview: () => void;\n isEditing: boolean;\n setEditing: (editing: boolean) => void;\n}) {\n const [currentFrame, setCurrentFrame] = useState(0);\n const [localName, setLocalName] = useState(sprite.name);\n \n useEffect(() => {\n if (!sprite.previewPlaying) return;\n \n const timer = setTimeout(() => {\n setCurrentFrame(prev => (prev + 1) % sprite.frames.length);\n }, 100);\n \n return () => clearTimeout(timer);\n }, [sprite.previewPlaying, currentFrame, sprite.frames.length]);\n\n useEffect(() => {\n setLocalName(sprite.name);\n }, [sprite.name]);\n\n const spriteFrames = sprite.frames.map(i => frames[i]);\n const displayFrame = spriteFrames[currentFrame];\n\n return (\n

\n {isEditing ? (\n setLocalName(e.target.value)}\n onBlur={() => {\n onUpdateName(localName);\n setEditing(false);\n }}\n onKeyDown={e => {\n if (e.key === \"Enter\") {\n onUpdateName(localName);\n setEditing(false);\n }\n }}\n autoFocus\n />\n ) : (\n setEditing(true)}\n >\n {sprite.name} ✏️\n \n )}\n \n

\n \n

\n {displayFrame && (\n $\"Preview\"\n$ \n )}\n

\n \n

\n {sprite.frames.length} frames [{sprite.frames.length > 6 \n ? `${sprite.frames.slice(0, 3).join(\", \")}...${sprite.frames.slice(-2).join(\", \")}`\n : sprite.frames.join(\", \")}]\n

\n \n

\n \n \n

\n );\n}\n\nconst styles: Record = {\n container: {\n fontFamily: \"'IBM Plex Mono', monospace\",\n maxWidth: 1200,\n margin: \"0 auto\",\n padding: 24,\n minHeight: \"100vh\",\n background: \"linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)\",\n color: \"#e0e0e0\"\n },\n title: {\n fontSize: 32,\n textAlign: \"center\",\n marginBottom: 32,\n background: \"linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3)\",\n WebkitBackgroundClip: \"text\",\n WebkitTextFillColor: \"transparent\",\n backgroundClip: \"text\"\n },\n dropzone: {\n border: \"3px dashed #48dbfb\",\n borderRadius: 16,\n padding: 64,\n textAlign: \"center\",\n cursor: \"pointer\",\n background: \"rgba(72, 219, 251, 0.1)\",\n transition: \"all 0.3s ease\"\n },\n dropzoneContent: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: 16\n },\n dropIcon: {\n fontSize: 64\n },\n controls: {\n display: \"flex\",\n gap: 12,\n alignItems: \"center\",\n marginBottom: 24,\n flexWrap: \"wrap\"\n },\n button: {\n padding: \"10px 16px\",\n borderRadius: 8,\n border: \"none\",\n background: \"#2d3436\",\n color: \"#fff\",\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n fontSize: 13,\n transition: \"all 0.2s ease\"\n },\n primaryButton: {\n background: \"linear-gradient(135deg, #6c5ce7, #a29bfe)\"\n },\n info: {\n color: \"#a0a0a0\",\n flex: 1,\n textAlign: \"right\",\n paddingRight: 12\n },\n loading: {\n textAlign: \"center\",\n padding: 48,\n fontSize: 18\n },\n spinner: {\n width: 40,\n height: 40,\n border: \"4px solid #2d3436\",\n borderTop: \"4px solid #48dbfb\",\n borderRadius: \"50%\",\n animation: \"spin 1s linear infinite\",\n margin: \"0 auto 16px\"\n },\n subProgress: {\n fontSize: 14,\n color: \"#888\",\n marginTop: 8\n },\n framesSection: {\n marginBottom: 32\n },\n sectionTitle: {\n fontSize: 18,\n marginBottom: 16,\n color: \"#feca57\"\n },\n framesGrid: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(auto-fill, minmax(70px, 1fr))\",\n gap: 8\n },\n frame: {\n position: \"relative\",\n background: \"#2d3436\",\n borderRadius: 6,\n padding: 4,\n cursor: \"pointer\",\n border: \"2px solid transparent\",\n transition: \"all 0.15s ease\",\n aspectRatio: \"1\"\n },\n frameSelected: {\n border: \"2px solid #48dbfb\",\n background: \"rgba(72, 219, 251, 0.2)\"\n },\n frameImg: {\n width: \"100%\",\n height: \"100%\",\n objectFit: \"contain\",\n display: \"block\",\n imageRendering: \"auto\"\n },\n frameLabel: {\n position: \"absolute\",\n bottom: 2,\n right: 2,\n fontSize: 9,\n background: \"rgba(0,0,0,0.8)\",\n padding: \"1px 4px\",\n borderRadius: 3\n },\n checkmark: {\n position: \"absolute\",\n top: 2,\n right: 2,\n fontSize: 12,\n color: \"#48dbfb\",\n textShadow: \"0 0 4px #000\"\n },\n spritesSection: {\n marginTop: 32\n },\n spritesGrid: {\n display: \"grid\",\n gridTemplateColumns: \"repeat(auto-fill, minmax(260px, 1fr))\",\n gap: 16\n },\n spriteCard: {\n background: \"linear-gradient(145deg, #2d3436, #1e272e)\",\n borderRadius: 12,\n padding: 14,\n border: \"1px solid #3d3d3d\"\n },\n spriteHeader: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n marginBottom: 10\n },\n spriteName: {\n fontWeight: \"bold\",\n cursor: \"pointer\",\n color: \"#ff9ff3\",\n fontSize: 14\n },\n nameInput: {\n background: \"#1a1a2e\",\n border: \"1px solid #48dbfb\",\n borderRadius: 4,\n padding: \"4px 8px\",\n color: \"#fff\",\n fontFamily: \"inherit\",\n fontSize: 13,\n width: \"70%\"\n },\n deleteBtn: {\n background: \"transparent\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: 16\n },\n previewArea: {\n background: \"repeating-conic-gradient(#404040 0% 25%, #303030 0% 50%) 50% / 12px 12px\",\n borderRadius: 8,\n padding: 12,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n minHeight: 100\n },\n previewImg: {\n maxWidth: \"100%\",\n maxHeight: 120,\n imageRendering: \"auto\"\n },\n spriteInfo: {\n fontSize: 11,\n color: \"#888\",\n marginTop: 8,\n textAlign: \"center\"\n },\n spriteActions: {\n display: \"flex\",\n gap: 8,\n marginTop: 10\n },\n actionBtn: {\n flex: 1,\n padding: \"8px 10px\",\n borderRadius: 6,\n border: \"none\",\n background: \"#3d3d3d\",\n color: \"#fff\",\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n fontSize: 11,\n transition: \"all 0.2s ease\"\n },\n activeBtn: {\n background: \"#48dbfb\",\n color: \"#000\"\n }\n};\n\nfunction client() {\n // Add keyframe animation\n const style = document.createElement(\"style\");\n style.textContent = `\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n `;\n document.head.appendChild(style);\n \n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n\n\n GIF to Sprite Tool\n \n \n \n \n\n\n

\n \n\n`, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n","deleted","label",[99],"permalink","https://www.val.town/x/dcm31/gifToSpriteTool/code/main.tsx","extension","actionData","errors"]