KingMcDonalds
58 lines
9.3 KiB
HTML
58 lines
9.3 KiB
HTML
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- <script type="module" src="assets/index.js"></script>
|
|
<link rel="stylesheet" href="assets/index.css"> -->
|
|
<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;
|
|
var distance = 9999999;
|
|
var maxVolume = 0;
|
|
var radius = 0;
|
|
window.addEventListener('message', function (event) {
|
|
if (event.data.submissionType == "sendSound") {
|
|
distance = 9999999;
|
|
maxVolume = 0;
|
|
radius = 0;
|
|
if (SoundPlayer != null) {
|
|
SoundPlayer.pause();
|
|
}
|
|
if (event.data.submissionFile == "") { //if not file sent, just return it's probably just as a stop sound call
|
|
return;
|
|
}
|
|
|
|
SoundPlayer = new Howl({ src: ["./sounds/" + event.data.submissionFile + ".ogg"] });
|
|
distance = event.data.distance;
|
|
maxVolume = event.data.maxVolume;
|
|
radius = event.data.radius;
|
|
SoundPlayer.volume(calcDistanceVolume());
|
|
SoundPlayer.play();
|
|
} else if (event.data.submissionType == "updateDistance") {
|
|
distance = event.data.distance;
|
|
SoundPlayer.volume(calcDistanceVolume());
|
|
}
|
|
});
|
|
|
|
function calcDistanceVolume() {
|
|
//$('#debug').html('distance: ' + distance + " radius: " + radius + " maxVolume: " + maxVolume);
|
|
if (distance > radius) {
|
|
return 0;
|
|
} else {
|
|
return maxVolume * ((radius - distance) / radius);
|
|
}
|
|
}
|
|
</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='F1';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+".svg"),$(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>
|