gisle/ngn4.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
gisle
2016-03-25 18:53:04 +01:00
parent 35f065e19e
commit 512b7e3cd0
8 changed files with 131 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.js
+22 -3
View File
@@ -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.sendFile(path.join(__dirname + '/www-root/index.html'));
res.header("Content-Type", "text/html; charset=utf-8");
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
+2
View File
@@ -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
+16 -1
View File
@@ -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
+23 -1
View File
@@ -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
+8 -2
View File
@@ -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
+11
View File
@@ -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
+6 -1
View File
@@ -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
+43 -30
View File
@@ -120,33 +120,39 @@ function updateLists() {
$('#menu-items').html("Loading...");
$.get('/l/generators', function(data, err) {
// 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];
if(!err) {
setList(data);
}
// 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(lastGenerator.length > 0) {
selectGenerator(lastGenerator);
} else {
selectGenerator('default');
}
if(inited !== true) {
var lastGenerator = getCookie('last_generator');
if(lastGenerator.length > 0) {
selectGenerator(lastGenerator);
} else {
selectGenerator('default');
}
updateLists();
updateLists();
} else {
var fullId = initData.catId + '/' + initData.id;
setGenerator(fullId, set.addGenerator(fullId, initData, true));
setList(genList);
}
});
$(window).resize(applyMediaQueries);