[{"_1":2,"_166":-5,"_167":-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,"_164":-5,"_154":-7,"_165":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_32":33,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_5":46,"_58":59,"_60":43,"_61":62,"_63":64,"_65":66,"_67":68,"_69":43,"_70":62,"_71":66,"_72":66,"_73":17,"_74":17,"_75":76,"_77":78,"_79":80,"_81":82,"_83":84,"_103":-5,"_104":17,"_105":17,"_106":107,"_154":33,"_155":156,"_157":27,"_158":159},"id","1b75c6de786464fcf1c2","isMyApp",false,"projectId","3fc2dd7a-f327-4c75-b6ed-405df4108ac9","name","vibeduels","description","Watch streamers battle it out in real-time vibe competitions where AI analyzes everything from their energy levels to chat reactions, music choices, and visual aesthetics! Viewers vote on lighting, mood, and pure charisma as streamers adapt their entire setup mid-duel to match AI-generated vibe prompts like \"cozy apocalypse\" or \"chaotic zen.\"","brief","Streamers battle in AI-judged vibe competitions where charisma meets chaos!","isLive",true,"isPublic","tags",[31],"👑","cover","https://cdn.dev.fun/snapshot/1b75c6de786464fcf1c2/107179_9cdaa259.webp","cdnUrl","https://cdn.dev.fun/app/1b75c6de786464fcf1c2/107179","createdAt",["D",1756404142589],"updatedAt",["D",1758674679078],"lastCommitId",["B","107179"],"tier",1,"credits",136,{"_14":47,"_48":49,"_50":49,"_51":52,"_53":49,"_54":55,"_56":57},"709273f2-1257-4ef7-8f65-d043536a9129","uniqueId","DUEL","username","solanaWallet","8Kn2m2aCewgsmKHPYD5jjiYf8cfaLG94ay7k8F1os9B4","displayName","bio","VibeDuels Studio is a dev.fun-native studio. We design apps and arenas for Pump.fun streamers.\n$DUEL powers the Thunderdome — our live coding streaming arena","avatar","https://cdn.dev.fun/avatar/709273f2-1257-4ef7-8f65-d043536a9129/0a3d625e.webp","commitCount",102,"forkCount","likeCount",2,"runsCount",728,"downvoteCount",0,"upvoteCount",6,"upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","5ShheFejJoA4J68G1kWDHeGww6wZktiow2mCkxB1Bdev","code","import { useEffect, useState } from 'react';\nimport { useDevapp, UserButton, DevappProvider } from '@devfunlabs/web-sdk';\nconst scrollbarStyles = `\n .custom-scrollbar::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .custom-scrollbar::-webkit-scrollbar-track {\n background: #111827;\n border-radius: 3px;\n }\n .custom-scrollbar::-webkit-scrollbar-thumb {\n background: #22c55e;\n border-radius: 3px;\n border: 1px solid #111827;\n }\n .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n background: #16a34a;\n }\n .custom-scrollbar::-webkit-scrollbar-corner {\n background: #111827;\n }\n /* Firefox scrollbar */\n .custom-scrollbar {\n scrollbar-width: thin;\n scrollbar-color: #22c55e #111827;\n }\n /* Global scrollbar for body */\n html::-webkit-scrollbar {\n width: 8px;\n }\n html::-webkit-scrollbar-track {\n background: #000000;\n }\n html::-webkit-scrollbar-thumb {\n background: #22c55e;\n border-radius: 4px;\n }\n html::-webkit-scrollbar-thumb:hover {\n background: #16a34a;\n }\n body {\n scrollbar-width: thin;\n scrollbar-color: #22c55e #000000;\n }\n`;\nimport { motion } from 'framer-motion';\nimport { Monitor, Terminal, Code, Settings, X, Minus, Square, Users, Trophy, Play, Wallet, Copy, Check, Plus, ExternalLink, Trash2 } from 'lucide-react';\nfunction Clock() {\n const [time, setTime] = useState(new Date());\n useEffect(() => {\n const timer = setInterval(() => setTime(new Date()), 1000);\n return () => clearInterval(timer);\n }, []);\n return

\n {time.toLocaleTimeString([], {\n hour: '2-digit',\n minute: '2-digit'\n })}\n

;\n}\nconst TelegramIcon = () => ;\nconst XIcon = () => ;\nconst AdminPanel = ({\n devbaseClient,\n customApps,\n setCustomApps\n}) => {\n const [newAppName, setNewAppName] = useState('');\n const [newAppUrl, setNewAppUrl] = useState('');\n const [newAppImage, setNewAppImage] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n const [editingApp, setEditingApp] = useState(null);\n const [editAppName, setEditAppName] = useState('');\n const [editAppUrl, setEditAppUrl] = useState('');\n const [editAppImage, setEditAppImage] = useState('');\n const handleImageChange = e => {\n setNewAppImage(e.target.value);\n };\n const compressImage = (file, maxWidth = 64, maxHeight = 64, quality = 0.8) => {\n return new Promise(resolve => {\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n const img = new Image();\n img.onload = () => {\n let {\n width,\n height\n } = img;\n if (width > height) {\n if (width > maxWidth) {\n height = height * maxWidth / width;\n width = maxWidth;\n }\n } else {\n if (height > maxHeight) {\n width = width * maxHeight / height;\n height = maxHeight;\n }\n }\n canvas.width = width;\n canvas.height = height;\n ctx.drawImage(img, 0, 0, width, height);\n const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);\n resolve(compressedDataUrl);\n };\n img.src = URL.createObjectURL(file);\n });\n };\n const handleFileUpload = async e => {\n const file = e.target.files[0];\n if (file) {\n if (file.size > 500 * 1024) {\n alert('File size must be less than 500KB');\n return;\n }\n if (!file.type.startsWith('image/')) {\n alert('Please select an image file');\n return;\n }\n try {\n const compressedImage = await compressImage(file);\n setNewAppImage(compressedImage);\n } catch (error) {\n alert('Failed to process image. Please try another file.');\n console.error('Image compression error:', error);\n }\n }\n };\n const handleAddApp = async () => {\n if (!newAppName.trim() || !newAppUrl.trim() || !devbaseClient) return;\n setIsLoading(true);\n try {\n await devbaseClient.createEntity('apps', {\n name: newAppName.trim(),\n url: newAppUrl.trim(),\n image: newAppImage || ''\n });\n const updatedApps = await devbaseClient.listEntities('apps');\n setCustomApps(updatedApps);\n setNewAppName('');\n setNewAppUrl('');\n setNewAppImage('');\n } catch (error) {\n console.error('Failed to add app:', error);\n alert(`Failed to add app: ${error.message}`);\n } finally {\n setIsLoading(false);\n }\n };\n const handleDeleteApp = async appId => {\n if (!devbaseClient) return;\n setIsLoading(true);\n try {\n await devbaseClient.deleteEntity('apps', appId);\n const updatedApps = await devbaseClient.listEntities('apps');\n setCustomApps(updatedApps);\n } catch (error) {\n console.error('Failed to delete app:', error);\n alert('Failed to delete app. Please check your connection and try again.');\n } finally {\n setIsLoading(false);\n }\n };\n const startEditApp = app => {\n setEditingApp(app.id);\n setEditAppName(app.name);\n setEditAppUrl(app.url);\n setEditAppImage(app.image || '');\n };\n const cancelEdit = () => {\n setEditingApp(null);\n setEditAppName('');\n setEditAppUrl('');\n setEditAppImage('');\n };\n const handleEditImageChange = e => {\n setEditAppImage(e.target.value);\n };\n const handleEditFileUpload = async e => {\n const file = e.target.files[0];\n if (file) {\n if (file.size > 500 * 1024) {\n alert('File size must be less than 500KB');\n return;\n }\n if (!file.type.startsWith('image/')) {\n alert('Please select an image file');\n return;\n }\n try {\n const compressedImage = await compressImage(file);\n setEditAppImage(compressedImage);\n } catch (error) {\n alert('Failed to process image. Please try another file.');\n console.error('Image compression error:', error);\n }\n }\n };\n const handleUpdateApp = async () => {\n if (!editAppName.trim() || !editAppUrl.trim() || !devbaseClient || !editingApp) return;\n setIsLoading(true);\n try {\n await devbaseClient.updateEntity('apps', editingApp, {\n name: editAppName.trim(),\n url: editAppUrl.trim(),\n image: editAppImage || ''\n });\n const updatedApps = await devbaseClient.listEntities('apps');\n setCustomApps(updatedApps);\n cancelEdit();\n } catch (error) {\n console.error('Failed to update app:', error);\n alert(`Failed to update app: ${error.message}`);\n } finally {\n setIsLoading(false);\n }\n };\n return

Admin Panel

Add Desktop App

\n setNewAppName(e.target.value)} disabled={isLoading} className=\"w-full p-2 border border-gray-400 text-black focus:outline-none focus:border-green-500 disabled:opacity-50\" style={{\n borderStyle: 'inset'\n }} />\n setNewAppUrl(e.target.value)} disabled={isLoading} className=\"w-full p-2 border border-gray-400 text-black focus:outline-none focus:border-green-500 disabled:opacity-50\" style={{\n borderStyle: 'inset'\n }} />\n

\n App Icon\n \n

\n \n

Or enter image URL:

\n \n

\n \n {newAppImage &&

\n $\"Preview\"$ e.target.style.display = 'none'} />\n Preview\n

}\n

\n \n

\n\n

Manage Apps

\n {customApps.map(app =>

\n {editingApp === app.id ?

\n setEditAppName(e.target.value)} disabled={isLoading} className=\"w-full p-1 border border-gray-400 text-black text-sm focus:outline-none focus:border-green-500 disabled:opacity-50\" style={{\n borderStyle: 'inset'\n }} placeholder=\"App Name\" />\n setEditAppUrl(e.target.value)} disabled={isLoading} className=\"w-full p-1 border border-gray-400 text-black text-sm focus:outline-none focus:border-green-500 disabled:opacity-50\" style={{\n borderStyle: 'inset'\n }} placeholder=\"App URL\" />\n

\n \n \n {editAppImage &&

\n $\"Preview\"$ e.target.style.display = 'none'} />\n Preview\n

}\n

\n \n \n

{app.name}

{app.url}

\n \n \n

}\n

)}\n {customApps.length === 0 &&

No custom apps added yet

}\n

;\n};\nfunction DesktopInterface({\n onClose\n}) {\n const {\n userWallet,\n devbaseClient\n } = useDevapp();\n const adminWallet = '8Kn2m2aCewgsmKHPYD5jjiYf8cfaLG94ay7k8F1os9B4';\n const [windows, setWindows] = useState([]);\n const [animatedWindows, setAnimatedWindows] = useState(() => new Set());\n const [minimizedWindows, setMinimizedWindows] = useState(() => new Set());\n const [maximizedWindows, setMaximizedWindows] = useState(() => new Map());\n const [startMenuOpen, setStartMenuOpen] = useState(false);\n const [isMobile, setIsMobile] = useState(false);\n const [customApps, setCustomApps] = useState([]);\n const [appsLoading, setAppsLoading] = useState(false);\n useEffect(() => {\n const handleResize = () => {\n setIsMobile(window.innerWidth < 768);\n };\n if (typeof window !== 'undefined') {\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }\n }, []);\n useEffect(() => {\n const loadCustomApps = async () => {\n if (!devbaseClient) return;\n setAppsLoading(true);\n try {\n const apps = await devbaseClient.listEntities('apps');\n setCustomApps(Array.isArray(apps) ? apps : []);\n } catch (error) {\n console.error('Failed to load custom apps:', error);\n setCustomApps([]);\n } finally {\n setAppsLoading(false);\n }\n };\n const timeoutId = setTimeout(() => {\n loadCustomApps();\n }, 1000);\n return () => clearTimeout(timeoutId);\n }, [devbaseClient]);\n const getTerminalContent = () =>

VibeDuels Terminal v1.0.0

Type 'help' for available commands

C:\\VIBEDUELS{'>'} _

Available commands:

- start-duel: Begin a new vibe battle

- watch-stream: Connect to live streams

- join-community: Access social channels

- check-token: View $DUEL token info

;\n const getWalletContent = () => {\n const isAdmin = userWallet === adminWallet;\n return

Wallet Connect

\n \n

\n {userWallet &&

Connected Wallet:

{userWallet}

\n {isAdmin &&

✓ ADMIN ACCESS

}\n

}\n {!userWallet &&

Click above to connect your Solana wallet

}\n

;\n };\n const getDuelsContent = () =>

Live Duels

Duel #001: Cozy Apocalypse

Streamer A vs Streamer B

Current votes: 42 vs 38

Duel #002: Chaotic Zen

Streamer C vs Streamer D

Current votes: 35 vs 29

;\n const getCommunityContent = () =>

Community Hub

\n \n \n \n

;\n const getCustomAppContent = (url, name) =>