script.js - master - BirdLeon/roblox-cloneGeneratedAI

script.js
463 строки14 KB
BirdLeon
upload files
23 фев 2026, 03:11
23 фев 2026, 03:11b23f5d7
// ===== PAGE NAVIGATION =====
function showPage(pageId) {
    // Hide all pages
    const pages = document.querySelectorAll('.page');
    pages.forEach(page => page.classList.remove('active'));
    
    // Show the requested page
    const page = document.getElementById(pageId);
    if (page) {
        page.classList.add('active');
        window.scrollTo(0, 0);
    }
}

// ===== LOADING SCREEN =====
window.addEventListener('load', function() {
    const loadingScreen = document.getElementById('loadingScreen');
    setTimeout(() => {
        loadingScreen.style.display = 'none';
        showPage('landingPage');
    }, 2500);
});

// ===== REGISTRATION =====
let selectedAvatarId = null;

function selectAvatar(element) {
    // Remove selected class from all avatars
    document.querySelectorAll('.avatar-option').forEach(el => {
        el.classList.remove('selected');
    });
    
    // Add selected class to clicked avatar
    element.classList.add('selected');
    selectedAvatarId = element.dataset.avatar;
}

function handleRegister(event) {
    event.preventDefault();
    
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    if (!username || !email || !password || !selectedAvatarId) {
        alert('Please fill in all fields and select an avatar');
        return;
    }
    
    // Validate username
    if (username.length < 3) {
        document.getElementById('usernameError').textContent = 'Username must be at least 3 characters';
        document.getElementById('usernameError').style.display = 'block';
        return;
    }
    
    // Store user data
    const userData = {
        username,
        email,
        avatarId: selectedAvatarId
    };
    
    localStorage.setItem('rainwayUser', JSON.stringify(userData));
    
    // Set user display
    setUserDisplay(username, selectedAvatarId);
    
    // Reset form
    document.getElementById('registerForm').reset();
    selectedAvatarId = null;
    document.querySelectorAll('.avatar-option').forEach(el => el.classList.remove('selected'));
    
    // Navigate to dashboard
    showPage('dashboardPage');
}

function handleLogin(event) {
    event.preventDefault();
    
    const email = document.getElementById('loginEmail').value;
    const password = document.getElementById('loginPassword').value;
    
    // For demo purposes, create a guest user
    const userData = {
        username: email.split('@')[0],
        email: email,
        avatarId: Math.floor(Math.random() * 6) + 1
    };
    
    localStorage.setItem('rainwayUser', JSON.stringify(userData));
    setUserDisplay(userData.username, userData.avatarId);
    
    showPage('dashboardPage');
}

// ===== GUEST MODE =====
function guestMode() {
    const guestUsername = 'Guest_' + Math.floor(Math.random() * 100000);
    const userData = {
        username: guestUsername,
        email: null,
        avatarId: Math.floor(Math.random() * 6) + 1
    };
    
    localStorage.setItem('rainwayUser', JSON.stringify(userData));
    setUserDisplay(userData.username, userData.avatarId);
    
    showPage('dashboardPage');
}

// ===== USER DISPLAY =====
function setUserDisplay(username, avatarId) {
    document.getElementById('userDisplayName').textContent = username;
    document.getElementById('profileUsername').textContent = username;
    
    const avatarColor = getAvatarColor(avatarId);
    
    // Set avatar colors in all locations
    document.getElementById('avatarHeader').style.background = avatarColor;
    document.getElementById('profileAvatar').style.background = avatarColor;
    
    document.getElementById('settingsUsername').value = username;
}

function getAvatarColor(avatarId) {
    const colors = {
        '1': 'linear-gradient(135deg, #FF6B6B 0%, #FF8E72 100%)',
        '2': 'linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%)',
        '3': 'linear-gradient(135deg, #FFE66D 0%, #FF6B6B 100%)',
        '4': 'linear-gradient(135deg, #95E1D3 0%, #F38181 100%)',
        '5': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        '6': 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
    };
    
    return colors[avatarId] || colors['1'];
}

// ===== LOGOUT =====
function logout() {
    localStorage.removeItem('rainwayUser');
    showPage('landingPage');
}

// ===== TAB SWITCHING =====
function switchTab(tabName) {
    // Hide all tabs
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Show selected tab
    const tabElement = document.getElementById(tabName + 'Tab');
    if (tabElement) {
        tabElement.classList.add('active');
    }
    
    // Update nav links
    document.querySelectorAll('.nav-menu a').forEach(link => {
        link.classList.remove('active');
    });
    event.target.classList.add('active');
}

// ===== PROFILE TAB SWITCHING =====
function switchProfileTab(tabName) {
    // Hide all profile content
    document.querySelectorAll('.profile-content').forEach(content => {
        content.classList.remove('active');
    });
    
    // Show selected content
    const contentElement = document.getElementById('profile' + tabName.charAt(0).toUpperCase() + tabName.slice(1));
    if (contentElement) {
        contentElement.classList.add('active');
    }
    
    // Update tab buttons
    document.querySelectorAll('.profile-tab-btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
}

// ===== GAME PLAYING =====
function playGame(gameName) {
    document.getElementById('currentGameName').textContent = gameName;
    document.getElementById('currentGameCreator').textContent = 'by Game Creator';
    showPage('gamePage');
    
    // Add a welcome message to chat
    const chatMessages = document.getElementById('chatMessages');
    const userElement = JSON.parse(localStorage.getItem('rainwayUser'));
    const welcomeMsg = document.createElement('div');
    welcomeMsg.className = 'chat-message';
    welcomeMsg.innerHTML = `<span class="chat-user">${userElement.username}:</span><span class="chat-text">Just joined!</span>`;
    chatMessages.appendChild(welcomeMsg);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// ===== CHAT FUNCTIONALITY =====
function sendChatMessage() {
    const chatInput = document.getElementById('chatInput');
    const message = chatInput.value.trim();
    
    if (!message) return;
    
    const userData = JSON.parse(localStorage.getItem('rainwayUser'));
    const chatMessages = document.getElementById('chatMessages');
    
    // Create new message element
    const msgElement = document.createElement('div');
    msgElement.className = 'chat-message';
    msgElement.innerHTML = `<span class="chat-user">${userData.username}:</span><span class="chat-text">${message}</span>`;
    
    chatMessages.appendChild(msgElement);
    chatInput.value = '';
    
    // Auto scroll to bottom
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// Allow Enter key to send message
document.addEventListener('DOMContentLoaded', function() {
    const chatInput = document.getElementById('chatInput');
    if (chatInput) {
        chatInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendChatMessage();
            }
        });
    }
});

// ===== GAME EDITOR =====
function addObject(objectType) {
    alert('Added ' + objectType + ' to the scene');
}

function expandPostComposer() {
    const postInput = document.querySelector('.post-input');
    if (postInput) {
        postInput.focus();
    }
}

// ===== INITIALIZATION =====
document.addEventListener('DOMContentLoaded', function() {
    // Check if user is logged in
    const userData = localStorage.getItem('rainwayUser');
    
    // Set initial tab
    switchTab('games');
    
    // Add event listeners for tab switching
    const sidebarLinks = document.querySelectorAll('.nav-menu a');
    sidebarLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const tabName = this.textContent.toLowerCase().trim();
            let actualTabName = '';
            
            if (tabName.includes('games')) actualTabName = 'games';
            else if (tabName.includes('create')) actualTabName = 'create';
            else if (tabName.includes('people')) actualTabName = 'people';
            else if (tabName.includes('posts')) actualTabName = 'posts';
            else if (tabName.includes('communit')) actualTabName = 'communities';
            else if (tabName.includes('profile')) actualTabName = 'profile';
            else if (tabName.includes('settings')) actualTabName = 'settings';
            
            if (actualTabName) {
                switchTab(actualTabName);
            }
        });
    });
});

// ===== SMOOTH SCROLL =====
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth'
            });
        }
    });
});

// ===== RESPONSIVE SIDEBAR TOGGLE =====
let sidebarOpen = true;

function toggleSidebar() {
    const sidebar = document.querySelector('.sidebar');
    sidebarOpen = !sidebarOpen;
    
    if (!sidebarOpen) {
        sidebar.style.display = 'none';
    } else {
        sidebar.style.display = 'flex';
    }
}

// ===== SEARCH FUNCTIONALITY =====
document.addEventListener('DOMContentLoaded', function() {
    const searchBox = document.querySelector('.search-box input');
    
    if (searchBox) {
        searchBox.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const query = this.value;
                console.log('Searching for:', query);
                this.value = '';
            }
        });
    }
});

// ===== NOTIFICATION SYSTEM =====
function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.textContent = message;
    
    // Style the notification
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: ${type === 'success' ? '#4caf50' : type === 'error' ? '#f44336' : '#1e88e5'};
        color: white;
        padding: 1rem 2rem;
        border-radius: 0.5rem;
        z-index: 10000;
        animation: slideIn 0.3s ease-out;
    `;
    
    document.body.appendChild(notification);
    
    // Remove after 3 seconds
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// ===== DARK/LIGHT MODE TOGGLE =====
let darkMode = true;

function toggleDarkMode() {
    darkMode = !darkMode;
    
    if (darkMode) {
        document.documentElement.style.setProperty('--background', '#0a0e27');
        document.documentElement.style.setProperty('--surface', '#1a1f3a');
        localStorage.setItem('rainwayTheme', 'dark');
    } else {
        document.documentElement.style.setProperty('--background', '#f5f7fa');
        document.documentElement.style.setProperty('--surface', '#ffffff');
        localStorage.setItem('rainwayTheme', 'light');
    }
}

// Load saved theme preference
window.addEventListener('load', function() {
    const savedTheme = localStorage.getItem('rainwayTheme');
    if (savedTheme === 'light') {
        darkMode = false;
        toggleDarkMode();
    }
});

// ===== KEYBOARD SHORTCUTS =====
document.addEventListener('keydown', function(e) {
    // Ctrl/Cmd + K for search
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        const searchBox = document.querySelector('.search-box input');
        if (searchBox) searchBox.focus();
    }
    
    // Esc to close modals
    if (e.key === 'Escape') {
        // Add modal closing logic here if needed
    }
});

// ===== ANIMATIONS =====
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.animation = 'slideUp 0.6s ease-out forwards';
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

// ===== FORM VALIDATION =====
function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
}

function validatePassword(password) {
    return password.length >= 6;
}

// ===== LOCAL STORAGE MANAGEMENT =====
function saveUserData(userData) {
    localStorage.setItem('rainwayUser', JSON.stringify(userData));
}

function getUserData() {
    return JSON.parse(localStorage.getItem('rainwayUser'));
}

function clearUserData() {
    localStorage.removeItem('rainwayUser');
}

// ===== GAME STATS TRACKER =====
const gameStats = {
    gamesCreated: 0,
    totalPlays: 0,
    followers: 0,
    
    increment(stat) {
        if (this[stat] !== undefined) {
            this[stat]++;
        }
    }
};

// ===== RESPONSIVE MENU TOGGLE =====
function setupResponsiveMenu() {
    const sidebar = document.querySelector('.sidebar');
    
    if (window.innerWidth <= 768) {
        sidebar.style.position = 'fixed';
        sidebar.style.left = '0';
        sidebar.style.top = '0';
        sidebar.style.height = '100vh';
        sidebar.style.zIndex = '999';
        sidebar.style.transform = 'translateX(-100%)';
    }
}

window.addEventListener('resize', setupResponsiveMenu);
setupResponsiveMenu();

// ===== PERFORMANCE MONITORING =====
window.addEventListener('load', function() {
    const perfData = window.performance.timing;
    const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
    console.log('Page load time: ' + pageLoadTime + 'ms');
});