v0.3.1 Release Proposal

.eslintignore

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

.eslintrc.json

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

Dockerfile

@@ -1,22 +1,25 @@
-FROM node:6.9.1
+FROM node:6-alpine
 
-MAINTAINER Apipol Niyomsak
+LABEL maintainer "Apipol Niyomsak"
 
-RUN npm install -g pm2
+ENV PORT=5000 \
+    DEPLOY_DIR=/var/www/modcolle \
+    USER=www
 
-RUN mkdir -p /var/www/modcolle
+ADD . ${DEPLOY_DIR}
 
-# Define working directory
-WORKDIR /var/www/modcolle
+RUN adduser -S $USER && \
+    chown -R $USER \
+      $DEPLOY_DIR \
+      /usr/local/lib \
+      /usr/local/bin
 
-ADD . /var/www/modcolle/
+USER ${USER}
+WORKDIR ${DEPLOY_DIR}
+RUN npm install --only=production -g pm2 && \
+    npm install && \
+    npm run build
 
-VOLUME ["/var/www/modcolle/log"]
+EXPOSE ${PORT}
 
-RUN npm install && npm run build
-
-# Expose port
-EXPOSE 5000
-
-# Run app
 CMD pm2-docker start process.json --auto-exit

README.md

@@ -30,17 +30,14 @@ However, you can setup your machine as a web server to run Modcolle locally.
 Modcolle needs to run together with [Nginx](https://www.nginx.com/) in order to operate normally.
 Please follows steps below to run Modcolle
 
-### On Mac and Linux
+### Docker
 
 1. Install [Docker](https://docs.docker.com/engine/installation/) and [Docker Compose](https://docs.docker.com/compose/install/)
 2. Clone this repository `git clone git@github.com:makemek/Modcolle.git` and run `npm install`
 3. Open terminal and run `docker-compose up`. You can add `-d` flag to detach the process and run as a daemon.
 4. Open a web browser and type `localhost` in the url
 
-### On windows
-Unfortunately, Docker is not natively supported on Windows.
-Also there is a shell script that be executed only in linux environment.
-You have to install Nginx and Modcolle manually.
+### Manual Installation
 
 1. Install Nginx and Node.js (v. 6.9.1)
 2. Clone this repository `git clone git@github.com:makemek/Modcolle.git` and run `npm install`
@@ -50,6 +47,23 @@ You have to install Nginx and Modcolle manually.
 6. Type `npm install pm2 -g` and run `pm2 start process.json`
 7. Open a browser and type `localhost` in the url
 
+## Starting the Application
+
+As a single instance
+```
+npm start
+```
+
+In cluster mode using [PM2](https://npmjs.org/packages/pm2)
+```
+pm2 start process.json
+```
+
+In development mode with [nodemon](https://npmjs.org/packages/nodemon) and [browser-sync](https://npmjs.org/packages/browser-sync)
+```
+npm run dev
+```
+
 ## Configuration
 `.env.json` is the common configuration for Modcolle which will be created on first-time start or test by copying `.env.json.template` (no overwrite if file already exists).
 At `env` section in `process.json` are environment variables that will override `.env.json` for running in production environment.

package.json

@@ -48,7 +48,7 @@
     "request-promise": "4.2.0",
     "sprintf-js": "1.0.3",
     "tough-cookie": "2.3.2",
-    "url-join": "1.1.0",
+    "url-join": "2.0.1",
     "url-parse": "1.1.8",
     "validator": "7.0.0",
     "winston": "2.3.1"
@@ -57,7 +57,7 @@
     "app-root-path": "2.0.1",
     "autoprefixer": "6.7.7",
     "babel": "6.23.0",
-    "babel-preset-env": "1.3.3",
+    "babel-preset-env": "1.4.0",
     "browser-sync": "2.18.8",
     "browserify": "14.3.0",
     "cheerio": "0.22.0",
@@ -73,7 +73,7 @@
     "gulp-uglify": "2.1.2",
     "gulp-util": "3.0.8",
     "mocha": "3.2.0",
-    "nock": "9.0.11",
+    "nock": "9.0.13",
     "nodemon": "1.11.0",
     "nyc": "10.2.0",
     "should": "11.2.1",

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;

test/unit/mock/dmm/osapi.js

@@ -12,7 +12,7 @@ nock(HOST)
   authz: 'signed',
   signOwner: 'true'
 })
-.reply(200, DONT_BE_EVIL + `{"http:\/\/www.example.com":{"rc":200,"body":"<!doctype html>\n<html>\n<head>\n    <title>Example Domain<\/title>\n\n    <meta charset=\"utf-8\" \/>\n    <meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n    <style type=\"text\/css\">\n    body {\n        background-color: #f0f0f2;\n        margin: 0;\n        padding: 0;\n        font-family: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n        \n    }\n    div {\n        width: 600px;\n        margin: 5em auto;\n        padding: 50px;\n        background-color: #fff;\n        border-radius: 1em;\n    }\n    a:link, a:visited {\n        color: #38488f;\n        text-decoration: none;\n    }\n    @media (max-width: 700px) {\n        body {\n            background-color: #fff;\n        }\n        div {\n            width: auto;\n            margin: 0 auto;\n            border-radius: 0;\n            padding: 1em;\n        }\n    }\n    <\/style>    \n<\/head>\n\n<body>\n<div>\n    <h1>Example Domain<\/h1>\n    <p>This domain is established to be used for illustrative examples in documents. You may use this\n    domain in examples without prior coordination or asking for permission.<\/p>\n    <p><a href=\"http:\/\/www.iana.org\/domains\/example\">More information...<\/a><\/p>\n<\/div>\n<\/body>\n<\/html>\n","headers":{"Content-Type":"text\/html","Server":"ECS (rhv\/818F)","X-Cache":"HIT","X-Ec-Custom-Error":"1"}}}`)
+.reply(200, DONT_BE_EVIL + '{"http:\/\/www.example.com":{"rc":200,"body":"<!doctype html>\n<html>\n<head>\n    <title>Example Domain<\/title>\n\n    <meta charset=\"utf-8\" \/>\n    <meta http-equiv=\"Content-type\" content=\"text\/html; charset=utf-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n    <style type=\"text\/css\">\n    body {\n        background-color: #f0f0f2;\n        margin: 0;\n        padding: 0;\n        font-family: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n        \n    }\n    div {\n        width: 600px;\n        margin: 5em auto;\n        padding: 50px;\n        background-color: #fff;\n        border-radius: 1em;\n    }\n    a:link, a:visited {\n        color: #38488f;\n        text-decoration: none;\n    }\n    @media (max-width: 700px) {\n        body {\n            background-color: #fff;\n        }\n        div {\n            width: auto;\n            margin: 0 auto;\n            border-radius: 0;\n            padding: 1em;\n        }\n    }\n    <\/style>    \n<\/head>\n\n<body>\n<div>\n    <h1>Example Domain<\/h1>\n    <p>This domain is established to be used for illustrative examples in documents. You may use this\n    domain in examples without prior coordination or asking for permission.<\/p>\n    <p><a href=\"http:\/\/www.iana.org\/domains\/example\">More information...<\/a><\/p>\n<\/div>\n<\/body>\n<\/html>\n","headers":{"Content-Type":"text\/html","Server":"ECS (rhv\/818F)","X-Cache":"HIT","X-Ec-Custom-Error":"1"}}}')
 
 nock(HOST)
 .post('/gadgets/makeRequest', {