<!DOCTYPE html>
<head>
<title>Pusher Test</title>
<style>
body {
background-color: #f1f1f1;
font-family: 'Montserrat', sans-serif;
}
.card {
margin: 0 auto;
padding: 50px;
display: block;
max-width: 500px;
width: 100%;
text-align: center;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 10px 10px -5px #909090;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#countdown {
font-size: 48px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script>
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('1318b92f84e5f0a50c1b', {
cluster: 'eu'
});
var channel = pusher.subscribe('livescore-channel');
channel.bind('livescore-event', function(data) {
// alert(JSON.stringify(data));
console.log(data);
$('#team1_goals').html(data.team1Goals);
$('#team2_goals').html(data.team2Goals);
startTimer(data.secondsLeft)
});
// Kolku sekundi ostanuvat do kraj na poluvreme od momentot koga posledno se kliknalo START kopceto od ADMIN
// first_start_at = 2024-08-19 13:00:00
// last_start_at = 2024-08-19 13:07:00
// time_paused = true|false
// seconds_left = X - kolku sekundi se ostanati od poluvremeto (na sekoj stop)
// now = 2024-08-19 13:09:00 - togas si ja otvoril stranata i treba da ti se prikazi
var timeInSecs;
var ticker;
function startTimer(secs) {
timeInSecs = parseInt(secs);
ticker = setInterval("tick()", 1000);
}
function tick( ) {
var secs = timeInSecs;
if (secs > 0) {
timeInSecs--;
}
else {
clearInterval(ticker);
startTimer(5*60); // 4 minutes in seconds
}
var mins = Math.floor(secs/60);
secs %= 60;
var pretty = ( (mins < 10) ? "0" : "" ) + mins + ":" + ( (secs < 10) ? "0" : "" ) + secs;
document.getElementById("countdown").innerHTML = pretty;
}
startTimer(5*60); // 4 minutes in seconds
</script>
</head>
<body>
<h1>Tournament LiveScore - Test</h1>
<h1>Team 1 (<span id="team1_goals">0</span>:<span id="team1_goals">0</span>) Team 2</h1>
<div class="card">
<span id="countdown" style="font-weight: bold;"></span>
</div>
</body>