forked from Simnation/Main
638 lines
21 KiB
JavaScript
638 lines
21 KiB
JavaScript
|
BGBlur = true
|
||
|
|
ActionsOpen = false
|
||
|
|
ChangedKeys = []
|
||
|
|
DoorNotify = false
|
||
|
|
CurrentKeyPage = 1
|
||
|
|
|
||
|
|
let translations = {};
|
||
|
|
|
||
|
|
async function loadTranslations(lang) {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`../locales/${lang}.json`);
|
||
|
|
translations = await response.json();
|
||
|
|
updateText()
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Error loading translation:", error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateText() {
|
||
|
|
document.querySelectorAll("[data-i18n]").forEach(element => {
|
||
|
|
const key = element.getAttribute("data-i18n");
|
||
|
|
|
||
|
|
if (element.hasAttribute("placeholder")) {
|
||
|
|
element.setAttribute("placeholder", translations[key]);
|
||
|
|
} else {
|
||
|
|
element.innerHTML = translations[key];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function t(key) {
|
||
|
|
return translations[key] || key;
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('message', function(event) {
|
||
|
|
let data = event.data
|
||
|
|
|
||
|
|
if (data.action == "NUILanguage") {
|
||
|
|
loadTranslations(data.language);
|
||
|
|
}
|
||
|
|
else if (data.action === "OpenKeysMenu") {
|
||
|
|
MyKeys = data.mykeys
|
||
|
|
CreateKeyMenu()
|
||
|
|
BackgroundBlur("plugin_1", 'key_panel')
|
||
|
|
if (ActionsOpen){
|
||
|
|
BackgroundBlur("plugin_1", 'key_panel', true)
|
||
|
|
MakeKeysDraggable()
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
BackgroundBlur("plugin_1", 'key_panel')
|
||
|
|
}
|
||
|
|
ChangedKeys = []
|
||
|
|
}
|
||
|
|
if (data.action === "OpenLostKeyMenu") {
|
||
|
|
MyVehicles = data.myvehicles
|
||
|
|
VehicleKeyPrice = data.price
|
||
|
|
Currency = data.currencyform
|
||
|
|
CreateKeyPurchaseMenu()
|
||
|
|
show('key_purchase_menu')
|
||
|
|
BackgroundBlur("plugin_2", 'key_purchase_panel')
|
||
|
|
}
|
||
|
|
if (data.action === "DoorState") {
|
||
|
|
DoorState = data.status
|
||
|
|
if (DoorState == 'unlocked'){
|
||
|
|
$(".key_notify .text").html(t('doors_unlocked'))
|
||
|
|
document.getElementById('line').classList.remove("red")
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$(".key_notify .text").html(t('doors_locked'))
|
||
|
|
document.getElementById('line').classList.add("red")
|
||
|
|
}
|
||
|
|
$('.key_notify').css('display', 'block')
|
||
|
|
$('.key_notify .container').css('animation', 'container 1s ease both')
|
||
|
|
if (DoorNotify){
|
||
|
|
clearTimeout(DoorNotify)
|
||
|
|
}
|
||
|
|
DoorNotify = setTimeout(() => {
|
||
|
|
$('.key_notify .container').css('animation', 'reverse_container 1s ease both')
|
||
|
|
setTimeout(() => {
|
||
|
|
$('.key_notify').css('display', 'none')
|
||
|
|
DoorNotify = false
|
||
|
|
}, 800);
|
||
|
|
}, 4000);
|
||
|
|
}
|
||
|
|
else if (data.action === "close") {
|
||
|
|
Close()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
document.onkeydown = function(data) {
|
||
|
|
if (event.key == 'Escape') {
|
||
|
|
Close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function Close(){
|
||
|
|
CloseKeyMenu()
|
||
|
|
hide('key_purchase_menu')
|
||
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "close", table:ChangedKeys}))
|
||
|
|
ChangedKeys = []
|
||
|
|
}
|
||
|
|
|
||
|
|
function CreateKeyPurchaseMenu(){
|
||
|
|
$('.vehicles_container').html('')
|
||
|
|
for (let i = 0; i < MyVehicles.length; i++) {
|
||
|
|
$('.vehicles_container').append(`
|
||
|
|
<div class="vehicle_element">
|
||
|
|
<div class="element_border"></div>
|
||
|
|
<div class="plate">${MyVehicles[i].plate}</div>
|
||
|
|
<div class="price">${VehicleKeyPrice.toLocaleString('hu-HU')+' '+Currency}</div>
|
||
|
|
<button class="action_btn" onclick="SendBuyKeyForVehicle('${MyVehicles[i].plate}')">${t('buy')}</button>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function SendBuyKeyForVehicle(plate){
|
||
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "lostKey", plate}))
|
||
|
|
}
|
||
|
|
|
||
|
|
function CreateKeyMenu(){
|
||
|
|
$('.key_menu').css('display', 'block')
|
||
|
|
$('.key_menu .animation_element').css('animation', 'animation_element 1s ease both')
|
||
|
|
$('.key_menu .overflow_container').css('animation', 'overflow_container 1s ease both')
|
||
|
|
$('.key_menu .panel').css('animation', 'panel 1s ease both')
|
||
|
|
|
||
|
|
CreatePageSelector()
|
||
|
|
InsertDataToPanel()
|
||
|
|
}
|
||
|
|
|
||
|
|
function SendChangeLock(keyid){
|
||
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "changeLock", keyid, table:ChangedKeys}))
|
||
|
|
ChangedKeys = []
|
||
|
|
}
|
||
|
|
|
||
|
|
function SendCopy(keyid){
|
||
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "copyKey", keyid, table:ChangedKeys}))
|
||
|
|
ChangedKeys = []
|
||
|
|
}
|
||
|
|
|
||
|
|
function SendDeleteAll(keyid, plate){
|
||
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "deleteAll", keyid, table:ChangedKeys, plate}))
|
||
|
|
ChangedKeys = []
|
||
|
|
}
|
||
|
|
|
||
|
|
function CloseKeyMenu(){
|
||
|
|
$('.key_menu .animation_element').css('animation', 'reverse_animation_element 1s ease both')
|
||
|
|
$('.key_menu .overflow_container').css('animation', 'reverse_overflow_container 1s ease both')
|
||
|
|
$('.key_menu .panel').css('animation', 'reverse_panel 1s ease both')
|
||
|
|
|
||
|
|
if (ActionsOpen){
|
||
|
|
document.getElementById('actions_btn').classList.remove("active")
|
||
|
|
$('.key_menu .overflow_container').css('transform', 'translate(0px, -50%)')
|
||
|
|
|
||
|
|
$('.actions_section #actions_panel').css('animation', 'reverse_actions_panel 0.3s both')
|
||
|
|
|
||
|
|
MakeKeysNotDraggable()
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
ActionsOpen = false
|
||
|
|
BackgroundBlur("plugin_1", 'key_panel')
|
||
|
|
$('.actions_section').css('display', 'none')
|
||
|
|
}, 400);
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
$('.key_menu').css('display', 'none')
|
||
|
|
}, 700);
|
||
|
|
}
|
||
|
|
|
||
|
|
function ChooseKeyPage(element, number){
|
||
|
|
MakeKeysNotDraggable()
|
||
|
|
CurrentKeyPage = number+1
|
||
|
|
for (let i = 0; i < NumberOfPages; i++) {
|
||
|
|
document.getElementById("page_"+i).classList.remove("choosed")
|
||
|
|
}
|
||
|
|
element.classList.add("choosed")
|
||
|
|
InsertDataToPanel()
|
||
|
|
if (ActionsOpen){
|
||
|
|
MakeKeysDraggable()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function CreatePageSelector(){
|
||
|
|
BiggestSlot = 1
|
||
|
|
for (let i = 0; i < MyKeys.length; i++) {
|
||
|
|
if (MyKeys[i].slot > BiggestSlot){
|
||
|
|
BiggestSlot = MyKeys[i].slot
|
||
|
|
}
|
||
|
|
}
|
||
|
|
NumberOfPages = (BiggestSlot-(BiggestSlot%24))/24+1
|
||
|
|
|
||
|
|
$(".page_selector_container").html('')
|
||
|
|
if (NumberOfPages > 1){
|
||
|
|
for (let i = 0; i < NumberOfPages; i++) {
|
||
|
|
if (CurrentKeyPage-1 == i){
|
||
|
|
$(".page_selector_container").append(`
|
||
|
|
<div class="page_element choosed" id='page_${i}' onclick='ChooseKeyPage(this, ${i})'></div>
|
||
|
|
`)
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$(".page_selector_container").append(`
|
||
|
|
<div class="page_element" id='page_${i}' onclick='ChooseKeyPage(this, ${i})'></div>
|
||
|
|
`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function InsertDataToPanel(){
|
||
|
|
$('.keys_container').html('')
|
||
|
|
for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
|
||
|
|
if (MyKeys.length != 0){
|
||
|
|
for (let _i = 0; _i < MyKeys.length; _i++) {
|
||
|
|
if (MyKeys[_i] != undefined && MyKeys[_i].slot-1 == i){
|
||
|
|
let options = {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit"};
|
||
|
|
let date = new Date(MyKeys[_i].time * 1000);
|
||
|
|
$('.keys_container').append(`
|
||
|
|
<div class="key_element">
|
||
|
|
<div class="key_border"></div>
|
||
|
|
<div class="number">${MyKeys[_i].quantity>1?MyKeys[_i].quantity:''}</div>
|
||
|
|
<div class="name">${MyKeys[_i].label}</div>
|
||
|
|
${MyKeys[_i].type == 'temporary_key'?`<div class="temporary"></div>`:''}
|
||
|
|
<div class="dropdown">
|
||
|
|
<div class="key_image ${MyKeys[_i].type == 'vehicle_key'?'vehicle':''}" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="key_${i}"></div>
|
||
|
|
<ul class="dropdown-menu">
|
||
|
|
${MyKeys[_i].type != 'temporary_key'?`<li><button class="dropdown-item mb-2" onclick='SendCopy("${MyKeys[_i].id}")'>${t('copy')}</button></li>`:''}
|
||
|
|
${MyKeys[_i].type == 'vehicle_key'?`<li><button class="dropdown-item mb-2" onclick='SendChangeLock("${MyKeys[_i].id}")'>${t('change_lock')}</button></li>`:''}
|
||
|
|
<li><button class="dropdown-item" onclick='SendDeleteAll("${MyKeys[_i].id}", "${MyKeys[_i].plate}")'>${t('delete_all')}</button></li>
|
||
|
|
<div class="time">${date.toLocaleString("hu-HU", options)}</div>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
else if(_i+1 == MyKeys.length){
|
||
|
|
$('.keys_container').append(`
|
||
|
|
<div class="key_element" id="empty_${i}">
|
||
|
|
<div class="key_border"></div>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$('.keys_container').append(`
|
||
|
|
<div class="key_element" id="empty_${i}">
|
||
|
|
<div class="key_border"></div>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.querySelectorAll(".key_image").forEach(el => {
|
||
|
|
const dropdownMenu = new bootstrap.Dropdown(el);
|
||
|
|
el.addEventListener("contextmenu", function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
document.querySelectorAll(".key_image").forEach(otherEl => {
|
||
|
|
if (otherEl !== el) {
|
||
|
|
new bootstrap.Dropdown(otherEl).hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
dropdownMenu.show();
|
||
|
|
});
|
||
|
|
|
||
|
|
document.addEventListener("click", function () {
|
||
|
|
dropdownMenu.hide();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function MakeKeysDraggable(){
|
||
|
|
for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
|
||
|
|
for (let _i = 0; _i < MyKeys.length; _i++) {
|
||
|
|
if (MyKeys[_i] != undefined && MyKeys[_i].slot-1 == i){
|
||
|
|
dragElement(document.getElementById('key_'+i), 'key_'+i, MyKeys[_i].id, _i)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function MakeKeysNotDraggable(){
|
||
|
|
for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
|
||
|
|
for (let _i = 0; _i < MyKeys.length; _i++) {
|
||
|
|
if (MyKeys[_i] != undefined && MyKeys[_i].slot-1 == i){
|
||
|
|
document.getElementById('key_'+i).onmousedown = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function CreateActionPage(){
|
||
|
|
if (!ActionsOpen){
|
||
|
|
ActionsOpen = true
|
||
|
|
document.getElementById('actions_btn').classList.add("active")
|
||
|
|
$('.key_menu .overflow_container').css('transform', 'translate(-100px, -50%)')
|
||
|
|
BackgroundBlur("plugin_1", 'key_panel', true)
|
||
|
|
|
||
|
|
$('#actions_panel').css('height', $('.key_menu .panel').height()+'px')
|
||
|
|
$('.actions_section #actions_panel').css('animation', 'actions_panel 0.3s ease both')
|
||
|
|
$('.actions_section').css('display', 'block')
|
||
|
|
|
||
|
|
MakeKeysDraggable()
|
||
|
|
|
||
|
|
TriggerCallback('getClosestPlayers', {}).done((cb) => {
|
||
|
|
ClosestPlayers = cb
|
||
|
|
$('.people_container').html('')
|
||
|
|
if (ClosestPlayers.length > 0){
|
||
|
|
for (let i = 0; i < ClosestPlayers.length; i++) {
|
||
|
|
$('.people_container').append(`
|
||
|
|
<div class="people_element" id='player_${i}'>
|
||
|
|
<div class="element_border"></div>
|
||
|
|
<div class="people_image"></div>
|
||
|
|
<div class="id">ID ${ClosestPlayers[i].id}</div>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$('.people_container').append(`
|
||
|
|
<div class="people_element">
|
||
|
|
<div class="element_border"></div>
|
||
|
|
<div class="text">x</div>
|
||
|
|
</div>
|
||
|
|
`)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
document.getElementById('actions_btn').classList.remove("active")
|
||
|
|
$('.key_menu .overflow_container').css('transform', 'translate(0px, -50%)')
|
||
|
|
|
||
|
|
$('.actions_section #actions_panel').css('animation', 'reverse_actions_panel 0.3s both')
|
||
|
|
|
||
|
|
MakeKeysNotDraggable()
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
ActionsOpen = false
|
||
|
|
BackgroundBlur("plugin_1", 'key_panel')
|
||
|
|
$('.actions_section').css('display', 'none')
|
||
|
|
}, 400);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function TriggerCallback(event, data) {
|
||
|
|
data.action = event;
|
||
|
|
return $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify(data)).promise();
|
||
|
|
}
|
||
|
|
|
||
|
|
function BackgroundBlur(element, target, value) {
|
||
|
|
if (BGBlur){
|
||
|
|
var bodyRect = document.body.getBoundingClientRect();
|
||
|
|
let elemRect = getTotalBoundingBox(target);
|
||
|
|
|
||
|
|
if (!elemRect) return;
|
||
|
|
|
||
|
|
let offset = [];
|
||
|
|
if (value){
|
||
|
|
offset = [
|
||
|
|
(elemRect.top - bodyRect.top)-2,
|
||
|
|
((elemRect.right - bodyRect.right) * (-1))-150,
|
||
|
|
(elemRect.bottom - bodyRect.bottom)+2,
|
||
|
|
(elemRect.left - bodyRect.left)-100
|
||
|
|
];
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
offset = [
|
||
|
|
(elemRect.top - bodyRect.top)-2,
|
||
|
|
((elemRect.right - bodyRect.right) * (-1))-1,
|
||
|
|
(elemRect.bottom - bodyRect.bottom)+2,
|
||
|
|
(elemRect.left - bodyRect.left)-1
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#' + element).css('clip-path', `inset(${offset[0]}px ${offset[1]}px calc(100% - ${offset[2]}px) ${offset[3]}px)`);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$('#' + element).css('display', 'none')
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function getTotalBoundingBox(target) {
|
||
|
|
const elem = document.getElementById(target);
|
||
|
|
if (!elem) return null;
|
||
|
|
|
||
|
|
let elemRect = elem.getBoundingClientRect();
|
||
|
|
let minX = elemRect.left;
|
||
|
|
let minY = elemRect.top;
|
||
|
|
let maxX = elemRect.right;
|
||
|
|
let maxY = elemRect.bottom;
|
||
|
|
|
||
|
|
|
||
|
|
Array.from(elem.children).forEach(child => {
|
||
|
|
let childRect = child.getBoundingClientRect();
|
||
|
|
minX = Math.min(minX, childRect.left!=0?childRect.left:99999);
|
||
|
|
minY = Math.min(minY, childRect.top!=0?childRect.top:99999);
|
||
|
|
maxX = Math.max(maxX, childRect.right);
|
||
|
|
maxY = Math.max(maxY, childRect.bottom);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
return {
|
||
|
|
width: maxX - minX,
|
||
|
|
height: maxY - minY,
|
||
|
|
left: minX,
|
||
|
|
top: minY,
|
||
|
|
right: maxX,
|
||
|
|
bottom: maxY
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function show(element) {
|
||
|
|
$("#" + element).css("display", "block")
|
||
|
|
document.getElementById(element).style.animation = "showmenu 0.35s ease";
|
||
|
|
}
|
||
|
|
|
||
|
|
function hide(element) {
|
||
|
|
document.getElementById(element).style.animation = "hidemenu 0.3s ease";
|
||
|
|
setTimeout(function() {
|
||
|
|
$("#" + element).css("display", "none")
|
||
|
|
}, 300)
|
||
|
|
}
|
||
|
|
|
||
|
|
function isNumber(evt) {
|
||
|
|
evt = (evt) ? evt : window.event
|
||
|
|
var charCode = (evt.which) ? evt.which : evt.keyCode
|
||
|
|
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
|
||
|
|
////////////////////////////////////////////// DRAGGING //////////////////////////////////////////////////
|
||
|
|
|
||
|
|
OGPos = {}
|
||
|
|
|
||
|
|
function dragElement(elmnt, item, keyid, index) {
|
||
|
|
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
|
||
|
|
|
||
|
|
if (OGPos[item] == null){
|
||
|
|
OGPos[item] = { x: null, y: null }
|
||
|
|
OGPos[item].x = elmnt.offsetLeft
|
||
|
|
OGPos[item].y = elmnt.offsetTop
|
||
|
|
}
|
||
|
|
|
||
|
|
elmnt.onmousedown = dragMouseDown
|
||
|
|
|
||
|
|
function dragMouseDown(e) {
|
||
|
|
e = e || window.event;
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
pos3 = e.clientX;
|
||
|
|
pos4 = e.clientY;
|
||
|
|
document.onmouseup = closeDragElement;
|
||
|
|
document.onmousemove = elementDrag;
|
||
|
|
}
|
||
|
|
|
||
|
|
function elementDrag(e) {
|
||
|
|
e = e || window.event
|
||
|
|
e.preventDefault()
|
||
|
|
|
||
|
|
pos1 = pos3 - e.clientX
|
||
|
|
pos2 = pos4 - e.clientY
|
||
|
|
pos3 = e.clientX
|
||
|
|
pos4 = e.clientY
|
||
|
|
|
||
|
|
elmnt.style.opacity = "0.8"
|
||
|
|
|
||
|
|
elmnt.style.top = (elmnt.offsetTop - pos2) + "px"
|
||
|
|
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"
|
||
|
|
|
||
|
|
if (elementsOverlap(elmnt, document.getElementById("key_panel"), true) == false && elementsOverlap(elmnt, document.getElementById("actions_panel")) == false){
|
||
|
|
closeDragElement(e)
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
|
||
|
|
if (document.getElementById("empty_"+i) != undefined){
|
||
|
|
if (elementsOverlapPrecise(document.getElementById("empty_"+i), e.clientX, e.clientY) == false){
|
||
|
|
document.getElementById('empty_'+i).classList.remove("hovered")
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
document.getElementById('empty_'+i).classList.add("hovered")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = 0; i < ClosestPlayers.length; i++) {
|
||
|
|
if (elementsOverlapPrecise(document.getElementById("player_"+i), e.clientX, e.clientY) == false){
|
||
|
|
document.getElementById('player_'+i).classList.remove("hovered")
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
document.getElementById('player_'+i).classList.add("hovered")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (elementsOverlapPrecise(document.getElementById("key_delete"), e.clientX, e.clientY) == false){
|
||
|
|
document.getElementById('key_delete').classList.remove("hovered")
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
document.getElementById('key_delete').classList.add("hovered")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeDragElement(e) {
|
||
|
|
UseElement(elmnt, item, e.clientX, e.clientY, keyid, index)
|
||
|
|
elmnt.style.opacity = "1"
|
||
|
|
document.onmouseup = null;
|
||
|
|
document.onmousemove = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function UseElement(elmnt, item, X, Y, keyid, index){
|
||
|
|
let elm = elmnt
|
||
|
|
|
||
|
|
for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
|
||
|
|
if (document.getElementById("empty_"+i) != undefined){
|
||
|
|
if (elementsOverlapPrecise(document.getElementById("empty_"+i), X, Y) == false){
|
||
|
|
document.getElementById('empty_'+i).classList.remove("hovered")
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
for (const key in ChangedKeys) {
|
||
|
|
if (ChangedKeys[key].keyid == keyid){
|
||
|
|
ChangedKeys.splice(key, 1)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (const key in MyKeys) {
|
||
|
|
if (MyKeys[key].id == keyid){
|
||
|
|
if (MyKeys[key].oldSlot == undefined || MyKeys[key].oldSlot != i+1){
|
||
|
|
ChangedKeys.push({keyid: keyid, slot:i+1, plate:MyKeys[key].plate})
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
MakeKeysNotDraggable()
|
||
|
|
if (MyKeys[index].oldSlot == undefined){
|
||
|
|
MyKeys[index].oldSlot = MyKeys[index].slot
|
||
|
|
}
|
||
|
|
MyKeys[index].slot = i+1
|
||
|
|
InsertDataToPanel()
|
||
|
|
MakeKeysDraggable()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (let i = 0; i < ClosestPlayers.length; i++) {
|
||
|
|
if (elementsOverlapPrecise(document.getElementById("player_"+i), X, Y)){
|
||
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "giveKey", playerid:ClosestPlayers[i].id, keyid, table:ChangedKeys}))
|
||
|
|
document.getElementById('player_'+i).classList.remove("hovered")
|
||
|
|
ChangedKeys = []
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (elementsOverlapPrecise(document.getElementById("key_delete"), X, Y)){
|
||
|
|
$.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "deleteKey", keyid, table:ChangedKeys, plate:MyKeys[index].plate}))
|
||
|
|
document.getElementById('key_delete').classList.remove("hovered")
|
||
|
|
ChangedKeys = []
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
/* if (elementsOverlap(elm, document.getElementById("head_box")) && Damages.head){
|
||
|
|
ItemAnim(elm, item)
|
||
|
|
}
|
||
|
|
else if(elementsOverlap(elm, document.getElementById("head_box")) && Damages.head == false){
|
||
|
|
WrongItemAnim(elm, item)
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
elm.style.top = OGPos[item].y + "px"
|
||
|
|
elm.style.left = OGPos[item].x + "px"
|
||
|
|
}*/
|
||
|
|
|
||
|
|
elm.style.top = OGPos[item].y + "px"
|
||
|
|
elm.style.left = OGPos[item].x + "px"
|
||
|
|
}
|
||
|
|
|
||
|
|
function ItemAnim(elm, item, part){
|
||
|
|
elm.style.animation = 'none';
|
||
|
|
elm.offsetHeight;
|
||
|
|
elm.style.animation = "itemuseanim 1.2s";
|
||
|
|
setTimeout(function(){
|
||
|
|
elm.style.top = OGPos[item].y + "px"
|
||
|
|
elm.style.left = OGPos[item].x + "px"
|
||
|
|
elm.style.animation = 'none';
|
||
|
|
Close()
|
||
|
|
},1200)
|
||
|
|
|
||
|
|
$.post('https://'+GetParentResourceName()+'/UseButton', JSON.stringify({action:"MedicerMenu", type:"useitem", item, you:Mediceryou, part}))
|
||
|
|
}
|
||
|
|
|
||
|
|
function WrongItemAnim(elm, item){
|
||
|
|
elm.style.animation = 'none';
|
||
|
|
elm.offsetHeight;
|
||
|
|
elm.style.animation = "itemnotuseanim 0.8s";
|
||
|
|
setTimeout(function(){
|
||
|
|
elm.style.top = OGPos[item].y + "px"
|
||
|
|
elm.style.left = OGPos[item].x + "px"
|
||
|
|
elm.style.animation = 'none';
|
||
|
|
},800)
|
||
|
|
}
|
||
|
|
|
||
|
|
function elementsOverlap(el1, el2, value) {
|
||
|
|
const domRect1 = el1.getBoundingClientRect();
|
||
|
|
const domRect2 = el2.getBoundingClientRect();
|
||
|
|
|
||
|
|
if (value){
|
||
|
|
return !(
|
||
|
|
domRect1.top+50 > domRect2.bottom ||
|
||
|
|
domRect1.right-50 < domRect2.left ||
|
||
|
|
domRect1.bottom-50 < domRect2.top ||
|
||
|
|
domRect1.left-50 > domRect2.right
|
||
|
|
);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
return !(
|
||
|
|
domRect1.top+50 > domRect2.bottom ||
|
||
|
|
domRect1.right-50 < domRect2.left ||
|
||
|
|
domRect1.bottom-50 < domRect2.top ||
|
||
|
|
domRect1.left+50 > domRect2.right
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function elementsOverlapPrecise(el1, X, Y) {
|
||
|
|
const domRect1 = el1.getBoundingClientRect();
|
||
|
|
|
||
|
|
return !(
|
||
|
|
domRect1.top > Y ||
|
||
|
|
domRect1.right < X ||
|
||
|
|
domRect1.bottom < Y ||
|
||
|
|
domRect1.left > X
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|