[{"_1":2,"_128":-5,"_129":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_28":29,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_5":42,"_54":55,"_56":57,"_58":59,"_60":61,"_62":57,"_63":17,"_64":17,"_65":66,"_67":68,"_69":70,"_71":72,"_87":-5,"_88":17,"_89":90,"_125":29,"_126":127},"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.","isLive",true,"tags",[26,27],"🔥","👑","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":43,"_44":45,"_46":45,"_47":48,"_49":45,"_50":51,"_52":53},"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",269,"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\"}}","token",{"_18":73,"_74":73,"_75":76,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":84,"_85":86,"_65":66},"buidl","symbol","price",0.0013,"marketcap",1299971,"image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","twitter","devCount",168,"appCount",1340,"upstreamApp","isLordOfDev","analytics",[91,95,97,99,101,103,105,107,109,111,113,115,117,119,122],{"_92":93,"_94":57},"day","2025-03-23","runCount",{"_92":96,"_94":57},"2025-03-24",{"_92":98,"_94":57},"2025-03-25",{"_92":100,"_94":57},"2025-03-26",{"_92":102,"_94":57},"2025-03-27",{"_92":104,"_94":57},"2025-03-28",{"_92":106,"_94":57},"2025-03-29",{"_92":108,"_94":57},"2025-03-30",{"_92":110,"_94":57},"2025-03-31",{"_92":112,"_94":57},"2025-04-01",{"_92":114,"_94":57},"2025-04-02",{"_92":116,"_94":57},"2025-04-03",{"_92":118,"_94":57},"2025-04-04",{"_92":120,"_94":121},"2025-04-05",256,{"_92":123,"_94":124},"2025-04-06",13,"snapshot","ogImage","https://cdn.dev.fun/og/image/cee96bac90b58299a483/b914ca9b.webp","actionData","errors"]