<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Livestream</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

<style>
#clockContainer {
position: absolute; top: 10px; right: 10px; width: 180px; height: 20px;
border-radius: 10px;
text-align: center;
background-color: darkgoldenrod;
border: 2px solid black;
display: block;
}

#scoreContainer {
position: absolute; top: 10px; right: 200px; height: 20px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
border-radius: 10px;
background-color: darkgoldenrod;
border: 2px solid black;
display: block;
}

#clock, #score, #period {
line-height: 16px;
color: #fff;
font-weight: bold;
font-family: sans-serif;
font-size: 16px;
text-align: center;
}

#period {
padding-left: 10px;
}
</style>
</head>
<body>
<div style="position: absolute; top:0; left:0; width: 100%; height: 100%; background-color: #0f0;">

<div id="clockContainer">
<span id="clock">00.00s</span><span id="period"></span>
</div>

<div id="scoreContainer">
<span id="score">00:00</span>
</div>
</div>
</body>

<script type="text/javascript">
var clockId = "clock";
var scoreId = "score";
var periodId = "period";

var clockDiv = document.getElementById(clockId);
var scoreDiv = document.getElementById(scoreId);
var periodDiv = document.getElementById(periodId);

var timeinterval = null;

function formatTimecode(timecode) {

if (timecode <= 0) {
return '00.00s';
}

function padInt(num, size=2) {
var s = "00" + num;
return s.substr(s.length-size);
}

if (timecode >= 1000) {
sec = Math.floor(timecode / 1000);
if (sec > 59) {
min = Math.floor(sec / 60);
minStr = padInt(min, 2);
secStr = padInt(Math.floor(sec - (min * 60)), 2);
return minStr + ":" + secStr + "m";
} else {
ms = Math.ceil((timecode - sec * 1000) / 10);
return padInt(sec, 2) + "." + padInt(ms, 2) + "s";
}
} else {
ms = Math.ceil(timecode / 10);
return "00." + padInt(ms, 2) + "s";
}
}

function startClock(countdownLength, elapsed, remaining) {
//console.log("startClock countdownLength=" + countdownLength + " elapsed=" + elapsed + " remaining=" + remaining);
clockTimecode = remaining;

timeinterval = setInterval(function(){
if (clockDiv) {
clockDiv.innerHTML = formatTimecode(clockTimecode);
}

clockTimecode = clockTimecode - 10;

if (clockTimecode<=0){
clearInterval(timeinterval);
}
},10);
}

function stopClock(countdownLength, elapsed, remaining) {
//console.log("stopClock countdownLength=" + countdownLength + " elapsed=" + elapsed + " remaining=" + remaining);
if (timeinterval) {
clearInterval(timeinterval);
}

if (clockDiv) {
clockDiv.innerHTML = formatTimecode(remaining);
}
}

function updateStandings(info, homeScore, guestScore, period, clock) {
//console.log(homeScore + ":" + guestScore + " ("+period+". Viertel)");

homeTag = info.home.tag;
guestTag = info.guest.tag;


if (scoreDiv) {
scoreDiv.innerHTML = homeTag + " " + homeScore + ":" + guestScore + " " + guestTag;
}

if (periodDiv) {
periodDiv.innerHTML = (period > 4) ? 'OT ' + (period-4) : period + ". Viertel";
}

if (!timeinterval && clockDiv) {
clockDiv.innerHTML = clock;
}
}

var host = window.location.host;
var port = window.location.port ? window.location.port : 8080;
var urn = "ws://"+host+"/ws";
//console.log("connecting to: " + urn);

function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}

var exampleSocket = new WebSocket(urn);

exampleSocket.onopen = function(evt) {
exampleSocket.send("gameInfo");

if (clockDiv) {
clockDiv.style.visibility = "block";
}

if (periodDiv) {
periodDiv.style.visibility = "block";
}

if (scoreDiv) {
scoreDiv.style.visibility = "block";
}
};

exampleSocket.onclose = function(evt) {
//console.log(evt);

if (clockDiv) {
clockDiv.style.visibility = "hidden";
}

if (periodDiv) {
periodDiv.style.visibility = "hidden";
}

if (scoreDiv) {
scoreDiv.style.visibility = "hidden";
}

// reconnect
exampleSocket.close();
exampleSocket = null;
};

exampleSocket.onmessage = function(evt) {
try {
data = JSON.parse(evt.data);
} catch (ex) {
//console.log(ex);
return;
}

if (!data) {
return;
}


if (data.type == "message") {
if (data.message == "metaScouter.Messages.Clock.StopClockMessage") {
stopClock(data.arg1, data.arg2, data.arg3);
}

if (data.message == "metaScouter.Messages.Clock.StartClockMessage") {
startClock(data.arg1, data.arg2, data.arg3);
}
}

if (data.type == "gameInfo") {
homeScore = data.game.homeTeamScore;
guestScore = data.game.guestTeamScore;
period = data.game.currentPeriod;
updateStandings(data, homeScore, guestScore, period, data.game.clock);

}
};

exampleSocket.onerror = function(evt) {
//console.log(evt);

if (timeinterval) {
clearInterval(timeinterval);
}
};

</script>
</html>