[{"_1":2,"_137":-5,"_138":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_135":-5,"_131":-5,"_136":-5},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_57":58,"_59":60,"_61":62,"_63":64,"_65":60,"_66":60,"_67":60,"_68":60,"_69":60,"_70":60,"_71":17,"_72":17,"_73":74,"_75":76,"_77":78,"_79":80,"_81":82,"_97":-5,"_98":17,"_99":100,"_131":32,"_132":133,"_134":17},"id","cee96bac90b58299a483","isMyApp",false,"name","chromacount","description","Upload any image and watch as chromacount magically detects and counts every unique color, rewarding you with 1000 points per hue! Challenge friends to find the most color-rich images or create your own rainbow masterpieces to break the high score.","brief","","isLive",true,"isPublic","tags",[29,30],"💰","👑","cover","https://cdn.dev.fun/snapshot/cee96bac90b58299a483/43147_8f49e1f9.webp","cdnUrl","https://cdn.dev.fun/app/cee96bac90b58299a483/43147","createdAt",["D",1743813482150],"updatedAt",["D",1743816002606],"lastCommitId",["B","43147"],"tier",1,"credits",22,{"_14":46,"_47":48,"_49":48,"_50":51,"_52":48,"_53":54,"_55":56},"63b283f7-3569-459e-9cac-c1ec6019c0a7","uniqueId","apacx","username","solanaWallet","49N6wBSDsm1LbfBMvF6C784n2Jv2yMY25AqBi4gFmcRq","displayName","bio","Looking for a job as a full-time UX Designer","avatar","https://cdn.dev.fun/avatar/63b283f7-3569-459e-9cac-c1ec6019c0a7/a79d0a47.webp","commitCount",8,"forkCount",0,"likeCount",4,"runsCount",289,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","code","import { useState, useRef, useEffect } from 'react';\nimport { Award, Share2, ImagePlus, RefreshCw } from 'lucide-react';\nexport default function App() {\n const [image, setImage] = useState(null);\n const [uniqueColors, setUniqueColors] = useState(0);\n const [score, setScore] = useState(0);\n const [loading, setLoading] = useState(false);\n const [showColorPalette, setShowColorPalette] = useState(false);\n const [colorPalette, setColorPalette] = useState([]);\n const [highScore, setHighScore] = useState(0);\n const [showConfetti, setShowConfetti] = useState(false);\n const [animation, setAnimation] = useState('');\n const canvasRef = useRef(null);\n const fileInputRef = useRef(null);\n useEffect(() => {\n const savedHighScore = localStorage.getItem('chromacount-highscore');\n if (savedHighScore) {\n setHighScore(parseInt(savedHighScore, 10));\n }\n }, []);\n useEffect(() => {\n if (score > highScore) {\n setHighScore(score);\n localStorage.setItem('chromacount-highscore', score.toString());\n setShowConfetti(true);\n setTimeout(() => setShowConfetti(false), 5000);\n }\n }, [score, highScore]);\n const handleImageUpload = e => {\n const file = e.target.files[0];\n if (!file) return;\n setLoading(true);\n setAnimation('scale-in');\n const reader = new FileReader();\n reader.onload = event => {\n const img = new Image();\n img.onload = () => {\n setImage(img);\n countColors(img);\n };\n img.src = event.target.result;\n };\n reader.readAsDataURL(file);\n };\n const countColors = img => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n let width = img.width;\n let height = img.height;\n const maxSize = 800;\n if (width > maxSize || height > maxSize) {\n const ratio = Math.min(maxSize / width, maxSize / height);\n width = width * ratio;\n height = height * ratio;\n }\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, 0, 0, width, height);\n const imageData = ctx.getImageData(0, 0, width, height);\n const data = imageData.data;\n const colorSet = new Set();\n const colorArray = [];\n const totalPixels = width * height;\n const maxPixelsToProcess = 100000;\n let pixelStep = 1;\n if (totalPixels > maxPixelsToProcess) {\n pixelStep = Math.ceil(totalPixels / maxPixelsToProcess);\n }\n for (let y = 0; y < height; y += Math.ceil(pixelStep / width) || 1) {\n for (let x = 0; x < width; x += Math.ceil(pixelStep / height) || 1) {\n const i = (y * width + x) * 4;\n if (i < data.length) {\n const r = data[i];\n const g = data[i + 1];\n const b = data[i + 2];\n const colorKey = `${r},${g},${b}`;\n if (!colorSet.has(colorKey)) {\n colorSet.add(colorKey);\n colorArray.push(`rgb(${r},${g},${b})`);\n }\n }\n }\n }\n let displayColors = [...colorArray];\n if (displayColors.length > 100) {\n displayColors = sampleColors(displayColors, 100);\n }\n const uniqueColorCount = colorSet.size;\n setUniqueColors(uniqueColorCount);\n setScore(uniqueColorCount * 1000);\n setColorPalette(displayColors);\n setShowColorPalette(true);\n setLoading(false);\n setAnimation('bounce');\n };\n const sampleColors = (colors, sampleSize) => {\n const result = [];\n const step = Math.max(1, Math.floor(colors.length / sampleSize));\n for (let i = 0; i < colors.length && result.length < sampleSize; i += step) {\n result.push(colors[i]);\n }\n return result;\n };\n const resetGame = () => {\n setImage(null);\n setUniqueColors(0);\n setScore(0);\n setShowColorPalette(false);\n setColorPalette([]);\n setAnimation('');\n if (fileInputRef.current) {\n fileInputRef.current.value = '';\n }\n };\n const shareScore = () => {\n const text = `I just scored ${score} points on ChromaCount by finding ${uniqueColors} unique colors! Can you beat that?`;\n const url = \"https://dev.fun/p/cee96bac90b58299a483\";\n const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;\n window.open(twitterUrl, '_blank');\n };\n return

\n \n {}\n {showConfetti &&

\n {Array.from({\n length: 100\n }).map((_, i) =>

)}\n

}\n \n

\n ChromaCount\n

\n Upload any image and earn 1000 points for each unique color!\n

\n \n

\n {!image ?

fileInputRef.current?.click()}>\n \n

\n Click to upload an image
\n or drag and drop\n

\n \n

\n $\"Uploaded\"$ \n

\n \n

\n Unique Colors:\n {uniqueColors}\n

\n Score:\n {score.toLocaleString()}\n

\n \n {showColorPalette &&

Color Palette:

\n {colorPalette.map((color, index) =>

)}\n

}\n \n

\n \n \n

}\n \n {loading &&

}\n

\n \n

High Score

{highScore.toLocaleString()}

\n \n

Challenge your friends to find the most colorful images!

Each unique color = 1000 points

For very large images, colors are sampled for better performance

\n \n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\"}}","appFunctions",[],"token",{"_18":83,"_84":83,"_85":86,"_87":88,"_89":90,"_91":-5,"_92":-5,"_93":94,"_95":96,"_73":74},"buidl","symbol","price",0.002912,"marketcap",1372287.54,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","twitter","devCount",320,"appCount",2182,"upstreamApp","isLordOfDev","analytics",[101,105,107,109,111,113,115,117,119,121,123,125,127,129],{"_102":103,"_104":60},"day","2025-07-18","runCount",{"_102":106,"_104":60},"2025-07-19",{"_102":108,"_104":60},"2025-07-20",{"_102":110,"_104":60},"2025-07-21",{"_102":112,"_104":60},"2025-07-22",{"_102":114,"_104":60},"2025-07-23",{"_102":116,"_104":60},"2025-07-24",{"_102":118,"_104":60},"2025-07-25",{"_102":120,"_104":60},"2025-07-26",{"_102":122,"_104":60},"2025-07-27",{"_102":124,"_104":60},"2025-07-28",{"_102":126,"_104":60},"2025-07-29",{"_102":128,"_104":60},"2025-07-30",{"_102":130,"_104":60},"2025-07-31","snapshot","ogImage","https://cdn.dev.fun/og/image/cee96bac90b58299a483/01e77348.webp","isDevbase","commitDetail","livestream","actionData","errors"]