client/addons/garage/ui/_site/script.js

// Simulated garage data - this would be replaced with actual game data
let garageData = {
    vehicles: [
        {
            id: 1,
            name: "Offroad Vehicle",
            category: "Land",
            type: "Transport",
            status: "available",
            fuel: 100,
            damage: 0,
            maintenance: 95,
            lastUsed: "2025-04-10T15:30:00",
            image: "placeholder.jpg"
        },
        {
            id: 2,
            name: "Transport Helicopter",
            category: "Air",
            type: "Transport",
            status: "in-use",
            fuel: 75,
            damage: 15,
            maintenance: 80,
            lastUsed: "2025-04-12T09:15:00",
            image: "placeholder.jpg"
        },
        {
            id: 3,
            name: "Patrol Boat",
            category: "Sea",
            type: "Patrol",
            status: "maintenance",
            fuel: 50,
            damage: 35,
            maintenance: 45,
            lastUsed: "2025-04-11T18:45:00",
            image: "placeholder.jpg"
        },
        {
            id: 4,
            name: "Armed SUV",
            category: "Land",
            type: "Combat",
            status: "available",
            fuel: 90,
            damage: 5,
            maintenance: 88,
            lastUsed: "2025-04-12T11:20:00",
            image: "placeholder.jpg"
        }
    ]
};

// Initialize the garage interface
function initializeGarage() {
    updateStats();
    setupCategoryFilters();
    displayVehicles();
}

// Update garage statistics
function updateStats() {
    const totalVehicles = garageData.vehicles.length;
    const inMaintenance = garageData.vehicles.filter(v => v.status === 'maintenance').length;
    
    document.getElementById('vehicleCount').textContent = totalVehicles;
    document.getElementById('maintenanceCount').textContent = inMaintenance;
}

// Set up category filters
function setupCategoryFilters() {
    const categories = ['All', ...new Set(garageData.vehicles.map(v => v.category))];
    const filtersContainer = document.getElementById('categoryFilters');
    
    categories.forEach(category => {
        const button = document.createElement('button');
        button.className = 'filter-btn' + (category === 'All' ? ' active' : '');
        button.textContent = category;
        button.addEventListener('click', () => filterVehicles(category));
        filtersContainer.appendChild(button);
    });
}

// Filter vehicles by category
function filterVehicles(category) {
    // Update active filter button
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent === category);
    });

    // Filter and display vehicles
    const filteredVehicles = category === 'All' 
        ? garageData.vehicles 
        : garageData.vehicles.filter(v => v.category === category);
    
    displayVehicles(filteredVehicles);
}

// Display vehicles in the grid
function displayVehicles(vehicles = garageData.vehicles) {
    const grid = document.getElementById('vehiclesGrid');
    grid.innerHTML = '';

    vehicles.forEach(vehicle => {
        const card = document.createElement('div');
        card.className = 'vehicle-card';
        
        const statusText = {
            'available': 'Available',
            'in-use': 'In Use',
            'maintenance': 'Maintenance'
        }[vehicle.status];

        card.innerHTML = `
            <div class="vehicle-image" style="background-image: url(${vehicle.image})"></div>
            <div class="vehicle-info">
                <div class="vehicle-header">
                    <div class="vehicle-name">${vehicle.name}</div>
                    <span class="vehicle-status status-${vehicle.status}">${statusText}</span>
                </div>
                <div class="vehicle-details">
                    <div class="detail-item">
                        <span class="detail-label">Type</span>
                        <span class="detail-value">${vehicle.type}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Category</span>
                        <span class="detail-value">${vehicle.category}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Fuel</span>
                        <div class="vehicle-stats">
                            <span class="stat-dot ${getFuelStatusColor(vehicle.fuel)}"></span>
                            <span>${vehicle.fuel}%</span>
                        </div>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">Condition</span>
                        <div class="vehicle-stats">
                            <span class="stat-dot ${getConditionStatusColor(vehicle.maintenance)}"></span>
                            <span>${vehicle.maintenance}%</span>
                        </div>
                    </div>
                </div>
                <div class="vehicle-actions">
                    <button class="action-btn spawn-btn" 
                            onclick="spawnVehicle(${vehicle.id})"
                            ${vehicle.status !== 'available' ? 'disabled' : ''}>
                        Spawn Vehicle
                    </button>
                </div>
            </div>
        `;
        
        grid.appendChild(card);
    });
}

// Get color class for fuel status
function getFuelStatusColor(fuelLevel) {
    if (fuelLevel > 66) return 'stat-green';
    if (fuelLevel > 33) return 'stat-yellow';
    return 'stat-red';
}

// Get color class for vehicle condition
function getConditionStatusColor(condition) {
    if (condition > 66) return 'stat-green';
    if (condition > 33) return 'stat-yellow';
    return 'stat-red';
}

// Handle vehicle spawn
function spawnVehicle(vehicleId) {
    const vehicle = garageData.vehicles.find(v => v.id === vehicleId);
    if (vehicle && vehicle.status === 'available') {
        alert(`Spawning vehicle: ${vehicle.name}`);
        // Here you would typically integrate with your game's vehicle spawning system
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeGarage);