Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
The pure javascript client for The Lacuna Expanse.
JavaScript CSS
Failed to load latest commit information.
app Cleanup comments
.editorconfig Add an editor config because I normally use 2 spaces for tabs rather …
.gitignore Remove ghost RPC counter
.jshintrc Implemented stores for server, body and empire.
Gulpfile.js Initial version of new UI design.
LICENSE
README.md Wrote some documentation and cleaned up some code.
package.json Implemented progress bars indicating how full storage is.

README.md

Lacuna-Web-Client

The files contained herein are the front end code that make up the game called "The Lacuna Expanse". This code is distributed under the terms set forth in the LICENSE file. For more information about The Lacuna Expanse visit The Lacuna Expanse. For more information about The Lacuna Expanse Developers Program visit Lacuna Developers.

Code Climate Dependency Status devDependency Status Lacuna-Web-Client size

Hacking

Lacuna-Web-Client requires Node.js to hack on. For installing, see their installation guide.

Setting up and running everything should look something like this:

git clone https://github.com/<your-username>/Lacuna-Web-Client
cd Lacuna-Web-Client
npm install gulp -g # installs the build tool, gulp. This should be a once-off.
npm install # installs the dependencies for building and running the code.
gulp dev # compiles js/css and launches dev server.

Note

I (1vasari) have a personal list which I'm working from at the moment. This is because issues are not switched on for this repo. It can be found here. If you have any requests for the client it would most likely be best to send them to me via Lacuna Expanse's mail system - my empire name is 1vasari.

Development

The following are some notes and conventions about the changes that are happening here. The client is slowly being transitioned over to some new libraries and a new structure. They are as follows:

  • Semantic UI
    • This is the CSS framework that makes everything look pretty.
    • Semantic UI also has a JavaScript component that is jQuery-based.
  • React
    • React is described as the V in MVC. It's only responsible for managing what the page looks like.
  • Reflux
    • Reflux is an implementation of Facebook's Flux structure which is used in conjunction with React.
  • Lodash
    • Lodash is just a general purpose utility library.
  • Gulp
    • Gulp is the build tool. Think of it like make or ant.
  • Browserify
    • Browserify is the tool that gets all the dependencies and all the files in the project and smashes it all together into one file.

Conventions

Actions

See Actions.

There are several ways to define a set of actions. In this project, the following is used:

var Reflux = require('reflux');

var StatusActions = Reflux.createActions([
    'foo',
    'bar',
    'baz'
]);

Stores

See Stores.

There are several ways to define a stores and listen to actions. In this project, the following is used:

var Reflux = require('reflux');

var StatusStore = Reflux.createStore({
    listenables: SomeActions, // See above

    getInitialState: function() {
        return '';
    },

    onFoo: function() {
        this.trigger('Foo was clicked.');
    },

    onBar: function() {
        this.trigger('Bar was clicked.');
    },

    onBaz: function() {
        this.trigger('Baz was clicked');
    }
});

Components

See React Components.

There are several ways to define React Components. In this project, the following is used:

var React = require('react');
var Reflux = require('reflux');

var Demo = React.createClass({
    mixins: [
        Reflux.connect(StatusStore, 'status')
    ]
    render: function() {
        return (
            <div>
                <button type="button" onClick={StatusActions.foo}>Foo</button>
                <button type="button" onClick={StatusActions.bar}>Bar</button>
                <button type="button" onClick={StatusActions.baz}>Baz</button>
                <br />
                <p>
                    {this.state.status}
                </p>
            </div>
        );
    }
})

Windows

Every single window in the game (Stats or Mail, for example) need several things. We'll use the "About" window as an example.

Actions

AboutActions: app/js/actions/window/about.js

All interactions (show, hide, load) are called from here. This is pretty simple.

Stores

Each window should have both of these stores (or more, depending on the data the window needs from the server).

AboutWindowStore: app/js/stores/window/about.js

This store is simply for storing a Boolean value which indicates weather the window should be shown or not.

CreditsRPCStore: app/js/stores/rpc/stats/credits.js

This store is responsible for storing the data that comes from the server. It's then used by the component to show interesting things to the user.

Components

AboutWindow: app/js/components/window/about.jsx

There's nothing fancy here. It's just a React component that uses some data.

Server Calls

I've implemented a new module for sending requests to the game. It's usage and documentation is below.

var Reflux = require('reflux');

var server = require('js/server');

var SomeStore = Reflux.createStore({

    // NOTE: store setup not shown for simplicity.

    onSomeAction: function() {

        server.call({

            // Self-explanitory
            module: 'stats',

            // Self-explanitory
            method: 'credits',

            // Self-explanitory
            params: [],

            // This option determines weather the session id should be auto-magically added into the
            // params. It's default is `true` so it should almost never be needed.
            addSession: false,

            // This function gets called when a request succeeds and is passed the resulting data.
            // In the case of a store, unless you want to modify the data, simply give it
            // `this.trigger` and send the data on its merry way to the component.
            success: this.trigger,

            // Errors are shown to the user every time they occur. Therefore, this callback is only
            // required for component-specific error handling or whatever.
            error: function() {
                // Perform magic tricks here.
            }
        });
    }
});

Extra Notes

  • Do not require('jquery')! Instead require('js/hacks/jquery'). We have to do this because we need to manually attach the Semantic UI JS code to the jQuery object. The details aren't really important, just remember to require the right one. :grinning:

Gulp Tasks

In this project, Gulp is used to manage building the code. All the tasks that can be run are documented below. Note: there are several undocumented tasks. This is intentional as they are small parts of a larger task.

build

gulp build

Runs the entire process of pulling all the JavaScript/CSS together and creates minified versions of them. This is also the default task, meaning that running just gulp in the command line will run this task.

dev

gulp dev

This puts all the JavaScript and CSS together and starts a web server to run the web client. Open up a browser to the US1 mirror page and you should see the it working. It also watches for changes to the code and restarts when it sees anything changed.

serve

gulp serve

This just runs the server for running the client in a browser.

Something went wrong with that request. Please try again.