From e4feb81bb280f3098b2fd8d3032f8ccf4aa079b2 Mon Sep 17 00:00:00 2001 From: Apipol Niyomsak Date: Sat, 8 Apr 2017 22:43:35 +0700 Subject: [PATCH] Maintenence countdown timer (#16) * load kcs_const.js from kc server * basic timer layout * uglify js and reload browser on change * countdown timer during maintenance Timer will appear during maintenance calculated by the current client time - Maintenance.EndDateTime from kc server * setup browser-side javascript to be compatible with modcolle linting rules - use babel to deal with browser js compatibility when build js - lint kc-maintainance to comply with linting rules - ignore file type *.min.js from linting * support countdown before maintenance starts * message notification before and during maintenance message shown on the right before maintenance: begins in during maintenance: ends in * disable launcher button during Kancolle maintenance - grayscale button - remove #login link - shake effect when hover or click Once maintenance is over, launcher button will return to normal * delete unused kc-maintenace.js left over from rebasing --- .eslintignore | 2 +- .eslintrc.json | 1 + src/views/js/index.js | 1 + src/views/js/kc-maintenance.js | 64 ++++++++++++++++++++++++++++++++ src/views/public/index.html | 25 ++++++++++++- src/views/style.css | 67 ++++++++++++++++++++++++++++++++-- 6 files changed, 153 insertions(+), 7 deletions(-) create mode 100644 src/views/js/kc-maintenance.js diff --git a/.eslintignore b/.eslintignore index 0baf809..121531a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1 @@ -*.min.js \ No newline at end of file +*.min.js diff --git a/.eslintrc.json b/.eslintrc.json index 2f06321..47fa2f1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,6 +2,7 @@ "env": { "es6": true, "node": true, + "browser": true, "mocha": true }, "extends": "modcolle", diff --git a/src/views/js/index.js b/src/views/js/index.js index 6977b1d..faa3924 100644 --- a/src/views/js/index.js +++ b/src/views/js/index.js @@ -1,3 +1,4 @@ 'use strict' require('./lib-fallback') +require('./kc-maintenance') diff --git a/src/views/js/kc-maintenance.js b/src/views/js/kc-maintenance.js new file mode 100644 index 0000000..07d20a2 --- /dev/null +++ b/src/views/js/kc-maintenance.js @@ -0,0 +1,64 @@ +/* Depends on http://203.104.209.7/gadget/js/kcs_const.js */ +/* global MaintenanceInfo */ + +'use strict' + +const timer = { + day: document.getElementById('day'), + hour: document.getElementById('hour'), + minute: document.getElementById('minute'), + second: document.getElementById('second') +} +const maintenanceNotice = document.getElementById('maintenance-timer') +const state = document.getElementById('maintenance-state') +const loginModal = document.getElementById('login') +const launcher = document.getElementById('launcher') +const launcherAchor = launcher.parentNode +const launcherLink = launcherAchor.href + +maintenanceCheck() + +function maintenanceCheck() { + const now = Date.now() + const willMaintenacne = now <= MaintenanceInfo.StartDateTime + const onMaintenance = now > MaintenanceInfo.StartDateTime && now < MaintenanceInfo.EndDateTime + let remaining = 0 + + if(willMaintenacne) { + remaining = MaintenanceInfo.StartDateTime - now + state.innerHTML = 'begins' + } else if(onMaintenance) { + remaining = MaintenanceInfo.EndDateTime - now + state.innerHTML = 'ends' + disableLauncher() + } else { + maintenanceNotice.style.display = 'none' + enableLauncher() + return + } + + maintenanceNotice.style.display = 'block' + tick(remaining) + setTimeout(maintenanceCheck, 1000) +} + +function tick(timeRemaining) { + timer.day.innerHTML = Math.floor(timeRemaining / (1000 * 60 * 60 * 24)) + timer.hour.innerHTML = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) + timer.minute.innerHTML = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60)) + timer.second.innerHTML = Math.floor((timeRemaining % (1000 * 60)) / 1000) +} + +function disableLauncher() { + loginModal.style.display = 'none' + launcherAchor.removeAttribute('href') + launcherAchor.title = 'Kancolle is in maintenance. Please wait' + launcher.id = 'launcher-deny' +} + +function enableLauncher() { + loginModal.style.display = 'inherit' + launcherAchor.title = 'Launch Kancolle' + launcherAchor.href = launcherLink + launcher.id = 'launcher' +} diff --git a/src/views/public/index.html b/src/views/public/index.html index 56da687..5bd15de 100644 --- a/src/views/public/index.html +++ b/src/views/public/index.html @@ -55,7 +55,7 @@