50 lines
No EOL
2.1 KiB
HTML
50 lines
No EOL
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>BoomBox</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
|
|
<link href="https://fonts.googleapis.com/css?family=Lato|Staatliches" rel="stylesheet">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>Happy BoomBox</h1>
|
|
<text>You can customize the happy boombox by changing or adding additional songs to the userdata on the boombox entity. Click a song title to play a tune!</text><br></bt><br>
|
|
<div id ="songList">
|
|
<text id = "songs">Fetching songs...</text>
|
|
</div>
|
|
<button class = "red" id="stop">Stop Music</button><br>
|
|
<script>
|
|
function main() {
|
|
var initialized = false;
|
|
EventBridge.scriptEventReceived.connect(function(message) {
|
|
message = JSON.parse(message);
|
|
if (message.type === "updateSongList" && !initialized) {
|
|
initialized = true;
|
|
$("#songs").text("");
|
|
var songJSON = message.songList;
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
'type' : 'confirmSongList'
|
|
}));
|
|
var songKeys = Object.keys(songJSON);
|
|
for (var i = 0; i < songKeys.length; i++) {
|
|
var url = songJSON[songKeys[i]];
|
|
$("#songList").append("<button class = \"white\" id = " + url + ">" + songKeys[i] + "</button><br>");
|
|
};
|
|
$(':button').click(function(){
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
'type' : 'playSong',
|
|
'song' : this.id
|
|
}));
|
|
});
|
|
}
|
|
});
|
|
|
|
};
|
|
$(document).ready(main);
|
|
|
|
</script>
|
|
</body>
|
|
</html> |