/** @jsxImportSource https://esm.sh/react */ import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { adjectives, animals, colors, Config, uniqueNamesGenerator } from "https://esm.sh/unique-names-generator"; const DEFAULT_IMAGE_NAME = "untitled--"; const DEFAULT_SIZE = { width: 32, height: 32 }; const SIZES = [ { width: 16, height: 16 }, { width: 32, height: 32 }, { width: 64, height: 64 }, { width: 128, height: 128 }, { width: 64, height: 32 }, { width: 128, height: 32 }, ]; const BRUSH_SIZES = { Small: 1, Medium: 2, Large: 4, XL: 8 }; const COLOR_SCHEMES = { green: { bg: "#000", text: "#0f0", border: "#0f0", shadow: "#0f0" }, blue: { bg: "#000", text: "#0af", border: "#0af", shadow: "#0af" }, amber: { bg: "#000", text: "#fa0", border: "#fa0", shadow: "#fa0" }, pitaya: { bg: "#000", text: "#FF1493", border: "#FF69B4", shadow: "#FF69B4" }, }; const nameConfig: Config = { dictionaries: [adjectives, colors, animals], separator: "-", length: 1, }; function generateName(pattern: string): string { return pattern.replace(/<(\w+)>/g, (match, p1) => { switch (p1) { case "d": return Math.floor(Math.random() * 10).toString(); case "word": return uniqueNamesGenerator(nameConfig); case "date": return new Date().toISOString().split("T")[0]; default: return match; } }); } const Canvas = ({ size, pixels, handleStart, handleMove, handleEnd }) => { const pixelSize = Math.min(10, 320 / Math.max(size.width, size.height)); return (

{pixels.map((pixel, index) => )}

); }; const Controls = ({ size, setSize, clearCanvas, saveImage, imageName, setImageName, downloadImage, savedImages, loadImage, deleteImage, setShowSettings, brushSize, setBrushSize, }) => (

setImageName(e.target.value)} placeholder="Image name" />

); const SettingsModal = ({ showSettings, settings, updateSettings, setShowSettings }) => ( showSettings && (

Settings

Default Image Name: updateSettings({ defaultName: e.target.value })} />

Use <d> for a random digit, <word> for a random word, and{" "} <date> for the current date.

Color Scheme:

) ); const Pixel = ({ active }) =>

; function App() { const [size, setSize] = useState<{ width: number; height: number }>(DEFAULT_SIZE); const [pixels, setPixels] = useState(() => new Array(DEFAULT_SIZE.width * DEFAULT_SIZE.height).fill(false) ); const [isDrawing, setIsDrawing] = useState(false); const [isPainting, setIsPainting] = useState(false); const [imageName, setImageName] = useState(DEFAULT_IMAGE_NAME); const [savedImages, setSavedImages] = useState([]); const [showSettings, setShowSettings] = useState(false); const [settings, setSettings] = useState({ defaultName: DEFAULT_IMAGE_NAME, colorScheme: "pitaya", }); const [brushSize, setBrushSize] = useState(BRUSH_SIZES.Small); const startPositionRef = useRef<{ x: number; y: number } | null>(null); useEffect(() => { const saved = localStorage.getItem("savedImagesList"); if (saved) { setSavedImages(JSON.parse(saved)); } const savedSettings = localStorage.getItem("settings"); if (savedSettings) { setSettings(JSON.parse(savedSettings)); } }, []); useEffect(() => { setPixels(prev => { const newLength = size.width * size.height; if (prev.length !== newLength) { return new Array(newLength).fill(false); } return prev; }); }, [size]); useEffect(() => { setImageName(generateName(settings.defaultName)); }, [settings.defaultName]); const getPixelIndex = useCallback((event: React.MouseEvent | React.TouchEvent) => { const canvas = event.currentTarget as HTMLDivElement; const rect = canvas.getBoundingClientRect(); const clientX = "touches" in event ? event.touches[0].clientX : event.clientX; const clientY = "touches" in event ? event.touches[0].clientY : event.clientY; const x = Math.floor(((clientX - rect.left) / rect.width) * size.width); const y = Math.floor(((clientY - rect.top) / rect.height) * size.height); return { index: y * size.width + x, x: clientX, y: clientY }; }, [size]); const setPixel = useCallback((index: number, value: boolean) => { if (index >= 0 && index < size.width * size.height) { setPixels(prev => { const newPixels = [...prev]; const x = index % size.width; const y = Math.floor(index / size.width); for (let i = 0; i < brushSize; i++) { for (let j = 0; j < brushSize; j++) { const newIndex = (y + i) * size.width + (x + j); if (newIndex >= 0 && newIndex < size.width * size.height) { newPixels[newIndex] = value; } } } return newPixels; }); } }, [size, brushSize]); const handleStart = useCallback((event: React.MouseEvent | React.TouchEvent) => { event.preventDefault(); const { index, x, y } = getPixelIndex(event); startPositionRef.current = { x, y }; if (index >= 0 && index < size.width * size.height) { const currentPixelState = pixels[index]; setIsPainting(!currentPixelState); setIsDrawing(true); } }, [getPixelIndex, pixels, size]); const handleMove = useCallback((event: React.MouseEvent | React.TouchEvent) => { event.preventDefault(); if (isDrawing && startPositionRef.current) { const { index, x, y } = getPixelIndex(event); const dx = x - startPositionRef.current.x; const dy = y - startPositionRef.current.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance > 5) { // Threshold for considering it a drag setPixel(index, isPainting); startPositionRef.current = { x, y }; } } }, [isDrawing, getPixelIndex, setPixel, isPainting]); const handleEnd = useCallback((event: React.MouseEvent | React.TouchEvent) => { if (isDrawing && startPositionRef.current) { const { index } = getPixelIndex(event); setPixel(index, isPainting); } setIsDrawing(false); startPositionRef.current = null; }, [isDrawing, getPixelIndex, setPixel, isPainting]); useEffect(() => { document.addEventListener("mouseup", handleEnd); document.addEventListener("touchend", handleEnd); return () => { document.removeEventListener("mouseup", handleEnd); document.removeEventListener("touchend", handleEnd); }; }, [handleEnd]); const clearCanvas = useCallback(() => { setPixels(new Array(size.width * size.height).fill(false)); }, [size]); const saveImage = useCallback(() => { const imageData = JSON.stringify({ name: imageName, size, pixels }); localStorage.setItem(`image_${imageName}`, imageData); setSavedImages(prev => { const newSavedImages = [...new Set([...prev, imageName])]; localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages)); return newSavedImages; }); setImageName(generateName(settings.defaultName)); }, [imageName, size, pixels, settings.defaultName]); const loadImage = useCallback((name: string) => { if (confirm(`Are you sure you want to load "${name}"? This will overwrite your current work.`)) { const imageData = localStorage.getItem(`image_${name}`); if (imageData) { const { size: loadedSize, pixels: loadedPixels } = JSON.parse(imageData); setSize(loadedSize); setPixels(loadedPixels); setImageName(name); } } }, []); const deleteImage = useCallback((name: string) => { if (confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)) { localStorage.removeItem(`image_${name}`); setSavedImages(prev => { const newSavedImages = prev.filter(img => img !== name); localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages)); return newSavedImages; }); } }, []); const downloadImage = useCallback((customName: string) => { const canvas = document.createElement("canvas"); canvas.width = size.width; canvas.height = size.height; const ctx = canvas.getContext("2d"); if (!ctx) return; ctx.fillStyle = "black"; ctx.fillRect(0, 0, size.width, size.height); ctx.fillStyle = "white"; pixels.forEach((pixel, index) => { if (pixel) { const x = index % size.width; const y = Math.floor(index / size.width); ctx.fillRect(x, y, 1, 1); } }); const link = document.createElement("a"); const fileName = `${customName || generateName(settings.defaultName)}-1bit-${size.width}x${size.height}.bmp`; link.download = fileName; link.href = canvas.toDataURL("image/bmp"); link.click(); }, [pixels, size, settings.defaultName]); const updateSettings = useCallback((newSettings: Partial) => { setSettings(prev => { const updated = { ...prev, ...newSettings }; localStorage.setItem("settings", JSON.stringify(updated)); return updated; }); }, []); const colorScheme = COLOR_SCHEMES[settings.colorScheme as keyof typeof COLOR_SCHEMES]; return (

1-Bit Bitmap Editor

); } function client() { try { const root = createRoot(document.getElementById("root")); root.render( , ); } catch (error) { console.error("An error occurred while rendering the app:", error); } } if (typeof document !== "undefined") { try { client(); } catch (error) { console.error("An error occurred in the client code:", error); } } async function server(request: Request): Promise { return new Response( ` 1-Bit Bitmap Editor

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` :root { --bg-color: #000; --text-color: #0f0; --border-color: #0f0; --shadow-color: #0f0; } body { font-family: 'Press Start 2P', cursive; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; background-color: var(--bg-color); color: var(--text-color); } .container { text-align: center; max-width: 100%; } .retro-border { border: 4px solid var(--border-color); padding: 20px; background-color: var(--bg-color); box-shadow: 0 0 10px var(--shadow-color), 0 0 20px var(--shadow-color), 0 0 30px var(--shadow-color); } h1 { margin-bottom: 20px; font-size: 24px; text-shadow: 2px 2px var(--shadow-color); } .canvas { display: grid; gap: 1px; margin: 0 auto 20px; border: 2px solid var(--border-color); background-color: var(--bg-color); user-select: none; touch-action: none; overflow: hidden; } .pixel { width: 100%; height: 100%; background-color: var(--bg-color); border: 1px solid var(--border-color); } .pixel.active { background-color: var(--text-color); box-shadow: 0 0 2px var(--shadow-color), 0 0 4px var(--shadow-color); } .controls { display: flex; flex-direction: column; gap: 10px; } .control-group { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; } .control-group select, .control-group button, .control-group input[type="text"] { flex: 1; min-width: 0; } .control-group input[type="text"] { flex: 2; } button, select, input[type="text"] { padding: 10px; font-size: 16px; font-family: 'Press Start 2P', cursive; background-color: var(--bg-color); color: var(--text-color); border: 2px solid var(--border-color); } button:hover, select:hover { background-color: var(--text-color); color: var(--bg-color); cursor: pointer; } select { appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%230f0' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .download-icon { display: inline; } .control-group .download-btn { flex: 0.5; max-width: 10%; } .settings-btn { margin-top: 10px; } .view-source { display: inline-block; margin-top: 20px; color: var(--text-color); text-decoration: none; } .view-source:hover { text-decoration: underline; text-shadow: 0 0 5px var(--shadow-color); } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .modal-content { background-color: var(--bg-color); padding: 20px; border: 2px solid var(--border-color); box-shadow: 0 0 10px var(--shadow-color); max-width: 80%; } .modal-content h2 { margin-top: 0; } .modal-content label { display: block; margin-bottom: 10px; } .modal-content input, .modal-content select { width: 100%; margin-top: 5px; } .help-text { font-size: 12px; margin-top: 5px; } code { background-color: var(--text-color); color: var(--bg-color); padding: 2px 4px; border-radius: 3px; } @media (max-width: 480px) { body { padding: 10px; } .retro-border { padding: 10px; } h1 { font-size: 18px; } .canvas { max-width: 100vw; max-height: 100vw; } .control-group { flex-wrap: wrap; } .control-group select, .control-group button, .control-group input[type="text"] { flex-basis: calc(50% - 5px); font-size: 12px; } .download-text { display: none; } .download-icon { display: inline; } } `; export default server;

design32x32bitmap

Version 5