[{"_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/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_5":44,"_56":57,"_58":41,"_59":60,"_61":62,"_63":60,"_64":65,"_66":41,"_67":65,"_68":60,"_69":60,"_70":17,"_71":25,"_72":73,"_74":75,"_76":77,"_78":79,"_80":81,"_95":-5,"_96":17,"_97":98,"_133":31,"_134":135,"_136":25},"id","5b9bf21793bed2573a31","isMyApp",false,"name","kolspill","description","Turn crypto Twitter into your personal arcade cabinet with the most brutally honest KOL ranking system ever created. Watch the community collectively decide which crypto influencers deserve to be smashed or passed through addictive pairwise voting, complete with ELO ratings that shift with every click. Features a retro-futuristic terminal aesthetic that makes ranking crypto personalities feel like playing a forbidden arcade game from the future, plus bulk KOL import so you can add entire Twitter lists in seconds.","brief","Rank crypto influencers through addictive smash-or-pass voting with retro arcade vibes and ELO ratings","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/5b9bf21793bed2573a31/91618_fb7c5cc1.webp","cdnUrl","https://cdn.dev.fun/app/5b9bf21793bed2573a31/91618","createdAt",["D",1753654322785],"updatedAt",["D",1753801468087],"lastCommitId",["B","91618"],"tier",1,"credits",159,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"e1a516b0-7d90-46da-8eeb-58f649cd9eda","uniqueId","fortuneofweb3","username","solanaWallet","DtdnqvRddQspZvRV5SJX2DeqxmLYef7Hqn9LFK9LioJS","displayName","bio","","avatar","https://cdn.dev.fun/avatar/e1a516b0-7d90-46da-8eeb-58f649cd9eda/842e7d93.webp","commitCount",94,"forkCount","likeCount",0,"runsCount",108,"downvoteCount","upvoteCount",3,"upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","27SVJjDJQpZkKGfqpaFKojY2QhFsbsY7H2cZPGPnpump","code","import { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nconst API_BASE_URL = \"https://teas-c4hm.onrender.com\";\nfunction App() {\n const pageVariants = {\n initial: {\n opacity: 0,\n y: 20\n },\n in: {\n opacity: 1,\n y: 0\n },\n out: {\n opacity: 0,\n y: -20\n }\n };\n const pageTransition = {\n type: 'tween',\n ease: 'anticipate',\n duration: 0.5\n };\n const [currentView, setCurrentView] = useState('voting');\n const [votingPair, setVotingPair] = useState(null);\n const [leaderboard, setLeaderboard] = useState([]);\n const [loading, setLoading] = useState(true);\n const [votingLoading, setVotingLoading] = useState(false);\n const [leaderboardLoading, setLeaderboardLoading] = useState(false);\n const [importLoading, setImportLoading] = useState(false);\n const [importProgress, setImportProgress] = useState(0);\n const [cardAnimating, setCardAnimating] = useState(false);\n const [leaderboardButtonGlitching, setLeaderboardButtonGlitching] = useState(false);\n const [backToVotingGlitching, setBackToVotingGlitching] = useState(false);\n const [hoveredCard, setHoveredCard] = useState(null);\n const [animationPhase, setAnimationPhase] = useState(null);\n const [winnerCardIndex, setWinnerCardIndex] = useState(null);\n const [previousElos, setPreviousElos] = useState([0, 0]);\n const [eloChanges, setEloChanges] = useState([0, 0]);\n const [voteKey, setVoteKey] = useState(0);\n const [cardsGlitching, setCardsGlitching] = useState(false);\n const loadVotingPair = async () => {\n try {\n setVotingLoading(true);\n const response = await fetch(`${API_BASE_URL}/api/battle`);\n if (!response.ok) {\n throw new Error('Failed to fetch battle');\n }\n const data = await response.json();\n if (data.kol1 && data.kol2) {\n setVotingPair([data.kol1, data.kol2]);\n } else {\n setVotingPair(null);\n }\n setVotingLoading(false);\n setBackToVotingGlitching(false);\n setTimeout(() => setHoveredCard(null), 50);\n } catch (error) {\n console.error('Error loading voting pair:', error);\n setVotingLoading(false);\n setBackToVotingGlitching(false);\n setTimeout(() => setHoveredCard(null), 50);\n }\n };\n const loadLeaderboard = async () => {\n try {\n setLeaderboardLoading(true);\n const response = await fetch(`${API_BASE_URL}/api/leaderboard`);\n if (!response.ok) {\n throw new Error('Failed to fetch leaderboard');\n }\n const data = await response.json();\n setLeaderboard(data);\n setLeaderboardLoading(false);\n } catch (error) {\n console.error('Error loading leaderboard:', error);\n setLeaderboardLoading(false);\n }\n };\n const handleLeaderboardClick = async () => {\n if (leaderboardButtonGlitching || cardAnimating) return;\n setLeaderboardButtonGlitching(true);\n await loadLeaderboard();\n setLeaderboardButtonGlitching(false);\n setCurrentView('leaderboard');\n };\n const handleVote = async (winnerId, loserId, winnerIndex) => {\n if (!winnerId || !loserId) {\n alert('Invalid KOL selection. Please try again.');\n return;\n }\n if (winnerId === loserId) {\n alert('Cannot vote for the same KOL as both winner and loser.');\n return;\n }\n setCardAnimating(true);\n setPreviousElos([votingPair[0].elo, votingPair[1].elo]);\n setWinnerCardIndex(winnerIndex);\n setEloChanges(winnerIndex === 0 ? [16, -16] : [-16, 16]);\n setAnimationPhase('revealing-elo');\n setVoteKey(prev => prev + 1);\n setTimeout(async () => {\n setAnimationPhase(null);\n setWinnerCardIndex(null);\n setEloChanges([0, 0]);\n setPreviousElos([0, 0]);\n setCardsGlitching(true);\n await loadVotingPair();\n setTimeout(() => setCardsGlitching(false), 1000);\n setCardAnimating(false);\n setTimeout(() => setHoveredCard(null), 50);\n }, 2000);\n const recordVotePromise = (async () => {\n try {\n const voteResponse = await fetch(`${API_BASE_URL}/api/votes`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n winnerId,\n loserId\n })\n });\n if (!voteResponse.ok) {\n const errorData = await voteResponse.json();\n throw new Error(errorData.error || 'Vote submission failed');\n }\n const voteResult = await voteResponse.json();\n console.log('Vote recorded:', voteResult);\n } catch (error) {\n console.error('Error recording vote:', error);\n }\n })();\n recordVotePromise.catch(error => {\n console.error('Error in vote handling:', error);\n });\n };\n const addKOLsBulk = async bulkText => {\n try {\n setImportLoading(true);\n setImportProgress(0);\n const kolEntries = bulkText.trim().split('\\n').filter(line => line.trim());\n const kols = [];\n for (const entry of kolEntries) {\n const parts = entry.split(',').map(part => part.trim());\n if (parts.length >= 3) {\n const [username, atUsername, image] = parts;\n const cleanUsername = atUsername.startsWith('@') ? atUsername.substring(1) : atUsername;\n kols.push({\n name: username,\n username: cleanUsername,\n image\n });\n }\n }\n if (kols.length > 0) {\n const response = await fetch(`${API_BASE_URL}/api/kols/bulk`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(kols)\n });\n if (!response.ok) {\n throw new Error('Failed to add bulk KOLs');\n }\n const data = await response.json();\n setImportProgress(100);\n console.log('KOLs added:', data);\n }\n setImportLoading(false);\n setImportProgress(0);\n alert(`Successfully added ${kols.length} KOLs!`);\n return true;\n } catch (error) {\n console.error('Error adding KOLs:', error);\n setImportLoading(false);\n setImportProgress(0);\n alert('Error adding KOLs. Please check the format.');\n return false;\n }\n };\n const clearDatabase = async () => {\n const confirmed = window.confirm('WARNING: This will permanently delete ALL KOLs. This action cannot be undone. Are you sure?');\n if (!confirmed) return;\n const doubleConfirmed = window.confirm('FINAL WARNING: You are about to DESTROY ALL DATA. Type YES if you really want to continue.');\n if (!doubleConfirmed) return;\n try {\n alert('Clear database feature requires backend API endpoint. Please contact administrator.');\n setCurrentView('voting');\n } catch (error) {\n console.error('Error clearing database:', error);\n alert('Error clearing database. Please try again.');\n }\n };\n useEffect(() => {\n const loadData = async () => {\n if (currentView === 'voting') {\n await loadVotingPair();\n } else if (currentView === 'leaderboard') {\n await loadLeaderboard();\n }\n setLoading(false);\n };\n loadData();\n }, [currentView]);\n const getHighQualityImage = imageUrl => {\n if (imageUrl.includes('_normal.jpg')) {\n return imageUrl.replace('_normal.jpg', '_400x400.jpg');\n }\n if (imageUrl.includes('_normal.png')) {\n return imageUrl.replace('_normal.png', '_400x400.png');\n }\n return imageUrl;\n };\n const OdometerCounter = ({\n startValue,\n endValue,\n duration = 1500\n }) => {\n const [currentValue, setCurrentValue] = useState(startValue);\n useEffect(() => {\n let animationFrame;\n let startTime;\n const animate = timestamp => {\n if (!startTime) {\n startTime = timestamp;\n }\n const progress = Math.min((timestamp - startTime) / duration, 1);\n const easeProgress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;\n const newValue = startValue + (endValue - startValue) * easeProgress;\n setCurrentValue(Math.round(newValue));\n if (progress < 1) {\n animationFrame = requestAnimationFrame(animate);\n }\n };\n animationFrame = requestAnimationFrame(animate);\n return () => cancelAnimationFrame(animationFrame);\n }, [startValue, endValue, duration]);\n return {Math.round(currentValue)};\n };\n const VotingView = () => {\n if (backToVotingGlitching) {\n return

\n LOADING BATTLE...\n

;\n }\n if (votingLoading && !cardAnimating) {\n return

LOADING BATTLE...

;\n }\n if (!votingPair || votingPair.length < 2) {\n return

NOT ENOUGH KOLS TO VOTE

\n \n \n

;\n }\n return

\n KOLSPILL\n

\n CLICK ON THE KOL YOU PREFER! (ALPHA OR LARP)\n

!cardAnimating && handleVote(votingPair[0]._id, votingPair[1]._id, 0)} onTouchStart={() => !cardAnimating && setHoveredCard(0)} onTouchEnd={() => !cardAnimating && setHoveredCard(null)} onMouseEnter={() => !cardAnimating && setHoveredCard(0)} onMouseLeave={() => !cardAnimating && setHoveredCard(null)}>\n

\n {cardsGlitching &&

}\n {animationPhase === 'revealing-elo' &&

ELO:

\n \n

}\n

\n e.stopPropagation()}>\n @{votingPair[0].username}\n \n \n

\n VS\n

!cardAnimating && handleVote(votingPair[1]._id, votingPair[0]._id, 1)} onTouchStart={() => !cardAnimating && setHoveredCard(1)} onTouchEnd={() => !cardAnimating && setHoveredCard(null)} onMouseEnter={() => !cardAnimating && setHoveredCard(1)} onMouseLeave={() => !cardAnimating && setHoveredCard(null)}>\n

\n {cardsGlitching &&

}\n {animationPhase === 'revealing-elo' &&

ELO:

\n \n

}\n

\n e.stopPropagation()}>\n @{votingPair[1].username}\n \n \n

\n \n

;\n };\n const LeaderboardView = () => {\n const [leaderboardView, setLeaderboardView] = useState('top50');\n const containerVariants = {\n hidden: {},\n visible: {\n transition: {\n staggerChildren: 0.05\n }\n }\n };\n const itemVariants = {\n hidden: {\n opacity: 0,\n y: 20\n },\n visible: {\n opacity: 1,\n y: 0\n }\n };\n const getRankDisplay = (index, isBottom = false, totalKols = 0) => {\n if (isBottom && leaderboardView === 'bottom50') {\n const actualRank = totalKols - index;\n if (actualRank === 1) return '1st';\n if (actualRank === 2) return '2nd';\n if (actualRank === 3) return '3rd';\n return `${actualRank}th`;\n } else {\n const actualRank = isBottom ? totalKols - 50 + index + 1 : index + 1;\n if (actualRank === 1) return '1st';\n if (actualRank === 2) return '2nd';\n if (actualRank === 3) return '3rd';\n return `${actualRank}th`;\n }\n };\n const getMedalColor = index => {\n if (index === 0) return 'text-yellow-500';\n if (index === 1) return 'text-gray-300';\n if (index === 2) return 'text-orange-500';\n return 'text-white';\n };\n const top50 = leaderboard.slice(0, 50);\n const bottom50 = leaderboard.slice(-50).reverse();\n const renderKOLCard = (kol, index, isBottom = false) => {\n const totalGames = kol.wins + kol.losses;\n const winRate = totalGames > 0 ? Math.round(kol.wins / totalGames * 100) : 0;\n return

\n {}\n

\n {getRankDisplay(index, isBottom, leaderboard.length)}\n

{kol.name}

\n \n @{kol.username}\n \n \n

W: {kol.wins} | L: {kol.losses}

{winRate}% | {Math.round(kol.elo)}

\n \n {}\n

\n {getRankDisplay(index, isBottom, leaderboard.length)}\n

{kol.name}

\n \n @{kol.username}\n \n \n

WINS: {kol.wins} | LOSSES: {kol.losses}

WIN RATE: {winRate}% | ELO: {Math.round(kol.elo)}

;\n };\n return

\n \n

\n LEADERBOARD\n

\n {leaderboardLoading ? 'LOADING RANKINGS...' : `SHOWING ${leaderboardView === 'top50' ? 'TOP 50' : 'BOTTOM 50'} OF ${leaderboard.length} KOLS`}\n

\n {leaderboard.length > 50 &&

\n \n

}\n

\n {leaderboardView === 'top50' &&

\n 🏆 TOP 50 KOLS 🏆\n

\n \n {top50.map((kol, index) => \n {renderKOLCard(kol, index, false)}\n )}\n \n

}\n {leaderboardView === 'bottom50' && leaderboard.length > 50 &&

\n 💀 BOTTOM 50 KOLS 💀\n

\n \n {bottom50.map((kol, index) => \n {renderKOLCard(kol, index, true)}\n )}\n \n

}\n

\n \n

;\n };\n const AddKOLsView = () => {\n const [bulkInput, setBulkInput] = useState('');\n const handleAddKOLs = async () => {\n if (!bulkInput.trim()) {\n alert('Please enter KOL data');\n return;\n }\n if (importLoading) {\n return;\n }\n const success = await addKOLsBulk(bulkInput);\n if (success) {\n setBulkInput('');\n setCurrentView('voting');\n }\n };\n return

\n ADD KOLS\n

\n FORMAT: USERNAME, @USERNAME, IMAGE_URL\n

\n ONE KOL PER LINE. EXAMPLE:
\n colu_farmer,@colu_farmer,https://pbs.twimg.com/profile_images/example.jpg
\n br4ted,@br4ted,https://pbs.twimg.com/profile_images/example2.jpg\n

setBulkInput(e.target.value)} placeholder={`colu_farmer,@colu_farmer,https://pbs.twimg.com/profile_images/1928110886486433792/xAkGY6r2_normal.jpg\nbr4ted,@br4ted,https://pbs.twimg.com/profile_images/1900912535320379393/WlwywbR4_normal.jpg\ndeanbulla,@deanbulla,https://pbs.twimg.com/profile_images/1948351551287791616/cBdxeEyT_normal.jpg`} className=\"w-full h-48 md:h-64 bg-green-900 text-green-500 font-mono border-4 border-green-400 shadow-[6px_6px_0_rgba(0,0,0,0.8)] p-3 md:p-4 resize-none text-xs md:text-sm custom-scrollbar\" rows={10} />\n        </div>\n        {importLoading && <div className=\"mb-6\">\n            <div className=\"text-green-500 font-mono font-bold text-center mb-4 text-sm md:text-base\">\n              IMPORTING KOLS... {importProgress}%\n            </div>\n            <div className=\"w-full bg-green-900 border-4 border-green-400 shadow-[6px_6px_0_rgba(0,0,0,0.8)] h-6 md:h-8\">\n              <div className=\"h-full bg-green-500 transition-all duration-300 flex items-center justify-center\" style={{\n            width: `${importProgress}%`\n          }}>\n                <span className=\"text-black font-mono font-bold text-xs md:text-sm\">\n                  {importProgress}%\n                </span>\n              </div>\n            </div>\n          </div>}\n        <div className=\"text-center space-y-4\">\n            <div className=\"flex flex-col md:flex-row gap-4 justify-center\">\n              <button onClick={handleAddKOLs} disabled={importLoading} className={`font-mono font-bold px-4 py-3 md:px-6 border-4 border-green-400 shadow-[6px_6px_0_rgba(0,0,0,0.8)] ${importLoading ? 'bg-gray-500 text-gray-300 cursor-not-allowed' : 'bg-green-500 text-black hover:bg-green-800 hover:text-green-200'}`}>\n                {importLoading ? 'IMPORTING...' : 'ADD ALL KOLS'}\n              </button>\n              <button onClick={() => setCurrentView('voting')} disabled={importLoading} className={`font-mono font-bold px-4 py-3 md:px-6 border-4 border-green-400 shadow-[6px_6px_0_rgba(0,0,0,0.8)] ${importLoading ? 'bg-gray-500 text-gray-300 cursor-not-allowed' : 'bg-green-600 text-black hover:bg-green-800 hover:text-green-200'}`}>\n                BACK TO VOTING\n              </button>\n            </div>\n          <div className=\"border-t-4 border-red-600 pt-4 mt-8\">\n            <div className=\"text-red-500 font-mono text-sm mb-2\">DANGER ZONE</div>\n            <button onClick={clearDatabase} className=\"bg-red-500 text-white font-mono font-bold px-4 py-3 md:px-6 border-4 border-green-400 shadow-[6px_6px_0_rgba(0,0,0,0.8)] hover:bg-red-800 hover:text-red-200 w-full md:w-auto\">\n              CLEAR ALL DATA\n            </button>\n          </div>\n        </div>\n      </div>;\n  };\n  if (loading) {\n    return <div className=\"min-h-screen bg-green-800 flex items-center justify-center\">\n        <div className=\"text-green-400 font-mono font-bold text-2xl animate-pulse\">LOADING...</div>\n      </div>;\n  }\n  return <>\n      <style>{`\n        /* Fix mobile double-tap issue */\n        * {\n          touch-action: manipulation;\n        }\n        \n        /* Hover effects only on devices that support hover */\n        @media (hover: hover) {\n          .bg-green-600:hover {\n            background-color: #059669;\n            color: #bbf7d0;\n          }\n          .bg-green-500:hover {\n            background-color: #059669;\n            color: #bbf7d0;\n          }\n          button:hover {\n            background-color: #059669;\n            color: #bbf7d0;\n          }\n        }\n        \n        /* Custom scrollbar styles for desktop */\n        .custom-scrollbar::-webkit-scrollbar {\n          width: 12px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-track {\n          background: #166534;\n          border: 2px solid #4ade80;\n          border-radius: 6px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb {\n          background: #4ade80;\n          border: 2px solid #166534;\n          border-radius: 6px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n          background: #22c55e;\n        }\n        .custom-scrollbar::-webkit-scrollbar-corner {\n          background: #166534;\n        }\n        /* Firefox custom scrollbar */\n        .custom-scrollbar {\n          scrollbar-width: thin;\n          scrollbar-color: #4ade80 #166534;\n        }\n        /* Global scrollbar styles for the entire page */\n        html::-webkit-scrollbar {\n          width: 12px;\n        }\n        html::-webkit-scrollbar-track {\n          background: #166534;\n          border: 2px solid #4ade80;\n        }\n        html::-webkit-scrollbar-thumb {\n          background: #4ade80;\n          border: 2px solid #166534;\n          border-radius: 6px;\n        }\n        html::-webkit-scrollbar-thumb:hover {\n          background: #22c55e;\n        }\n        html {\n          scrollbar-width: thin;\n          scrollbar-color: #4ade80 #166534;\n        }\n        /* Hide scrollbars on mobile but keep functionality */\n        @media (max-width: 768px) {\n          html::-webkit-scrollbar {\n            display: none;\n          }\n          .custom-scrollbar::-webkit-scrollbar {\n            display: none;\n          }\n          html {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n          }\n          .custom-scrollbar {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n          }\n        }\n        /* Glitch Animation Styles */\n        @keyframes glitch-winner {\n          0% { transform: translate(0); }\n          10% { transform: translate(-3px, -3px); }\n          20% { transform: translate(3px, 3px); }\n          30% { transform: translate(-3px, 3px); }\n          40% { transform: translate(3px, -3px); }\n          50% { transform: translate(-2px, -2px); clip-path: inset(10% 0 10% 0); }\n          60% { transform: translate(2px, 2px); clip-path: inset(0% 0 20% 0); }\n          70% { transform: translate(0); clip-path: inset(20% 0 0% 0); }\n          80% { transform: translate(-1px, 1px); }\n          90% { transform: translate(1px, -1px); }\n          100% { transform: translate(0); clip-path: inset(0); }\n        }\n        .animate-glitch-winner {\n          animation: glitch-winner 1.5s steps(2, end);\n        }\n        @keyframes glitch-loser {\n          0% { transform: translate(0); }\n          15% { transform: translate(-4px, -4px); }\n          30% { transform: translate(4px, 4px); }\n          45% { transform: translate(-4px, 4px); }\n          60% { transform: translate(4px, -4px); }\n          75% { transform: translate(-3px, -3px); clip-path: inset(30% 0 30% 0); }\n          90% { transform: translate(3px, 3px); clip-path: inset(0% 0 40% 0); }\n          100% { transform: translate(0); clip-path: inset(0); }\n        }\n        .animate-glitch-loser {\n          animation: glitch-loser 1.5s steps(2, end);\n        }\n        @keyframes glitch-overlay-blue {\n          0%, 100% { opacity: 0; }\n          25% { opacity: 0.3; }\n          50% { opacity: 0.1; }\n          75% { opacity: 0.4; }\n        }\n        .animate-glitch-overlay-blue {\n          animation: glitch-overlay-blue 0.3s linear infinite;\n        }\n        @keyframes glitch-overlay-red {\n          0%, 100% { opacity: 0; }\n          25% { opacity: 0.2; }\n          50% { opacity: 0.4; }\n          75% { opacity: 0.1; }\n        }\n        .animate-glitch-overlay-red {\n          animation: glitch-overlay-red 0.4s linear infinite;\n        }\n        @keyframes glitch-button {\n          0% { transform: translate(0); }\n          25% { transform: translate(-1px, -1px); }\n          50% { transform: translate(1px, 1px); }\n          75% { transform: translate(-1px, 1px); }\n          100% { transform: translate(0); }\n        }\n        .animate-glitch-button {\n          animation: glitch-button 1.2s ease-in-out infinite;\n        }\n        @keyframes glitch-overlay-green {\n          0%, 100% { opacity: 0; }\n          50% { opacity: 0.2; }\n        }\n        .animate-glitch-overlay-green {\n          animation: glitch-overlay-green 1s ease-in-out infinite;\n        }\n        /* Background Patch Animations */\n        @keyframes float-1 {\n          0%, 100% { transform: rotate(12deg) translateY(0px) translateX(0px); }\n          33% { transform: rotate(18deg) translateY(-20px) translateX(10px); }\n          66% { transform: rotate(6deg) translateY(10px) translateX(-5px); }\n        }\n        @keyframes float-2 {\n          0%, 100% { transform: rotate(-6deg) translateY(0px) translateX(0px); }\n          50% { transform: rotate(-12deg) translateY(15px) translateX(-15px); }\n        }\n        @keyframes float-3 {\n          0%, 100% { transform: rotate(45deg) translateY(0px) translateX(0px); }\n          25% { transform: rotate(50deg) translateY(-10px) translateX(8px); }\n          75% { transform: rotate(40deg) translateY(8px) translateX(-12px); }\n        }\n        @keyframes float-4 {\n          0%, 100% { transform: rotate(-12deg) translateY(0px) translateX(0px); }\n          40% { transform: rotate(-18deg) translateY(12px) translateX(6px); }\n          80% { transform: rotate(-6deg) translateY(-8px) translateX(-10px); }\n        }\n        @keyframes float-5 {\n          0%, 100% { transform: rotate(6deg) translateY(0px) translateX(0px); }\n          60% { transform: rotate(12deg) translateY(-15px) translateX(20px); }\n        }\n        @keyframes float-6 {\n          0%, 100% { transform: rotate(30deg) translateY(0px) translateX(0px); }\n          33% { transform: rotate(35deg) translateY(10px) translateX(-8px); }\n          66% { transform: rotate(25deg) translateY(-12px) translateX(15px); }\n        }\n        @keyframes float-7 {\n          0%, 100% { transform: rotate(-45deg) translateY(0px) translateX(0px); }\n          50% { transform: rotate(-50deg) translateY(18px) translateX(12px); }\n        }\n        @keyframes float-8 {\n          0%, 100% { transform: rotate(15deg) translateY(0px) translateX(0px); }\n          25% { transform: rotate(20deg) translateY(-8px) translateX(-5px); }\n          75% { transform: rotate(10deg) translateY(12px) translateX(8px); }\n        }\n        @keyframes float-9 {\n          0%, 100% { transform: rotate(60deg) translateY(0px) translateX(0px); }\n          40% { transform: rotate(65deg) translateY(10px) translateX(-15px); }\n          80% { transform: rotate(55deg) translateY(-10px) translateX(10px); }\n        }\n        @keyframes float-10 {\n          0%, 100% { transform: rotate(-30deg) translateY(0px) translateX(0px); }\n          30% { transform: rotate(-35deg) translateY(-12px) translateX(6px); }\n          70% { transform: rotate(-25deg) translateY(8px) translateX(-8px); }\n        }\n        @keyframes float-11 {\n          0%, 100% { transform: rotate(75deg) translateY(0px) translateX(0px); }\n          50% { transform: rotate(80deg) translateY(15px) translateX(18px); }\n        }\n        @keyframes float-12 {\n          0%, 100% { transform: rotate(-18deg) translateY(0px) translateX(0px); }\n          35% { transform: rotate(-22deg) translateY(8px) translateX(-12px); }\n          70% { transform: rotate(-14deg) translateY(-10px) translateX(5px); }\n        }\n        @keyframes float-13 {\n          0%, 100% { transform: rotate(33deg) translateY(0px) translateX(0px); }\n          45% { transform: rotate(38deg) translateY(-15px) translateX(10px); }\n          90% { transform: rotate(28deg) translateY(5px) translateX(-6px); }\n        }\n        @keyframes float-14 {\n          0%, 100% { transform: rotate(-42deg) translateY(0px) translateX(0px); }\n          60% { transform: rotate(-47deg) translateY(12px) translateX(15px); }\n        }\n        @keyframes float-15 {\n          0%, 100% { transform: rotate(24deg) translateY(0px) translateX(0px); }\n          30% { transform: rotate(29deg) translateY(-5px) translateX(-10px); }\n          70% { transform: rotate(19deg) translateY(10px) translateX(8px); }\n        }\n\n        /* ELO Reveal Animations */\n        @keyframes elo-reveal {\n          0% { opacity: 0; transform: scale(0.8) translateY(20px); }\n          50% { opacity: 1; transform: scale(1.1) translateY(0); }\n          100% { opacity: 1; transform: scale(1) translateY(0); }\n        }\n        .animate-elo-reveal {\n          animation: elo-reveal 0.8s ease-out;\n        }\n        @keyframes count-up {\n          0% { color: #10b981; }\n          25% { color: #34d399; transform: scale(1.1); }\n          50% { color: #6ee7b7; transform: scale(1.2); }\n          75% { color: #34d399; transform: scale(1.1); }\n          100% { color: #10b981; transform: scale(1); }\n        }\n        .animate-count-up {\n          animation: count-up 1.5s ease-in-out;\n        }\n        @keyframes count-down {\n          0% { color: #ef4444; }\n          25% { color: #f87171; transform: scale(0.9); }\n          50% { color: #fca5a5; transform: scale(0.8); }\n          75% { color: #f87171; transform: scale(0.9); }\n          100% { color: #ef4444; transform: scale(1); }\n        }\n        .animate-count-down {\n          animation: count-down 1.5s ease-in-out;\n        }\n      `}</style>\n      <div className=\"min-h-screen bg-green-800 relative overflow-hidden\">\n        {}\n        <div className=\"absolute inset-0 pointer-events-none\">\n          <div className=\"absolute top-10 left-10 w-48 h-48 md:w-80 md:h-80 bg-green-600 opacity-30 rounded-lg\" style={{\n          animation: 'float-1 8s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-32 right-20 w-56 h-56 md:w-96 md:h-96 bg-emerald-500 opacity-25 rounded-lg\" style={{\n          animation: 'float-2 10s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute bottom-20 left-32 w-52 h-52 md:w-88 md:h-88 bg-teal-600 opacity-35 rounded-lg\" style={{\n          animation: 'float-3 7s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-1/2 left-1/4 w-44 h-44 md:w-72 md:h-72 bg-lime-600 opacity-20 rounded-lg\" style={{\n          animation: 'float-4 9s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute bottom-32 right-16 w-60 h-60 md:w-[400px] md:h-[400px] bg-green-700 opacity-30 rounded-lg\" style={{\n          animation: 'float-5 11s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-20 left-1/2 w-48 h-48 md:w-80 md:h-80 bg-emerald-700 opacity-25 rounded-lg\" style={{\n          animation: 'float-6 6s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute bottom-10 left-20 w-40 h-40 md:w-64 md:h-64 bg-green-500 opacity-35 rounded-lg\" style={{\n          animation: 'float-7 8.5s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-40 right-32 w-44 h-44 md:w-80 md:h-80 bg-teal-500 opacity-20 rounded-lg\" style={{\n          animation: 'float-8 7.5s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-2/3 right-8 w-36 h-36 md:w-64 md:h-64 bg-green-400 opacity-25 rounded-lg\" style={{\n          animation: 'float-9 9.5s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-16 left-3/4 w-32 h-32 md:w-56 md:h-56 bg-emerald-600 opacity-30 rounded-lg\" style={{\n          animation: 'float-10 10.5s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute bottom-40 left-8 w-40 h-40 md:w-72 md:h-72 bg-lime-500 opacity-20 rounded-lg\" style={{\n          animation: 'float-11 6.5s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-1/3 right-1/3 w-28 h-28 md:w-48 md:h-48 bg-teal-700 opacity-25 rounded-lg\" style={{\n          animation: 'float-12 8.8s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute bottom-1/4 left-1/2 w-52 h-52 md:w-88 md:h-88 bg-green-800 opacity-30 rounded-lg\" style={{\n          animation: 'float-13 7.8s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute top-72 left-16 w-36 h-36 md:w-60 md:h-60 bg-emerald-400 opacity-25 rounded-lg\" style={{\n          animation: 'float-14 9.2s ease-in-out infinite'\n        }}></div>\n          <div className=\"absolute bottom-16 right-1/4 w-44 h-44 md:w-76 md:h-76 bg-lime-700 opacity-35 rounded-lg\" style={{\n          animation: 'float-15 10.8s ease-in-out infinite'\n        }}></div>\n        </div>\n        <div className=\"p-4 md:p-8 relative z-10\" style={{\n        touchAction: 'manipulation'\n      }}>\n          <AnimatePresence mode=\"wait\">\n            {currentView === 'voting' && <motion.div key=\"voting\" initial=\"initial\" animate=\"in\" exit=\"out\" variants={pageVariants} transition={pageTransition} className=\"relative z-20\"><VotingView /></motion.div>}\n            {currentView === 'leaderboard' && <motion.div key=\"leaderboard\" initial=\"initial\" animate=\"in\" exit=\"out\" variants={pageVariants} transition={pageTransition} className=\"relative z-20\"><LeaderboardView /></motion.div>}\n            {currentView === 'add' && <motion.div key=\"add\" initial=\"initial\" animate=\"in\" exit=\"out\" variants={pageVariants} transition={pageTransition} className=\"relative z-20\"><AddKOLsView /></motion.div>}\n          </AnimatePresence>\n        </div>\n      </div>\n    </>;\n}\nexport default App;","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"lucide-react\":\"0.441.0\",\"react-router-dom\":\"6.18.0\",\"framer-motion\":\"10.16.4\"}}","appFunctions",[],"token",{"_18":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":-5,"_92":-5,"_93":41,"_94":41,"_72":73},"KOLSPILL","symbol","SPILL","price",0.00000598,"marketcap",6174.30385995,"image","https://pump.mypinata.cloud/ipfs/bafybeidddivma4r4etsu6rljwi545epyldtsnaa4kz2uz7ycftpygkhc5e?img-width=256&img-dpr=2","website","twitter","devCount","appCount","upstreamApp","isLordOfDev","analytics",[99,103,105,107,109,111,113,115,117,119,121,123,125,127,129,130,131],{"_100":101,"_102":60},"day","2025-08-15","runCount",{"_100":104,"_102":60},"2025-08-16",{"_100":106,"_102":60},"2025-08-17",{"_100":108,"_102":60},"2025-08-18",{"_100":110,"_102":60},"2025-08-19",{"_100":112,"_102":60},"2025-08-20",{"_100":114,"_102":60},"2025-08-21",{"_100":116,"_102":60},"2025-08-22",{"_100":118,"_102":60},"2025-08-23",{"_100":120,"_102":60},"2025-08-24",{"_100":122,"_102":60},"2025-08-25",{"_100":124,"_102":60},"2025-08-26",{"_100":126,"_102":60},"2025-08-27",{"_100":128,"_102":60},"2025-08-28",{"_100":101,"_102":41},{"_100":112,"_102":41},{"_100":132,"_102":41},"2025-08-29","snapshot","ogImage","https://cdn.dev.fun/og/image/5b9bf21793bed2573a31/23562988.webp","isDevbase","actionData","errors"]
</article></body></html>

say something