[{"_1":2,"_134":-5,"_135":-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,"_133":-5,"_130":-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":60,"_62":63,"_64":60,"_65":60,"_66":60,"_67":60,"_68":42,"_69":17,"_70":17,"_71":72,"_73":74,"_75":76,"_77":78,"_92":-5,"_93":17,"_94":95,"_130":32,"_131":132},"id","de93cc3220bf63a6cee5","isMyApp",false,"name","floodwave","description","Conquer the colorful chaos in this addictive flood-filling puzzle! Start from the top-left corner and strategically transform connected color regions in 22 moves or less, with silky-smooth animations that make each color cascade feel oddly satisfying.","brief","Flood the grid with strategic color choices while hypnotic animations ripple across your screen!","isLive",true,"isPublic","tags",[29,30],"🔥","👑","cover","https://cdn.dev.fun/snapshot/de93cc3220bf63a6cee5/68242_04a5d24a.webp","cdnUrl","https://cdn.dev.fun/app/de93cc3220bf63a6cee5/68242","createdAt",["D",1747789989301],"updatedAt",["D",1747790298188],"lastCommitId",["B","68242"],"tier",1,"credits",56,{"_14":46,"_47":48,"_49":48,"_50":51,"_52":48,"_53":54,"_55":56},"b4beafdb-5e83-4cb2-b449-125cf6868721","uniqueId","devly","username","solanaWallet","GGGFquESSW82MAbRMUMbVXpSPzsXsEt5BdrCzkJ6Fnk5","displayName","bio","Vibecoding is real?","avatar","/avatar.svg","commitCount",2,"forkCount",0,"likeCount","runsCount",386,"downvoteCount","upvoteCount","upvoteRate","commentCount","visitorCount","isArchived","isRenamed","contractAddress","Fve34CKgoAJJXBYEKV6tXKtoGNrX8MWNrUGP4KgVpump","code","import { useState, useEffect } from 'react';\nimport { motion } from 'framer-motion';\nconst GRID_SIZE = 12;\nconst MAX_MOVES = 22;\nconst COLORS = ['#FF5555', '#FFCC55', '#55AAFF', '#55CC55', '#AA55FF'];\nconst COLOR_NAMES = ['Red', 'Yellow', 'Blue', 'Green', 'Violet'];\nexport default function App() {\n const [grid, setGrid] = useState([]);\n const [moves, setMoves] = useState(0);\n const [gameOver, setGameOver] = useState(false);\n const [won, setWon] = useState(false);\n const [flooded, setFlooded] = useState(new Set());\n const [isAnimating, setIsAnimating] = useState(false);\n useEffect(() => {\n resetGame();\n }, []);\n const resetGame = () => {\n const newGrid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill().map(() => Math.floor(Math.random() * COLORS.length)));\n setGrid(newGrid);\n setMoves(0);\n setGameOver(false);\n setWon(false);\n const initialFlooded = new Set();\n initialFlooded.add(`0,0`);\n setFlooded(initialFlooded);\n };\n const flood = colorIndex => {\n if (gameOver || isAnimating || grid[0][0] === colorIndex) return;\n setIsAnimating(true);\n const originalColor = grid[0][0];\n const newGrid = grid.map(row => [...row]);\n const newFlooded = new Set([...flooded]);\n const cellsToProcess = [];\n for (let i = 0; i < GRID_SIZE; i++) {\n for (let j = 0; j < GRID_SIZE; j++) {\n if (newFlooded.has(`${i},${j}`) && newGrid[i][j] === originalColor) {\n cellsToProcess.push([i, j]);\n }\n }\n }\n const processNextBatch = (batch = 0, batchSize = 20) => {\n const start = batch * batchSize;\n const end = Math.min(start + batchSize, cellsToProcess.length);\n if (start >= cellsToProcess.length) {\n const newFloodedSize = newFlooded.size;\n const totalCells = GRID_SIZE * GRID_SIZE;\n if (newFloodedSize === totalCells) {\n setWon(true);\n setGameOver(true);\n } else if (moves + 1 >= MAX_MOVES) {\n setGameOver(true);\n }\n setGrid(newGrid);\n setFlooded(newFlooded);\n setMoves(m => m + 1);\n setIsAnimating(false);\n return;\n }\n for (let idx = start; idx < end; idx++) {\n const [i, j] = cellsToProcess[idx];\n newGrid[i][j] = colorIndex;\n const neighbors = [[i - 1, j], [i + 1, j], [i, j - 1], [i, j + 1]];\n for (const [ni, nj] of neighbors) {\n if (ni >= 0 && ni < GRID_SIZE && nj >= 0 && nj < GRID_SIZE && !newFlooded.has(`${ni},${nj}`) && newGrid[ni][nj] === originalColor) {\n newFlooded.add(`${ni},${nj}`);\n cellsToProcess.push([ni, nj]);\n }\n }\n }\n setGrid([...newGrid]);\n setTimeout(() => processNextBatch(batch + 1, batchSize), 10);\n };\n processNextBatch();\n };\n useEffect(() => {\n if (grid.length === 0 || isAnimating) return;\n const expandFlooding = () => {\n const startColor = grid[0][0];\n const newFlooded = new Set([...flooded]);\n let changed = false;\n do {\n changed = false;\n const currentFloodedCells = Array.from(newFlooded);\n for (const cellCoord of currentFloodedCells) {\n const [i, j] = cellCoord.split(',').map(Number);\n const neighbors = [[i - 1, j], [i + 1, j], [i, j - 1], [i, j + 1]];\n for (const [ni, nj] of neighbors) {\n if (ni >= 0 && ni < GRID_SIZE && nj >= 0 && nj < GRID_SIZE && !newFlooded.has(`${ni},${nj}`) && grid[ni][nj] === startColor) {\n newFlooded.add(`${ni},${nj}`);\n changed = true;\n }\n }\n }\n } while (changed);\n if (newFlooded.size !== flooded.size) {\n setFlooded(newFlooded);\n if (newFlooded.size === GRID_SIZE * GRID_SIZE) {\n setWon(true);\n setGameOver(true);\n }\n }\n };\n expandFlooding();\n }, [grid, flooded, isAnimating]);\n const progress = flooded.size / (GRID_SIZE * GRID_SIZE) * 100;\n return

\n FloodWave\n

\n \n

Moves: MAX_MOVES - 5 ? \"text-red-400\" : \"text-cyan-300\"}>{moves}/{MAX_MOVES}

\n Progress: {Math.round(progress)}%\n

\n \n

\n \n {}\n

\n {grid.map((row, i) => row.map((colorIdx, j) => ))}\n

\n \n {gameOver && \n

\n {won ? \"You Win! 🎉\" : \"Game Over 😞\"}\n

\n {won ? `Completed in ${moves} moves!` : `You used all ${MAX_MOVES} moves. Try again!`}\n

\n \n

\n }\n

\n \n {}\n

\n {COLORS.map((color, idx) => flood(idx)} disabled={gameOver || isAnimating} whileHover={{\n scale: 1.15\n }} whileTap={{\n scale: 0.95\n }} initial={{\n scale: 0.9,\n opacity: 0.9\n }} animate={{\n scale: 1,\n opacity: 1\n }} transition={{\n type: \"spring\",\n stiffness: 400,\n damping: 17\n }}>\n \n {grid.length > 0 && grid[0][0] === idx && }\n \n {COLOR_NAMES[idx]}\n )}\n

\n \n {}\n \n

How to Play

\n Click on a color to flood from the top-left corner. Connect all cells with the same color within {MAX_MOVES} moves to win!\n

\n \n \n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\"}}","token",{"_18":79,"_80":19,"_81":82,"_83":84,"_85":86,"_87":88,"_89":-5,"_90":42,"_91":42,"_71":72},"FloodWave","symbol","price",0.00000486,"marketcap",4861.08,"image","https://pump.mypinata.cloud/ipfs/QmU9zbzgfZxYHwyxnssGLgkJgV64cqJpNhupciMYDPcSYR?img-width=256&img-dpr=2","website","https://dev.fun/p/de93cc3220bf63a6cee5","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[96,100,102,104,106,108,110,112,114,116,118,120,122,124,127],{"_97":98,"_99":60},"day","2025-05-08","runCount",{"_97":101,"_99":60},"2025-05-09",{"_97":103,"_99":60},"2025-05-10",{"_97":105,"_99":60},"2025-05-11",{"_97":107,"_99":60},"2025-05-12",{"_97":109,"_99":60},"2025-05-13",{"_97":111,"_99":60},"2025-05-14",{"_97":113,"_99":60},"2025-05-15",{"_97":115,"_99":60},"2025-05-16",{"_97":117,"_99":60},"2025-05-17",{"_97":119,"_99":60},"2025-05-18",{"_97":121,"_99":60},"2025-05-19",{"_97":123,"_99":60},"2025-05-20",{"_97":125,"_99":126},"2025-05-21",382,{"_97":128,"_99":129},"2025-05-22",4,"snapshot","ogImage","https://cdn.dev.fun/og/image/de93cc3220bf63a6cee5/806d3dd7.webp","commitDetail","actionData","errors"]