Made some pre-setup server-side to make avoid loading screens on website load

index.js

@@ -6,11 +6,14 @@ var morgan = require('morgan')
 var ngn4 = require('ngn4');
 
 var config = require('./config.json');
+var util = require('./util.js');
+var scriptMethods = {};
 
 var app = express();
 var accessLogStream = fs.createWriteStream(__dirname + '/access.log', {flags: 'a'});
 
 app.use(require('compression')());
+app.use(require('cookie-parser')());
 app.use(morgan('combined', {stream: accessLogStream}));
 
 // Load data
@@ -23,12 +26,22 @@ fs.readdirSync(dir).forEach(function(file) {
 
 // Prepare merged data file for client to use.
 var data = set.export();
+var indexFile = null;
+
+// Get index.html
+fs.readFile(path.join(__dirname + '/www-root/index.html'), 'utf8', function (err, data) {
+  if (err) {
+    throw err;
+  }
+
+  indexFile = data;
+});
 
 // Load scripts
 dir = path.join(__dirname, 'scripts');
 fs.readdirSync(dir).forEach(function(file) {
     console.log('Running ' + file + '...');
-    require('./scripts/' + file)(set, app, data);
+    require('./scripts/' + file)(set, app, data, scriptMethods);
 });
 
 // Prepare static directories
@@ -38,8 +51,14 @@ app.use('/img/', express.static('www-root/img'));
 
 // Set up index
 function sendIndexHtml(req, res) {
-    res.header("Content-Type", "text/html; charset=utf-8");
+  res.header("Content-Type", "text/html; charset=utf-8");
-    res.sendFile(path.join(__dirname + '/www-root/index.html'));
+
+  res.end(util.formatTemplate(indexFile, {
+    generatorStyle: scriptMethods.getBackgroundFromCookie(req.cookies),
+    inited: true,
+    initData: scriptMethods.getInitDataFromCookie(req.cookies),
+    genList: scriptMethods.getGeneratorListJsonData()
+  }));
 }
 app.get('/index.html', sendIndexHtml);
 app.get('/', sendIndexHtml);

package.json

@@ -9,6 +9,8 @@
   "author": "Gisle",
   "license": "MIT",
   "dependencies": {
+    "compression": "^1.6.1",
+    "cookie-parser": "^1.4.1",
     "express": "^4.13.3",
     "jsonpack": "^1.1.4",
     "morgan": "^1.7.0",

scripts/bg.js

@@ -12,9 +12,10 @@ function existsSync(filename) {
   }
 }
 
-module.exports = function(set, app, data) {
+module.exports = function(set, app, data, scriptMethods) {
   var keys = Object.keys(set.generators);
   var cache = {};
+  var fileNames = {};
 
   for(var i = 0; i < keys.length; ++i) {
     var fileName = "bg_" + keys[i].split('/').join('_') + ".png";
@@ -44,5 +45,19 @@ module.exports = function(set, app, data) {
     }).bind(binding));
 
     console.log('[INFO] bg for "'+keys[i]+'" = "'+fileName+'"');
+
+    fileNames[keys[i]] = fileName;
+  }
+
+  scriptMethods.getBackgroundFromCookie = function(cookies) {
+    var key;
+
+    if(Object.prototype.hasOwnProperty.call(cookies, 'last_generator')) {
+      key = cookies['last_generator'];
+    } else {
+      key = scriptMethods.getDefaultDataKey();
+    }
+
+    return 'body { background-image: url(' + fileNames[key] + '); }'
   }
 }

scripts/data.js

@@ -1,6 +1,7 @@
-module.exports = function(set, app, data) {
+module.exports = function(set, app, data, scriptMethods) {
   var keys = Object.keys(set.generators);
   var cache = {};
+  var defaultKey = null;
 
   for(var i = 0; i < keys.length; ++i) {
     var bindObj = {key: keys[i]}
@@ -22,6 +23,27 @@ module.exports = function(set, app, data) {
 
     if(i === 0) {
       app.get('/d/default', func);
+      defaultKey = keys[i];
     }
   }
+
+  scriptMethods.getDefaultDataKey = function() {
+    return defaultKey;
+  }
+
+  scriptMethods.getInitDataFromCookie = function(cookies) {
+    var key;
+    if(Object.prototype.hasOwnProperty.call(cookies, 'last_generator')) {
+      key = cookies['last_generator'];
+    } else {
+      key = defaultKey;
+    }
+
+    if(!cache.hasOwnProperty(key)) {
+      data.generators[key].catId = key.split('/')[0];
+      cache[key] = JSON.stringify(data.generators[key]);
+    }
+
+    return cache[key];
+  }
 }

scripts/list.js

@@ -1,4 +1,4 @@
-module.exports = function(set, app) {
+module.exports = function(set, app, data, scriptMethods) {
   var setHeader = {
     categories: set.categoryNames,
     generators: {}
@@ -10,8 +10,14 @@ module.exports = function(set, app) {
     setHeader.generators[genKeys[i]] = set.generators[genKeys[i]].name;
   }
 
+  var setHeaderJson = JSON.stringify(setHeader);
+
+  scriptMethods.getGeneratorListJsonData = function() {
+    return setHeaderJson;
+  }
+
   app.get('/l/generators', function (req, res) {
     res.header("Content-Type", "application/json; charset=utf-8");
-    res.end(JSON.stringify(setHeader));
+    res.end(setHeaderJson);
   });
 }

util.js

@@ -0,0 +1,11 @@
+module.exports = {
+  formatTemplate: function(text, data) {
+    var keys = Object.keys(data);
+    for(var i = 0; i < keys.length; ++i) {
+      var key = keys[i];
+      text = text.replace('{' + key + '}', data[key]);
+    }
+
+    return text;
+  }
+}

www-root/index.html

@@ -9,7 +9,7 @@
     <script src="/js/jquery.js"></script>
     <script src="/js/ngn4-0.4.1.js"></script>
     <script src="/js/page.js"></script>
-    <style id="generator-style"></style>
+    <style id="generator-style">{generatorStyle}</style>
     <style id="name-style"></style>
   </head>
   <body>
@@ -29,4 +29,9 @@
     </div>
     <div class="ngn4-panel ngn4-footer"><p>Copyrighted content and trademarks are the property of the publishers and developers of the game series, and the developer of this website is in no way affilated with them.</p><p>By continuing to use this site, you agree to the use of cookies. These are only used to recall where you were between sessions, and are not shared with any third-parties.</p><p>This is still a work in progress, with bugs and poor optimization. I recommend you do not browse this website on a very limited metered connection.</p><center><a href="javascript:hideFooter();">CLOSE</a></center></div>
   </body>
+  <script type="text/javascript">
+    var initData = {initData};
+    var genList = {genList};
+    var inited = {inited};
+  </script>
 </html>

www-root/js/page.js

@@ -120,33 +120,39 @@ function updateLists() {
   $('#menu-items').html("Loading...");
 
   $.get('/l/generators', function(data, err) {
-    // 1. Categories
+    if(!err) {
-    var keys = Object.keys(data.categories);
+      setList(data);
-    var items = {};
-    $('#menu-items').html('');
-    for(var i = 0; i < keys.length; ++i) {
-      var key = keys[i];
-      var item = $('<div class="item" data-id="'+key+'"><span>'+data.categories[key]+'</span><div class="ngn4-panel"></div></div>');
-
-      items[key] = item;
-      $('#menu-items').append(item);
-
-      categories[key] = data.categories[key];
     }
-
-    // 2. Sub menus
-    keys = Object.keys(data.generators);
-    for(var i = 0; i < keys.length; ++i) {
-      var key = keys[i];
-      var item = $('<a href="javascript:selectGenerator(\''+key+'\')">'+data.generators[key]+'</a>');
-
-      $('div', items[key.split('/')[0]]).append(item);
-    }
-
-    applyMediaQueries(true);
   });
 }
 
+function setList(data) {
+  // 1. Categories
+  var keys = Object.keys(data.categories);
+  var items = {};
+  $('#menu-items').html('');
+  for(var i = 0; i < keys.length; ++i) {
+    var key = keys[i];
+    var item = $('<div class="item" data-id="'+key+'"><span>'+data.categories[key]+'</span><div class="ngn4-panel"></div></div>');
+
+    items[key] = item;
+    $('#menu-items').append(item);
+
+    categories[key] = data.categories[key];
+  }
+
+  // 2. Sub menus
+  keys = Object.keys(data.generators);
+  for(var i = 0; i < keys.length; ++i) {
+    var key = keys[i];
+    var item = $('<a href="javascript:selectGenerator(\''+key+'\')">'+data.generators[key]+'</a>');
+
+    $('div', items[key.split('/')[0]]).append(item);
+  }
+
+  applyMediaQueries(true);
+}
+
 function applyMediaQueries(force) {
   var mq = window.matchMedia("(max-width: 980px)");
 
@@ -190,14 +196,21 @@ $(document).ready(function() {
     $('.ngn4-footer').hide();
   }
 
-  var lastGenerator = getCookie('last_generator');
+  if(inited !== true) {
-  if(lastGenerator.length > 0) {
+    var lastGenerator = getCookie('last_generator');
-    selectGenerator(lastGenerator);
+    if(lastGenerator.length > 0) {
-  } else {
+      selectGenerator(lastGenerator);
-    selectGenerator('default');
+    } else {
-  }
+      selectGenerator('default');
+    }
 
-  updateLists();
+    updateLists();
+  } else {
+    var fullId = initData.catId + '/' + initData.id;
+    setGenerator(fullId, set.addGenerator(fullId, initData, true));
+
+    setList(genList);
+  }
 });
 
 $(window).resize(applyMediaQueries);