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

/**
 * Vehicle Garage Interface
 * Handles vehicle management with spawn and store actions
 */

// Mock data - sample vehicles
const mockData = {
    vehicles: [
        // Cars
        { id: 1, name: "Sedan", type: "car", icon: "🚗", status: "stored", condition: 95, fuel: 80, location: "Garage A", seats: 4, speed: "180 km/h", cargo: "200 kg" },
        { id: 2, name: "Sports Car", type: "car", icon: "🏎️", status: "stored", condition: 100, fuel: 100, location: "Garage A", seats: 2, speed: "250 km/h", cargo: "50 kg" },
        { id: 3, name: "SUV", type: "car", icon: "🚙", status: "active", condition: 85, fuel: 60, location: "In Use", seats: 6, speed: "160 km/h", cargo: "400 kg" },
        { id: 4, name: "Hatchback", type: "car", icon: "🚗", status: "stored", condition: 90, fuel: 75, location: "Garage B", seats: 4, speed: "170 km/h", cargo: "250 kg" },

        // Trucks
        { id: 5, name: "Pickup Truck", type: "truck", icon: "🚛", status: "stored", condition: 88, fuel: 70, location: "Garage A", seats: 2, speed: "140 km/h", cargo: "800 kg" },
        { id: 6, name: "Delivery Van", type: "truck", icon: "🚚", status: "stored", condition: 92, fuel: 85, location: "Garage B", seats: 3, speed: "130 km/h", cargo: "1200 kg" },
        { id: 7, name: "Heavy Truck", type: "truck", icon: "🚛", status: "active", condition: 75, fuel: 50, location: "In Use", seats: 2, speed: "120 km/h", cargo: "2000 kg" },
        { id: 8, name: "Box Truck", type: "truck", icon: "📦", status: "stored", condition: 80, fuel: 65, location: "Garage A", seats: 3, speed: "110 km/h", cargo: "1500 kg" },

        // Aircraft
        { id: 9, name: "Helicopter", type: "air", icon: "🚁", status: "stored", condition: 95, fuel: 90, location: "Helipad", seats: 6, speed: "280 km/h", cargo: "500 kg" },
        { id: 10, name: "Light Plane", type: "air", icon: "✈️", status: "stored", condition: 100, fuel: 100, location: "Hangar", seats: 4, speed: "320 km/h", cargo: "300 kg" },

        // Boats
        { id: 11, name: "Speedboat", type: "sea", icon: "🚤", status: "stored", condition: 93, fuel: 80, location: "Marina", seats: 4, speed: "100 km/h", cargo: "150 kg" },
        { id: 12, name: "Yacht", type: "sea", icon: "🛥️", status: "stored", condition: 98, fuel: 95, location: "Marina", seats: 12, speed: "60 km/h", cargo: "800 kg" }
    ]
};

// State
let selectedVehicle = null;
let statusFilter = 'all';
let typeFilter = 'all';
let searchQuery = '';

// Icons by type
const typeIcons = {
    car: '🚗',
    truck: '🚛',
    air: '🚁',
    sea: '🚤'
};

// Initialize
function initGarage() {
    console.log('Garage interface initializing...');

    setupEventHandlers();
    renderVehicles();
    updateStats();

    console.log('Garage interface initialized');
}

// Event Handlers
function setupEventHandlers() {
    // Close button
    const closeBtn = document.querySelector('.close-btn');
    if (closeBtn) {
        closeBtn.addEventListener('click', () => {
            console.log('Closing garage...');
            sendEvent('garage::close', {});
        });
    }

    // Status filters
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            filterBtns.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            statusFilter = btn.dataset.filter;
            renderVehicles();
        });
    });

    // Type filters
    const typeItems = document.querySelectorAll('.type-item');
    typeItems.forEach(item => {
        item.addEventListener('click', () => {
            typeItems.forEach(i => i.classList.remove('active'));
            item.classList.add('active');
            typeFilter = item.dataset.type;
            renderVehicles();
        });
    });

    // Search
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
        searchInput.addEventListener('input', (e) => {
            searchQuery = e.target.value.toLowerCase();
            renderVehicles();
        });
    }

    // Spawn button
    const spawnBtn = document.getElementById('spawnBtn');
    if (spawnBtn) {
        spawnBtn.addEventListener('click', () => {
            if (selectedVehicle) {
                spawnVehicle(selectedVehicle);
            }
        });
    }

    // Store button
    const storeBtn = document.getElementById('storeBtn');
    if (storeBtn) {
        storeBtn.addEventListener('click', () => {
            if (selectedVehicle) {
                storeVehicle(selectedVehicle);
            }
        });
    }
}

// Render vehicles
function renderVehicles() {
    const vehiclesGrid = document.getElementById('vehiclesGrid');
    if (!vehiclesGrid) return;

    vehiclesGrid.innerHTML = '';

    // Filter vehicles
    let filtered = mockData.vehicles;

    // Status filter
    if (statusFilter !== 'all') {
        filtered = filtered.filter(v => v.status === statusFilter);
    }

    // Type filter
    if (typeFilter !== 'all') {
        filtered = filtered.filter(v => v.type === typeFilter);
    }

    // Search filter
    if (searchQuery) {
        filtered = filtered.filter(v =>
            v.name.toLowerCase().includes(searchQuery) ||
            v.type.toLowerCase().includes(searchQuery)
        );
    }

    // Render vehicles
    filtered.forEach(vehicle => {
        const card = document.createElement('div');
        card.className = 'vehicle-card';
        if (selectedVehicle && selectedVehicle.id === vehicle.id) {
            card.classList.add('selected');
        }

        card.innerHTML = `
            <div class="vehicle-icon">${vehicle.icon}</div>
            <div class="vehicle-name">${vehicle.name}</div>
            <div class="vehicle-type">${vehicle.type}</div>
            <div class="vehicle-status ${vehicle.status}">${vehicle.status}</div>
        `;

        card.addEventListener('click', () => selectVehicle(vehicle));
        vehiclesGrid.appendChild(card);
    });

    console.log(`Rendered ${filtered.length} vehicles`);
}

// Select vehicle
function selectVehicle(vehicle) {
    selectedVehicle = vehicle;

    // Update selected state in grid
    document.querySelectorAll('.vehicle-card').forEach(card => {
        card.classList.remove('selected');
    });
    event.currentTarget.classList.add('selected');

    // Show details
    showVehicleDetails(vehicle);
}

// Show vehicle details
function showVehicleDetails(vehicle) {
    const noSelection = document.getElementById('noSelection');
    const vehicleDetails = document.getElementById('vehicleDetails');
    const spawnBtn = document.getElementById('spawnBtn');
    const storeBtn = document.getElementById('storeBtn');

    if (noSelection) noSelection.style.display = 'none';
    if (vehicleDetails) vehicleDetails.style.display = 'flex';

    // Update details
    document.getElementById('detailIcon').textContent = vehicle.icon;
    document.getElementById('detailName').textContent = vehicle.name;
    document.getElementById('detailType').textContent = vehicle.type;
    document.getElementById('detailStatus').textContent = vehicle.status;
    document.getElementById('detailCondition').textContent = `${vehicle.condition}%`;
    document.getElementById('detailFuel').textContent = `${vehicle.fuel}%`;
    document.getElementById('detailLocation').textContent = vehicle.location;
    document.getElementById('detailSeats').textContent = vehicle.seats;
    document.getElementById('detailSpeed').textContent = vehicle.speed;
    document.getElementById('detailCargo').textContent = vehicle.cargo;

    // Show/hide action buttons based on status
    if (vehicle.status === 'stored') {
        spawnBtn.style.display = 'flex';
        storeBtn.style.display = 'none';
    } else {
        spawnBtn.style.display = 'none';
        storeBtn.style.display = 'flex';
    }
}

// Spawn vehicle
function spawnVehicle(vehicle) {
    console.log('Spawning vehicle:', vehicle.name);

    // Update local state
    vehicle.status = 'active';
    vehicle.location = 'In Use';

    sendEvent('garage::spawn', {
        vehicleId: vehicle.id,
        vehicleName: vehicle.name,
        vehicleType: vehicle.type
    });

    // Re-render
    renderVehicles();
    updateStats();
    if (selectedVehicle && selectedVehicle.id === vehicle.id) {
        showVehicleDetails(vehicle);
    }
}

// Store vehicle
function storeVehicle(vehicle) {
    console.log('Storing vehicle:', vehicle.name);

    // Update local state
    vehicle.status = 'stored';
    vehicle.location = 'Garage A';

    sendEvent('garage::store', {
        vehicleId: vehicle.id,
        vehicleName: vehicle.name,
        vehicleType: vehicle.type
    });

    // Re-render
    renderVehicles();
    updateStats();
    if (selectedVehicle && selectedVehicle.id === vehicle.id) {
        showVehicleDetails(vehicle);
    }
}

// Update stats
function updateStats() {
    const stored = mockData.vehicles.filter(v => v.status === 'stored').length;
    const active = mockData.vehicles.filter(v => v.status === 'active').length;
    const capacity = mockData.vehicles.length + 6; // Mock capacity

    document.getElementById('storedCount').textContent = stored;
    document.getElementById('activeCount').textContent = active;
    document.getElementById('capacityCount').textContent = capacity;
}

// Update garage data from external source
function updateGarageData(data) {
    if (data.vehicles) {
        mockData.vehicles = data.vehicles;
        renderVehicles();
        updateStats();

        // Update selected vehicle if it still exists
        if (selectedVehicle) {
            const updated = mockData.vehicles.find(v => v.id === selectedVehicle.id);
            if (updated) {
                selectedVehicle = updated;
                showVehicleDetails(updated);
            } else {
                selectedVehicle = null;
                const noSelection = document.getElementById('noSelection');
                const vehicleDetails = document.getElementById('vehicleDetails');
                if (noSelection) noSelection.style.display = 'flex';
                if (vehicleDetails) vehicleDetails.style.display = 'none';
            }
        }
    }
}

// Send event to Arma
function sendEvent(event, data) {
    if (typeof A3API !== 'undefined') {
        A3API.SendAlert(JSON.stringify({
            event: event,
            data: data
        }));
    } else {
        console.log('Event:', event, 'Data:', data);
    }
}

// Auto-initialize
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initGarage);
} else {
    initGarage();
}

// Expose functions globally
window.updateGarageData = updateGarageData;
window.selectVehicle = selectVehicle;
window.spawnVehicle = spawnVehicle;
window.storeVehicle = storeVehicle;