54 lines
1.1 KiB
HTML
54 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head><link rel="stylesheet" type="text/css" href="Terminal.css"></head>
|
|
<body>
|
|
|
|
<div class="doorFace">
|
|
<div class='label'>
|
|
<span id='neededCoins'>0</span>
|
|
<img src="Coin.png">
|
|
<br>
|
|
<span id='lockState'></span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="application/javascript">
|
|
"use strict"; var $ = s => document.querySelector(s);
|
|
|
|
var neededCoins = 0;
|
|
var currentCoins = 0;
|
|
|
|
function toggleDoor(state) { console.log("Would toggle door here.", state); }
|
|
|
|
$('.doorFace').addEventListener("click", () => {
|
|
if (currentCoins >= neededCoins) toggleDoor("open");
|
|
});
|
|
updateDoorState();
|
|
|
|
function updateDoorState() {
|
|
$('#neededCoins').textContent = neededCoins;
|
|
|
|
if (currentCoins < neededCoins) {
|
|
$('body').classList.add('locked');
|
|
$('#lockState').innerHTML = "🔒";
|
|
|
|
} else {
|
|
$('body').classList.remove('locked');
|
|
$('#lockState').innerHTML = "✓";
|
|
}
|
|
}
|
|
|
|
function setRequiredCoins(_neededCoins) {
|
|
neededCoins = _neededCoins;
|
|
updateDoorState();
|
|
}
|
|
|
|
function setCoinCoint(_currentCoins) {
|
|
currentCoins = _currentCoins;
|
|
updateDoorState();
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |