content/hifi-content/rebecca/bingo/bingoCardApp/bingoCard_ui.html
2022-02-14 02:04:11 +01:00

145 lines
7 KiB
HTML

<html>
<head>
<title>Bingo Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="bingoCard_ui.css?2">
</head>
<body>
<table>
<tr>
</table>
<div class="button-headers-container">
<button class="button-letter" id ="B"></button><!--
--><button class="button-letter" id ="I"></button><!--
--><button class="button-letter" id ="N"></button><!--
--><button class="button-letter" id ="G"></button><!--
--><button class="button-letter" id= "O"></button>
</div>
<div class="button-container">
<button class="button-number" id="0"></button>
<button class="button-number" id="5"></button>
<button class="button-number" id="10"></button>
<button class="button-number" id="14"></button>
<button class="button-number" id="19"></button>
<button class="button-number" id="1"></button>
<button class="button-number" id="6"></button>
<button class="button-number" id="11"></button>
<button class="button-number" id="15"></button>
<button class="button-number" id="20"></button>
<button class="button-number" id="2"></button>
<button class="button-number" id="7"></button>
<button class="button-free" id="-1">Free</button>
<button class="button-number" id="16"></button>
<button class="button-number" id="21"></button>
<button class="button-number" id="3"></button>
<button class="button-number" id="8"></button>
<button class="button-number" id="12"></button>
<button class="button-number" id="17"></button>
<button class="button-number" id="22"></button>
<button class="button-number" id="4"></button>
<button class="button-number" id="9"></button>
<button class="button-number" id="13"></button>
<button class="button-number" id="18"></button>
<button class="button-number" id="23"></button>
</div><!--
--><div class="bottomPanel">
<button id="BingoButton">Call Bingo</button><br>
<text id="helpText">Retrieving BINGO data...</text>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onScriptEventReceived(scriptEvent) {
if (JSON.parse(scriptEvent).type === "initializeCard") {
scriptEvent = JSON.parse(scriptEvent);
$(".button-number").each(function(index){
document.getElementById(index).innerHTML = scriptEvent.allNumbers[index];
if (scriptEvent.selectedNumberIDs.indexOf(index) > -1) {
document.getElementById(index).classList.add("selected");
}
});
// Handle selection of Free space, which has HTML id === -1
if (scriptEvent.selectedNumberIDs.indexOf(-1) > -1) {
document.getElementById("-1").classList.add("selected");
}
document.getElementById("helpText").innerHTML = " ";
function parseColor(scriptColorObject) {
var colorString = "rgb(";
colorString += scriptColorObject.red;
colorString += ", ";
colorString += scriptColorObject.green;
colorString += ", ";
colorString += scriptColorObject.blue;
colorString += ")";
return colorString;
}
var parsedColor = parseColor(scriptEvent.cardColor);
$('body').css("background", parsedColor);
$(".button-number").click(function() {
if ($(this).hasClass("selected")){
$(this).removeClass("selected");
EventBridge.emitWebEvent(JSON.stringify({
type: 'bingoNumberDeselected',
deselectedID: parseInt($(this).attr("id"))
}));
} else {
$(this).addClass("selected");
EventBridge.emitWebEvent(JSON.stringify({
type: 'bingoNumberSelected',
selectedID: parseInt($(this).attr("id"))
}));
}
});
$(".button-free").click(function() {
if ($(this).hasClass("selected")){
$(this).removeClass("selected");
EventBridge.emitWebEvent(JSON.stringify({
type: 'bingoNumberDeselected',
deselectedID: parseInt($(this).attr("id"))
}));
} else {
$(this).addClass("selected");
EventBridge.emitWebEvent(JSON.stringify({
type: 'bingoNumberSelected',
selectedID: parseInt($(this).attr("id"))
}));
}
});
var BINGO_STRING = "BINGO";
$(".button-letter").click(function() {
var index = BINGO_STRING.indexOf($(this).attr('id'));
EventBridge.emitWebEvent(JSON.stringify({
type : 'playSoundFromBingoHeaderButton',
index: index
}));
});
$("#BingoButton").click(function() {
EventBridge.emitWebEvent(JSON.stringify({
type: 'calledBingo'
}));
});
} else if (JSON.parse(scriptEvent).type === "notLoggedIn") {
document.getElementById("helpText").innerHTML = "Please log in, then re-open the BINGO app!";
document.getElementsByClassName("button-container")[0].style.visibility = "hidden";
document.getElementById("BingoButton").style.visibility = "hidden";
}
};
window.onload = function(){
EventBridge.scriptEventReceived.connect(onScriptEventReceived);
}
</script>
</body>
</html>