diff options
| -rw-r--r-- | static/js/countdown.js | 119 | ||||
| -rw-r--r-- | templates/main/base.html | 4 | ||||
| -rw-r--r-- | templates/main/index.html | 7 |
3 files changed, 79 insertions, 51 deletions
diff --git a/static/js/countdown.js b/static/js/countdown.js index 53553fb7..80cfb30c 100644 --- a/static/js/countdown.js +++ b/static/js/countdown.js @@ -1,44 +1,77 @@ -var heading = document.getElementById("countdown-title"); -var startjam = new Date(Date.UTC(2018, 2, 23)); -var endjam = new Date(Date.UTC(2018, 2, 26)); -var goal; -var now = Date.now(); -if (now+1000 >= endjam.getTime()) { - heading.innerHTML = "Code Jam has finished!"; -} else { - if (now > startjam.getTime()) { - heading.innerHTML = "Code Jam ends in..."; - goal = endjam.getTime(); - } else { - heading.innerHTML = "Next Code Jam starts in..."; - goal = startjam.getTime(); - } - var refreshCountdown = setInterval(function() { - var delta = goal - Date.now(); - if (delta <= 1000) { - clearInterval(refreshCountdown); - location.reload(); - } - var days = Math.floor(delta / (24*60*60*1000)); - delta -= days * (24*60*60*1000); - var hours = Math.floor(delta / (60*60*1000)); - delta -= hours * (60*60*1000); - var minutes = Math.floor(delta / (60*1000)); - delta -= minutes * (60*1000); - var seconds = Math.floor(delta / 1000); - if (days < 10) { - days = "0"+days; - } - if (hours < 10) { - hours = "0"+hours; +"use strict"; + +(function(){ // Use a closure to avoid polluting global scope + const startjam = new Date(Date.UTC(2018, 2, 23)); + const endjam = new Date(Date.UTC(2018, 2, 26)); + + let now = Date.now(); + let goal; + + if (now+1000 < endjam.getTime()) { // Only do anything if the jam hasn't ended + UIkit.notification( // Spawn the notification + { + message: + "<div class='uk-text-center'>" + + " <span id=\"countdown-title\" class=\"uk-text-center\">" + + " <a href=\"/info/jams\">Code Jam</a> Countdown" + + " </span>" + + " <p class='uk-text-large' id=\"countdown-remaining\"></p>" + + "</div>", + pos: "bottom-right", + timeout: endjam - now + } + ); + + const heading = document.getElementById("countdown-title"); + + if (now > startjam.getTime()) { // Jam's already started + heading.innerHTML = "<a href=\"/info/jams\">code jam</a> Countdown ends in..."; + goal = endjam.getTime(); + } else { + heading.innerHTML = "Next <a href=\"/info/jams\">code jam</a> starts in..."; + goal = startjam.getTime(); } - if (minutes < 10) { - minutes = "0"+minutes; - } - if (seconds < 10) { - seconds = "0"+seconds; - } - let formatted = `${days}:${hours}:${minutes}:${seconds}` - document.getElementById('remaining').innerHTML = formatted; - }, 100); -} + + let refreshCountdown = setInterval(function() { // Create a repeating task + let delta = goal - Date.now(); // Time until the goal is met + + if (delta <= 1000) { // Goal has been met, best reload + clearInterval(refreshCountdown); + return location.reload(); + } + + let days = Math.floor(delta / (24*60*60*1000)); + delta -= days * (24*60*60*1000); + + let hours = Math.floor(delta / (60*60*1000)); + delta -= hours * (60*60*1000); + + let minutes = Math.floor(delta / (60*1000)); + delta -= minutes * (60*1000); + + let seconds = Math.floor(delta / 1000); + + if (days < 10) { + days = "0"+days; + } + + if (hours < 10) { + hours = "0"+hours; + } + + if (minutes < 10) { + minutes = "0"+minutes; + } + + if (seconds < 10) { + seconds = "0"+seconds; + } + + try { + document.getElementById('countdown-remaining').innerHTML = `${days}:${hours}:${minutes}:${seconds}`; + } catch (e) { // Notification was probably closed, so we can stop counting + return clearInterval(refreshCountdown); + } + }, 500); + } +}()); diff --git a/templates/main/base.html b/templates/main/base.html index 2a1a1481..596d47e8 100644 --- a/templates/main/base.html +++ b/templates/main/base.html @@ -6,7 +6,7 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> - <script defer src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.39/js/uikit.min.js"></script> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> <link rel="stylesheet" href="/static/uikit_blurple.css"/> <link rel="stylesheet" href="/static/style.css"/> @@ -47,5 +47,7 @@ </div> </div> </footer> + + <script src='/static/js/countdown.js'></script> </body> </html> diff --git a/templates/main/index.html b/templates/main/index.html index 7fb49df7..c7a31f17 100644 --- a/templates/main/index.html +++ b/templates/main/index.html @@ -32,11 +32,4 @@ </div> </div> - <div class="uk-align-center uk-text-center"> - <a href="/info/jams"><h1 id="countdown-title" class="uk-text-center">Code Jam Countdown</h1></a> - <div class="uk-text-center"> - <h1 id="remaining"></h1> - </div> - </div> -<script src='/static/js/countdown.js'></script> {% endblock %}
\ No newline at end of file |