Wildstar Interactive HTML5 Map
Installing
In order to build you need to install all necessary modules via npm. (If you do not have node installed, please visit http://nodejs.org/ before proceeding.)
As the npm-package canvas is used, you might need libcairo as well as libjpeg, libpng and libgif. Please refer to https://github.com/automattic/node-canvas for instructions on how to install or if you are on debian/ubuntu, just type:
$ sudo apt-get install libcairo-dev libjpeg-dev libpng-dev libgif-dev
Once you have node and the dependencies for canvas installed, you may proceed to install all needed packages by typing:
$ npm install
##Building There are several steps you need to take in order to build the map:
- Creating the map
- Building the client
- Linking or copying the client into your webroot
- Setting up the database
- Setting up the server
I will explain each step to you in detail now:
###1. Creating the Map
After cloning the repository the whole map will be in the folder original/
just the way it was extracted from the game but converted from .tex to .png.
In order to use the map on the web it will have to be assembled and then disassembled into several levels of zoom (default: 8).
This step will take it's time, so type
$ grunt maps
and go make some pizza, go for a walk or browse some imageboards.
After the map was created there will be a folder htdocs/
with the two
subdirectories htdocs/map_east/
and htdocs/map_west/
which contain the
actual map just the way the clients will download it later on as well as a
directory big/
which will contain two large images (the assembled maps)
which you might delet if you are spare on diskspace, print out and pin on your
wall or set as wallpaper.
###2. Building the client This is probably the most simple step of the whole process, just type
$ grunt client
in order to build the client (uglify the javascript, compile the less-sources to
css and copy everything significant into the htdocs/
directory.)
After you did this, the htdocs/
directory will contain all necessary files to
be hosted on the web.
###3. Linking or copying the client into your webroot
After step 2 the client should be ready built in the htdocs/
directory and now
just needs to be published somehow. The easiest way is definitly to just link it
into your webroot, on debian with apache2 as simple
$ ln -s /absolute/path/to/repository/htdocs /var/www/wildstar
will do, but feel free to create virtual hosts or even copy the whole folder somewhere else.
###4. Setting up the database There is a server which will provide all locations on the map as well as their vote-scores and categories via HTML5-Websockets. It has to be constantly running in order for the website to work. All it's data will be stored in an mysql-database.
There should be a file named database_config.json
which has to contain all
significant data to connect to your database.
An example-file would look like this:
{
"host": "localhost",
"user": "<user>",
"password": "<password>",
"database" : "<database>"
}
(You of course need to replace of , and with the correct information to log into your database.)
All tables will be created automatically after typing:
$ grunt setup-database
This command will not only create the tables but also create all categories in the category table.
###5. Setting up the server After the database was setup successfully you now have to configure the server. Typing
$ grunt serverconfig
Will create a new example-configuration which should be suiting perfectly for most users. it will look somehow like this:
{
"port": 45673,
"host": "0.0.0.0",
"htdocsDirectory": "./htdocs/"
}
If you copied the htdocs/
directory instead of linking it, you need to set the
absolute path inside this config-file in order to enable the server to tell the
client on which port it has to connect.
Alternativly (or if you cannot allow the server to write into the clients
directory) you can do this manually by creating a file named port.js
in the
same folder the index.html
is contained.
Paste the following into this file:
/*
* This file tells the client on which port it has to connect
*/
var _port = 0;
And change the value of _port
to your respective portnumber.
##Running After setting up everything you may start the server by typing
$ node server/server.js
which will start the server. If everything goes fine it should look somehow like this:
$ node server/server.js
Connecting to Database ... Done.
Starting websocketserver ... Done.
After the server was started you can now access the map depending on how you
integrated it into your webroot. If you just linked it,
http://localhost/wildstar should work just fine. If you get permission-problems,
you might need to add global reading-permissions to your htdocs/
directory
$ chmod ugo+r htdocs/ -R
Please keep in mind, that the server needs to write into this directory in order
to tell the client the correct port so if you chown
the directory, make sure
the user the server runs with has permission to write into it.