[{"_1":2,"_135":-5,"_136":-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":59,"_60":41,"_61":62,"_63":59,"_64":59,"_65":59,"_66":41,"_67":59,"_68":59,"_69":17,"_70":25,"_71":72,"_73":74,"_75":76,"_77":78,"_79":80,"_95":-5,"_96":17,"_97":98,"_131":31,"_132":133,"_134":17},"id","dbb79810a8070675f0a5","isMyApp",false,"name","dev.Arcade","description","Dive into the ultimate playground for dev.fun game creators and players! Gameverse is your one-stop hub to discover, share, and discuss the wildest creations from the community, with a sleek interface that makes browsing games as fun as playing them.","brief","The cosmic library where dev.fun games live, thrive, and spark conversations!","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/dbb79810a8070675f0a5/71430_8cabcee2.webp","cdnUrl","https://cdn.dev.fun/app/dbb79810a8070675f0a5/71430","createdAt",["D",1748369351344],"updatedAt",["D",1748470639012],"lastCommitId",["B","71430"],"tier",1,"credits",57,{"_14":45,"_46":47,"_48":47,"_49":50,"_51":47,"_52":53,"_54":55},"87ea7a88-101d-449a-ab13-3cc597a0c2ac","uniqueId","Belzona_Classic","username","solanaWallet","FjRKpVcKiGVuqSRYB4dNyVXb8yWo86my5qqD8PmYq3Mo","displayName","bio","","avatar","https://cdn.dev.fun/avatar/87ea7a88-101d-449a-ab13-3cc597a0c2ac/62a12502.webp","commitCount",142,"forkCount",0,"likeCount","runsCount",320,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","FLemgWv9c1aT3wCDcJ8aDBqCp1sNjj1aouAs2Yi9pump","code","import { useState, useEffect, useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Search, Send, Plus, MessageSquare, ChevronRight, ChevronLeft, ChevronDown, Tag, User, Link, Clock, Heart, ArrowUpRight, MessageCircle, Star, AlertTriangle, CheckCircle, LogOut, Shield, Trash2 } from 'lucide-react';\nconst API_BASE_URL = 'https://devarcade-production.up.railway.app';\nconst api = {\n getGames: async (offset = 0, limit = 10) => {\n console.log('🎮 Fetching games from API...', `${API_BASE_URL}/games?offset=${offset}&limit=${limit}`);\n try {\n const response = await fetch(`${API_BASE_URL}/games?offset=${offset}&limit=${limit}`, {\n mode: 'cors',\n headers: {\n 'Accept': 'application/json'\n }\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return [];\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to fetch games. Please try again later.\", \"error\");\n return [];\n }\n const data = await response.json();\n console.log('🎮 Fetched games:', data);\n console.log(`📊 Found ${data.length} games in database`);\n return data;\n } catch (error) {\n console.error('💥 Error fetching games:', error);\n showNotification(\"An error occurred while fetching games. Please try refreshing.\", \"error\");\n return [];\n }\n },\n createGame: async gameData => {\n console.log('🚀 Submitting new game:', {\n title: gameData.title,\n username: gameData.username,\n url: gameData.url,\n tags: gameData.tags\n });\n console.log(`🔗 POST request to: ${API_BASE_URL}/games`);\n try {\n const dataToSend = {\n ...gameData,\n tags: Array.isArray(gameData.tags) ? gameData.tags : []\n };\n console.log('📦 Request payload:', JSON.stringify(dataToSend));\n const response = await fetch(`${API_BASE_URL}/games`, {\n method: 'POST',\n mode: 'cors',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n },\n body: JSON.stringify(dataToSend)\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return null;\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to create game. Please try again later.\", \"error\");\n throw new Error(`Failed to create game: ${response.status}`);\n }\n const data = await response.json();\n console.log('✅ Game submission response:', data);\n return data;\n } catch (error) {\n console.error(\"💥 Error creating game:\", error);\n console.log(\"📝 Game data that failed:\", gameData);\n showNotification(\"An error occurred while creating the game. Please try again.\", \"error\");\n return [];\n }\n },\n getThreads: async (offset = 0, limit = 10) => {\n console.log('🗣️ Fetching forum threads...', `${API_BASE_URL}/threads?offset=${offset}&limit=${limit}`);\n try {\n const response = await fetch(`${API_BASE_URL}/threads?offset=${offset}&limit=${limit}`, {\n mode: 'cors',\n headers: {\n 'Accept': 'application/json'\n }\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return [];\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to fetch threads. Please try again later.\", \"error\");\n return [];\n }\n const data = await response.json();\n console.log('📋 Fetched threads:', data);\n console.log(`📊 Found ${data.length} discussion threads`);\n return data;\n } catch (error) {\n console.error('💥 Error fetching threads:', error);\n showNotification(\"An error occurred while fetching threads. Please try refreshing.\", \"error\");\n return [];\n }\n },\n createThread: async threadData => {\n try {\n const {\n title,\n username,\n content\n } = threadData;\n console.log('🧵 Creating new thread:', {\n title,\n username,\n content: content ? `${content.substring(0, 30)}${content.length > 30 ? '...' : ''}` : 'No content'\n });\n console.log(`🔗 POST request to: ${API_BASE_URL}/threads`);\n const response = await fetch(`${API_BASE_URL}/threads`, {\n method: 'POST',\n mode: 'cors',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n },\n body: JSON.stringify({\n title,\n username,\n content\n })\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return null;\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to create thread. Please try again later.\", \"error\");\n throw new Error(`Failed to create thread: ${response.status}`);\n }\n const data = await response.json();\n console.log('✅ Thread creation response:', data);\n return data;\n } catch (error) {\n console.error('💥 Error creating thread:', error);\n console.log('⚠️ Falling back to local thread creation');\n showNotification(\"An error occurred while creating the thread. Using local data instead.\", \"error\");\n const {\n title,\n username\n } = threadData;\n return [{\n id: Date.now(),\n title,\n username,\n created_at: new Date().toISOString()\n }];\n }\n },\n getAllPosts: async threadId => {\n console.log(`📨 Fetching all posts for thread ${threadId}...`, `${API_BASE_URL}/all-posts/${threadId}`);\n try {\n const response = await fetch(`${API_BASE_URL}/all-posts/${threadId}`, {\n mode: 'cors',\n headers: {\n 'Accept': 'application/json'\n }\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return [];\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to fetch posts. Please try again later.\", \"error\");\n return [];\n }\n const data = await response.json();\n console.log(`💬 Fetched all posts for thread ${threadId}:`, data);\n console.log(`📊 Found ${data.length} total posts in this thread`);\n return data;\n } catch (error) {\n console.error(`💥 Error fetching all posts for thread ${threadId}:`, error);\n showNotification(\"An error occurred while fetching thread replies. Please try refreshing.\", \"error\");\n return [];\n }\n },\n createPost: async postData => {\n try {\n console.log('📝 Submitting new post:', {\n thread_id: postData.thread_id,\n username: postData.username,\n parent_post_id: postData.parent_post_id || null\n });\n console.log(`🔗 POST request to: ${API_BASE_URL}/posts`);\n if (postData.parent_post_id) {\n console.log(`🔄 This is a reply to post ID: ${postData.parent_post_id}`);\n }\n const response = await fetch(`${API_BASE_URL}/posts`, {\n method: 'POST',\n mode: 'cors',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n },\n body: JSON.stringify(postData)\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return null;\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to create post. Please try again later.\", \"error\");\n throw new Error(`Failed to create post: ${response.status}`);\n }\n const data = await response.json();\n console.log('✅ Post submission response:', data);\n return data;\n } catch (error) {\n console.error('💥 Error creating post:', error);\n console.log('📝 Post data that failed:', postData);\n showNotification(\"An error occurred while posting your reply. Please try again.\", \"error\");\n return [];\n }\n },\n likePost: async (post_id, username) => {\n console.log('👍 Liking post:', post_id);\n try {\n const response = await fetch(`${API_BASE_URL}/likes`, {\n method: 'POST',\n mode: 'cors',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n },\n body: JSON.stringify({\n post_id,\n username\n })\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many likes. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return null;\n }\n if (response.status === 409) {\n console.log('⚠️ User already liked this post');\n showNotification(\"You already liked this post!\", \"error\");\n return null;\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to like post. Please try again later.\", \"error\");\n throw new Error(`Failed to like post: ${response.status}`);\n }\n const data = await response.json();\n console.log('✅ Like recorded:', data);\n return data;\n } catch (error) {\n console.error('💥 Error liking post:', error);\n showNotification(\"An error occurred while liking the post. Please try again.\", \"error\");\n return null;\n }\n },\n getLikeCount: async post_id => {\n console.log(`❤️ Fetching likes for post ${post_id}...`);\n try {\n const response = await fetch(`${API_BASE_URL}/likes/${post_id}`, {\n mode: 'cors',\n headers: {\n 'Accept': 'application/json'\n }\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n return 0;\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n return 0;\n }\n const {\n count\n } = await response.json();\n console.log(`💖 Post ${post_id} has ${count} likes`);\n return count;\n } catch (error) {\n console.error(`💥 Error fetching likes for post ${post_id}:`, error);\n return 0;\n }\n },\n getReplies: async (parentPostId, afterFirst = false) => {\n console.log(`📨 Fetching ${afterFirst ? 'additional' : 'first'} replies for post ${parentPostId}...`);\n const url = afterFirst ? `${API_BASE_URL}/replies/${parentPostId}?after=first` : `${API_BASE_URL}/replies/${parentPostId}`;\n try {\n const response = await fetch(url, {\n mode: 'cors',\n headers: {\n 'Accept': 'application/json'\n }\n });\n if (response.status === 429) {\n const errorData = await response.json();\n const errorMessage = errorData.error || 'Too many requests. Please try again later.';\n console.error(`🛑 Rate limited: ${errorMessage}`);\n showNotification(`⏱️ You're doing that too fast: ${errorMessage}`, \"error\");\n return [];\n }\n if (!response.ok) {\n console.error(`🛑 API returned status ${response.status}: ${response.statusText}`);\n showNotification(\"Failed to fetch replies. Please try again later.\", \"error\");\n return [];\n }\n const data = await response.json();\n console.log(`💬 Fetched ${afterFirst ? 'additional' : 'first'} replies for post ${parentPostId}:`, data);\n return data;\n } catch (error) {\n console.error(`💥 Error fetching replies for post ${parentPostId}:`, error);\n showNotification(\"An error occurred while fetching replies. Please try refreshing.\", \"error\");\n return [];\n }\n }\n};\nexport default function App() {\n const [currentPage, setCurrentPage] = useState('home');\n const [games, setGames] = useState([]);\n const [threads, setThreads] = useState([]);\n const [currentThread, setCurrentThread] = useState(null);\n const [loading, setLoading] = useState(true);\n const [notification, setNotification] = useState({\n show: false,\n message: '',\n type: 'success'\n });\n const [offsets, setOffsets] = useState({\n games: 0,\n threads: 0,\n posts: 0\n });\n const [hasMore, setHasMore] = useState({\n games: true,\n threads: true,\n posts: true\n });\n const [loadingMore,,] = useState({\n games: false,\n threads: false,\n posts: false\n });\n const [username, setUsername] = useState('');\n const [showLoginModal, setShowLoginModal] = useState(false);\n const [isAdmin, setIsAdmin] = useState(false);\n const [, setAdminPassword] = useState('');\n const [searchQuery, setSearchQuery] = useState('');\n const [selectedTags, setSelectedTags] = useState([]);\n const [showAdminPasswordModal, setShowAdminPasswordModal] = useState(false);\n useEffect(() => {\n const savedAdminPassword = localStorage.getItem('adminPassword');\n if (savedAdminPassword) {\n setIsAdmin(true);\n setAdminPassword(savedAdminPassword);\n window.isAdmin = true;\n window.adminPassword = savedAdminPassword;\n setupDeleteFunction(savedAdminPassword);\n }\n window.isAdmin = isAdmin;\n return () => {\n delete window.isAdmin;\n delete window.adminPassword;\n delete window.deletePost;\n delete window.deleteThread;\n };\n }, [isAdmin]);\n useEffect(() => {\n window.setNotification = setNotification;\n const storedUsername = localStorage.getItem('username');\n if (storedUsername) {\n console.log('👤 Found stored username:', storedUsername);\n setUsername(storedUsername);\n } else {\n console.log('🔑 No username found, showing login modal');\n setShowLoginModal(true);\n }\n return () => {\n delete window.setNotification;\n };\n }, []);\n useEffect(() => {\n refreshData(true);\n }, []);\n const saveUsername = newUsername => {\n const finalUsername = newUsername.trim() || 'Anonymous';\n console.log(`👤 Saving username: ${finalUsername}`);\n const currentUsername = localStorage.getItem('username');\n if (currentUsername && currentUsername !== finalUsername) {\n const lastChangeTime = localStorage.getItem('lastUsernameChangeTime');\n if (lastChangeTime) {\n const timePassedMs = Date.now() - parseInt(lastChangeTime);\n const cooldownTimeMs = 24 * 60 * 60 * 1000;\n if (timePassedMs < cooldownTimeMs) {\n const remainingHours = Math.ceil((cooldownTimeMs - timePassedMs) / (60 * 60 * 1000));\n showNotification(`Username can only be changed once per day. Try again in ${remainingHours} hours.`, \"error\");\n return;\n }\n }\n localStorage.setItem('lastUsernameChangeTime', Date.now().toString());\n showNotification(`Username changed to ${finalUsername}! Next change available in 24 hours.`, \"success\");\n } else {\n showNotification(`Welcome, ${finalUsername}! 👋`, \"success\");\n }\n localStorage.setItem('username', finalUsername);\n setUsername(finalUsername);\n setShowLoginModal(false);\n };\n const logoutUser = () => {\n console.log('🚪 Logging out user');\n setShowLoginModal(true);\n showNotification(\"You've been logged out\", \"success\");\n };\n const refreshData = async (resetOffsets = true) => {\n console.log('🔄 Refreshing application data...');\n console.log('⏳ Starting parallel fetch of games and threads');\n try {\n setLoading(true);\n if (resetOffsets) {\n setOffsets({\n games: 0,\n threads: 0,\n posts: 0\n });\n setHasMore({\n games: true,\n threads: true,\n posts: true\n });\n }\n const startTime = performance.now();\n let gamesData, threadsData;\n try {\n gamesData = await api.getGames(resetOffsets ? 0 : offsets.games);\n setHasMore(prev => ({\n ...prev,\n games: gamesData.length >= 10\n }));\n } catch (e) {\n console.error('💥 Failed to fetch games:', e);\n gamesData = [];\n }\n try {\n threadsData = await api.getThreads(resetOffsets ? 0 : offsets.threads);\n setHasMore(prev => ({\n ...prev,\n threads: threadsData.length >= 10\n }));\n } catch (e) {\n console.error('💥 Failed to fetch threads:', e);\n threadsData = [];\n }\n const fetchTime = (performance.now() - startTime).toFixed(2);\n console.log(`⚡ Data fetched in ${fetchTime}ms`);\n console.log('📊 Data refresh summary:', {\n gamesCount: gamesData?.length || 0,\n threadsCount: threadsData?.length || 0,\n fetchTimeMs: fetchTime\n });\n console.log('🎲 Updating games state:', gamesData?.length || 0, 'items');\n setGames(resetOffsets ? gamesData || [] : [...games, ...(gamesData || [])]);\n console.log('💬 Updating threads state:', threadsData?.length || 0, 'items');\n setThreads(resetOffsets ? threadsData || [] : [...threads, ...(threadsData || [])]);\n if (gamesData.length > 0 || threadsData.length > 0) {\n showNotification(\"Game data loaded successfully! 🎮\", \"success\");\n } else {\n console.log('ℹ️ No data found in database');\n }\n } catch (error) {\n console.error(\"💥 Error fetching data:\", error);\n console.log('⚠️ Setting empty state due to fetch error');\n showNotification(\"Connection error. Please check your network or try again later.\", \"error\");\n setGames([]);\n setThreads([]);\n } finally {\n setLoading(false);\n console.log('✅ Data refresh complete');\n }\n };\n const refreshView = async (view = currentPage, data = null) => {\n await refreshData();\n navigateTo(view, data);\n const sparkle = document.createElement('div');\n sparkle.className = 'fixed inset-0 pointer-events-none z-50';\n sparkle.innerHTML = `\n

\n `;\n document.body.appendChild(sparkle);\n setTimeout(() => document.body.removeChild(sparkle), 1000);\n };\n const filteredGames = games.filter(game => {\n const matchesSearch = searchQuery === '' || game.title.toLowerCase().includes(searchQuery.toLowerCase()) || game.description.toLowerCase().includes(searchQuery.toLowerCase()) || (game.username ? game.username.toLowerCase().includes(searchQuery.toLowerCase()) : game.author ? game.author.toLowerCase().includes(searchQuery.toLowerCase()) : false);\n const matchesTags = selectedTags.length === 0 || selectedTags.every(tag => game.tags && game.tags.includes(tag));\n return matchesSearch && matchesTags;\n });\n const navigateTo = (page, data = null) => {\n const previousPage = currentPage;\n console.log(`🧭 Navigation: ${previousPage} → ${page}`, data ? `with data: ${JSON.stringify(data)}` : '');\n if (page === 'thread' && data) {\n console.log(`📌 Opening thread \"${data.title}\" (ID: ${data.id})`);\n setCurrentThread(data);\n } else if (page === 'add-game') {\n console.log('🎮 Opening game submission form');\n } else if (page === 'create-thread') {\n console.log('💬 Opening thread creation form');\n } else if (page === 'home') {\n console.log('🏠 Returning to games list');\n } else if (page === 'forum') {\n console.log('📋 Opening forum thread list');\n }\n console.log(`⏱️ Navigation time: ${new Date().toISOString()}`);\n setCurrentPage(page);\n };\n const showNotification = (message, type = 'success') => {\n if (typeof window !== 'undefined' && window.setNotification) {\n window.setNotification({\n show: true,\n message,\n type\n });\n setTimeout(() => {\n if (typeof window !== 'undefined' && window.setNotification) {\n window.setNotification({\n show: false,\n message: '',\n type: 'success'\n });\n }\n }, 3000);\n } else {\n console.log(`[Notification ${type}]: ${message}`);\n }\n };\n const setupDeleteFunction = password => {\n window.deletePost = async postId => {\n try {\n console.log(`🗑️ Attempting to delete post ID: ${postId}`);\n if (!password) {\n console.error(\"❌ No admin password available\");\n showNotification(\"❌ Admin functionality unavailable. Please log in again.\", \"error\");\n setIsAdmin(false);\n window.isAdmin = false;\n localStorage.removeItem('adminPassword');\n setShowAdminPasswordModal(true);\n return;\n }\n const res = await fetch(`${API_BASE_URL}/posts/${postId}`, {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n password: password\n })\n });\n console.log(`🔍 Delete response status: ${res.status}`);\n const result = await res.json();\n if (res.ok) {\n console.log('✅ Post deleted successfully');\n showNotification(\"🗑️ Post deleted successfully.\", \"success\");\n refreshData();\n } else {\n console.error(`❌ Failed to delete: ${result.error}`);\n showNotification(`❌ Failed to delete: ${result.error}`, \"error\");\n if (res.status === 403) {\n setIsAdmin(false);\n window.isAdmin = false;\n localStorage.removeItem('adminPassword');\n showNotification(\"🔒 Admin session expired. Please log in again.\", \"error\");\n setShowAdminPasswordModal(true);\n }\n }\n } catch (err) {\n console.error(\"❌ Server error:\", err);\n showNotification(\"🚨 Could not delete post due to server error.\", \"error\");\n }\n };\n window.deleteThread = async threadId => {\n try {\n console.log(`🗑️ Attempting to delete thread ID: ${threadId}`);\n if (!password) {\n console.error(\"❌ No admin password available\");\n showNotification(\"❌ Admin functionality unavailable. Please log in again.\", \"error\");\n setIsAdmin(false);\n window.isAdmin = false;\n localStorage.removeItem('adminPassword');\n setShowAdminPasswordModal(true);\n return;\n }\n const res = await fetch(`${API_BASE_URL}/threads/${threadId}`, {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n password: password\n })\n });\n console.log(`🔍 Delete thread response status: ${res.status}`);\n const result = await res.json();\n if (res.ok) {\n console.log('✅ Thread deleted successfully');\n showNotification(\"🗑️ Thread deleted successfully.\", \"success\");\n if (currentPage === 'thread') {\n navigateTo('forum');\n }\n refreshData();\n } else {\n console.error(`❌ Failed to delete thread: ${result.error}`);\n showNotification(`❌ Failed to delete thread: ${result.error}`, \"error\");\n if (res.status === 403) {\n setIsAdmin(false);\n window.isAdmin = false;\n localStorage.removeItem('adminPassword');\n showNotification(\"🔒 Admin session expired. Please log in again.\", \"error\");\n setShowAdminPasswordModal(true);\n }\n }\n } catch (err) {\n console.error(\"❌ Server error:\", err);\n showNotification(\"🚨 Could not delete thread due to server error.\", \"error\");\n }\n };\n window.deleteGame = async gameId => {\n try {\n console.log(`🗑️ Attempting to delete game ID: ${gameId}`);\n if (!password) {\n console.error(\"❌ No admin password available\");\n showNotification(\"❌ Admin functionality unavailable. Please log in again.\", \"error\");\n setIsAdmin(false);\n window.isAdmin = false;\n localStorage.removeItem('adminPassword');\n setShowAdminPasswordModal(true);\n return;\n }\n const res = await fetch(`${API_BASE_URL}/games/${gameId}`, {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n password: password\n })\n });\n console.log(`🔍 Delete game response status: ${res.status}`);\n const result = await res.json();\n if (res.ok) {\n console.log('✅ Game deleted successfully');\n showNotification(\"🗑️ Game deleted successfully.\", \"success\");\n refreshData();\n } else {\n console.error(`❌ Failed to delete game: ${result.error}`);\n showNotification(`❌ Failed to delete game: ${result.error}`, \"error\");\n if (res.status === 403) {\n setIsAdmin(false);\n window.isAdmin = false;\n localStorage.removeItem('adminPassword');\n showNotification(\"🔒 Admin session expired. Please log in again.\", \"error\");\n setShowAdminPasswordModal(true);\n }\n }\n } catch (err) {\n console.error(\"❌ Server error:\", err);\n showNotification(\"🚨 Could not delete game due to server error.\", \"error\");\n }\n };\n };\n const toggleAdminMode = () => {\n if (isAdmin) {\n setIsAdmin(false);\n setAdminPassword('');\n window.isAdmin = false;\n delete window.adminPassword;\n delete window.deletePost;\n delete window.deleteThread;\n delete window.deleteGame;\n localStorage.removeItem('adminPassword');\n showNotification(\"👋 Logged out of admin mode\", \"success\");\n } else {\n setShowAdminPasswordModal(true);\n }\n };\n const handleAdminLogin = async password => {\n if (!password) {\n setShowAdminPasswordModal(false);\n return;\n }\n try {\n const testRes = await fetch(`${API_BASE_URL}/posts/99999999`, {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n password\n })\n });\n let result = {};\n if (testRes.status !== 404) {\n try {\n result = await testRes.json();\n } catch (e) {\n console.error(\"Failed to parse JSON response\", e);\n }\n }\n if (testRes.status === 403) {\n console.error(\"❌ Admin authentication failed:\", result.error);\n showNotification(\"❌ Invalid admin password\", \"error\");\n setShowAdminPasswordModal(false);\n return;\n }\n setIsAdmin(true);\n setAdminPassword(password);\n showNotification(\"✅ Admin mode enabled\", \"success\");\n window.isAdmin = true;\n window.adminPassword = password;\n localStorage.setItem('adminPassword', password);\n setupDeleteFunction(password);\n document.body.classList.add('admin-mode');\n refreshData();\n } catch (error) {\n console.error(\"💥 Error validating admin password:\", error);\n showNotification(\"🚨 Server error during authentication. Please try again.\", \"error\");\n }\n setShowAdminPasswordModal(false);\n };\n return

\n \n \n

\n This is a freely provided service that cost money to maintain. If you like it please support by buying $Arcade\n

\n \n Buy $Arcade\n \n \n \n \n X.com\n \n

\n \n \n \n \n {currentPage === 'home' && }\n \n {currentPage === 'add-game' && }\n \n {currentPage === 'forum' && }\n \n {currentPage === 'create-thread' && }\n \n {currentPage === 'thread' && currentThread && }\n \n \n \n \n {showLoginModal && }\n {showAdminPasswordModal && }\n \n \n \n

;\n}\nfunction LoginModal({\n saveUsername\n}) {\n const [inputUsername, setInputUsername] = useState('');\n const [usernameError, setUsernameError] = useState('');\n const [cooldownInfo, setCooldownInfo] = useState(null);\n const USERNAME_MAX_LENGTH = 50;\n const currentStoredUsername = localStorage.getItem('username') || '';\n useEffect(() => {\n setInputUsername(currentStoredUsername);\n const lastChangeTime = localStorage.getItem('lastUsernameChangeTime');\n if (lastChangeTime) {\n const timePassedMs = Date.now() - parseInt(lastChangeTime);\n const cooldownTimeMs = 24 * 60 * 60 * 1000;\n if (timePassedMs < cooldownTimeMs) {\n const remainingTimeMs = cooldownTimeMs - timePassedMs;\n const hours = Math.floor(remainingTimeMs / (60 * 60 * 1000));\n const minutes = Math.floor(remainingTimeMs % (60 * 60 * 1000) / (60 * 1000));\n const seconds = Math.floor(remainingTimeMs % (60 * 1000) / 1000);\n setCooldownInfo({\n remainingTimeMs,\n formattedTime: `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`,\n percentage: 100 - timePassedMs / cooldownTimeMs * 100\n });\n const intervalId = setInterval(() => {\n const newTimePassedMs = Date.now() - parseInt(lastChangeTime);\n if (newTimePassedMs >= cooldownTimeMs) {\n setCooldownInfo(null);\n clearInterval(intervalId);\n } else {\n const newRemainingTimeMs = cooldownTimeMs - newTimePassedMs;\n const hours = Math.floor(newRemainingTimeMs / (60 * 60 * 1000));\n const minutes = Math.floor(newRemainingTimeMs % (60 * 60 * 1000) / (60 * 1000));\n const seconds = Math.floor(newRemainingTimeMs % (60 * 1000) / 1000);\n setCooldownInfo({\n remainingTimeMs: newRemainingTimeMs,\n formattedTime: `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`,\n percentage: 100 - newTimePassedMs / cooldownTimeMs * 100\n });\n }\n }, 1000);\n return () => clearInterval(intervalId);\n }\n }\n }, []);\n const handleUsernameChange = e => {\n const username = e.target.value;\n setInputUsername(username);\n if (username.length > USERNAME_MAX_LENGTH) {\n setUsernameError(`Username must be ${USERNAME_MAX_LENGTH} characters or less`);\n } else {\n setUsernameError('');\n }\n };\n const handleSubmit = e => {\n e.preventDefault();\n if (inputUsername.length > USERNAME_MAX_LENGTH) {\n setUsernameError(`Username must be ${USERNAME_MAX_LENGTH} characters or less`);\n return;\n }\n if (cooldownInfo && inputUsername !== currentStoredUsername) {\n setUsernameError(`Username change on cooldown. Try again in ${cooldownInfo.formattedTime}`);\n return;\n }\n saveUsername(inputUsername);\n };\n const handleContinueWithCurrentUsername = () => {\n saveUsername(currentStoredUsername);\n };\n return \n \n

\n \n \n \n \n

\n Welcome to dev.Arcade\n

\n \n

\n {currentStoredUsername ? `Welcome back! You're logging in as ${currentStoredUsername}` : 'Enter your username to join the community. This will be used throughout the site/forum.'}\n

\n \n {cooldownInfo && \n

\n \n 🕹️\n \n USERNAME POWER-UP RECHARGING\n

\n \n

\n Ready in:\n \n {cooldownInfo.formattedTime}\n \n

\n }\n

\n \n

\n \n Username\n \n \n

\n {usernameError &&

{usernameError}

}\n

USERNAME_MAX_LENGTH ? 'text-red-400' : 'text-purple-300'}`}>\n {inputUsername.length}/{USERNAME_MAX_LENGTH}\n

\n \n

\n \n \n {cooldownInfo && currentStoredUsername && \n Continue with Current Username\n }\n

\n \n ;\n}\nfunction AdminPasswordModal({\n handleAdminLogin\n}) {\n const [password, setPassword] = useState('');\n const handleSubmit = e => {\n e.preventDefault();\n handleAdminLogin(password);\n };\n return \n \n

\n \n \n \n \n

\n Admin Access\n

\n \n

\n Enter admin password to enable moderator controls.\n

\n \n \n \n ;\n}\nfunction Header({\n navigateTo,\n currentPage,\n username,\n logoutUser,\n toggleAdminMode,\n isAdmin\n}) {\n return

\n \n \n \n \n navigateTo('home')} style={{\n cursor: 'pointer'\n }}>\n dev.Arcade\n {isAdmin && Admin}\n \n

\n \n

\n \n \n

\n \n {username || 'Anonymous'}\n

\n \n

;\n}\nfunction NavButton({\n text,\n onClick,\n active,\n icon\n}) {\n return \n {icon}\n {text}\n ;\n}\nfunction HomePage({\n games,\n navigateTo,\n searchQuery,\n setSearchQuery,\n selectedTags,\n setSelectedTags,\n loading,\n hasMore,\n loadingMore\n}) {\n const loadMoreGames = async () => {\n if (loadingMore.games) return;\n try {\n console.log('Loading more games...');\n const newOffset = games.length;\n const newGames = await api.getGames(newOffset, 10);\n setGames(prev => [...prev, ...newGames]);\n setHasMore(prev => ({\n ...prev,\n games: newGames.length >= 10\n }));\n } catch (error) {\n console.error('Error loading more games:', error);\n showAppNotification('Failed to load more games. Please try again.', 'error');\n }\n };\n const allTags = [...new Set(games.flatMap(game => game.tags || []))];\n return

\n \n

\n Discover Amazing Games\n

\n Explore the wildest creations from the dev.fun community. Find your next favorite game or share your own!\n

\n \n \n

\n \n \n setSearchQuery(e.target.value)} className=\"w-full pl-10 pr-4 py-3 rounded-lg bg-black bg-opacity-50 border border-purple-500 border-opacity-30 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-30 text-white placeholder-purple-300 transition-all duration-300\" />\n \n \n \n

\n {allTags.slice(0, 5).map(tag => )}\n \n {selectedTags.length > 0 && }\n

\n \n

\n \n {loading ?

: games.length === 0 ?

\n \n

No games found

Be the first to add an awesome game to the collection!

\n \n

: <>\n

\n {games.map((game, index) => )}\n

\n \n {hasMore.games &&

\n \n {loadingMore.games ? <>\n

\n Loading more...\n : 'Load More Games'}\n \n

}\n }\n

;\n}\nfunction GameCard({\n game,\n delay = 0\n}) {\n const [canDelete, setCanDelete] = useState(false);\n useEffect(() => {\n const checkAdminDeleteCapability = () => {\n setCanDelete(window.isAdmin === true && typeof window.deleteGame === 'function');\n };\n checkAdminDeleteCapability();\n const intervalId = setInterval(checkAdminDeleteCapability, 1000);\n return () => clearInterval(intervalId);\n }, []);\n const handleDelete = e => {\n e.stopPropagation();\n e.preventDefault();\n if (typeof window.deleteGame === 'function') {\n if (confirm('Are you sure you want to delete this game? This action cannot be undone.')) {\n window.deleteGame(game.id);\n }\n } else {\n showAppNotification(\"Admin functionality unavailable. Please log in again.\", \"error\");\n }\n };\n return \n {canDelete && \n \n }\n \n

\n {game.title}\n

\n \n {game.username || game.author}\n \n

\n \n

{game.description}

\n \n

\n {game.tags && game.tags.map(tag => \n {tag}\n )}\n

\n \n

\n \n {new Date(game.created_at || Date.now()).toLocaleString()}\n

\n \n \n Play \n \n

\n ;\n}\nfunction AddGameForm({\n navigateTo,\n showNotification,\n refreshView,\n username\n}) {\n const [formData, setFormData] = useState({\n title: '',\n username: username || 'Anonymous',\n gameUrl: '',\n description: '',\n tags: ''\n });\n const [submitting, setSubmitting] = useState(false);\n const [errors, setErrors] = useState({\n title: '',\n gameUrl: '',\n description: '',\n tags: ''\n });\n const TITLE_MIN_LENGTH = 1;\n const TITLE_MAX_LENGTH = 30;\n const URL_MIN_LENGTH = 20;\n const URL_MAX_LENGTH = 50;\n const DESCRIPTION_MIN_LENGTH = 10;\n const DESCRIPTION_MAX_LENGTH = 350;\n const TAGS_MIN_LENGTH = 3;\n const TAGS_MAX_LENGTH = 30;\n const MAX_TAGS_COUNT = 4;\n const MAX_TAG_LENGTH = 15;\n useEffect(() => {\n setFormData(prev => ({\n ...prev,\n username: username || 'Anonymous'\n }));\n }, [username]);\n const handleChange = e => {\n const {\n name,\n value\n } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value\n }));\n if (name === 'title') {\n if (value.length < TITLE_MIN_LENGTH) {\n setErrors(prev => ({\n ...prev,\n title: `Title must be at least ${TITLE_MIN_LENGTH} character`\n }));\n } else if (value.length > TITLE_MAX_LENGTH) {\n setErrors(prev => ({\n ...prev,\n title: `Title must be ${TITLE_MAX_LENGTH} characters or less`\n }));\n } else {\n setErrors(prev => ({\n ...prev,\n title: ''\n }));\n }\n } else if (name === 'gameUrl') {\n if (value.length < URL_MIN_LENGTH) {\n setErrors(prev => ({\n ...prev,\n gameUrl: `URL must be at least ${URL_MIN_LENGTH} characters`\n }));\n } else if (value.length > URL_MAX_LENGTH) {\n setErrors(prev => ({\n ...prev,\n gameUrl: `URL must be ${URL_MAX_LENGTH} characters or less`\n }));\n } else if (!value.startsWith('https://dev.fun/p/')) {\n setErrors(prev => ({\n ...prev,\n gameUrl: `URL must start with \"https://dev.fun/p/\"`\n }));\n } else {\n setErrors(prev => ({\n ...prev,\n gameUrl: ''\n }));\n }\n } else if (name === 'description') {\n if (value.length < DESCRIPTION_MIN_LENGTH) {\n setErrors(prev => ({\n ...prev,\n description: `Description must be at least ${DESCRIPTION_MIN_LENGTH} characters`\n }));\n } else if (value.length > DESCRIPTION_MAX_LENGTH) {\n setErrors(prev => ({\n ...prev,\n description: `Description must be ${DESCRIPTION_MAX_LENGTH} characters or less`\n }));\n } else {\n setErrors(prev => ({\n ...prev,\n description: ''\n }));\n }\n } else if (name === 'tags') {\n const tagsArray = value ? value.split(',').map(tag => tag.trim()).filter(tag => tag) : [];\n if (value.length < TAGS_MIN_LENGTH) {\n setErrors(prev => ({\n ...prev,\n tags: `Tags must be at least ${TAGS_MIN_LENGTH} characters`\n }));\n } else if (value.length > TAGS_MAX_LENGTH) {\n setErrors(prev => ({\n ...prev,\n tags: `Tags must be ${TAGS_MAX_LENGTH} characters or less`\n }));\n } else if (tagsArray.length > MAX_TAGS_COUNT) {\n setErrors(prev => ({\n ...prev,\n tags: `Maximum ${MAX_TAGS_COUNT} tags allowed`\n }));\n } else if (tagsArray.some(tag => tag.length > MAX_TAG_LENGTH)) {\n setErrors(prev => ({\n ...prev,\n tags: `Each tag must be ${MAX_TAG_LENGTH} characters or less`\n }));\n } else {\n setErrors(prev => ({\n ...prev,\n tags: ''\n }));\n }\n }\n };\n const handleSubmit = async e => {\n e.preventDefault();\n console.log('📝 Game form submitted with data:', formData);\n const validationErrors = {\n title: '',\n gameUrl: '',\n description: '',\n tags: ''\n };\n if (!formData.title) {\n validationErrors.title = 'Title is required';\n } else if (formData.title.length < TITLE_MIN_LENGTH) {\n validationErrors.title = `Title must be at least ${TITLE_MIN_LENGTH} character`;\n } else if (formData.title.length > TITLE_MAX_LENGTH) {\n validationErrors.title = `Title must be ${TITLE_MAX_LENGTH} characters or less`;\n }\n if (!formData.gameUrl) {\n validationErrors.gameUrl = 'Game URL is required';\n } else if (formData.gameUrl.length < URL_MIN_LENGTH) {\n validationErrors.gameUrl = `URL must be at least ${URL_MIN_LENGTH} characters`;\n } else if (formData.gameUrl.length > URL_MAX_LENGTH) {\n validationErrors.gameUrl = `URL must be ${URL_MAX_LENGTH} characters or less`;\n } else if (!formData.gameUrl.startsWith('https://dev.fun/p/')) {\n validationErrors.gameUrl = `URL must start with \"https://dev.fun/p/\"`;\n }\n if (formData.description && formData.description.length < DESCRIPTION_MIN_LENGTH) {\n validationErrors.description = `Description must be at least ${DESCRIPTION_MIN_LENGTH} characters`;\n } else if (formData.description && formData.description.length > DESCRIPTION_MAX_LENGTH) {\n validationErrors.description = `Description must be ${DESCRIPTION_MAX_LENGTH} characters or less`;\n }\n const tagsArray = formData.tags ? formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag) : [];\n if (formData.tags && formData.tags.length < TAGS_MIN_LENGTH) {\n validationErrors.tags = `Tags must be at least ${TAGS_MIN_LENGTH} characters`;\n } else if (formData.tags && formData.tags.length > TAGS_MAX_LENGTH) {\n validationErrors.tags = `Tags must be ${TAGS_MAX_LENGTH} characters or less`;\n } else if (tagsArray.length > MAX_TAGS_COUNT) {\n validationErrors.tags = `Maximum ${MAX_TAGS_COUNT} tags allowed`;\n } else if (tagsArray.some(tag => tag.length > MAX_TAG_LENGTH)) {\n validationErrors.tags = `Each tag must be ${MAX_TAG_LENGTH} characters or less`;\n }\n const hasErrors = Object.values(validationErrors).some(error => error !== '');\n if (hasErrors) {\n setErrors(validationErrors);\n const firstError = Object.values(validationErrors).find(error => error !== '');\n showAppNotification(firstError, \"error\");\n return;\n }\n try {\n setSubmitting(true);\n const tagsArray = formData.tags ? formData.tags.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0) : [];\n const gameData = {\n title: formData.title,\n username: formData.username,\n url: formData.gameUrl,\n description: formData.description,\n tags: tagsArray\n };\n console.log('🎮 Submitting game data to API:', gameData);\n console.log('🏷️ Tags being sent as array:', JSON.stringify(tagsArray));\n const result = await api.createGame(gameData);\n if (result === null) {\n setSubmitting(false);\n return;\n }\n console.log('✅ Game created successfully');\n showAppNotification(\"Game added successfully! 🎮✨\");\n refreshView('home');\n } catch (error) {\n console.error(\"Error submitting game:\", error);\n showAppNotification(\"Failed to add game. Please try again.\", \"error\");\n setSubmitting(false);\n }\n };\n return

\n \n

\n Share Your Game\n

\n Submit your dev.fun game creation to the Gameverse community\n

\n \n \n \n

\n \n

TITLE_MAX_LENGTH || formData.title.length > 0 && formData.title.length < TITLE_MIN_LENGTH ? 'text-red-400' : 'text-purple-300'}`}>\n {formData.title.length}/{TITLE_MAX_LENGTH}\n

\n \n \n \n

\n \n Game URL *\n \n

\n \n

\n \n {errors.gameUrl &&

{errors.gameUrl}

}\n

\n URL must begin with https://dev.fun/p/\n

URL_MAX_LENGTH || formData.gameUrl.length > 0 && formData.gameUrl.length < URL_MIN_LENGTH ? 'text-red-400' : 'text-purple-300'}`}>\n {formData.gameUrl.length}/{URL_MAX_LENGTH}\n

\n \n

\n \n Description\n \n

\n            {errors.description && <p className=\"text-red-400 text-xs\">{errors.description}</p>}\n            <div className=\"flex justify-end\">\n              <p className={`text-xs ${formData.description.length > DESCRIPTION_MAX_LENGTH || formData.description.length > 0 && formData.description.length < DESCRIPTION_MIN_LENGTH ? 'text-red-400' : 'text-purple-300'}`}>\n                {formData.description.length}/{DESCRIPTION_MAX_LENGTH}\n              </p>\n            </div>\n          </div>\n          \n          <div className=\"space-y-2\">\n            <label className=\"block text-sm font-medium text-purple-200\">\n              Tags (comma-separated)\n            </label>\n            <div className=\"relative\">\n              <div className=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\n                <Tag size={16} className=\"text-purple-400\" />\n              </div>\n              <input type=\"text\" name=\"tags\" value={formData.tags} onChange={handleChange} placeholder=\"action, puzzle, multiplayer, etc.\" className={`w-full pl-10 pr-4 py-3 rounded-lg bg-black bg-opacity-50 border ${errors.tags ? 'border-red-500' : 'border-purple-500 border-opacity-30'} focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-30 text-white placeholder-purple-400 transition-all duration-300`} />\n              {errors.tags && <p className=\"text-red-400 text-xs mt-1\">{errors.tags}</p>}\n            </div>\n            <div className=\"flex justify-between items-center\">\n              <p className=\"text-xs text-purple-300\">\n                Max <span className=\"bg-black/30 px-1 py-0.5 rounded font-mono text-green-300\">{MAX_TAGS_COUNT}</span> tags, \n                each max <span className=\"bg-black/30 px-1 py-0.5 rounded font-mono text-green-300\">{MAX_TAG_LENGTH}</span> chars\n              </p>\n              <p className={`text-xs ${formData.tags.length > TAGS_MAX_LENGTH || formData.tags.length > 0 && formData.tags.length < TAGS_MIN_LENGTH ? 'text-red-400' : 'text-purple-300'}`}>\n                {formData.tags.length}/{TAGS_MAX_LENGTH}\n              </p>\n            </div>\n          </div>\n          \n          <div className=\"flex items-center justify-end gap-4 pt-4\">\n            <button type=\"button\" onClick={() => navigateTo('home')} className=\"px-4 py-2 rounded-full bg-purple-900 bg-opacity-30 hover:bg-opacity-50 text-purple-200 transition-all duration-300\">\n              Cancel\n            </button>\n            \n            <button type=\"submit\" disabled={submitting} className=\"px-6 py-2 bg-gradient-to-r from-green-500 to-blue-500 rounded-full text-white font-medium shadow-lg shadow-blue-700/30 hover:shadow-blue-700/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center\">\n              {submitting ? <>\n                  <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\"></div>\n                  Submitting...\n                </> : <>Submit Game</>}\n            </button>\n          </div>\n        </div>\n      </motion.form>\n    </div>;\n}\nfunction FormField({\n  label,\n  name,\n  value,\n  onChange,\n  placeholder,\n  required = false,\n  icon = null,\n  disabled = false,\n  error = ''\n}) {\n  return <div className=\"space-y-2\">\n      <label className=\"block text-sm font-medium text-purple-200\">\n        {label} {required && <span className=\"text-pink-500\">*</span>}\n      </label>\n      <div className=\"relative\">\n        {icon && <div className=\"absolute left-3 top-1/2 transform -translate-y-1/2\">\n            {icon}\n          </div>}\n        <input type=\"text\" name={name} value={value} onChange={onChange} placeholder={placeholder} required={required} disabled={disabled} className={`w-full ${icon ? 'pl-10' : 'pl-4'} pr-4 py-3 rounded-lg bg-black bg-opacity-50 border ${error ? 'border-red-500' : 'border-purple-500 border-opacity-30'} focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-30 text-white placeholder-purple-400 transition-all duration-300 ${disabled ? 'opacity-70 cursor-not-allowed' : ''}`} />\n        {error && <p className=\"text-red-400 text-xs mt-1\">{error}</p>}\n      </div>\n    </div>;\n}\nfunction ForumPage({\n  threads,\n  navigateTo,\n  loading,\n  refreshData,\n  hasMore,\n  loadingMore\n}) {\n  const loadMoreThreads = async () => {\n    if (loadingMore.threads) return;\n    try {\n      console.log('Loading more threads...');\n      const newOffset = threads.length;\n      const newThreads = await api.getThreads(newOffset, 10);\n      setThreads(prev => [...threads, ...newThreads]);\n      setHasMore(prev => ({\n        ...prev,\n        threads: newThreads.length >= 10\n      }));\n    } catch (error) {\n      console.error('Error loading more threads:', error);\n      showAppNotification('Failed to load more threads. Please try again.', 'error');\n    }\n  };\n  const [sortedThreads, setSortedThreads] = useState([]);\n  useEffect(() => {\n    if (threads && threads.length > 0) {\n      const threadWithActivity = [...threads].map(thread => {\n        const activity = thread.post_count || (thread.replies ? thread.replies.length : 0);\n        return {\n          ...thread,\n          activity\n        };\n      });\n      const sorted = threadWithActivity.sort((a, b) => b.activity - a.activity);\n      setSortedThreads(sorted);\n    } else {\n      setSortedThreads([]);\n    }\n  }, [threads]);\n  return <div>\n      <motion.div className=\"mb-8 text-center\" initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }}>\n        <h2 className=\"text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400\">\n          Community Forum\n        </h2>\n        <p className=\"text-blue-200 max-w-2xl mx-auto\">\n          Join discussions, ask questions, and share your thoughts with fellow game creators and players\n        </p>\n      </motion.div>\n      \n      <div className=\"flex justify-between items-center mb-6\">\n        <div className=\"text-sm text-orange-300 flex items-center\">\n          <span className=\"hidden sm:inline mr-2\">Threads sorted by activity</span>\n          <div className=\"flex items-center bg-orange-900/30 px-3 py-1 rounded-full\">\n            <motion.div animate={{\n            scale: [1, 1.2, 1]\n          }} transition={{\n            duration: 1.5,\n            repeat: Infinity\n          }} className=\"mr-1\">\n              🔥\n            </motion.div>\n            <span>Hottest discussions rise to top</span>\n          </div>\n        </div>\n        \n        <motion.button whileHover={{\n        scale: 1.05\n      }} whileTap={{\n        scale: 0.95\n      }} onClick={() => navigateTo('create-thread')} className=\"px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full text-white font-medium shadow-lg shadow-orange-700/30 hover:shadow-orange-700/50 transition-all duration-300 flex items-center\">\n          <Plus size={18} className=\"mr-2\" /> New Thread\n        </motion.button>\n      </div>\n      \n      {loading ? <div className=\"flex justify-center items-center py-20\">\n          <div className=\"w-16 h-16 border-4 border-orange-500 border-t-transparent rounded-full animate-spin\"></div>\n        </div> : sortedThreads.length === 0 ? <div className=\"text-center py-20\">\n          <MessageSquare size={64} className=\"mx-auto text-orange-400 mb-4 opacity-50\" />\n          <h3 className=\"text-2xl font-bold text-orange-200 mb-2\">No discussions yet</h3>\n          <p className=\"text-orange-300 mb-6\">Start the first conversation in the community!</p>\n          <button onClick={() => navigateTo('create-thread')} className=\"px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full font-medium shadow-lg shadow-orange-700/30 hover:shadow-orange-700/50 transition-all duration-300\">\n            Create Thread\n          </button>\n        </div> : <>\n          <div className=\"space-y-4\">\n            {sortedThreads.map((thread, index) => <ThreadCard key={thread.id} thread={thread} navigateTo={navigateTo} delay={index * 0.1} />)}\n          </div>\n          \n          {hasMore.threads && <div className=\"mt-10 text-center\">\n              <motion.button whileHover={{\n          scale: 1.05\n        }} whileTap={{\n          scale: 0.95\n        }} onClick={loadMoreThreads} disabled={loadingMore.threads} className=\"px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full text-white font-medium shadow-lg shadow-orange-700/30 hover:shadow-orange-700/50 transition-all duration-300 disabled:opacity-50\">\n                {loadingMore.threads ? <>\n                    <div className=\"w-5 h-5 border-3 border-white border-t-transparent rounded-full animate-spin inline-block mr-2\"></div>\n                    Loading more...\n                  </> : 'Load More Threads'}\n              </motion.button>\n            </div>}\n        </>}\n    </div>;\n}\nfunction ThreadCard({\n  thread,\n  navigateTo,\n  delay = 0\n}) {\n  const [replyCount, setReplyCount] = useState(0);\n  const [loading, setLoading] = useState(true);\n  const [canDelete, setCanDelete] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n  const getActivityLevel = () => {\n    const activity = thread.activity || thread.post_count || 0;\n    if (activity >= 10) return \"high\";\n    if (activity >= 5) return \"medium\";\n    if (activity >= 1) return \"low\";\n    return \"none\";\n  };\n  const activityLevel = getActivityLevel();\n  useEffect(() => {\n    const checkAdminDeleteCapability = () => {\n      setCanDelete(window.isAdmin === true && typeof window.deleteThread === 'function');\n    };\n    checkAdminDeleteCapability();\n    const intervalId = setInterval(checkAdminDeleteCapability, 1000);\n    return () => clearInterval(intervalId);\n  }, []);\n  useEffect(() => {\n    const fetchReplyCount = async () => {\n      try {\n        setLoading(true);\n        const posts = await api.getAllPosts(thread.id);\n        setReplyCount(posts?.length || 0);\n      } catch (error) {\n        console.error(`Error fetching reply count for thread ${thread.id}:`, error);\n        setReplyCount(thread.post_count || thread.replies?.length || 0);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchReplyCount();\n  }, [thread.id]);\n  const handleDelete = e => {\n    e.stopPropagation();\n    if (typeof window.deleteThread === 'function') {\n      if (confirm('Are you sure you want to delete this thread? This action cannot be undone.')) {\n        window.deleteThread(thread.id);\n      }\n    } else {\n      showAppNotification(\"Admin functionality unavailable. Please log in again.\", \"error\");\n    }\n  };\n  const toggleExpand = e => {\n    e.stopPropagation();\n    setExpanded(!expanded);\n  };\n  return <motion.div initial={{\n    opacity: 0,\n    y: 20\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} transition={{\n    delay\n  }} whileHover={{\n    scale: 1.01\n  }} onClick={() => navigateTo('thread', thread)} className={`bg-gradient-to-br from-yellow-900/30 to-orange-900/30 backdrop-blur-sm rounded-xl overflow-hidden border ${activityLevel === \"high\" ? \"border-orange-500/50\" : \"border-orange-500/20\"} shadow-lg p-5 cursor-pointer group transition-all duration-300 relative`}>\n      {activityLevel !== \"none\" && <motion.div className=\"absolute -left-1 top-0 bottom-0 flex items-center\" initial={{\n      opacity: 0.7\n    }} animate={{\n      opacity: [0.7, 1, 0.7]\n    }} transition={{\n      duration: activityLevel === \"high\" ? 0.8 : activityLevel === \"medium\" ? 1.2 : 1.8,\n      repeat: Infinity,\n      repeatType: \"reverse\"\n    }}>\n          <div className={`h-full w-1 ${activityLevel === \"high\" ? \"bg-gradient-to-b from-red-500 via-orange-400 to-yellow-500\" : activityLevel === \"medium\" ? \"bg-gradient-to-b from-orange-500 to-yellow-500\" : \"bg-gradient-to-b from-yellow-500 to-yellow-700\"}`}></div>\n        </motion.div>}\n      \n      <div className=\"flex justify-between items-start\">\n        <div className=\"flex items-center\">\n          {activityLevel === \"high\" && <motion.div className=\"mr-2 text-lg\" animate={{\n          scale: [1, 1.2, 1],\n          rotate: [0, 5, 0, -5, 0]\n        }} transition={{\n          duration: 1.5,\n          repeat: Infinity,\n          repeatType: \"reverse\"\n        }}>\n              🔥\n            </motion.div>}\n          \n          {activityLevel === \"medium\" && <motion.div className=\"mr-2 text-base\" animate={{\n          scale: [1, 1.1, 1]\n        }} transition={{\n          duration: 2,\n          repeat: Infinity,\n          repeatType: \"reverse\"\n        }}>\n              ✨\n            </motion.div>}\n          \n          <h3 className=\"text-xl font-bold text-white group-hover:text-orange-300 transition-colors duration-300 mb-2\">\n            {thread.title}\n          </h3>\n        </div>\n        \n        <div className=\"flex items-center gap-2\">\n          {canDelete && <motion.button whileHover={{\n          scale: 1.1\n        }} whileTap={{\n          scale: 0.9\n        }} onClick={handleDelete} className=\"text-red-400 hover:text-red-300 transition-colors duration-300 flex items-center z-10\" title=\"Delete thread (Admin only)\">\n              <Trash2 size={16} />\n            </motion.button>}\n          \n          <span className=\"bg-orange-800/50 px-2 py-1 rounded-full text-xs text-orange-200 flex items-center\">\n            <User size={12} className=\"mr-1\" /> {thread.username || thread.author}\n          </span>\n        </div>\n      </div>\n      \n      {thread.content && <div className=\"mt-3 mb-3\">\n          <button onClick={toggleExpand} className=\"text-xs text-orange-300 hover:text-orange-200 transition-colors mb-2 flex items-center\" title={expanded ? \"Hide content\" : \"Show content\"}>\n            {expanded ? <ChevronDown size={12} className=\"mr-1\" /> : <ChevronRight size={12} className=\"mr-1\" />}\n            {expanded ? \"Hide preview\" : \"Show preview\"}\n          </button>\n          \n          {expanded && <motion.p initial={{\n        opacity: 0,\n        height: 0\n      }} animate={{\n        opacity: 1,\n        height: \"auto\"\n      }} exit={{\n        opacity: 0,\n        height: 0\n      }} className=\"text-blue-200 text-sm whitespace-pre-line line-clamp-3 bg-black/20 p-3 rounded-lg\">\n              {thread.content}\n            </motion.p>}\n        </div>}\n      \n      <div className=\"flex justify-between items-center\">\n        <div className=\"flex items-center text-xs text-blue-300\">\n          <Clock size={12} className=\"mr-1\" />\n          {new Date(thread.created_at || thread.createdAt || Date.now()).toLocaleDateString()}\n        </div>\n        \n        <div className=\"flex items-center gap-2\">\n          <span className=\"flex items-center text-sm text-orange-300\">\n            <MessageCircle size={14} className=\"mr-1\" /> \n            {loading ? <span className=\"w-4 h-4 border-2 border-orange-400 border-t-transparent rounded-full animate-spin\"></span> : `${replyCount} ${replyCount === 1 ? 'reply' : 'replies'}`}\n          </span>\n          <ChevronRight size={16} className=\"text-orange-400 group-hover:translate-x-1 transition-transform duration-300\" />\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction CreateThreadForm({\n  navigateTo,\n  showNotification,\n  refreshView,\n  username\n}) {\n  const [formData, setFormData] = useState({\n    title: '',\n    username: username || 'Anonymous',\n    content: ''\n  });\n  const [submitting, setSubmitting] = useState(false);\n  const [errors, setErrors] = useState({\n    title: '',\n    content: ''\n  });\n  const TITLE_MIN_LENGTH = 10;\n  const TITLE_MAX_LENGTH = 100;\n  const CONTENT_MAX_LENGTH = 500;\n  useEffect(() => {\n    setFormData(prev => ({\n      ...prev,\n      username: username || 'Anonymous'\n    }));\n  }, [username]);\n  const handleChange = e => {\n    const {\n      name,\n      value\n    } = e.target;\n    setFormData(prev => ({\n      ...prev,\n      [name]: value\n    }));\n    if (name === 'title') {\n      if (value.length < TITLE_MIN_LENGTH) {\n        setErrors(prev => ({\n          ...prev,\n          title: `Title must be at least ${TITLE_MIN_LENGTH} characters`\n        }));\n      } else if (value.length > TITLE_MAX_LENGTH) {\n        setErrors(prev => ({\n          ...prev,\n          title: `Title must be ${TITLE_MAX_LENGTH} characters or less`\n        }));\n      } else {\n        setErrors(prev => ({\n          ...prev,\n          title: ''\n        }));\n      }\n    } else if (name === 'content') {\n      if (value.length > CONTENT_MAX_LENGTH) {\n        setErrors(prev => ({\n          ...prev,\n          content: `Content must be ${CONTENT_MAX_LENGTH} characters or less`\n        }));\n      } else {\n        setErrors(prev => ({\n          ...prev,\n          content: ''\n        }));\n      }\n    }\n  };\n  const handleSubmit = async e => {\n    e.preventDefault();\n    const validationErrors = {\n      title: '',\n      content: ''\n    };\n    if (!formData.title) {\n      validationErrors.title = 'Title is required';\n    } else if (formData.title.length < TITLE_MIN_LENGTH) {\n      validationErrors.title = `Title must be at least ${TITLE_MIN_LENGTH} characters`;\n    } else if (formData.title.length > TITLE_MAX_LENGTH) {\n      validationErrors.title = `Title must be ${TITLE_MAX_LENGTH} characters or less`;\n    }\n    if (!formData.content) {\n      validationErrors.content = 'Content is required';\n    } else if (formData.content.length > CONTENT_MAX_LENGTH) {\n      validationErrors.content = `Content must be ${CONTENT_MAX_LENGTH} characters or less`;\n    }\n    const hasErrors = Object.values(validationErrors).some(error => error !== '');\n    if (hasErrors) {\n      setErrors(validationErrors);\n      const firstError = Object.values(validationErrors).find(error => error !== '');\n      showAppNotification(firstError, \"error\");\n      return;\n    }\n    try {\n      setSubmitting(true);\n      const threadData = {\n        title: formData.title,\n        username: formData.username,\n        content: formData.content\n      };\n      const createdThread = await api.createThread(threadData);\n      if (createdThread === null) {\n        setSubmitting(false);\n        return;\n      }\n      if (createdThread[0]) {\n        createdThread[0].content = formData.content;\n      }\n      showAppNotification(\"Thread created successfully! 🚀\");\n      refreshView('thread', createdThread[0]);\n    } catch (error) {\n      console.error(\"Error creating thread:\", error);\n      showAppNotification(\"Failed to create thread. Please try again.\", \"error\");\n      setSubmitting(false);\n    }\n  };\n  return <div className=\"max-w-2xl mx-auto\">\n      <motion.div className=\"mb-8 text-center\" initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }}>\n        <h2 className=\"text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400\">\n          Start a Discussion\n        </h2>\n        <p className=\"text-blue-200 max-w-2xl mx-auto\">\n          Create a new thread to discuss game development, share ideas, or ask questions\n        </p>\n      </motion.div>\n      \n      <motion.form onSubmit={handleSubmit} className=\"bg-gradient-to-br from-yellow-900/30 to-orange-900/30 backdrop-blur-sm rounded-xl overflow-hidden border border-orange-500/20 shadow-lg p-6\" initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} transition={{\n      delay: 0.2\n    }}>\n        <div className=\"space-y-6\">\n          <div className=\"space-y-2\">\n            <label className=\"block text-sm font-medium text-orange-200\">\n              Thread Title <span className=\"text-orange-500\">*</span>\n            </label>\n            <input type=\"text\" name=\"title\" value={formData.title} onChange={handleChange} placeholder=\"What would you like to discuss?\" required className={`w-full px-4 py-3 rounded-lg bg-black bg-opacity-50 border ${errors.title ? 'border-red-500' : 'border-orange-500 border-opacity-30'} focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-30 text-white placeholder-orange-400 transition-all duration-300`} />\n            <div className=\"flex justify-between\">\n              {errors.title && <p className=\"text-red-400 text-xs\">{errors.title}</p>}\n              <p className={`text-xs ${formData.title.length > TITLE_MAX_LENGTH ? 'text-red-400' : 'text-orange-300'}`}>\n                {formData.title.length}/{TITLE_MAX_LENGTH}\n              </p>\n            </div>\n          </div>\n          \n          <FormField label=\"Your Username\" name=\"username\" value={formData.username} onChange={handleChange} placeholder=\"Your username\" required disabled={true} />\n          \n          <div className=\"space-y-2\">\n            <label className=\"block text-sm font-medium text-orange-200\">\n              Content <span className=\"text-orange-500\">*</span>\n            </label>\n            <textarea name=\"content\" value={formData.content} onChange={handleChange} placeholder=\"Write your thoughts here...\" rows=\"6\" required className={`w-full px-4 py-3 rounded-lg bg-black bg-opacity-50 border ${errors.content ? 'border-red-500' : 'border-orange-500 border-opacity-30'} focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-30 text-white placeholder-orange-400 transition-all duration-300 resize-none`} />\n            <div className=\"flex justify-between\">\n              {errors.content && <p className=\"text-red-400 text-xs\">{errors.content}</p>}\n              <p className={`text-xs ${formData.content.length > CONTENT_MAX_LENGTH ? 'text-red-400' : 'text-orange-300'}`}>\n                {formData.content.length}/{CONTENT_MAX_LENGTH}\n              </p>\n            </div>\n          </div>\n          \n          <div className=\"flex items-center justify-end gap-4 pt-4\">\n            <button type=\"button\" onClick={() => navigateTo('forum')} className=\"px-4 py-2 rounded-full bg-orange-900 bg-opacity-30 hover:bg-opacity-50 text-orange-200 transition-all duration-300\">\n              Cancel\n            </button>\n            \n            <button type=\"submit\" disabled={submitting || errors.title || errors.content || formData.title.length > TITLE_MAX_LENGTH || formData.content.length > CONTENT_MAX_LENGTH} className=\"px-6 py-2 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full text-white font-medium shadow-lg shadow-orange-700/30 hover:shadow-orange-700/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center\">\n              {submitting ? <>\n                  <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\"></div>\n                  Creating...\n                </> : <>Create Thread</>}\n            </button>\n          </div>\n        </div>\n      </motion.form>\n    </div>;\n}\nfunction ThreadPage({\n  thread,\n  navigateTo,\n  showNotification,\n  refreshView,\n  username,\n  hasMore,\n  loadingMore\n}) {\n  const loadMorePosts = async () => {\n    if (loadingMoreReplies) return;\n    setLoadingMoreReplies(true);\n    try {\n      console.log('Loading more posts...');\n      const newOffset = replies.length;\n      const newPosts = await api.getPosts(thread.id, newOffset, 10);\n      setReplies(prev => [...prev, ...newPosts]);\n      setHasMorePosts(newPosts.length >= 10);\n      const newCounts = {\n        ...likeCounts\n      };\n      await Promise.all(newPosts.map(async post => {\n        if (post.id && !newCounts[post.id]) {\n          const count = await api.getLikeCount(post.id);\n          newCounts[post.id] = count;\n        }\n      }));\n      setLikeCounts(newCounts);\n    } catch (error) {\n      console.error('Error loading more posts:', error);\n      showAppNotification('Failed to load more posts. Please try again.', 'error');\n    } finally {\n      setLoadingMoreReplies(false);\n    }\n  };\n  const [replies, setReplies] = useState([]);\n  const [replyContent, setReplyContent] = useState('');\n  const [replyUsername, setReplyUsername] = useState(username || 'Anonymous');\n  const [parentPost, setParentPost] = useState(null);\n  const [submitting, setSubmitting] = useState(false);\n  const [loadingReplies, setLoadingReplies] = useState(true);\n  const [loadingMoreReplies, setLoadingMoreReplies] = useState(false);\n  const [hasMorePosts, setHasMorePosts] = useState(true);\n  const [likeCounts, setLikeCounts] = useState({});\n  const [contentError, setContentError] = useState('');\n  const CONTENT_MAX_LENGTH = 500;\n  const [likeInProgress, setLikeInProgress] = useState({});\n  const [localIsAdmin, setLocalIsAdmin] = useState(false);\n  const [replyingTo, setReplyingTo] = useState(null);\n  const [expandedPosts, setExpandedPosts] = useState(new Set());\n  const expandedPostsRef = useRef(new Set());\n  const [collapsedThreads, setCollapsedThreads] = useState({});\n  useEffect(() => {\n    expandedPostsRef.current = expandedPosts;\n  }, []);\n  useEffect(() => {\n    const checkAdminStatus = () => {\n      const isAdminActive = window.isAdmin === true && typeof window.deletePost === 'function';\n      setLocalIsAdmin(isAdminActive);\n    };\n    checkAdminStatus();\n    const intervalId = setInterval(checkAdminStatus, 1000);\n    return () => clearInterval(intervalId);\n  }, []);\n  useEffect(() => {\n    setReplyUsername(username || 'Anonymous');\n  }, [username]);\n  useEffect(() => {\n    console.log(`🧵 Thread page opened: \"${thread.title}\" (ID: ${thread.id})`);\n    console.log('Thread content:', thread.content);\n    const fetchAllPosts = async () => {\n      try {\n        setLoadingReplies(true);\n        console.log(`🔍 Fetching all posts for thread ID: ${thread.id}`);\n        const allPosts = await api.getAllPosts(thread.id);\n        console.log(`📝 Received ${allPosts?.length || 0} total posts for thread`);\n        const expanded = new Set();\n        allPosts.forEach(post => {\n          if (!post.parent_post_id) {\n            expanded.add(post.id);\n          }\n        });\n        setExpandedPosts(expanded);\n        setReplies(allPosts || []);\n        if (!thread.content && allPosts && allPosts.length > 0) {\n          const firstPost = allPosts.find(p => !p.parent_post_id);\n          if (firstPost && (firstPost.username === thread.username || firstPost.author === thread.author)) {\n            console.log('📄 Setting initial post content as thread content');\n            thread.content = firstPost.content;\n          }\n        }\n        const counts = {};\n        await Promise.all(allPosts.map(async post => {\n          if (post.id) {\n            const count = await api.getLikeCount(post.id);\n            counts[post.id] = count;\n          }\n        }));\n        setLikeCounts(counts);\n        setHasMorePosts(false);\n      } catch (error) {\n        console.error(\"Error fetching posts:\", error);\n        showNotification(\"Failed to load replies. Please try again.\", \"error\");\n      } finally {\n        setLoadingReplies(false);\n        console.log('🧵 Thread page fully loaded');\n      }\n    };\n    fetchAllPosts();\n  }, [thread.id, showNotification]);\n  const handleReplyToPost = post => {\n    setReplyingTo(post.id);\n    setParentPost(post);\n    setReplyContent('');\n    setContentError('');\n    setCollapsedThreads(prev => ({\n      ...prev,\n      [post.id]: false\n    }));\n    setExpandedPosts(prev => {\n      const newSet = new Set(prev);\n      newSet.add(post.id);\n      let currentPostId = post.parent_post_id;\n      while (currentPostId) {\n        newSet.add(currentPostId);\n        const parentPost = replies.find(r => r.id === currentPostId);\n        if (!parentPost) break;\n        currentPostId = parentPost.parent_post_id;\n      }\n      return newSet;\n    });\n    let currentPostId = post.parent_post_id;\n    while (currentPostId) {\n      const parentPost = replies.find(r => r.id === currentPostId);\n      if (!parentPost) break;\n      setCollapsedThreads(prev => ({\n        ...prev,\n        [currentPostId]: false\n      }));\n      currentPostId = parentPost.parent_post_id;\n    }\n  };\n  const cancelReplyToPost = () => {\n    setParentPost(null);\n    setReplyingTo(null);\n  };\n  const togglePostExpansion = postId => {\n    setExpandedPosts(prev => {\n      const updated = new Set(prev);\n      if (updated.has(postId)) {\n        updated.delete(postId);\n      } else {\n        updated.add(postId);\n      }\n      expandedPostsRef.current = updated;\n      return updated;\n    });\n  };\n  const onExpandClick = replyId => {\n    requestAnimationFrame(() => togglePostExpansion(replyId));\n  };\n  const toggleThreadCollapse = (postId, event) => {\n    if (event) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n    setCollapsedThreads(prev => {\n      const isCurrentlyCollapsed = prev[postId];\n      const newState = {\n        ...prev,\n        [postId]: !isCurrentlyCollapsed\n      };\n      if (isCurrentlyCollapsed) {\n        const parentPost = replies.find(r => r.id === postId)?.parent_post_id;\n        if (parentPost) {\n          newState[parentPost] = false;\n        }\n      }\n      return newState;\n    });\n  };\n  const handleLike = async post => {\n    if (likeInProgress[post.id] || !replyUsername) {\n      if (!replyUsername) {\n        showAppNotification(\"Please enter your username to like posts\", \"error\");\n      }\n      return;\n    }\n    setLikeInProgress(prev => ({\n      ...prev,\n      [post.id]: true\n    }));\n    try {\n      const result = await api.likePost(post.id, replyUsername);\n      if (result === null) {\n        setLikeInProgress(prev => ({\n          ...prev,\n          [post.id]: false\n        }));\n        return;\n      }\n      const newCount = await api.getLikeCount(post.id);\n      setLikeCounts(prev => ({\n        ...prev,\n        [post.id]: newCount\n      }));\n      showAppNotification(\"Post liked! 👍\", \"success\");\n    } catch (error) {\n      console.error(\"Error liking post:\", error);\n      showAppNotification(\"Failed to like post. Please try again.\", \"error\");\n    } finally {\n      setLikeInProgress(prev => ({\n        ...prev,\n        [post.id]: false\n      }));\n    }\n  };\n  const handleContentChange = e => {\n    const content = e.target.value;\n    setReplyContent(content);\n    if (content.length > CONTENT_MAX_LENGTH) {\n      setContentError(`Reply must be ${CONTENT_MAX_LENGTH} characters or less`);\n    } else {\n      setContentError('');\n    }\n  };\n  const handleSubmitReply = async e => {\n    e.preventDefault();\n    const currentScrollPos = window.scrollY;\n    if (!replyContent || !replyUsername) {\n      showAppNotification(\"Please fill out all required fields\", \"error\");\n      return;\n    }\n    if (replyContent.length > CONTENT_MAX_LENGTH) {\n      showAppNotification(`Reply must be ${CONTENT_MAX_LENGTH} characters or less`, \"error\");\n      return;\n    }\n    try {\n      setSubmitting(true);\n      const postData = {\n        thread_id: thread.id,\n        username: replyUsername,\n        content: replyContent,\n        parent_post_id: parentPost?.id || null\n      };\n      const result = await api.createPost(postData);\n      if (!result) {\n        setSubmitting(false);\n        return;\n      }\n      const newPost = Array.isArray(result) ? result[0] : result;\n      const allUpdatedPosts = await api.getAllPosts(thread.id);\n      setExpandedPosts(prev => {\n        const updated = new Set(prev);\n        if (newPost && newPost.parent_post_id) {\n          let parentId = newPost.parent_post_id;\n          while (parentId) {\n            updated.add(parentId);\n            const parentPost = allUpdatedPosts.find(p => p.id === parentId);\n            if (!parentPost) break;\n            parentId = parentPost.parent_post_id;\n          }\n        }\n        expandedPostsRef.current = updated;\n        console.log('📌 Updated expandedPosts with ancestors:', [...updated]);\n        return updated;\n      });\n      setReplies(allUpdatedPosts || []);\n      const updatedCollapsed = {};\n      allUpdatedPosts.forEach(post => {\n        updatedCollapsed[post.id] = !expandedPostsRef.current.has(post.id);\n      });\n      console.log('📌 Updated collapsedThreads based on current ref:', updatedCollapsed);\n      setCollapsedThreads(updatedCollapsed);\n      setReplyContent('');\n      setReplyingTo(null);\n      setParentPost(null);\n      showAppNotification(\"Reply posted successfully! 💬✨\");\n      const updatedLikeCounts = {\n        ...likeCounts\n      };\n      await Promise.all(allUpdatedPosts.map(async post => {\n        if (!updatedLikeCounts[post.id]) {\n          const count = await api.getLikeCount(post.id);\n          updatedLikeCounts[post.id] = count;\n        }\n      }));\n      setLikeCounts(updatedLikeCounts);\n      setTimeout(() => {\n        window.scrollTo({\n          top: currentScrollPos,\n          behavior: 'auto'\n        });\n      }, 100);\n    } catch (error) {\n      console.error(\"Error posting reply:\", error);\n      showAppNotification(\"Failed to post reply. Please try again.\", \"error\");\n    } finally {\n      setSubmitting(false);\n    }\n  };\n  const buildReplyTree = () => {\n    const postMap = {};\n    const rootPosts = [];\n    replies.forEach(reply => {\n      postMap[reply.id] = {\n        ...reply,\n        children: []\n      };\n    });\n    replies.forEach(reply => {\n      if (reply.parent_post_id && postMap[reply.parent_post_id]) {\n        postMap[reply.parent_post_id].children.push(postMap[reply.id]);\n      } else {\n        rootPosts.push(postMap[reply.id]);\n      }\n    });\n    Object.values(postMap).forEach(post => {\n      if (post.children.length > 0) {\n        post.children.sort((a, b) => {\n          const dateA = new Date(a.created_at || a.createdAt);\n          const dateB = new Date(b.created_at || b.createdAt);\n          return dateA - dateB;\n        });\n      }\n    });\n    rootPosts.sort((a, b) => {\n      const dateA = new Date(a.created_at || a.createdAt);\n      const dateB = new Date(b.created_at || b.createdAt);\n      return dateB - dateA;\n    });\n    return rootPosts;\n  };\n  const initializedRef = useRef(false);\n  useEffect(() => {\n    if (initializedRef.current || loadingReplies || replies.length === 0) return;\n    console.log(\"🔒 Initializing thread states (ONE TIME ONLY)\");\n    const newExpandedSet = new Set();\n    const newCollapsedState = {};\n    replies.forEach(reply => {\n      if (!reply.parent_post_id) {\n        newExpandedSet.add(reply.id);\n        newCollapsedState[reply.id] = false;\n        const firstChild = replies.find(p => p.parent_post_id === reply.id);\n        if (firstChild) {\n          newExpandedSet.add(firstChild.id);\n          newCollapsedState[firstChild.id] = false;\n        }\n      } else {\n        if (!newExpandedSet.has(reply.id)) {\n          newCollapsedState[reply.id] = true;\n        }\n      }\n    });\n    console.log('📌 Initial expandedPosts:', [...newExpandedSet]);\n    console.log('📌 Initial collapsedThreads:', newCollapsedState);\n    setExpandedPosts(newExpandedSet);\n    setCollapsedThreads(newCollapsedState);\n    initializedRef.current = true;\n  }, [replies, loadingReplies]);\n  useEffect(() => {\n    console.log(\"🌲 Expanded Posts Set after rendering:\", expandedPostsRef.current instanceof Set ? [...expandedPostsRef.current] : []);\n    console.log(\"🌲 Collapsed Threads after rendering:\", collapsedThreads);\n  }, [expandedPosts, collapsedThreads]);\n  const replyTree = buildReplyTree();\n  const renderReplyTree = (replies, depth = 0) => {\n    return replies.map((reply, index) => {\n      const hasChildren = reply.children && reply.children.length > 0;\n      const isExpanded = expandedPostsRef.current.has(reply.id);\n      const isCollapsed = collapsedThreads[reply.id];\n      const showReplyButtonForThisPost = true;\n      if (depth === 0) {\n        console.log(`🌲 Post ${reply.id} expanded state:`, isExpanded, 'children:', reply.children?.length || 0);\n      }\n      const depthIndicator = depth > 0 ? <div className=\"absolute left-0 top-0 bottom-0 flex\">\n          {Array(Math.min(depth, 5)).fill().map((_, i) => <div key={i} className={`w-px bg-orange-500/${30 - i * 5} ml-${i}`}></div>)}\n        </div> : null;\n      return <div key={reply.id} className={`ml-${Math.min(depth * 4, 16)} ${depth > 0 ? 'relative' : ''}`}>\n          {depthIndicator}\n          \n          <ReplyCard reply={reply} index={index} depth={depth} onReply={handleReplyToPost} onLike={handleLike} likeCount={likeCounts[reply.id] || 0} likeInProgress={likeInProgress[reply.id]} isExpanded={isExpanded} toggleExpansion={() => onExpandClick(reply.id)} hasChildren={hasChildren} childCount={reply.children?.length || 0} isTopLevel={!reply.parent_post_id} isCollapsed={isCollapsed} onCollapseThread={e => toggleThreadCollapse(reply.id, e)} showReplyButton={showReplyButtonForThisPost} />\n          \n          {}\n          {replyingTo === reply.id && <motion.div initial={{\n          opacity: 0,\n          y: -10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} className=\"ml-8 mt-2 mb-4\">\n              <div className=\"bg-gradient-to-br from-yellow-900/20 to-orange-900/20 backdrop-blur-sm rounded-xl overflow-hidden border border-orange-500/10 shadow-lg p-4\">\n                <form onSubmit={handleSubmitReply} className=\"space-y-4\">\n                  <div className=\"flex justify-between items-center mb-2\">\n                    <span className=\"text-sm font-medium text-orange-300\">\n                      Replying to {reply.username || reply.author}\n                    </span>\n                    <button type=\"button\" onClick={cancelReplyToPost} className=\"text-xs text-orange-400 hover:text-orange-300\">\n                      Cancel\n                    </button>\n                  </div>\n                  \n                  <textarea value={replyContent} onChange={handleContentChange} placeholder=\"Share your thoughts...\" rows=\"3\" required className={`w-full px-4 py-3 rounded-lg bg-black bg-opacity-50 border ${contentError ? 'border-red-500' : 'border-orange-500 border-opacity-30'} focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-30 text-white placeholder-orange-400 transition-all duration-300 resize-none`} />\n                  \n                  <div className=\"flex justify-between mt-1 mb-2\">\n                    {contentError && <p className=\"text-red-400 text-xs\">{contentError}</p>}\n                    <p className={`text-xs ${replyContent.length > CONTENT_MAX_LENGTH ? 'text-red-400' : 'text-orange-300'}`}>\n                      {replyContent.length}/{CONTENT_MAX_LENGTH}\n                    </p>\n                  </div>\n                  \n                  <div className=\"flex justify-end\">\n                    <button type=\"submit\" disabled={submitting || contentError || replyContent.length > CONTENT_MAX_LENGTH} className=\"px-4 py-2 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full text-white font-medium shadow-lg shadow-orange-700/30 hover:shadow-orange-700/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center\">\n                      {submitting ? <>\n                          <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\"></div>\n                          Posting...\n                        </> : <>\n                          <Send size={16} className=\"mr-2\" /> Reply\n                        </>}\n                    </button>\n                  </div>\n                </form>\n              </div>\n            </motion.div>}\n          \n        {}\n      {!isCollapsed && hasChildren && <AnimatePresence>\n          {isExpanded && <motion.div initial={{\n            opacity: 0,\n            height: 0\n          }} animate={{\n            opacity: 1,\n            height: \"auto\"\n          }} exit={{\n            opacity: 0,\n            height: 0\n          }} transition={{\n            duration: 0.3\n          }} className=\"mt-2\">\n              {renderReplyTree(reply.children, depth + 1)}\n            </motion.div>}\n        </AnimatePresence>}\n        </div>;\n    });\n  };\n  return <div className=\"max-w-4xl mx-auto\">\n      <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} className=\"mb-6 flex items-center justify-between\">\n        <button onClick={() => navigateTo('forum')} className=\"flex items-center text-orange-300 hover:text-orange-400 transition-colors duration-300\">\n          <ChevronLeft size={20} className=\"mr-1\" /> Back to Forum\n        </button>\n        \n        {localIsAdmin && <motion.button whileHover={{\n        scale: 1.05\n      }} whileTap={{\n        scale: 0.95\n      }} onClick={() => {\n        if (confirm('Are you sure you want to delete this entire thread? This action cannot be undone.')) {\n          if (typeof window.deleteThread === 'function') {\n            window.deleteThread(thread.id);\n          } else {\n            showNotification(\"Admin functionality unavailable. Please log in again.\", \"error\");\n          }\n        }\n      }} className=\"px-3 py-1 bg-red-900/40 text-red-300 rounded-full flex items-center hover:bg-red-800/50 transition-all duration-300\" title=\"Delete thread (Admin only)\">\n            <Trash2 size={16} className=\"mr-1\" />\n            Delete Thread\n          </motion.button>}\n      </motion.div>\n      \n      <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} transition={{\n      delay: 0.1\n    }} className=\"bg-gradient-to-br from-yellow-900/30 to-orange-900/30 backdrop-blur-sm rounded-xl overflow-hidden border border-orange-500/20 shadow-lg p-6 mb-4\">\n        <div className=\"flex justify-between items-start mb-4\">\n          <h2 className=\"text-2xl font-bold text-white\">{thread.title}</h2>\n          <span className=\"bg-orange-800/50 px-3 py-1 rounded-full text-sm text-orange-200 flex items-center\">\n            <User size={14} className=\"mr-1\" /> {thread.username || thread.author}\n          </span>\n        </div>\n        <p className=\"text-white mb-4 whitespace-pre-line\">{thread.content}</p>\n        <div className=\"flex justify-between items-center\">\n          <div className=\"flex items-center text-xs text-blue-300\">\n            <Clock size={12} className=\"mr-1\" />\n            {new Date(thread.created_at || thread.createdAt || Date.now()).toLocaleString()}\n          </div>\n          <div className=\"flex items-center text-xs text-orange-300\">\n            <MessageCircle size={12} className=\"mr-1\" />\n            {replies.length} {replies.length === 1 ? 'reply' : 'replies'}\n          </div>\n        </div>\n      </motion.div>\n      \n      {}\n      {!replyingTo && <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }} transition={{\n      delay: 0.15\n    }} className=\"bg-gradient-to-br from-yellow-900/20 to-orange-900/20 backdrop-blur-sm rounded-xl overflow-hidden border border-orange-500/10 shadow-lg p-4 mb-8\">\n          <form onSubmit={handleSubmitReply} className=\"space-y-4\">\n            <div className=\"flex items-center mb-2\">\n              <span className=\"text-sm font-medium text-orange-300\">Post a reply as {replyUsername}</span>\n            </div>\n            \n            <textarea value={replyContent} onChange={handleContentChange} placeholder=\"Share your thoughts...\" rows=\"3\" required className={`w-full px-4 py-3 rounded-lg bg-black bg-opacity-50 border ${contentError ? 'border-red-500' : 'border-orange-500 border-opacity-30'} focus:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-30 text-white placeholder-orange-400 transition-all duration-300 resize-none`} />\n            \n            <div className=\"flex justify-between mt-1 mb-2\">\n              {contentError && <p className=\"text-red-400 text-xs\">{contentError}</p>}\n              <p className={`text-xs ${replyContent.length > CONTENT_MAX_LENGTH ? 'text-red-400' : 'text-orange-300'}`}>\n                {replyContent.length}/{CONTENT_MAX_LENGTH}\n              </p>\n            </div>\n            \n            <div className=\"flex justify-end\">\n              <button type=\"submit\" disabled={submitting || contentError || replyContent.length > CONTENT_MAX_LENGTH} className=\"px-4 py-2 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full text-white font-medium shadow-lg shadow-orange-700/30 hover:shadow-orange-700/50 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center\">\n                {submitting ? <>\n                    <div className=\"w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2\"></div>\n                    Posting...\n                  </> : <>\n                    <Send size={16} className=\"mr-2\" /> Post Reply\n                  </>}\n              </button>\n            </div>\n          </form>\n        </motion.div>}\n      \n      <motion.div initial={{\n      opacity: 0\n    }} animate={{\n      opacity: 1\n    }} transition={{\n      delay: 0.2\n    }} className=\"mb-8\">\n        <div className=\"flex items-center justify-between mb-4\">\n          <h3 className=\"text-xl font-bold text-orange-300 flex items-center\">\n            <MessageCircle size={18} className=\"mr-2\" />\n            Discussion ({replies.length})\n          </h3>\n          \n          <div className=\"flex items-center space-x-3\">\n            <div className=\"flex items-center text-xs text-orange-300 bg-orange-900/30 px-3 py-1 rounded-full\">\n              <span className=\"mr-1\">👁️</span>\n              {collapsedThreads && Object.values(collapsedThreads).filter(v => v).length > 0 ? <span>{Object.values(collapsedThreads).filter(v => v).length} collapsed threads</span> : <span>All threads expanded</span>}\n            </div>\n            \n            <motion.button whileHover={{\n            scale: 1.05\n          }} whileTap={{\n            scale: 0.95\n          }} onClick={() => {\n            const allExpanded = replies.every(r => !collapsedThreads[r.id]);\n            const newState = {};\n            replies.forEach(r => {\n              if (r.parent_post_id) {\n                newState[r.id] = allExpanded;\n              } else {\n                newState[r.id] = false;\n              }\n            });\n            setCollapsedThreads(newState);\n          }} className=\"text-xs bg-orange-700/40 hover:bg-orange-700/60 text-orange-200 px-3 py-1 rounded-full transition-colors\">\n              {replies.every(r => !collapsedThreads[r.id]) ? \"Collapse Threads\" : \"Expand All\"}\n            </motion.button>\n          </div>\n        </div>\n        \n        {loadingReplies ? <div className=\"flex justify-center items-center py-10\">\n            <div className=\"w-12 h-12 border-4 border-orange-500 border-t-transparent rounded-full animate-spin\"></div>\n          </div> : replies.length === 0 ? <div className=\"bg-black bg-opacity-20 backdrop-blur-sm rounded-xl p-8 text-center\">\n            <p className=\"text-orange-200 mb-2\">No replies yet</p>\n            <p className=\"text-orange-300 text-sm\">Be the first to reply to this thread!</p>\n          </div> : <>\n            <div className=\"space-y-4\">\n              {renderReplyTree(replyTree)}\n            </div>\n            \n            {hasMorePosts && <div className=\"mt-10 text-center\">\n                <motion.button whileHover={{\n            scale: 1.05\n          }} whileTap={{\n            scale: 0.95\n          }} onClick={loadMorePosts} disabled={loadingMoreReplies} className=\"px-6 py-3 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full text-white font-medium shadow-lg shadow-orange-700/30 hover:shadow-orange-700/50 transition-all duration-300 disabled:opacity-50\">\n                  {loadingMoreReplies ? <>\n                      <div className=\"w-5 h-5 border-3 border-white border-t-transparent rounded-full animate-spin inline-block mr-2\"></div>\n                      Loading more...\n                    </> : 'Load More Replies'}\n                </motion.button>\n              </div>}\n          </>}\n      </motion.div>\n    </div>;\n}\nfunction ReplyCard({\n  reply,\n  index,\n  depth = 0,\n  onReply,\n  onLike,\n  likeCount = 0,\n  likeInProgress = false,\n  isExpanded = true,\n  toggleExpansion,\n  hasChildren = false,\n  childCount = 0,\n  isTopLevel = false,\n  isCollapsed = false,\n  onCollapseThread,\n  showReplyButton = true\n}) {\n  const [canDelete, setCanDelete] = useState(false);\n  const getReplyCountText = () => {\n    if (hasChildren && childCount > 0) {\n      const replyText = childCount === 1 ? 'reply' : 'replies';\n      return `${childCount} ${replyText}`;\n    }\n    return \"\";\n  };\n  useEffect(() => {\n    const checkAdminDeleteCapability = () => {\n      setCanDelete(window.isAdmin === true && typeof window.deletePost === 'function');\n    };\n    checkAdminDeleteCapability();\n    const intervalId = setInterval(checkAdminDeleteCapability, 1000);\n    return () => clearInterval(intervalId);\n  }, []);\n  const handleDelete = () => {\n    if (typeof window.deletePost === 'function') {\n      window.deletePost(reply.id);\n    } else {\n      showAppNotification(\"Admin functionality unavailable. Please log in again.\", \"error\");\n    }\n  };\n  return <motion.div initial={{\n    opacity: 0,\n    y: 20\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} transition={{\n    delay: 0.1 + index * 0.05\n  }} className={`bg-gradient-to-br from-yellow-900/10 to-orange-900/10 backdrop-blur-sm rounded-xl overflow-hidden border border-orange-500/10 shadow-lg p-5 relative ${depth > 0 ? 'ml-1' : ''} ${isCollapsed ? 'opacity-90' : ''}`}>\n      {}\n      {depth > 0 && <div className=\"absolute left-0 top-0 h-full w-1 bg-gradient-to-b from-orange-500/30 to-transparent\"></div>}\n      \n      {}\n      \n      {}\n      {depth > 0 && <div className=\"absolute -left-6 top-0 bottom-0 flex items-center justify-center\">\n          <div className=\"text-xs text-orange-500/50 font-mono rotate-90 origin-center\">\n            {Array(depth).fill('·').join('')}\n          </div>\n        </div>}\n      \n      <div className=\"flex justify-between items-start mb-3\">\n        <div className=\"flex items-center\">\n          <div className=\"w-8 h-8 rounded-full bg-gradient-to-r from-yellow-500 to-orange-600 flex items-center justify-center text-white font-bold mr-2\">\n            {(reply.username || reply.author).charAt(0).toUpperCase()}\n          </div>\n          <span className=\"font-medium text-orange-300\">{reply.username || reply.author}</span>\n        </div>\n        <div className=\"flex items-center\">\n          {canDelete && <motion.button whileHover={{\n          scale: 1.1\n        }} whileTap={{\n          scale: 0.9\n        }} onClick={handleDelete} className=\"mr-2 text-red-400 hover:text-red-300 transition-colors duration-300 flex items-center\" title=\"Delete post (Admin only)\">\n              <Trash2 size={14} className=\"mr-1\" />\n              <span className=\"text-xs\">Delete</span>\n            </motion.button>}\n          <span className=\"text-xs text-blue-300\">\n            {new Date(reply.created_at || reply.createdAt).toLocaleString()}\n          </span>\n        </div>\n      </div>\n      \n      {isCollapsed ? <div className=\"text-white/80 text-sm\">\n          {reply.content.length > 60 ? reply.content.substring(0, 60) + '...' : reply.content}\n          <div className=\"text-xs text-orange-400 mt-1\">\n            {childCount > 0 && `+ ${childCount} ${childCount === 1 ? 'reply' : 'replies'} collapsed`}\n          </div>\n        </div> : <p className=\"text-white whitespace-pre-line\">{reply.content}</p>}\n      \n      <div className=\"flex justify-between mt-3\">\n        <div className=\"flex items-center gap-2\">\n          {}\n          {hasChildren && childCount > 0 && <motion.button whileHover={{\n          scale: 1.15\n        }} whileTap={{\n          scale: 0.9\n        }} onClick={e => {\n          e.stopPropagation();\n          if (isCollapsed) {\n            onCollapseThread(e);\n            requestAnimationFrame(() => {\n              toggleExpansion();\n            });\n          } else {\n            toggleExpansion();\n            if (!isCollapsed && isExpanded) {\n              requestAnimationFrame(() => {\n                onCollapseThread(e);\n              });\n            }\n          }\n        }} className={`rounded-full w-9 h-9 flex items-center justify-center \n              shadow-lg shadow-orange-900/50 border \n              ${isCollapsed ? 'bg-gradient-to-r from-orange-500 to-red-500 border-orange-300/50' : isExpanded ? 'bg-gradient-to-r from-orange-700 to-orange-600 border-orange-500/50' : 'bg-gradient-to-r from-orange-600 to-orange-500 border-orange-400/50'}`} title={isCollapsed ? \"Expand thread\" : isExpanded ? \"Hide replies\" : \"Show replies\"}>\n              {isCollapsed ? <motion.div initial={{\n            opacity: 0.7\n          }} animate={{\n            opacity: [0.7, 1, 0.7],\n            scale: [1, 1.1, 1],\n            textShadow: [\"0 0 3px rgba(255,255,255,0.5)\", \"0 0 8px rgba(255,255,255,0.8)\", \"0 0 3px rgba(255,255,255,0.5)\"]\n          }} transition={{\n            duration: 1.5,\n            repeat: Infinity\n          }} className=\"text-white font-bold text-lg\">\n                  +\n                </motion.div> : isExpanded ? <motion.div className=\"text-white font-bold text-lg\">\n                  -\n                </motion.div> : <motion.div animate={{\n            scale: [1, 1.1, 1]\n          }} transition={{\n            duration: 1.2,\n            repeat: Infinity\n          }} className=\"text-white font-bold text-lg\">\n                  +\n                </motion.div>}\n            </motion.button>}\n          \n          {!isCollapsed && childCount > 0 && <div className=\"text-xs text-orange-400/70 px-2 py-1\">\n              {getReplyCountText()}\n            </div>}\n        </div>\n        \n        <div className=\"flex space-x-4\">\n          {showReplyButton && <button onClick={() => onReply(reply)} className=\"text-orange-400 hover:text-orange-300 transition-colors duration-300 flex items-center text-sm\">\n              <MessageCircle size={14} className=\"mr-1\" /> Reply\n            </button>}\n          \n          <button onClick={() => onLike(reply)} disabled={likeInProgress} className=\"text-orange-400 hover:text-orange-300 transition-colors duration-300 flex items-center text-sm\">\n            {likeInProgress ? <div className=\"w-3 h-3 border-2 border-orange-400 border-t-transparent rounded-full animate-spin mr-1\"></div> : <Heart size={14} className=\"mr-1\" fill={likeCount > 0 ? \"#f97316\" : \"none\"} />}\n            {likeCount > 0 ? `${likeCount} ${likeCount === 1 ? 'Like' : 'Likes'}` : \"Like\"}\n          </button>\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction Notification({\n  notification\n}) {\n  if (!notification.show) return null;\n  const bgColor = notification.type === 'error' ? 'from-red-900/70 to-red-700/70 border-red-500/30' : 'from-green-900/70 to-green-700/70 border-green-500/30';\n  const icon = notification.type === 'error' ? <AlertTriangle size={18} className=\"mr-2\" /> : <CheckCircle size={18} className=\"mr-2\" />;\n  console.log(`🔔 Showing notification: ${notification.message} (${notification.type})`);\n  return <motion.div initial={{\n    opacity: 0,\n    y: 50\n  }} animate={{\n    opacity: 1,\n    y: 0\n  }} exit={{\n    opacity: 0,\n    y: 50\n  }} className={`fixed bottom-4 right-4 z-50 bg-gradient-to-r ${bgColor} px-6 py-3 rounded-lg shadow-lg text-white backdrop-blur-sm border flex items-center`}>\n      {icon}\n      <span>{notification.message}</span>\n    </motion.div>;\n}\nfunction Footer() {\n  const [message, setMessage] = useState(\"\");\n  const [isVisible, setIsVisible] = useState(false);\n  const [clickCounts, setClickCounts] = useState({\n    contact: 0,\n    privacy: 0\n  });\n  const [isJudgmental, setIsJudgmental] = useState(false);\n  const handleLinkClick = type => {\n    const newCount = clickCounts[type] + 1;\n    setClickCounts({\n      ...clickCounts,\n      [type]: newCount\n    });\n    if (newCount >= 5 && !isJudgmental) {\n      setMessage(\"Don't you have something better to do\");\n      setIsVisible(true);\n      setIsJudgmental(true);\n      const timer = setTimeout(() => {\n        setIsVisible(false);\n        setIsJudgmental(false);\n      }, 10000);\n      return () => clearTimeout(timer);\n    }\n    if (isJudgmental) return;\n    if (type === 'contact') {\n      setMessage(\"Contact Deez Nuts!\");\n    } else if (type === 'privacy') {\n      setMessage(\"What's That?\");\n    }\n    setIsVisible(true);\n    const timer = setTimeout(() => {\n      setIsVisible(false);\n    }, 2000);\n    return () => clearTimeout(timer);\n  };\n  return <footer className=\"mt-20 py-10 border-t border-purple-500/20 text-center relative\">\n      <div className=\"container mx-auto px-4\">\n        <h3 className=\"text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 mb-2\">\n          dev.Arcade\n        </h3>\n        <p className=\"text-blue-300 mb-4\">The ultimate playground for dev.fun game creators and players</p>\n        \n        <div className=\"flex justify-center space-x-4 text-purple-300 text-sm\">\n          <a href=\"#\" className=\"hover:text-pink-400 transition-colors duration-300\">About</a>\n          <span>•</span>\n          <a href=\"#\" onClick={e => {\n          e.preventDefault();\n          handleLinkClick('privacy');\n        }} className=\"hover:text-pink-400 transition-colors duration-300\">\n            Privacy\n          </a>\n          <span>•</span>\n          <a href=\"#\" className=\"hover:text-pink-400 transition-colors duration-300\">Terms</a>\n          <span>•</span>\n          <a href=\"#\" onClick={e => {\n          e.preventDefault();\n          handleLinkClick('contact');\n        }} className=\"hover:text-pink-400 transition-colors duration-300\">\n            Contact\n          </a>\n        </div>\n        \n        <p className=\"text-purple-400 text-sm mt-4\">© 2025 dev.Arcade. All rights reserved.</p>\n        \n        <AnimatePresence>\n          {isVisible && <motion.div initial={{\n          opacity: 0,\n          scale: 0.5\n        }} animate={{\n          opacity: 1,\n          scale: 1\n        }} exit={{\n          opacity: 0,\n          scale: 0,\n          filter: \"blur(10px)\"\n        }} transition={{\n          duration: 0.3,\n          type: \"spring\"\n        }} className=\"fixed bottom-20 left-1/2 transform -translate-x-1/2 z-50\">\n              <motion.div className={`bg-gradient-to-r ${isJudgmental ? 'from-red-900/80 to-purple-900/80 border-red-500/50' : 'from-purple-900/80 to-pink-700/80 border-purple-500/50'} \n                  px-6 py-3 rounded-lg shadow-lg text-white backdrop-blur-sm border \n                  font-mono text-lg tracking-wider`} animate={isJudgmental ? {} : {\n            x: [0, -3, 3, -3, 0],\n            textShadow: [\"0 0 8px #ff00ff\", \"0 0 16px #00ffff\", \"0 0 8px #ff00ff\"]\n          }} transition={{\n            duration: 0.5,\n            repeat: isJudgmental ? 0 : Infinity,\n            repeatType: \"reverse\"\n          }}>\n                {message}\n              </motion.div>\n            </motion.div>}\n        </AnimatePresence>\n      </div>\n    </footer>;\n}\nfunction showAppNotification(message, type = \"success\") {\n  if (typeof window !== 'undefined' && window.setNotification) {\n    window.setNotification({\n      show: true,\n      message,\n      type\n    });\n  } else {\n    console.log(`[Notification ${type}]: ${message}`);\n  }\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/state-client\":\"0.8.1\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\",\"zod\":\"3.22.4\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_18":19,"_81":82,"_83":84,"_85":86,"_87":88,"_89":90,"_91":-5,"_92":41,"_93":94,"_71":72},"symbol","Arcade","price",0.00000462,"marketcap",5459.66560486,"image","https://pump.mypinata.cloud/ipfs/QmU55WF6qAdkoP3bSTCpKkHpX8cxKAzNnobgmTeXBNYDcY?img-width=256&img-dpr=2","website","https://dev.fun/p/dbb79810a8070675f0a5","twitter","devCount","appCount",4,"upstreamApp","isLordOfDev","analytics",[99,103,105,107,109,111,113,115,117,119,121,123,125,127,129,130],{"_100":101,"_102":59},"day","2025-08-06","runCount",{"_100":104,"_102":59},"2025-08-07",{"_100":106,"_102":59},"2025-08-08",{"_100":108,"_102":59},"2025-08-09",{"_100":110,"_102":59},"2025-08-10",{"_100":112,"_102":59},"2025-08-11",{"_100":114,"_102":59},"2025-08-12",{"_100":116,"_102":59},"2025-08-13",{"_100":118,"_102":59},"2025-08-14",{"_100":120,"_102":59},"2025-08-15",{"_100":122,"_102":59},"2025-08-16",{"_100":124,"_102":59},"2025-08-17",{"_100":126,"_102":59},"2025-08-18",{"_100":128,"_102":59},"2025-08-19",{"_100":110,"_102":41},{"_100":126,"_102":41},"snapshot","ogImage","https://cdn.dev.fun/og/image/dbb79810a8070675f0a5/c175b038.webp","isDevbase","actionData","errors"]
</article></body></html>

say something