KingMcDonalds
202 lines
4.6 KiB
HTML
202 lines
4.6 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
</head>
|
|
|
|
<body style="background-color: rgba(0, 0, 0, 0);display: block; margin: 0; padding: 0;">
|
|
|
|
<style>
|
|
.ui {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,.5);
|
|
display: none;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-inner {
|
|
width: 310px;
|
|
margin: 0 auto 0;
|
|
top: 100px;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-wide {
|
|
width:620px;
|
|
}
|
|
|
|
.vbtn {
|
|
width: 310px;
|
|
height: 90px;
|
|
cursor: pointer;
|
|
}
|
|
.col {
|
|
float:left;
|
|
}
|
|
</style>
|
|
|
|
<div class="ui">
|
|
<div class="ui-inner"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
var isVisible = false;
|
|
var audioPlayer = null;
|
|
var SoundPlayer = null;
|
|
var distance = 9999999;
|
|
var maxVolume = 0;
|
|
var radius = 0;
|
|
window.addEventListener('message', function (event) {
|
|
|
|
if (event.data.action == "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"],
|
|
loop: event.data.loop
|
|
});
|
|
distance = event.data.distance;
|
|
maxVolume = event.data.maxVolume;
|
|
radius = event.data.radius;
|
|
SoundPlayer.volume(calcDistanceVolume());
|
|
SoundPlayer.play();
|
|
}
|
|
else if (event.data.action == "updateDistance") {
|
|
distance = event.data.distance;
|
|
SoundPlayer.volume(calcDistanceVolume());
|
|
}
|
|
else if (event.data.action === "PlaySound") {
|
|
if (event.data.value === '') {
|
|
if (audioPlayer != null) {
|
|
audioPlayer.pause();
|
|
audioPlayer = null;
|
|
}
|
|
} else {
|
|
try {
|
|
audioPlayer = new Howl({
|
|
src: [event.data.value + ".ogg"],
|
|
loop: false
|
|
});
|
|
audioPlayer.volume(0.5);
|
|
audioPlayer.play();
|
|
} catch (err) {
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
if (event.data.action === "OpenNui") {
|
|
$('.ui-inner').html("");
|
|
var s = event.data.value.split(',');
|
|
if (s.length > 7) {
|
|
$('.ui-inner').addClass('ui-wide');
|
|
for (i = 0; i < s.length; i++) {
|
|
if (s[i] != '' && imageExists(s[i].toLowerCase() + '.png')) {
|
|
var t = $('#vbtn_template2').html();
|
|
t = t.replace('{{image}}', s[i].toLowerCase());
|
|
t = t.replace('{{item}}', s[i]);
|
|
$(".ui-inner").append(t);
|
|
if ((i+1) % 2 == 0) {
|
|
$(".ui-inner").append('</br>');
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
for (i = 0; i < s.length; i++) {
|
|
if (s[i] != '' && imageExists(s[i].toLowerCase() + '.png')) {
|
|
var t = $('#vbtn_template').html();
|
|
t = t.replace('{{image}}', s[i].toLowerCase());
|
|
t = t.replace('{{item}}', s[i]);
|
|
$(".ui-inner").append(t);
|
|
}
|
|
}
|
|
}
|
|
$('.ui').show();
|
|
isVisible = true;
|
|
}
|
|
|
|
});
|
|
|
|
function Choose(t) {
|
|
fetch(`https://${GetParentResourceName()}/SelectionMade`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
index: $(t).attr('data-item')
|
|
})
|
|
});
|
|
$('.ui').hide();
|
|
}
|
|
|
|
jQuery(function ($) {
|
|
var input = $('body');
|
|
input.on('keydown', function () {
|
|
var key = event.keyCode || event.charCode;
|
|
|
|
if (key == 8) { //backspace
|
|
if (isVisible) {
|
|
$('.ui').fadeOut();
|
|
isVisible = false;
|
|
fetch(`https://${GetParentResourceName()}/SelectionMade`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=UTF-8',
|
|
},
|
|
body: JSON.stringify({
|
|
index: ''
|
|
})
|
|
});
|
|
}
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
|
|
function imageExists(image_url) {
|
|
var http = new XMLHttpRequest();
|
|
http.open('HEAD', image_url, false);
|
|
http.send();
|
|
return http.status != 404;
|
|
}
|
|
|
|
function calcDistanceVolume() {
|
|
//$('#debug').html('distance: ' + distance + " radius: " + radius + " maxVolume: " + maxVolume);
|
|
if (distance > radius) {
|
|
return 0;
|
|
} else {
|
|
return maxVolume * ((radius - distance) / radius);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/html" id="vbtn_template">
|
|
<div class="vbtn"><img src="{{image}}.png" data-item="{{item}}" onclick="Choose(this)" /></div>
|
|
</script>
|
|
|
|
<script type="text/html" id="vbtn_template2">
|
|
<div class="vbtn col"><img src="{{image}}.png" data-item="{{item}}" onclick="Choose(this)" /></div>
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |