145 lines
7 KiB
HTML
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>
|