let currentVehicles = [];
let selectedVehicle = null;
let impoundVehicles = [];
let selectedImpoundVehicle = null;
let impoundPrice = 0;
let logoUrl = "";
window.addEventListener('message', function(event) {
const data = event.data;
if (data.action === 'openGarage') {
openGarage(data.garage, data.vehicles, data.logo);
} else if (data.action === 'openImpound') {
openImpound(data.impound, data.vehicles, data.price, data.logo);
} else if (data.action === 'closeMenu') {
closeAllMenus();
}
});
function openGarage(garageName, vehicles, logo) {
document.getElementById('garage-container').style.display = 'block';
document.getElementById('garage-title').textContent = garageName;
currentVehicles = vehicles;
logoUrl = logo;
document.getElementById('logo').src = logo;
const logoElement = document.getElementById('logo');
logoElement.style.animation = 'rotate 4s linear infinite, bounce 2s ease-in-out infinite';
selectedVehicle = null;
updateVehicleDetails();
const vehicleList = document.getElementById('vehicle-list');
vehicleList.innerHTML = '';
if (vehicles.length === 0) {
vehicleList.innerHTML = 'Aucun véhicule disponible
';
} else {
vehicles.forEach(vehicle => {
const vehicleItem = document.createElement('div');
vehicleItem.classList.add('vehicle-item');
vehicleItem.dataset.plate = vehicle.plate;
vehicleItem.innerHTML = `
${vehicle.name}
Plaque: ${vehicle.plate}
`;
vehicleItem.addEventListener('click', () => selectVehicle(vehicle.plate));
vehicleList.appendChild(vehicleItem);
});
}
}
function openImpound(impoundName, vehicles, price, logo) {
document.getElementById('impound-container').style.display = 'block';
document.getElementById('impound-title').textContent = impoundName;
impoundVehicles = vehicles;
impoundPrice = price;
logoUrl = logo;
document.getElementById('impound-logo').src = logo;
document.getElementById('impound-price').textContent = `Prix: ${price}€`;
const logoElement = document.getElementById('impound-logo');
logoElement.style.animation = 'rotate 4s linear infinite, bounce 2s ease-in-out infinite';
selectedImpoundVehicle = null;
updateImpoundVehicleDetails();
const vehicleList = document.getElementById('impound-vehicle-list');
vehicleList.innerHTML = '';
if (vehicles.length === 0) {
vehicleList.innerHTML = 'Aucun véhicule en fourrière
';
} else {
vehicles.forEach(vehicle => {
const vehicleItem = document.createElement('div');
vehicleItem.classList.add('vehicle-item');
vehicleItem.dataset.plate = vehicle.plate;
vehicleItem.innerHTML = `
${vehicle.name}
Plaque: ${vehicle.plate}
`;
vehicleItem.addEventListener('click', () => selectImpoundVehicle(vehicle.plate));
vehicleList.appendChild(vehicleItem);
});
}
}
function selectVehicle(plate) {
const vehicleItems = document.querySelectorAll('#vehicle-list .vehicle-item');
vehicleItems.forEach(item => {
if (item.dataset.plate === plate) {
item.classList.add('selected');
} else {
item.classList.remove('selected');
}
});
selectedVehicle = currentVehicles.find(v => v.plate === plate);
updateVehicleDetails();
}
function selectImpoundVehicle(plate) {
const vehicleItems = document.querySelectorAll('#impound-vehicle-list .vehicle-item');
vehicleItems.forEach(item => {
if (item.dataset.plate === plate) {
item.classList.add('selected');
} else {
item.classList.remove('selected');
}
});
selectedImpoundVehicle = impoundVehicles.find(v => v.plate === plate);
updateImpoundVehicleDetails();
}
function updateVehicleDetails() {
const vehicleName = document.getElementById('vehicle-name');
const vehicleDetails = document.getElementById('vehicle-details');
const spawnButton = document.getElementById('spawn-vehicle');
if (selectedVehicle) {
vehicleName.textContent = selectedVehicle.name;
const engineHealthPercent = Math.floor((selectedVehicle.engineHealth / 1000) * 100);
const bodyHealthPercent = Math.floor((selectedVehicle.bodyHealth / 1000) * 100);
const fuelLevelPercent = Math.floor(selectedVehicle.fuelLevel);
const dirtLevelPercent = Math.min(100, Math.floor((selectedVehicle.dirtLevel / 15) * 100));
vehicleDetails.innerHTML = `
Plaque:
${selectedVehicle.plate}
État du moteur:
${engineHealthPercent}%
État de la carrosserie:
${bodyHealthPercent}%
Niveau de carburant:
${fuelLevelPercent}%
Niveau de saleté:
${dirtLevelPercent}%
`;
spawnButton.disabled = false;
} else {
vehicleName.textContent = 'Sélectionnez un véhicule';
vehicleDetails.innerHTML = 'Aucun véhicule sélectionné
';
spawnButton.disabled = true;
}
}
function updateImpoundVehicleDetails() {
const vehicleName = document.getElementById('impound-vehicle-name');
const vehicleDetails = document.getElementById('impound-vehicle-details');
const releaseButton = document.getElementById('release-vehicle');
if (selectedImpoundVehicle) {
vehicleName.textContent = selectedImpoundVehicle.name;
const engineHealthPercent = Math.floor((selectedImpoundVehicle.engineHealth / 1000) * 100);
const bodyHealthPercent = Math.floor((selectedImpoundVehicle.bodyHealth / 1000) * 100);
const fuelLevelPercent = Math.floor(selectedImpoundVehicle.fuelLevel);
const dirtLevelPercent = Math.min(100, Math.floor((selectedImpoundVehicle.dirtLevel / 15) * 100));
vehicleDetails.innerHTML = `
Plaque:
${selectedImpoundVehicle.plate}
État du moteur:
${engineHealthPercent}%
État de la carrosserie:
${bodyHealthPercent}%
Niveau de carburant:
${fuelLevelPercent}%
Niveau de saleté:
${dirtLevelPercent}%
`;
releaseButton.disabled = false;
} else {
vehicleName.textContent = 'Sélectionnez un véhicule';
vehicleDetails.innerHTML = 'Aucun véhicule sélectionné
';
releaseButton.disabled = true;
}
}
function getHealthClass(percent) {
if (percent > 75) {
return 'good';
} else if (percent > 25) {
return 'average';
} else {
return 'bad';
}
}
function getDirtClass(percent) {
if (percent < 25) {
return 'good';
} else if (percent < 75) {
return 'average';
} else {
return 'bad';
}
}
function closeAllMenus() {
document.getElementById('garage-container').style.display = 'none';
document.getElementById('impound-container').style.display = 'none';
}
function postCallback(name, data) {
fetch(`https://${GetParentResourceName()}/${name}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
body: JSON.stringify(data)
});
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('close-garage').addEventListener('click', function() {
postCallback('close', {});
});
document.getElementById('close-impound').addEventListener('click', function() {
postCallback('closeImpound', {});
});
document.getElementById('spawn-vehicle').addEventListener('click', function() {
if (selectedVehicle) {
postCallback('spawnVehicle', {
vehicle: selectedVehicle
});
}
});
document.getElementById('store-vehicle').addEventListener('click', function() {
postCallback('storeVehicle', {});
});
document.getElementById('release-vehicle').addEventListener('click', function() {
if (selectedImpoundVehicle) {
postCallback('releaseVehicle', {
vehicle: selectedImpoundVehicle
});
}
});
});
document.addEventListener('keyup', function(event) {
if (event.key === 'Escape') {
postCallback('close', {});
}
});