resourceName = null;
deathScreenOpen = false;
const isOdd = number => number % 2 !== 0;
vehData = [];
vehData.windows = [];
vehData.lightsData = [];
vehData.doorData = [];
alignData = {
["top-left"]: {left: 0, top: 6},
["top-right"]: {right: 0, top: 6},
["top-center"]: {right: 0, left: 0, top: 3},
["bottom-left"]: {left: 0, bottom: 6},
["bottom-right"]: {right: 0, bottom: 6},
["bottom-center"]: {right: 0, left: 0, bottom: 3}
};
window.addEventListener('message', function(event) {
ed = event.data;
if (ed.action === "openCarMenu") {
if (ed.state === true) {
if (alignData[ed.align]) {
if (alignData[ed.align].left) {
} else {
document.getElementById("mainDiv").style.left = alignData[ed.align].left + "%";
}
if (alignData[ed.align].right === null) {
} else {
document.getElementById("mainDiv").style.right = alignData[ed.align].right + "%";
}
if (alignData[ed.align].top) {
document.getElementById("mainDiv").style.top = alignData[ed.align].top + "%";
}
if (alignData[ed.align].bottom) {
document.getElementById("mainDiv").style.bottom = alignData[ed.align].bottom + "%";
}
}
resourceName = ed.resourceName;
carMenuOpen = true;
document.getElementById("mainDiv").style.display = "flex";
vehData.alarmState = false;
// Windows
document.getElementById("MDDBottomDivWindows").innerHTML="";
for (i = 1; i < ed.carData.doorNum + 1; i++) {
vehData.windows[i] = false;
if (isOdd(i) === true) {
var windowsHTML = `
`;
} else {
var windowsHTML = `
`;
}
appendHtml(document.getElementById("MDDBottomDivWindows"), windowsHTML);
};
// Seats
document.getElementById("MDDBottomDivSeats").innerHTML="";
for (i = -1; i < ed.carData.doorNum - 1; i++) {
if (i === -1) {
var seatsHTML = `
`;
} else {
var seatsHTML = `
`;
}
appendHtml(document.getElementById("MDDBottomDivSeats"), seatsHTML);
};
vehData.mySeat = ed.carData.playerSeat;
document.getElementById("MDDBDDivSeat-" + ed.carData.playerSeat).classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivSeat-" + ed.carData.playerSeat).classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivSeat-" + ed.carData.playerSeat).classList.add("MDDBDDivActive");
topLeft("change", "MDDBDDTopLeftDivSeat-" + ed.carData.playerSeat);
// Doors
vehData.doorData["trunk"] = ed.carData.trunk;
vehData.doorData["hood"] = ed.carData.hood;
document.getElementById("MDDBottomDivDoors").innerHTML="";
ed.carData.doorData.forEach(function(doorData, index) {
vehData.doorData[doorData.doorNum] = doorData.opened;
if (Number(doorData.doorNum) === 0) {
var doorsHTML = `
`;
} else if (isOdd(Number(doorData.doorNum)) === true) {
var doorsHTML = `
`;
} else {
if (ed.carData.doorNum === 4) {
var doorsHTML = `
`;
}
}
appendHtml(document.getElementById("MDDBottomDivDoors"), doorsHTML);
});
vehData.vehConvertible = ed.carData.vehConvertible;
if (ed.carData.vehConvertible === false) {
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivActive");
document.getElementById("MDDBDDivCarConvert").classList.add("MDDBDDivDeactive");
topLeft("default", "MDDBDDTopLeftDivCarConvert");
} else {
document.getElementById("MDDBDDivCarConvert").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivDeactive");
// document.getElementById("MDDBDDivCarConvert").classList.add("MDDBDDivActive");
topLeft("default", "MDDBDDTopLeftDivCarConvert");
}
if (ed.carData.vehConvertibleState === 2 || ed.carData.vehConvertibleState === 3) {
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivCarConvert").classList.add("MDDBDDivActive");
vehData.vehConvertibleState = true;
topLeft("change", "MDDBDDTopLeftDivCarConvert");
}
} else {
carMenuOpen = false;
document.getElementById("mainDiv").style.display = "none";
}
if (ed.carData.engineState === 1) {
vehData.engineState = true;
document.getElementById("MDDBDDEngineOn").style.display = "block";
document.getElementById("MDDBDDEngineOff").style.display = "none";
topLeft('change', 'MDDBDDTopLeftDivEngine');
} else {
vehData.engineState = false;
document.getElementById("MDDBDDEngineOn").style.display = "none";
document.getElementById("MDDBDDEngineOff").style.display = "block";
topLeft('default', 'MDDBDDTopLeftDivEngine');
}
if (ed.carData.intLightState === 1) {
vehData.intLightState = true;
topLeft('change', 'MDDBDDTopLeftDivIntLight');
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIntLight").classList.add("MDDBDDivActive");
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivIntLightSVG1").style.display = "block";
document.getElementById("MDDBDDivIntLightSVG2").style.display = "block";
document.getElementById("MDDBDDivIntLightSVG3").style.display = "block";
} else {
vehData.intLightState = false;
topLeft('default', 'MDDBDDTopLeftDivIntLight');
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivActive");
document.getElementById("MDDBDDivIntLight").classList.add("MDDBDDivDeactive");
document.getElementById("MDDBDDivIntLightSVG1").style.display = "none";
document.getElementById("MDDBDDivIntLightSVG2").style.display = "none";
document.getElementById("MDDBDDivIntLightSVG3").style.display = "none";
}
if (ed.carData.highbeamsOn) {
document.getElementById("MDDBDDivIntLightSVGMain").innerHTML=`
`;
topLeft('change', 'MDDBDDTopLeftDivLights');
vehData.lightsData.highbeamsOn = true;
vehData.lightsData.lightsOn = false;
} else if (ed.carData.lightsOn) {
document.getElementById("MDDBDDivIntLightSVGMain").innerHTML=`
`;
topLeft('change', 'MDDBDDTopLeftDivLights');
vehData.lightsData.lightsOn = true;
vehData.lightsData.highbeamsOn = false;
} else {
document.getElementById("MDDBDDivIntLightSVGMain").innerHTML=`
`;
topLeft('default', 'MDDBDDTopLeftDivLights');
vehData.lightsData.lightsOn = false;
}
if (ed.carData.indicatorState === 1) {
vehData.leftIndicator = true;
document.getElementById("MDDBDDivIndicatorLeft").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorLeft").classList.add("MDDBDDivAlarm");
document.getElementById("MDDBDDivIndicatorRight").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorRight").classList.remove("MDDBDDivAlarm");
} else if (ed.carData.indicatorState === 2) {
vehData.rightIndicator = true;
document.getElementById("MDDBDDivIndicatorLeft").classList.remove("MDDBDDivAlarm");
document.getElementById("MDDBDDivIndicatorLeft").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorRight").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorRight").classList.add("MDDBDDivAlarm");
} else if (ed.carData.indicatorState === 3) {
vehData.leftIndicator = true;
vehData.rightIndicator = true;
// Left
document.getElementById("MDDBDDivIndicatorLeft").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorLeft").classList.add("MDDBDDivAlarm");
// Right
document.getElementById("MDDBDDivIndicatorRight").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorRight").classList.add("MDDBDDivAlarm");
} else {
vehData.leftIndicator = false;
vehData.rightIndicator = false;
document.getElementById("MDDBDDivIndicatorLeft").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorLeft").classList.remove("MDDBDDivAlarm");
document.getElementById("MDDBDDivIndicatorRight").classList.remove("MDDBDDivAlarm");
document.getElementById("MDDBDDivIndicatorRight").classList.add("MDDBDDivDefault");
}
} else if (ed.action === "closeAlarm") {
vehData.alarmState = false;
document.getElementById("MDDBDDivAlarm").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivAlarm").classList.remove("MDDBDDivAlarm");
topLeft("default", "MDDBDDTopLeftDivAlarm");
}
document.onkeyup = function(data) {
if (data.which == 27 && carMenuOpen) {
carMenuOpen = false;
document.getElementById("mainDiv").style.display = "none";
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "nuiFocus"}));
}
}
})
function clFunc(name1, name2) {
if (name1 === "door") {
if (vehData.doorData[name2] === true) {
vehData.doorData[name2] = false;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "door", number: name2, state: false}));
document.getElementById("MDDBDDivDoor-" + name2).classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivDoor-" + name2).classList.add("MDDBDDivDeactive");
document.getElementById("MDDBDDivDoor-" + name2).classList.remove("MDDBDDivActive");
topLeft('default', 'MDDBDDTopLeftDivDoor-' + name2);
} else {
vehData.doorData[name2] = true;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "door", number: name2, state: true}));
document.getElementById("MDDBDDivDoor-" + name2).classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivDoor-" + name2).classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivDoor-" + name2).classList.add("MDDBDDivActive");
topLeft('change', 'MDDBDDTopLeftDivDoor-' + name2);
}
} else if (name1 === "convertVeh") {
if (vehData.vehConvertible === 1) {
if (vehData.vehConvertibleState === true) {
vehData.vehConvertibleState = false;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "convertVeh", state: false}));
document.getElementById("MDDBDDivCarConvert").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivActive");
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivDeactive");
topLeft("default", "MDDBDDTopLeftDivCarConvert");
} else {
vehData.vehConvertibleState = true;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "convertVeh", state: true}));
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivCarConvert").classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivCarConvert").classList.add("MDDBDDivActive");
topLeft("change", "MDDBDDTopLeftDivCarConvert");
}
}
} else if (name1 === "window") {
if (vehData.windows[Number(name2)] === false) {
vehData.windows[Number(name2)] = true;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "window", num: Number(name2), state: true}));
document.getElementById("MDDBDDivWindow-" + name2).classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivWindow-" + name2).classList.add("MDDBDDivDeactive");
document.getElementById("MDDBDDivWindow-" + name2).classList.remove("MDDBDDivActive");
topLeft("change", "MDDBDDTopLeftDivWindow-" + name2);
} else {
vehData.windows[Number(name2)] = false;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "window", num: Number(name2), state: false}));
document.getElementById("MDDBDDivWindow-" + name2).classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivWindow-" + name2).classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivWindow-" + name2).classList.add("MDDBDDivActive");
topLeft("default", "MDDBDDTopLeftDivWindow-" + name2);
}
} else if (name1 === "changeSeat") {
if (vehData.mySeat) {
document.getElementById("MDDBDDivSeat-" + vehData.mySeat).classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivSeat-" + vehData.mySeat).classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivSeat-" + vehData.mySeat).classList.remove("MDDBDDivActive");
topLeft("default", "MDDBDDTopLeftDivSeat-" + vehData.mySeat);
}
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "changeSeat", num: name2}));
vehData.mySeat = name2;
document.getElementById("MDDBDDivSeat-" + vehData.mySeat).classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivSeat-" + vehData.mySeat).classList.remove("MDDBDDivDeactive");
document.getElementById("MDDBDDivSeat-" + vehData.mySeat).classList.add("MDDBDDivActive");
topLeft("change", "MDDBDDTopLeftDivSeat-" + vehData.mySeat);
} else if (name1 === "engine") {
if (Number(vehData.mySeat) === -1) {
if (vehData.engineState === false) {
vehData.engineState = true;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "engine", state: true}));
document.getElementById("MDDBDDEngineOn").style.display = "block";
document.getElementById("MDDBDDEngineOff").style.display = "none";
topLeft('change', 'MDDBDDTopLeftDivEngine');
} else {
vehData.engineState = false;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "engine", state: false}));
document.getElementById("MDDBDDEngineOn").style.display = "none";
document.getElementById("MDDBDDEngineOff").style.display = "block";
topLeft('default', 'MDDBDDTopLeftDivEngine');
}
}
} else if (name1 === "alarm") {
if (vehData.alarmState === false) {
vehData.alarmState = true;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "alarm", state: true}));
// document.getElementById("MDDBDDivAlarm").style.animation = "blink 1.5s linear infinite";
document.getElementById("MDDBDDivAlarm").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivAlarm").classList.add("MDDBDDivAlarm");
topLeft("change", "MDDBDDTopLeftDivAlarm");
} else {
vehData.alarmState = false;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "alarm", state: false}));
document.getElementById("MDDBDDivAlarm").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivAlarm").classList.remove("MDDBDDivAlarm");
topLeft("default", "MDDBDDTopLeftDivAlarm");
}
} else if (name1 === "intLight") {
if (vehData.intLightState === false) {
vehData.intLightState = true;
topLeft('change', 'MDDBDDTopLeftDivIntLight');
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIntLight").classList.add("MDDBDDivActive");
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivDeactive");
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "intLight", state: true}));
document.getElementById("MDDBDDivIntLightSVG1").style.display = "block";
document.getElementById("MDDBDDivIntLightSVG2").style.display = "block";
document.getElementById("MDDBDDivIntLightSVG3").style.display = "block";
} else {
vehData.intLightState = false;
topLeft('default', 'MDDBDDTopLeftDivIntLight');
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIntLight").classList.remove("MDDBDDivActive");
document.getElementById("MDDBDDivIntLight").classList.add("MDDBDDivDeactive");
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "intLight", state: false}));
document.getElementById("MDDBDDivIntLightSVG1").style.display = "none";
document.getElementById("MDDBDDivIntLightSVG2").style.display = "none";
document.getElementById("MDDBDDivIntLightSVG3").style.display = "none";
}
} else if (name1 === "lights") {
if (vehData.lightsData.lightsOn === false) {
vehData.lightsData.lightsOn = true;
vehData.lightsData.highbeamsOn = false;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "lights", name: "normal", state: true}));
document.getElementById("MDDBDDivIntLightSVGMain").innerHTML=`
`;
topLeft('change', 'MDDBDDTopLeftDivLights');
} else if (vehData.lightsData.lightsOn === true) {
vehData.lightsData.lightsOn = false;
vehData.lightsData.highbeamsOn = true;
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "lights", name: "highbeams", state: true}));
document.getElementById("MDDBDDivIntLightSVGMain").innerHTML=`
`;
topLeft('change', 'MDDBDDTopLeftDivLights');
}
} else if (name1 === "indicator") {
if (Number(name2) === 1) {
if (vehData.leftIndicator === true) {
vehData.leftIndicator = false;
document.getElementById("MDDBDDivIndicatorLeft").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorLeft").classList.remove("MDDBDDivAlarm");
} else {
vehData.leftIndicator = true;
document.getElementById("MDDBDDivIndicatorLeft").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorLeft").classList.add("MDDBDDivAlarm");
}
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "indicator", name: Number(name2), state: vehData.leftIndicator}));
} else {
if (vehData.rightIndicator === true) {
vehData.rightIndicator = false;
document.getElementById("MDDBDDivIndicatorRight").classList.add("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorRight").classList.remove("MDDBDDivAlarm");
} else {
vehData.rightIndicator = true;
document.getElementById("MDDBDDivIndicatorRight").classList.remove("MDDBDDivDefault");
document.getElementById("MDDBDDivIndicatorRight").classList.add("MDDBDDivAlarm");
}
var xhr = new XMLHttpRequest();
xhr.open("POST", `https://${resourceName}/callback`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({action: "indicator", name: Number(name2), state: vehData.rightIndicator}));
}
}
}
function appendHtml(el, str) {
var div = document.createElement('div');
div.innerHTML = str;
while (div.children.length > 0) {
el.appendChild(div.children[0]);
}
}
function topLeft(action, div) {
if (action === "change") {
document.getElementById(div).classList.remove("MDDBDDTopLeftDivRed");
document.getElementById(div).classList.add("MDDBDDTopLeftDivGreen");
} else {
document.getElementById(div).classList.add("MDDBDDTopLeftDivRed");
document.getElementById(div).classList.remove("MDDBDDTopLeftDivGreen");
}
}