119 lines
No EOL
5.4 KiB
HTML
119 lines
No EOL
5.4 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="card.css">
|
|
</head>
|
|
<body>
|
|
<table>
|
|
<tr>
|
|
|
|
</table>
|
|
<div class="button-container">
|
|
<button class="button-letter" id ="B">B</button>
|
|
<button class="button-letter" id ="I">I</button>
|
|
<button class="button-letter" id ="N">N</button>
|
|
<button class="button-letter" id ="G">G</button>
|
|
<button class="button-letter" id= "O">O</button>
|
|
<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="15"></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="16"></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">Free</button>
|
|
<button class="button-number" id="12"></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="13"></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="14"></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="numbers">Getting numbers...</text>
|
|
</div>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<script>
|
|
var CARD_YELLOW = { blue: 66, green: 255, red: 227 };
|
|
var CARD_BLUE = { blue: 247, green: 196, red: 0 };
|
|
var CARD_GREEN = { blue: 0, green: 255, red: 30 };
|
|
var CARD_PINK = { blue: 119, green: 0, red: 255 };
|
|
var BINGO_STRING = "BINGO";
|
|
|
|
function onScriptEventReceived(scriptEvent) {
|
|
if (JSON.parse(scriptEvent).type === "displayNumbers") {
|
|
scriptEvent = JSON.parse(scriptEvent);
|
|
$(".button-number").each(function(index){
|
|
document.getElementById(index).innerHTML = scriptEvent.numbers[index];
|
|
});
|
|
document.getElementById("numbers").innerHTML = " ";
|
|
}
|
|
};
|
|
|
|
$(document).ready(function(){
|
|
$(".button-number").click(function() {
|
|
if ($(this).hasClass("selected")){
|
|
$(this).removeClass("selected");
|
|
} else {
|
|
$(this).addClass("selected");
|
|
}
|
|
});
|
|
$(".button-free").click(function() {
|
|
if ($(this).hasClass("selected")){
|
|
$(this).removeClass("selected");
|
|
} else {
|
|
$(this).addClass("selected");
|
|
}
|
|
});
|
|
$(".button-letter").click(function() {
|
|
var index = BINGO_STRING.indexOf($(this).attr('id'));
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type : 'playSoundFromBingoButton',
|
|
index: index
|
|
}));
|
|
});
|
|
$("#BingoButton").click(function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: 'calledBingo'
|
|
}));
|
|
});
|
|
});
|
|
|
|
window.onload = function(){
|
|
EventBridge.scriptEventReceived.connect(onScriptEventReceived);
|
|
var backgroundColor = Math.floor(Math.random() * 4);
|
|
switch (backgroundColor) {
|
|
case 0:
|
|
$('body').addClass("card-yellow");
|
|
break;
|
|
case 1:
|
|
$('body').addClass("card-blue");
|
|
break;
|
|
case 2:
|
|
$('body').addClass("card-pink");
|
|
break;
|
|
case 3:
|
|
$('body').addClass("card-green");
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |