ed
This commit is contained in:
Nordi98
parent
55adb0ec7f
commit
1f0a23516e
46 changed files with 2671 additions and 9 deletions
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M79 64V79H64M1 16V1H16M16 79H1V64M64 1H79V16" stroke="white" stroke-opacity="0.3" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 213 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="381" height="62" viewBox="0 0 381 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M380 46V61H365M1 16V1H16M16 61H1V46M365 1H380V16" stroke="white" stroke-opacity="0.67" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 220 B |
BIN
resources/[housing]/brutal_keys/html/assets/bin.png
Normal file
BIN
resources/[housing]/brutal_keys/html/assets/bin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
resources/[housing]/brutal_keys/html/assets/desktop.ini
Normal file
BIN
resources/[housing]/brutal_keys/html/assets/desktop.ini
Normal file
Binary file not shown.
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="182" height="10" viewBox="0 0 182 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="13" width="169" height="10" fill="#79D7BE" fill-opacity="0.43"/>
|
||||
<rect x="8" width="4" height="10" fill="#79D7BE"/>
|
||||
<rect x="3" width="3" height="10" fill="#79D7BE"/>
|
||||
<rect width="1" height="10" fill="#79D7BE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 326 B |
5
resources/[housing]/brutal_keys/html/assets/key.svg
Normal file
5
resources/[housing]/brutal_keys/html/assets/key.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1,005 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<foreignObject x="-27" y="-27" width="81.5" height="81.5"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(13.75px);height:100%;width:100%"></div></foreignObject><path data-figma-bg-blur-radius="27.5" d="M2 27L2 2L27 2" stroke="white" stroke-width="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 378 B |
BIN
resources/[housing]/brutal_keys/html/assets/people.png
Normal file
BIN
resources/[housing]/brutal_keys/html/assets/people.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M80 65V80H65M2 17V2H17M17 80H2V65M65 2H80V17" stroke="white" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 192 B |
12
resources/[housing]/brutal_keys/html/assets/vehicle_key.svg
Normal file
12
resources/[housing]/brutal_keys/html/assets/vehicle_key.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
BIN
resources/[housing]/brutal_keys/html/desktop.ini
Normal file
BIN
resources/[housing]/brutal_keys/html/desktop.ini
Normal file
Binary file not shown.
97
resources/[housing]/brutal_keys/html/index.html
Normal file
97
resources/[housing]/brutal_keys/html/index.html
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css"></link>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
|
||||
<script src="https://jsuites.net/v4/jsuites.js"></script>
|
||||
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
|
||||
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
|
||||
<title>Brutal Keys</title>
|
||||
</head>
|
||||
|
||||
<body style="background: none;">
|
||||
|
||||
<div class="key_menu" id="key_menu">
|
||||
<object id="plugin_1" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
||||
<div class="overflow_container">
|
||||
<div class="animation_element"></div>
|
||||
<div class="panel" id="key_panel">
|
||||
<div class="panel_border_top"></div>
|
||||
<div class="panel_border_bottom"></div>
|
||||
<div class="top_line"></div>
|
||||
<div class="top_box"></div>
|
||||
<div class="title" data-i18n="keys"></div>
|
||||
<div class="row" style="position: absolute; top: 24px; right: 25px;">
|
||||
<div class="col p-0" style="position: relative;">
|
||||
<button class="action_btn" id="actions_btn" onclick="CreateActionPage()" data-i18n="actions"><div class="line"></div><div class="bg"></div></button>
|
||||
</div>
|
||||
<div class="col" style="position: relative;">
|
||||
<button class="action_btn" onclick="Close()" data-i18n="back"><div class="line"></div></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_selector_container">
|
||||
|
||||
</div>
|
||||
<div class="keys_container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions_section" id="actions_section">
|
||||
<div class="actions_panel" id="actions_panel">
|
||||
<div class="key_deleting" id="key_delete">
|
||||
<div class="bg"></div>
|
||||
<div class="bin"></div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="people_container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key_purchase_menu" id="key_purchase_menu">
|
||||
<object id="plugin_2" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
||||
<div class="panel" id="key_purchase_panel">
|
||||
<div class="panel_border_top"></div>
|
||||
<div class="panel_border_bottom"></div>
|
||||
<div class="top_line"></div>
|
||||
<div class="top_box"></div>
|
||||
<div class="title" data-i18n="buy_keys"></div>
|
||||
<div class="description" data-i18n="buy_keys_des"></div>
|
||||
<button class="action_btn m-4" onclick="Close()" data-i18n="back"><div class="line"></div></button>
|
||||
|
||||
<div class="vehicles_container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key_notify" id="key_notify">
|
||||
<div class="container">
|
||||
<div class="inner">
|
||||
<div class="text"></div>
|
||||
<div class="line" id="line">
|
||||
<div class="prog_line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js">
|
||||
</script>
|
||||
<script src="script.js"></script>
|
||||
</html>
|
||||
|
||||
637
resources/[housing]/brutal_keys/html/script.js
Normal file
637
resources/[housing]/brutal_keys/html/script.js
Normal file
|
|
@ -0,0 +1,637 @@
|
|||
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
|
||||
);
|
||||
|
||||
}
|
||||
1032
resources/[housing]/brutal_keys/html/style.css
Normal file
1032
resources/[housing]/brutal_keys/html/style.css
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue