KingMcDonalds
318 lines
8.1 KiB
JavaScript
318 lines
8.1 KiB
JavaScript
var to;
|
|
OpenKey = "";
|
|
keepOpen = !0;
|
|
var focused = !0;
|
|
altCooldown = !1;
|
|
|
|
function CallBack(f, p) {
|
|
fetch(`https://${(window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app")}/${f}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
itemId: null != p ? p : ""
|
|
})
|
|
});
|
|
}
|
|
|
|
function Reset() {
|
|
$("#menuHolder").html($("#defaultMenu").html());
|
|
$(".menuitemholder").hover(function () {
|
|
clearTimeout(to), $(".menuitemholder").removeClass("hover");
|
|
$(this).addClass("hover");
|
|
$("#secondarylabel").html($(this).attr("data-name"))
|
|
}, function () {
|
|
var e = this;
|
|
to = setTimeout(function () {
|
|
$(e).removeClass("hover");
|
|
$("#secondarylabel").html("")
|
|
}, 400)
|
|
});
|
|
}
|
|
|
|
function imageExists(image_url) {
|
|
var http = new XMLHttpRequest();
|
|
http.open('HEAD', image_url, false);
|
|
http.send();
|
|
return http.status != 404;
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$(".menuitemholder").hover(function () {
|
|
clearTimeout(to);
|
|
$(".menuitemholder").removeClass("hover");
|
|
$(this).addClass("hover");
|
|
$("#secondarylabel").html($(this).attr("data-name"));
|
|
}, function () {
|
|
var e = this;
|
|
to = setTimeout(function () {
|
|
$(e).removeClass("hover");
|
|
$("#secondarylabel").html("");
|
|
}, 400)
|
|
});
|
|
});
|
|
|
|
window.addEventListener("message", function (e) {
|
|
var a = 0;
|
|
if ("Visible" == e.data.action) {
|
|
if (e.data.visible) {
|
|
$("#menumode").removeClass("modeactive");
|
|
$("#movemode").removeClass("modeactive");
|
|
$("#menumode").addClass("modeactive");
|
|
$("#menu").removeClass("unfocused");
|
|
$("#menu").removeClass("hidden");
|
|
$("#menutoggle").removeClass("hidden");
|
|
focused = !0;
|
|
} else {
|
|
$("#menu").addClass("hidden");
|
|
$("#menutoggle").addClass("hidden");
|
|
}
|
|
}
|
|
else if ("RenderMenu" == e.data.action) {
|
|
Reset();
|
|
var d = JSON.parse(e.data.items);
|
|
|
|
var x = 0;
|
|
$('#mainlabel').html(event.data.menuname);
|
|
for (x = 0; x < d.items.length; x++) {
|
|
tot = x + 1;
|
|
if (x > 11) {
|
|
//too many to fit so done
|
|
} else {
|
|
var mi = $('#opt' + (x + 1));
|
|
var mih = $('#mih' + (x + 1));
|
|
var icon = $('#icon' + (x + 1));
|
|
$(mih).attr('data-id', d.items[x].id);
|
|
$(mih).attr('data-name', d.items[x].description);
|
|
$(mih).click(function () { CallBack('ItemClick', $(this).attr("data-id")) });
|
|
var ii = '';
|
|
if (imageExists('assets/img/' + d.items[x].icon + '.svg')) {
|
|
ii = d.items[x].icon + '.svg';
|
|
} else {
|
|
ii = d.items[x].icon + '.png';
|
|
}
|
|
$(icon).attr('src', 'assets/img/' + ii);
|
|
$(mi).removeClass('hidden');
|
|
if (event.data.visible) {
|
|
$('#menu').removeClass('hidden');
|
|
}
|
|
if (event.data.back) {
|
|
$('#backbutton').removeClass('hidden');
|
|
} else {
|
|
if (!$('#backbutton').hasClass('hidden')) $('#backbutton').addClass('hidden');
|
|
}
|
|
}
|
|
}
|
|
if (x < 12) {
|
|
for (let i = 1; i < tot; i++) {
|
|
$('#opt' + (i + 1)).css('transform', 'translate(-50%,0%) rotate(' + ((360 / tot) * i) + 'deg)');
|
|
$('#icon' + (i + 1)).css('transform', 'translate(-50%,2vh) rotate(-' + ((360 / tot) * i) + 'deg)');
|
|
}
|
|
for (let i = tot + 1; i < 13; i++) {
|
|
$('#opt' + i).remove();
|
|
}
|
|
}
|
|
|
|
$("#menu").removeClass("hidden");
|
|
$("#menumode").removeClass("modeactive");
|
|
$("#movemode").removeClass("modeactive");
|
|
$("#menumode").addClass("modeactive");
|
|
$("#menu").removeClass("unfocused");
|
|
$("#menutoggle").removeClass("hidden");
|
|
altCooldown = !0;
|
|
setTimeout(() => {
|
|
altCooldown = !1
|
|
}, 200)
|
|
} else if ("togglefocus" == e.data.action) {
|
|
if (e.data.visible) {
|
|
$("#menumode").removeClass("modeactive");
|
|
$("#movemode").removeClass("modeactive");
|
|
$("#menumode").addClass("modeactive");
|
|
$("#menu").removeClass("unfocused");
|
|
$("#menutoggle").removeClass("hidden");
|
|
altCooldown = !0;
|
|
setTimeout(() => {
|
|
altCooldown = !1
|
|
}, 200);
|
|
} else {
|
|
$("#menumode").removeClass("modeactive");
|
|
$("#movemode").removeClass("modeactive");
|
|
$("#movemode").addClass("modeactive")
|
|
$("#menu").addClass("unfocused");
|
|
$("#menutoggle").removeClass("hidden");
|
|
altCooldown = !0;
|
|
setTimeout(() => {
|
|
altCooldown = !1
|
|
}, 200);
|
|
}
|
|
}
|
|
});
|
|
|
|
window.addEventListener("keyup", e => {
|
|
if ("Backspace" == e.key || "Escape" == e.key) {
|
|
$("#menumode").removeClass("modeactive");
|
|
$("#movemode").removeClass("modeactive");
|
|
CallBack("MenuClosed");
|
|
$("#map").hide();
|
|
}
|
|
|
|
if ("Alt" != e.key || altCooldown || CallBack("ToggleFocus")) {
|
|
$("#map").hide();
|
|
$('#scorecard').hide();
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
const canvas = document.getElementById('myCanvas');
|
|
const imgW = $("#mapholder").width();
|
|
const imgH = $("#mapholder").height();
|
|
canvas.width = imgW;
|
|
canvas.height = imgH;
|
|
});
|
|
|
|
window.addEventListener('message', function (event) {
|
|
if (event.data.action === 'ShowMap') {
|
|
drawPolygons(event.data.data);
|
|
} else if (event.data.action == "HuntingKillMenu") {
|
|
//build kill menu
|
|
$('#col1').html("");
|
|
//console.log(event.data.data);
|
|
var d = JSON.parse(event.data.data);
|
|
for (i = 0; i < d.length; i++) {
|
|
var item = $('#killitem').html();
|
|
item = item.replace(/{displayname}/g, d[i].displayname)
|
|
item = item.replace(/{model}/g, d[i].model)
|
|
item = item.replace(/{weight}/g, d[i].weight)
|
|
item = item.replace(/{lbs}/g, d[i].weight > 1 ? 'lbs' : 'lb');
|
|
if (d[i].pricePerPound != 0 && event.data.loop) {
|
|
item = item.replace(/{ppp}/g, (d[i].weight * d[i].pricePerPound).toFixed(2));
|
|
item = item.replace(/{visibility}/g, '');
|
|
} else {
|
|
item = item.replace(/{ppp}/g, '');
|
|
item = item.replace(/{visibility}/g, 'hidden');
|
|
}
|
|
$('#col1').append(item);
|
|
}
|
|
$('#scorecard').show();
|
|
}
|
|
|
|
});
|
|
|
|
function SellCallBack(b, d, a) {
|
|
//console.log(JSON.stringify({
|
|
// desc: null != d ? d : "Game",
|
|
// amount: null != a ? a : 0
|
|
//}));
|
|
fetch(`https://${(window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app")}/SellKills`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
desc: null != d ? d : "Game",
|
|
amount: null != a ? a : 0
|
|
})
|
|
});
|
|
$(b).parent().remove();
|
|
}
|
|
|
|
function drawPolygons(polygonsString) {
|
|
|
|
$('#map').show();
|
|
$(".groundslabel").remove();
|
|
|
|
var polygons = JSON.parse(polygonsString);
|
|
const canvas = document.getElementById('myCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const imgW = $("#mapholder").width();
|
|
const imgH = $("#mapholder").height();
|
|
canvas.width = imgW;
|
|
canvas.height = imgH;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
polygons.forEach(polygon => {
|
|
ctx.beginPath();
|
|
|
|
polygon.points.forEach((point, index) => {
|
|
const converted = ConvertPoint(point.X, point.Y);
|
|
const x = converted.x;
|
|
const y = converted.y;
|
|
|
|
//console.log('Drawing to:', x, y);
|
|
//$('#map').append('<div class="mapdot" id="spawnpoint' + point.x + '" style="top:' + y + 'px; left: ' + x + ';"></div>');
|
|
|
|
if (index === 0) {
|
|
ctx.moveTo(x, y);
|
|
} else {
|
|
ctx.lineTo(x, y);
|
|
}
|
|
});
|
|
|
|
ctx.closePath();
|
|
if (polygon.type == "fishing") {
|
|
ctx.strokeStyle = polygon.strokeColor || 'blue';
|
|
} else {
|
|
ctx.strokeStyle = polygon.strokeColor || 'darkgreen';
|
|
}
|
|
ctx.lineWidth = polygon.lineWidth || 2;
|
|
ctx.stroke();
|
|
ctx.fillStyle = ctx.strokeStyle;
|
|
ctx.fill();
|
|
|
|
var center = getBoundingBoxCenter(polygon.points);
|
|
var centerp = ConvertPoint(center.x, center.y);
|
|
|
|
var label = '<div class="groundslabel" style="left: ' + centerp.x + '; top: ' + centerp.y + ';">' + polygon.name + '</div>';
|
|
$('#map').append(label);
|
|
|
|
});
|
|
}
|
|
|
|
function ConvertPoint(x, y) {
|
|
//console.log('converting ' + x + ' ' + y)
|
|
var imgW = $('#map img').width();
|
|
var sizePerc = imgW / 2000;
|
|
var cW = $('#map').width();
|
|
cW = (cW / 2) - (imgW / 2);
|
|
|
|
var x1 = x * .16;
|
|
var y1 = y * .16;
|
|
var x2 = 0;
|
|
var y2 = 0;
|
|
|
|
var x2 = 925 + x1;
|
|
var y2 = 1349 - y1;
|
|
|
|
x2 = (x2 * sizePerc) + cW;
|
|
y2 = y2 * sizePerc;
|
|
return { x: x2, y: y2 };
|
|
}
|
|
|
|
function getBoundingBoxCenter(points) {
|
|
let minX = Infinity, maxX = -Infinity;
|
|
let minY = Infinity, maxY = -Infinity;
|
|
|
|
points.forEach(p => {
|
|
if (p.X < minX) minX = p.X;
|
|
if (p.X > maxX) maxX = p.X;
|
|
if (p.Y < minY) minY = p.Y;
|
|
if (p.Y > maxY) maxY = p.Y;
|
|
});
|
|
|
|
return {
|
|
x: (minX + maxX) / 2,
|
|
y: (minY + maxY) / 2
|
|
};
|
|
}
|
|
|
|
|
|
|