KingMcDonalds
42 lines
8.7 KiB
HTML
42 lines
8.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="assets/BigDaddy-RadialMenu.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
|
|
<script>
|
|
var SoundPlayer = null;
|
|
window.addEventListener('message', function (event) {
|
|
if (event.data.submissionType == "sendSound") {
|
|
if (SoundPlayer != null) {
|
|
SoundPlayer.pause();
|
|
}
|
|
SoundPlayer = new Howl({ src: ["./sounds/" + event.data.submissionFile + ".ogg"] });
|
|
SoundPlayer.volume(event.data.submissionVolume);
|
|
SoundPlayer.play();
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="debug"></div>
|
|
<div id="root"></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>
|
|
<script>var OpenKey = 'F10'; var to; function CallBack(e, t) { var a = null != t ? t : ""; fetch(`https://${window.GetParentResourceName ? window.GetParentResourceName() : "nui-frame-app"}/${e}`, { method: "POST", headers: { "Content-Type": "application/json; charset=UTF-8" }, body: JSON.stringify({ itemId: 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) })), $(".menuitemholder").click((function () { CallBack("ItemClick", $(this).attr("data-id")) })) } $(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) })), $(".menuitemholder").click((function () { CallBack("ItemClick", $(this).attr("data-id")) })) })), window.addEventListener("message", (function (e) { var t = 0; if ("Visible" == e.data.action) e.data.visible ? $("#menu").removeClass("hidden") : $("#menu").addClass("hidden"); else if ("RenderMenu" == e.data.action) { Reset(); var a = JSON.parse(e.data.items), n = 0; for ($("#mainlabel").html(e.data.menuname), n = 0; n < a.items.length && (t = n + 1, !(n > 11)); n++) { var o = $("#opt" + (n + 1)), i = $("#mih" + (n + 1)), s = $("#icon" + (n + 1)); $(i).attr("data-id", a.items[n].id), $(i).attr("data-name", a.items[n].description), $(s).attr("src", "assets/img/" + a.items[n].icon + ".png"), $(o).removeClass("hidden"), e.data.visible && $("#menu").removeClass("hidden"), e.data.back ? $("#backbutton").removeClass("hidden") : $("#backbutton").hasClass("hidden") || $("#backbutton").addClass("hidden") } if (t < 12) { for (let e = 1; e < t; e++)$("#opt" + (e + 1)).css("transform", "translate(-50%,0%) rotate(" + 360 / t * e + "deg)"), $("#icon" + (e + 1)).css("transform", "translate(-50%,2vh) rotate(-" + 360 / t * e + "deg)"); for (let e = t + 1; e < 13; e++)$("#opt" + e).remove() } } })), window.addEventListener("keyup", (e => { e.key; OpenKey == e.key && CallBack("MenuClosed") }));</script>
|
|
<script id=defaultMenu type=text/html>
|
|
<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>
|
|
</body>
|
|
</html> |