KingMcDonalds
151 lines
15 KiB
HTML
151 lines
15 KiB
HTML
<html>
|
|
<head>
|
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
|
|
<link rel="stylesheet" href="assets/BigDaddy-RadialMenu.css">
|
|
</head>
|
|
|
|
<body style="margin:0; padding:0;">
|
|
|
|
<style>
|
|
#map {
|
|
background: #143d6b;
|
|
text-align: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
#map canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
canvas {
|
|
opacity: .6;
|
|
}
|
|
|
|
.mapdot {
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: red;
|
|
border: 1px solid white;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
}
|
|
|
|
.groundslabel {
|
|
text-align: center;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
color: White;
|
|
z-index: 25;
|
|
text-shadow: -2px 2px 2px black;
|
|
}
|
|
|
|
#scorecard {
|
|
display: none;
|
|
color: white;
|
|
background: rgba(0,0,0,.6);
|
|
width: 600px;
|
|
height: 400px;
|
|
border: 2px solid white;
|
|
border-radius: 10px;
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
h1 {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 25px;
|
|
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#col1 {
|
|
width: 92%;
|
|
top: 15%;
|
|
position: absolute;
|
|
left: 25px;
|
|
height: 80%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.killitem {
|
|
background: rgba(0,0,0,.5);
|
|
width: 98%;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
border: 1px solid grey;
|
|
/*padding: 20px;*/
|
|
}
|
|
|
|
.killitem img {
|
|
height: 36px;
|
|
float: left;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.item {
|
|
margin: 10px;
|
|
width: 75%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.button {
|
|
width: 17%;
|
|
display: inline-block;
|
|
/*color: black;*/
|
|
text-align: center;
|
|
/*background-color:lightgray;*/
|
|
/*border: 1px solid white;*/
|
|
/*border-radius: 10px;*/
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<div id="debug"></div>
|
|
|
|
<div id="map"><div id="mapholder"><img src="map.jpg" style="height: 100vh;" /><canvas id="myCanvas" width="917" height="917"></canvas></div></div>
|
|
<div id="scorecard"><h1 class="col1">KILLS</h1><div id="col1"></div></div>
|
|
|
|
<div class="hidden menuwrapper" id=menu><div class=menu id=menuHolder><div class="hidden menuitem" id=opt1 style="transform:translate(-50%,0) rotate(0)"><div class=menuitemholder id=mih1 data-id=""><img id=icon1 src="" style="transform:translate(-50%,2vh) rotate(0)"></div></div><div class="hidden menuitem" id=opt2 style="transform:translate(-50%,0) rotate(30deg)"><div class=menuitemholder id=mih2 data-id=""><img id=icon2 src="" style="transform:translate(-50%,2vh) rotate(-30deg)"></div></div><div class="hidden menuitem" id=opt3 style="transform:translate(-50%,0) rotate(60deg)"><div class=menuitemholder id=mih3 data-id=""><img id=icon3 src="" style="transform:translate(-50%,2vh) rotate(-60deg)"></div></div><div class="hidden menuitem" id=opt4 style="transform:translate(-50%,0) rotate(90deg)"><div class=menuitemholder id=mih4 data-id=""><img id=icon4 src="" style="transform:translate(-50%,2vh) rotate(-90deg)"></div></div><div class="hidden menuitem" id=opt5 style="transform:translate(-50%,0) rotate(120deg)"><div class=menuitemholder id=mih5 data-id=""><img id=icon5 src="" style="transform:translate(-50%,2vh) rotate(-120deg)"></div></div><div class="hidden menuitem" id=opt6 style="transform:translate(-50%,0) rotate(150deg)"><div class=menuitemholder id=mih6 data-id=""><img id=icon6 src="" style="transform:translate(-50%,2vh) rotate(-150deg)"></div></div><div class="hidden menuitem" id=opt7 style="transform:translate(-50%,0) rotate(180deg)"><div class=menuitemholder id=mih7 data-id=""><img id=icon7 src="" style="transform:translate(-50%,2vh) rotate(-180deg)"></div></div><div class="hidden menuitem" id=opt8 style="transform:translate(-50%,0) rotate(210deg)"><div class=menuitemholder id=mih8 data-id=""><img id=icon8 src="" style="transform:translate(-50%,2vh) rotate(-210deg)"></div></div><div class="hidden menuitem" id=opt9 style="transform:translate(-50%,0) rotate(240deg)"><div class=menuitemholder id=mih9 data-id=""><img id=icon9 src="" style="transform:translate(-50%,2vh) rotate(-240deg)"></div></div><div class="hidden menuitem" id=opt10 style="transform:translate(-50%,0) rotate(270deg)"><div class=menuitemholder id=mih10 data-id=""><img id=icon10 src="" style="transform:translate(-50%,2vh) rotate(-270deg)"></div></div><div class="hidden menuitem" id=opt11 style="transform:translate(-50%,0) rotate(300deg)"><div class=menuitemholder id=mih11 data-id=""><img id=icon11 src="" style="transform:translate(-50%,2vh) rotate(-300deg)"></div></div><div class="hidden menuitem" id=opt12 style="transform:translate(-50%,0) rotate(330deg)"><div class=menuitemholder id=mih12 data-id=""><img id=icon12 src="" style="transform:translate(-50%,2vh) rotate(-330deg)"></div></div></div><div class=menucenter><div class=label id=mainlabel>??</div><div class="hidden center" id=backbutton onclick='CallBack("Back")'><div id=backlabel>BACK</div></div><div class=label id=secondarylabel>MENU</div></div></div>
|
|
<div class="hidden" id="menutoggle" style="font-family: Arial, Helvetica, sans-serif; text-align:center; width:100vw; position: fixed; bottom: 100px; left: 0; font-size: 18px; color: white;">[LEFT ALT] Toggle <span id="movemode">MOVE</span>/<span id="menumode">MENU</span></div>
|
|
|
|
<script type="text/html" id="defaultMenu">
|
|
<div class="hidden menuitem" id="opt1" style="transform: translate(-50%, 0) rotate(0);"><div class="menuitemholder" id="mih1" data-id=""><img id="icon1" src="" style="transform: translate(-50%, 2vh) rotate(0);" /></div></div>
|
|
<div class="hidden menuitem" id="opt2" style="transform: translate(-50%, 0) rotate(30deg);"><div class="menuitemholder" id="mih2" data-id=""><img id="icon2" src="" style="transform: translate(-50%, 2vh) rotate(-30deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt3" style="transform: translate(-50%, 0) rotate(60deg);"><div class="menuitemholder" id="mih3" data-id=""><img id="icon3" src="" style="transform: translate(-50%, 2vh) rotate(-60deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt4" style="transform: translate(-50%, 0) rotate(90deg);"><div class="menuitemholder" id="mih4" data-id=""><img id="icon4" src="" style="transform: translate(-50%, 2vh) rotate(-90deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt5" style="transform: translate(-50%, 0) rotate(120deg);"><div class="menuitemholder" id="mih5" data-id=""><img id="icon5" src="" style="transform: translate(-50%, 2vh) rotate(-120deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt6" style="transform: translate(-50%, 0) rotate(150deg);"><div class="menuitemholder" id="mih6" data-id=""><img id="icon6" src="" style="transform: translate(-50%, 2vh) rotate(-150deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt7" style="transform: translate(-50%, 0) rotate(180deg);"><div class="menuitemholder" id="mih7" data-id=""><img id="icon7" src="" style="transform: translate(-50%, 2vh) rotate(-180deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt8" style="transform: translate(-50%, 0) rotate(210deg);"><div class="menuitemholder" id="mih8" data-id=""><img id="icon8" src="" style="transform: translate(-50%, 2vh) rotate(-210deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt9" style="transform: translate(-50%, 0) rotate(240deg);"><div class="menuitemholder" id="mih9" data-id=""><img id="icon9" src="" style="transform: translate(-50%, 2vh) rotate(-240deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt10" style="transform: translate(-50%, 0) rotate(270deg);"><div class="menuitemholder" id="mih10" data-id=""><img id="icon10" src="" style="transform: translate(-50%, 2vh) rotate(-270deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt11" style="transform: translate(-50%, 0) rotate(300deg);"><div class="menuitemholder" id="mih11" data-id=""><img id="icon11" src="" style="transform: translate(-50%, 2vh) rotate(-300deg);" /></div></div>
|
|
<div class="hidden menuitem" id="opt12" style="transform: translate(-50%, 0) rotate(330deg);"><div class="menuitemholder" id="mih12" data-id=""><img id="icon12" src="" style="transform: translate(-50%, 2vh) rotate(-330deg);" /></div></div>
|
|
</script>
|
|
|
|
<script id="killitem" type="text/html">
|
|
<div class="killitem"><div class="item" data-ppp="{ppp}"><img src="assets/thumbs/{model}.png" />{displayname} - {weight} {lbs}</div><div class="button {visibility}" onclick="SellCallBack(this, '{displayname}', '{ppp}')">Sell for: ${ppp}</div></div>
|
|
</script>
|
|
|
|
|
|
<script>OpenKey = "", keepOpen = !0; var to, focused = !0; function CallBack(e, a) { fetch(`https://${window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app"}/${e}`, { method: "POST", headers: { "Content-Type": "application/json; charset=UTF-8" }, body: JSON.stringify({ itemId: null != a ? a : "" }) }) } 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(e) { var a = new XMLHttpRequest; return a.open("HEAD", e, !1), a.send(), 404 != a.status } altCooldown = !1, $(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) { if ("Visible" == e.data.action) e.data.visible ? ($("#menumode").removeClass("modeactive"), $("#movemode").removeClass("modeactive"), $("#menumode").addClass("modeactive"), $("#menu").removeClass("unfocused"), $("#menu").removeClass("hidden"), $("#menutoggle").removeClass("hidden"), focused = !0) : ($("#menu").addClass("hidden"), $("#menutoggle").addClass("hidden")); else if ("RenderMenu" == e.data.action) { Reset(); var a = JSON.parse(e.data.items), s = 0; for ($("#mainlabel").html(event.data.menuname), s = 0; s < a.items.length; s++)if (tot = s + 1, s > 11); else { var t = $("#opt" + (s + 1)), o = $("#mih" + (s + 1)), m = $("#icon" + (s + 1)); $(o).attr("data-id", a.items[s].id), $(o).attr("data-name", a.items[s].description), $(o).click(function () { CallBack("ItemClick", $(this).attr("data-id")) }); var d = ""; d = imageExists("assets/img/" + a.items[s].icon + ".svg") ? a.items[s].icon + ".svg" : a.items[s].icon + ".png", $(m).attr("src", "assets/img/" + d), $(t).removeClass("hidden"), event.data.visible && $("#menu").removeClass("hidden"), event.data.back ? $("#backbutton").removeClass("hidden") : $("#backbutton").hasClass("hidden") || $("#backbutton").addClass("hidden") } if (s < 12) { for (let n = 1; n < tot; n++)$("#opt" + (n + 1)).css("transform", "translate(-50%,0%) rotate(" + 360 / tot * n + "deg)"), $("#icon" + (n + 1)).css("transform", "translate(-50%,2vh) rotate(-" + 360 / tot * n + "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 "togglefocus" == e.data.action && (e.data.visible ? ($("#menumode").removeClass("modeactive"), $("#movemode").removeClass("modeactive"), $("#menumode").addClass("modeactive"), $("#menu").removeClass("unfocused"), $("#menutoggle").removeClass("hidden"), altCooldown = !0, setTimeout(() => { altCooldown = !1 }, 200)) : ($("#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 => { ("Backspace" == e.key || "Escape" == e.key) && ($("#menumode").removeClass("modeactive"), $("#movemode").removeClass("modeactive"), CallBack("MenuClosed"), $("#map").hide()), ("Alt" != e.key || altCooldown || CallBack("ToggleFocus")) && ($("#map").hide(), $("#scorecard").hide()) });</script>
|
|
<script>function SellCallBack(e, t, a) { 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 != t ? t : "Game", amount: null != a ? a : 0 }) }), $(e).parent().remove() } function drawPolygons(e) { $("#map").show(), $(".groundslabel").remove(); var t = JSON.parse(e); let a = document.getElementById("myCanvas"), l = a.getContext("2d"), o = $("#mapholder").width(), n = $("#mapholder").height(); a.width = o, a.height = n, l.clearRect(0, 0, a.width, a.height), t.forEach(e => { l.beginPath(), e.points.forEach((e, t) => { let a = ConvertPoint(e.X, e.Y), o = a.x, n = a.y; 0 === t ? l.moveTo(o, n) : l.lineTo(o, n) }), l.closePath(), "fishing" == e.type ? l.strokeStyle = e.strokeColor || "blue" : l.strokeStyle = e.strokeColor || "darkgreen", l.lineWidth = e.lineWidth || 2, l.stroke(), l.fillStyle = l.strokeStyle, l.fill(); var t = getBoundingBoxCenter(e.points), a = ConvertPoint(t.x, t.y), o = '<div class="groundslabel" style="left: ' + a.x + "; top: " + a.y + ';">' + e.name + "</div>"; $("#map").append(o) }) } function ConvertPoint(e, t) { var a = $("#map img").width(), l = a / 2e3, o = $("#map").width(), n = 0, r = 0, n = 925 + .16 * e, r = 1349 - .16 * t; return { x: n = n * l + (o = o / 2 - a / 2), y: r *= l } } function getBoundingBoxCenter(e) { let t = 1 / 0, a = -1 / 0, l = 1 / 0, o = -1 / 0; return e.forEach(e => { e.X < t && (t = e.X), e.X > a && (a = e.X), e.Y < l && (l = e.Y), e.Y > o && (o = e.Y) }), { x: (t + a) / 2, y: (l + o) / 2 } } $(document).ready(function () { let e = document.getElementById("myCanvas"), t = $("#mapholder").width(), a = $("#mapholder").height(); e.width = t, e.height = a }), window.addEventListener("message", function (e) { if ("ShowMap" === e.data.action) drawPolygons(e.data.data); else if ("HuntingKillMenu" == e.data.action) { $("#col1").html(""); var t = JSON.parse(e.data.data); for (i = 0; i < t.length; i++) { var a = $("#killitem").html(); a = (a = (a = (a = a.replace(/{displayname}/g, t[i].displayname)).replace(/{model}/g, t[i].model)).replace(/{weight}/g, t[i].weight)).replace(/{lbs}/g, t[i].weight > 1 ? "lbs" : "lb"), a = 0 != t[i].pricePerPound && e.data.loop ? (a = a.replace(/{ppp}/g, (t[i].weight * t[i].pricePerPound).toFixed(2))).replace(/{visibility}/g, "") : (a = a.replace(/{ppp}/g, "")).replace(/{visibility}/g, "hidden"), $("#col1").append(a) } $("#scorecard").show() } });</script>
|
|
</body>
|
|
</html> |