mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2026-08-23 05:07:51 +01:00
Merge pull request #3065 from VOREStation/vplk-nano-tester
Utility to test NanoUI templates outside of BYOND.
This commit is contained in:
Aronai Sieyes
@@ -0,0 +1 @@
|
||||
node_modules/
|
||||
@@ -0,0 +1,12 @@
|
||||
# NanoUI Template Tester
|
||||
A simple utility for previewing how NanoUI templates will look out of game, useful for rapid development cycles.
|
||||
|
||||
## Setup
|
||||
- Make sure you have Node.js ( https://nodejs.org/ ) installed.
|
||||
- Run `npm install` to install dependencies
|
||||
- Edit `index.js` to change the configuration to use the template you want to preview.
|
||||
- Edit `initialData.json` to contain the initial data that will be generated by your object's `ui_interact` proc.
|
||||
- Run `node index.js` and then connect at http://localhost:8000/
|
||||
|
||||
## While Running
|
||||
- You can update your template files, nano CSS or initialData.json at any time while the server is running.
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<script type='text/javascript'>
|
||||
function receiveUpdateData(jsonString)
|
||||
{
|
||||
// We need both jQuery and NanoStateManager to be able to recieve data
|
||||
// At the moment any data received before those libraries are loaded will be lost
|
||||
if (typeof NanoStateManager != 'undefined' && typeof jQuery != 'undefined')
|
||||
{
|
||||
NanoStateManager.receiveUpdateData(jsonString);
|
||||
}
|
||||
//else
|
||||
//{
|
||||
// alert('browser.recieveUpdateData failed due to jQuery or NanoStateManager being unavailiable.');
|
||||
//}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type='text/javascript' src='libraries.min.js'></script>
|
||||
<script type='text/javascript' src='nano_utility.js'></script>
|
||||
<script type='text/javascript' src='nano_template.js'></script>
|
||||
<script type='text/javascript' src='nano_state_manager.js'></script>
|
||||
<script type='text/javascript' src='nano_state.js'></script>
|
||||
<script type='text/javascript' src='nano_state_default.js'></script>
|
||||
<script type='text/javascript' src='nano_base_callbacks.js'></script>
|
||||
<script type='text/javascript' src='nano_base_helpers.js'></script>
|
||||
<link rel='stylesheet' type='text/css' href='shared.css'>
|
||||
<link rel='stylesheet' type='text/css' href='icons.css'>
|
||||
<link rel='stylesheet' type='text/css' href='layout_default.css'>
|
||||
</head>
|
||||
<body scroll=auto data-template-data='{{!it.templateDataJson}}' data-url-parameters='' data-initial-data='{{!it.initialDataJson}}'>
|
||||
<div id='uiLayout'>
|
||||
</div>
|
||||
<noscript>
|
||||
<div id='uiNoScript'>
|
||||
<h2>JAVASCRIPT REQUIRED</h2>
|
||||
<p>Your Internet Explorer's Javascript is disabled (or broken).<br/>
|
||||
Enable Javascript and then open this UI again.</p>
|
||||
</div>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,105 @@
|
||||
//'use strict'
|
||||
//
|
||||
// Mini webserver for testing NanoUI templates
|
||||
//
|
||||
const fs = require('fs');
|
||||
const http = require('http');
|
||||
const mime = require('mime');
|
||||
const path = require('path');
|
||||
const url = require('url');
|
||||
const dot = require('dot');
|
||||
|
||||
// Configuration constants
|
||||
var config = {
|
||||
"port": 8000, // Port to listen on
|
||||
"dir": "../../nano", // Path to SS13 nano folder
|
||||
};
|
||||
|
||||
// Choose your templates here. Hint: You'll probably never change layout, main is the one you want.
|
||||
var templateData = {
|
||||
layout: "layout_default.tmpl",
|
||||
main: "smes.tmpl"
|
||||
};
|
||||
|
||||
// In BYOND everything is sent to the client's byond cache, so its all in one flat directory.
|
||||
// On the actual filesystem here of course, its in subfolders. To emulate that we decide what
|
||||
// folder to look in based on file extention.
|
||||
const extFolderMapping = {
|
||||
".png": path.join(process.cwd(), config.dir, "images"),
|
||||
".jpg": path.join(process.cwd(), config.dir, "images"),
|
||||
".jpeg": path.join(process.cwd(), config.dir, "images"),
|
||||
".gif": path.join(process.cwd(), config.dir, "images"),
|
||||
".js": path.join(process.cwd(), config.dir, "js"),
|
||||
".css": path.join(process.cwd(), config.dir, "css"),
|
||||
".tmpl": path.join(process.cwd(), config.dir, "templates")
|
||||
};
|
||||
|
||||
// Read the shipped index.html as a doT template.
|
||||
var genIndexHtml = dot.template(fs.readFileSync('index.html', 'utf8'));
|
||||
|
||||
// the main thing
|
||||
var server = http.createServer( function(request, response) {
|
||||
|
||||
// extract the pathname from the request URL
|
||||
var pathname = url.parse(request.url).pathname;
|
||||
|
||||
// Exception for front page
|
||||
if (pathname === '/') {
|
||||
let initialData = JSON.parse(fs.readFileSync('initialData.json', 'utf8'));
|
||||
response.writeHead(200, {"Content-Type": "text/html"});
|
||||
response.write(genIndexHtml({
|
||||
initialDataJson: JSON.stringify(initialData),
|
||||
templateDataJson: JSON.stringify(templateData)
|
||||
}));
|
||||
response.end();
|
||||
return;
|
||||
}
|
||||
|
||||
// Map URL path to physical path.
|
||||
// First check our folder mapping
|
||||
var filename;
|
||||
var fileExt = path.extname(pathname);
|
||||
if (fileExt in extFolderMapping) {
|
||||
filename = path.join(extFolderMapping[fileExt], path.basename(pathname));
|
||||
} else {
|
||||
// Otherwise fall back to just a relative path to our base dir.
|
||||
filename = path.join(process.cwd(), config.dir, pathname);
|
||||
}
|
||||
|
||||
// console.log("Trying to serve ", pathname, " from ", filename);
|
||||
|
||||
// Does this path exist?
|
||||
fs.exists(filename, function(gotPath) {
|
||||
// no, bail out
|
||||
if (!gotPath) {
|
||||
console.warn("Path: %s File: %s NOT FOUND", pathname, filename);
|
||||
response.writeHead(404, {"Content-Type": "text/plain"});
|
||||
response.write("404 Not Found");
|
||||
response.end();
|
||||
return;
|
||||
}
|
||||
|
||||
// still here? filename is good
|
||||
// look up the mime type by file extension
|
||||
response.writeHead(200, {'Content-Type': mime.getType(filename)});
|
||||
|
||||
// read and pass the file as a stream. Not really sure if this is better,
|
||||
// but it feels less block-ish than reading the whole file
|
||||
// and we get to do awesome things with listeners
|
||||
fs.createReadStream(filename, {
|
||||
'flags': 'r',
|
||||
'encoding': 'binary',
|
||||
'mode': 0x3146, // 0666
|
||||
'bufferSize': 4 * 1024
|
||||
}).addListener( "data", function(chunk) {
|
||||
response.write(chunk, 'binary');
|
||||
}).addListener( "close",function() {
|
||||
response.end();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
// fire it up
|
||||
server.listen(config.port);
|
||||
console.log("Listening on port %d", config.port);
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"config": {
|
||||
"title": "SMES"
|
||||
},
|
||||
"data": {
|
||||
"nameTag": "Test SMES",
|
||||
"storedCapacity": 50,
|
||||
"storedCapacityAbs": 400,
|
||||
"storedCapacityMax": 800,
|
||||
"charging": 1,
|
||||
"chargeMode": 1,
|
||||
"chargeLevel": 100,
|
||||
"chargeMax": 250,
|
||||
"chargeLoad": 0,
|
||||
"outputOnline": 1,
|
||||
"outputLevel": 75,
|
||||
"outputMax": 250,
|
||||
"outputLoad": 45
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "nano-tester",
|
||||
"version": "1.0.0",
|
||||
"description": "Test NanoUI Templates",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"dot": "^1.1.2",
|
||||
"mime": "^2.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/VOREStation/VOREStation.git"
|
||||
},
|
||||
"author": "Leshana",
|
||||
"license": "AGPL-3.0"
|
||||
}
|
||||
Reference in New Issue
Block a user