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

@@ -1 +1 @@
-*.min.js
+*.min.js

.eslintrc.json

@@ -2,6 +2,7 @@
   "env": {
       "es6": true,
       "node": true,
+      "browser": true,
       "mocha": true
   },
   "extends": "modcolle",

src/views/js/index.js

@@ -1,3 +1,4 @@
 'use strict'
 
 require('./lib-fallback')
+require('./kc-maintenance')

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'
+}

src/views/public/index.html

@@ -55,14 +55,35 @@
         <img src="img/kaga.png" class="background kaga">
       </div>
       <div class="banner-content-wrapper">
-        <div class="banner-content">
+        <div class="banner-content banner-info">
           <h1><i class="fa fa-anchor fa-2x logo"></i></h1>
           <h1>Modcolle</h1>
           <p>Kancolle Proxy Server</p>
           <div class="hr-line"></div>
           <a href="#login" title="Launch"><img id="launcher" src="img/launcher.png" width="75%" height="75%" alt="Launch"></a>
         </div>
       </div>
+      <aside id="maintenance-timer" class="banner-info countdown-timer">
+        <header>Kancolle Maintenence <span id="maintenance-state"></span> in</header>
+        <div class="timer">
+          <section>
+            <p id="day" class="number">88</p>
+            <p>Day</p>
+          </section>
+          <section>
+            <p id="hour" class="number">88</p>
+            <p>Hour</p>
+          </section>
+          <section>
+            <p id="minute" class="number">88</p>
+            <p>Minute</p>
+          </section>
+          <section>
+            <p id="second" class="number">88</p>
+            <p>Second</p>
+          </section>
+        </div>
+      </aside>
       <a class="github" href="https://github.com/makemek/Modcolle" title="View on Github" target="_blank"><i class="fa fa-github"></i></a>
     </header>
     <div class="clearfix"></div>
@@ -100,7 +121,7 @@ <h1>Compatible with<br>Kancolle Viewer</h1>
       <p>Modcolle is open-source on <a target="_blank" href="https://github.com/makemek/Modcolle" title="Contribute">Github <i class="fa fa-github"></i></a></p>
       <p><i class="fa fa-copyright"></i> Apipol Niyomsak</p>
     </footer>
-
+    <script src="http://203.104.209.7/gadget/js/kcs_const.js"></script>
     <script src="js/bundle.min.js"></script>
     <script>
     // bg jitter fix for ie

src/views/style.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Orbitron');
+
 * {
   margin: 0;
   padding: 0;
@@ -41,6 +43,40 @@ header {
   margin: 0 auto;
 }
 
+.banner-info {
+  color: #fff;
+  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
+}
+
+#maintenence-timer {
+  display: none;
+}
+.countdown-timer {
+  position: absolute;
+  top: 5%;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  text-align: center;
+}
+.timer {
+  display: table;
+  margin: 0 auto;
+}
+.countdown-timer header {
+  font-size: 1.5em;
+  font-weight: 800;
+}
+.countdown-timer section {
+  float: left;
+  padding: 10px 13px;
+}
+.countdown-timer section .number {
+  font-family: 'Orbitron';
+  font-size: 1.7em;
+  letter-spacing: 2px;
+}
+
 /* Start Banner */
 .banner {
   position: relative;
@@ -104,17 +140,15 @@ header {
 .banner-content {
   margin-top: 40%;
   width: 100%;
-  color: #fff;
   text-align: center;
-  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
 }
-#launcher {
+#launcher,
+#launcher-deny {
   margin-top: 40px;
   filter: drop-shadow(0px 0px 5px #f2e1f2);
 
   transform: scale(1);
   transition: .2s transform;
-
 }
 #launcher:hover {
   filter: drop-shadow(0px 0px 15px #f2e1f2);
@@ -123,6 +157,31 @@ header {
   transform: scale(1.1);
   transition: .2s transform;
 }
+#launcher-deny {
+  filter: grayscale(100%);
+}
+#launcher-deny:active,
+#launcher-deny:hover {
+  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  cursor: pointer;
+}
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
 .hr-line {
   margin-top: 20px;
   border-bottom: 1px solid white;