4import { adjectives, animals, colors, Config, uniqueNamesGenerator } from "https://esm.sh/unique-names-generator";
5
6const DEFAULT_IMAGE_NAME = "untitled-<d><d>-<word>";
7const DEFAULT_SIZE = { width: 32, height: 32 };
8const SIZES = [
69 setSize,
70 clearCanvas,
71 saveImage,
72 imageName,
73 setImageName,
74 downloadImage,
75 savedImages,
76 loadImage,
77 deleteImage,
78 setShowSettings,
79 brushSize,
101 <div className="control-group">
102 <button onClick={clearCanvas}>Clear</button>
103 <button onClick={saveImage}>Save</button>
104 </div>
105 <div className="control-group">
106 <input
107 type="text"
108 value={imageName}
109 onChange={(e) => setImageName(e.target.value)}
110 placeholder="Image name"
111 />
112 <button onClick={() => downloadImage(imageName)} className="download-btn">
113 <span className="download-icon">⬇️</span>
114 </button>
118 onChange={(e) => {
119 if (e.target.value) {
120 loadImage(e.target.value);
121 e.target.value = "";
122 }
123 }}
124 >
125 <option value="">Load image</option>
126 {savedImages.map((name) => (
127 <option key={name} value={name}>
128 {name}
133 onChange={(e) => {
134 if (e.target.value) {
135 deleteImage(e.target.value);
136 e.target.value = "";
137 }
138 }}
139 >
140 <option value="">Delete image</option>
141 {savedImages.map((name) => (
142 <option key={name} value={name}>
143 {name}
158 <h2>Settings</h2>
159 <label>
160 Default Image Name:
161 <input
162 type="text"
196 const [isDrawing, setIsDrawing] = useState(false);
197 const [isPainting, setIsPainting] = useState(false);
198 const [imageName, setImageName] = useState(DEFAULT_IMAGE_NAME);
199 const [savedImages, setSavedImages] = useState<string[]>([]);
200 const [showSettings, setShowSettings] = useState(false);
201 const [settings, setSettings] = useState({
202 defaultName: DEFAULT_IMAGE_NAME,
203 colorScheme: "pitaya",
204 });
207
208 useEffect(() => {
209 const saved = localStorage.getItem("savedImagesList");
210 if (saved) {
211 setSavedImages(JSON.parse(saved));
212 }
213 const savedSettings = localStorage.getItem("settings");
228
229 useEffect(() => {
230 setImageName(generateName(settings.defaultName));
231 }, [settings.defaultName]);
232
308 }, [size]);
309
310 const saveImage = useCallback(() => {
311 const imageData = JSON.stringify({ name: imageName, size, pixels });
312 localStorage.setItem(`image_${imageName}`, imageData);
313 setSavedImages(prev => {
314 const newSavedImages = [...new Set([...prev, imageName])];
315 localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages));
316 return newSavedImages;
317 });
318 setImageName(generateName(settings.defaultName));
319 }, [imageName, size, pixels, settings.defaultName]);
320
321 const loadImage = useCallback((name: string) => {
322 if (confirm(`Are you sure you want to load "${name}"? This will overwrite your current work.`)) {
323 const imageData = localStorage.getItem(`image_${name}`);
324 if (imageData) {
325 const { size: loadedSize, pixels: loadedPixels } = JSON.parse(imageData);
326 setSize(loadedSize);
327 setPixels(loadedPixels);
328 setImageName(name);
329 }
330 }
331 }, []);
332
333 const deleteImage = useCallback((name: string) => {
334 if (confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)) {
335 localStorage.removeItem(`image_${name}`);
336 setSavedImages(prev => {
337 const newSavedImages = prev.filter(img => img !== name);
338 localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages));
339 return newSavedImages;
340 });
341 }
342 }, []);
343
344 const downloadImage = useCallback((customName: string) => {
345 const canvas = document.createElement("canvas");
346 canvas.width = size.width;
364 const fileName = `${customName || generateName(settings.defaultName)}-1bit-${size.width}x${size.height}.bmp`;
365 link.download = fileName;
366 link.href = canvas.toDataURL("image/bmp");
367 link.click();
368 }, [pixels, size, settings.defaultName]);
401 setSize={setSize}
402 clearCanvas={clearCanvas}
403 saveImage={saveImage}
404 imageName={imageName}
405 setImageName={setImageName}
406 downloadImage={downloadImage}
407 savedImages={savedImages}
408 loadImage={loadImage}
409 deleteImage={deleteImage}
410 setShowSettings={setShowSettings}
411 brushSize={brushSize}
589 appearance: none;
590 padding-right: 30px;
591 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");
592 background-repeat: no-repeat;
593 background-position: right 10px center;
