Spaces:
Running
Running
That looks like a design for a full-stack web application. Based on the uploaded diagrams, the app called https://www.Godsrods.online appears to use a client-server architecture to manage user logins, display a front-end interface, handle backend logic, and interact with a database.
3aeaee2
verified
| // Global state | |
| let currentUser = null; | |
| const API_BASE_URL = 'https://api.godsrods.online'; | |
| // Initialize app | |
| document.addEventListener('DOMContentLoaded', async function() { | |
| await checkAuthStatus(); | |
| loadMarketplaceData(); | |
| init3DViewers(); | |
| }); | |
| async function checkAuthStatus() { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/auth/status`, { | |
| credentials: 'include' | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| currentUser = data.user; | |
| updateUIAuthState(true); | |
| updateUserBalance(data.balance, data.tokens); | |
| } else { | |
| updateUIAuthState(false); | |
| } | |
| } catch (error) { | |
| console.error('Auth check failed:', error); | |
| updateUIAuthState(false); | |
| } | |
| } | |
| function updateUIAuthState(isLoggedIn) { | |
| const authElements = document.querySelectorAll('.auth-only'); | |
| const guestElements = document.querySelectorAll('.guest-only'); | |
| authElements.forEach(el => { | |
| el.classList.toggle('hidden', !isLoggedIn); | |
| }); | |
| guestElements.forEach(el => { | |
| el.classList.toggle('hidden', isLoggedIn); | |
| }); | |
| } | |
| function updateUserBalance(cash, tokens) { | |
| if (currentUser) { | |
| document.querySelectorAll('.user-cash').forEach(el => { | |
| el.textContent = `${cash.toLocaleString()}`; | |
| }); | |
| document.querySelectorAll('.user-tokens').forEach(el => { | |
| el.textContent = `${tokens.toLocaleString()} GTR`; | |
| }); | |
| } | |
| } | |
| async function loadMarketplaceData() { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/marketplace`); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| renderCarListings(data.listings); | |
| } | |
| } catch (error) { | |
| console.error('Failed to load marketplace data:', error); | |
| } | |
| } | |
| function renderCarListings(listings) { | |
| const container = document.querySelector('#listings-container') || | |
| document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6'); | |
| if (container) { | |
| container.innerHTML = ''; | |
| listings.forEach(listing => { | |
| const card = document.createElement('custom-car-card'); | |
| card.setAttribute('title', listing.title); | |
| card.setAttribute('price', listing.price); | |
| card.setAttribute('tokens', listing.tokenCost); | |
| card.setAttribute('image', listing.imageUrl); | |
| card.setAttribute('model', listing.modelUrl); | |
| card.setAttribute('id', `car-${listing.id}`); | |
| container.appendChild(card); | |
| }); | |
| } | |
| } | |
| function init3DViewers() { | |
| // Initialize 3D model viewers | |
| document.addEventListener('click', function(e) { | |
| if (e.target.closest('custom-car-card')) { | |
| const card = e.target.closest('custom-car-card'); | |
| const modelUrl = card.getAttribute('model'); | |
| openModelViewer(modelUrl); | |
| } | |
| }); | |
| } | |
| function openModelViewer(modelUrl) { | |
| // This would show a modal with the 3D viewer | |
| console.log('Opening 3D viewer for:', modelUrl); | |
| // Implementation would use model-viewer or three.js | |
| } | |
| // Auth functions | |
| async function handleLogin(email, password) { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/auth/login`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ email, password }), | |
| credentials: 'include' | |
| }); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| currentUser = data.user; | |
| updateUIAuthState(true); | |
| updateUserBalance(data.balance, data.tokens); | |
| return { success: true }; | |
| } else { | |
| return { success: false, error: 'Invalid credentials' }; | |
| } | |
| } catch (error) { | |
| console.error('Login failed:', error); | |
| return { success: false, error: 'Network error' }; | |
| } | |
| } | |
| async function handleLogout() { | |
| try { | |
| await fetch(`${API_BASE_URL}/auth/logout`, { | |
| method: 'POST', | |
| credentials: 'include' | |
| }); | |
| currentUser = null; | |
| updateUIAuthState(false); | |
| } catch (error) { | |
| console.error('Logout failed:', error); | |
| } | |
| } | |
| // Admin functions | |
| async function adminAddListing(listingData) { | |
| if (!currentUser?.isAdmin) return; | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/admin/listings`, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| 'Authorization': `Bearer ${currentUser.token}` | |
| }, | |
| body: JSON.stringify(listingData) | |
| }); | |
| if (response.ok) { | |
| loadMarketplaceData(); | |
| return true; | |
| } | |
| return false; | |
| } catch (error) { | |
| console.error('Failed to add listing:', error); | |
| return false; | |
| } | |
| } | |