import React, { useState, useRef, useEffect } from "react"; import { Pencil, Eraser, Undo2, RotateCcw, GalleryHorizontal, Calendar, ArrowLeft } from 'lucide-react'; // Platform persistent storage: all drawings (one per date) const STORAGE_KEY = "emojiDrawingGallery"; function getTodayDateStr() { const now = new Date(); return now.toISOString().slice(0, 10); } function randomEmojis(count = 3) { // 80 themed emoji set (covers nature, objects, faces, activity, etc.) const set = [ '😀','😱','🤣','😎','😈','🤓','😜','😍','🤩','🥳','🥺','👻','💩','🤖','👽', '🦄','🐶','🐸','🐧','🦉','🐳','🐘','🦖','🐝','🐙','🐢','🦋','🌵','🌸','🌈', '🌞','⚡','🔥','💧','🍕','🍔','🍟','🍣','🍜','🍉','🍩','🍦','🍿','🥨','🍪', '⚽','🎸','🎲','🎯','🎹','🎨','🎤','🎮','🎬','💡','📚','🔮','🕹️','📷','🎧', '🚲','🚗','✈️','🚀','🛸','🏰','🪐','🛒','💎','🌆','🏝️','🕰️','🧩','🎁','🔔', '📦','📝','🎈','🔑','🧸','📺','🎩','🔫' ]; let arr = []; while (arr.length < count) { const emoji = set[Math.floor(Math.random() * set.length)]; if (!arr.includes(emoji)) arr.push(emoji); } return arr; } function randomPromptFor(dateStr) { // Deterministic (same emojis for same date) so all users have the same daily challenge let hash = 0; for (let i = 0; i < dateStr.length; i++) hash += dateStr.charCodeAt(i) * (i + 17); const set = [ '😀','😱','🤣','😎','😈','🤓','😜','😍','🤩','🥳','🥺','👻','💩','🤖','👽', '🦄','🐶','🐸','🐧','🦉','🐳','🐘','🦖','🐝','🐙','🐢','🦋','🌵','🌸','🌈', '🌞','⚡','🔥','💧','🍕','🍔','🍟','🍣','🍜','🍉','🍩','🍦','🍿','🥨','🍪', '⚽','🎸','🎲','🎯','🎹','🎨','🎤','🎮','🎬','💡','📚','🔮','🕹️','📷','🎧', '🚲','🚗','✈️','🚀','🛸','🏰','🪐','🛒','💎','🌆','🏝️','🕰️','🧩','🎁','🔔', '📦','📝','🎈','🔑','🧸','📺','🎩','🔫' ]; let arr = []; let h = hash; for (let i = 0; i < 3; i++) { const idx = h % set.length; arr.push(set[idx]); h = Math.floor(h / 4) + 29; } // Remove dups return [...new Set(arr)]; } function dataURLtoImage(src) { return new Promise(resolve => { const img = new window.Image(); img.onload = () => resolve(img); img.src = src; }); } function calculateStreak(entries) { // Entries: [{date, ...}] if (!entries.length) return 0; const days = entries.map(e => e.date).sort((a,b) => b.localeCompare(a)); let streak = 0; let d = new Date(); for (let i = 0; i < days.length; i++) { const dayStr = d.toISOString().slice(0,10); if (days[i] === dayStr) { streak++; d.setDate(d.getDate() - 1); } else if (i===0) break; else break; } return streak; } function DrawingCanvas({ onSave, initialImg }) { // Touch/pointer drawing canvas (SVG overlayed on white bg). Only tracks lines, simple black/eraser. const ref = useRef(); const [lines, setLines] = useState([]); const [drawing, setDrawing] = useState(false); const [mode, setMode] = useState("draw"); // draw/erase const [curr, setCurr] = useState([]); // current path // For undo function handleUndo() { setLines(lines.slice(0, -1)); } function clearAll() { setLines([]); } const width = 340, height = 340; // fit mobile function pointerDown(e) { e.preventDefault(); const rect = ref.current.getBoundingClientRect(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; setDrawing(true); setCurr([[clientX - rect.left, clientY - rect.top]]); } function pointerMove(e) { if (!drawing) return; const rect = ref.current.getBoundingClientRect(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; setCurr([...curr, [clientX - rect.left, clientY - rect.top]]); } function pointerUp() { if (!drawing) return; setDrawing(false); if (curr.length > 1) setLines([...lines, { points: curr, mode }]); setCurr([]); } function saveImage() { // Render SVG as data URL (for now) const svg = ref.current; const data = `'; const url = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(data)))}`; onSave(url); } // Touch events for mobile, pointer events for desktop useEffect(() => { function stop() { setDrawing(false); setCurr([]); } window.addEventListener("pointerup", stop); window.addEventListener("touchend", stop); return () => { window.removeEventListener("pointerup", stop); window.removeEventListener("touchend", stop); }; }, [drawing, curr]); return (

); } export default function App() { // Load gallery from shared storage const [gallery, setGallery] = useSharedStorage(STORAGE_KEY, []); const [tab, setTab] = useState("today"); // 'today' | 'gallery' const today = getTodayDateStr(); const todayPrompt = randomPromptFor(today); const todayEntry = gallery.find(e=>e.date===today); const [flash, setFlash] = useState(false); // For full image preview const [previewImg, setPreviewImg] = useState(null); // Streak calculation const streak = calculateStreak(gallery); // Add new drawing function handleSave(imgUrl) { // Overwrite any previous for today const item = { date: today, prompt: todayPrompt, img: imgUrl }; setGallery([ item, ...gallery.filter(e=>e.date!==today), ]); setFlash(true); setTimeout(()=>setFlash(false),1200); setTab("gallery"); } // Allow users to swipe between tabs (for mobile gesture feel) // (Omitted for brevity, just use buttons here) // Group previous by month function monthLabel(dateStr) { const d = new Date(dateStr); return d.toLocaleString(undefined, { year:"numeric", month:"long" }); } const galleryByMonth = gallery.reduce((acc, e) => { const m = monthLabel(e.date); if (!acc[m]) acc[m]=[]; acc[m].push(e); return acc; }, {}); return (

{/* Today tab */} {tab==="today" && ( <>

{todayPrompt.map((e,i) => ( {e} ))}

Today's Challenge

{todayEntry ? (

setPreviewImg(todayEntry.img)} style={{maxHeight:'340px'}} />

✓ Completed!

You can view or redo today's drawing.

) : (

{flash && (

Saved!

)}

🔥{streak} Day Streak

Keep your streak by drawing daily!

)} {/* Gallery tab */} {tab==="gallery" && ( <>

Your Gallery

{gallery.length===0 ? (

🎨

No drawings yet.
Start today's challenge!

) : (

{Object.entries(galleryByMonth).map(([month,items]) => (

{month}

{items.map(item => (

setPreviewImg(item.img)} />

{item.prompt.map((e,i) => {e})}

))}

)} )} {previewImg && (

setPreviewImg(null)} />

)}

); }