Mipui Developer Guide

Mipui is a free web app for creating and editing maps for tabletop and role-playing games. This is the developer's guide; for a proper "about" page see the main site, or just jump right into the editor.

Implementation

Mipui is a hobby project implemented by just one developer with little background in web development; please don't judge the code quality :-) in particular while some areas underwent extensive planning (like operation_center.js) others were completely hacked together in an hurry (like menu.js).

It's a client-side web application, written entirely in Javascript. The server-side database is handled using Firebase. With the exception of Firebase and a couple of Javascript libraries used for exporting to image, no external code libraries are used.

Some Implementation Pointers

1. Gestures are used for drawing content on the map; but content can also come from non-gesture sources (e.g. loaded from the server), so every cell must know how to correctly draw its content even when no gestures are involved. This is why cells contain the "setImage", "setText" etc. methods, instead of those being a part of the image or text gestures.
2. Map synchronization is guaranteed by serializing the operations, so all clients agree on the order of all operations. Never break that invariant.
3. Two important global variables are content (from content.js) and state (from state.js). Go over these if you plan on doing any changes to content saved on the map.
4. Methods and fields which are intended to only be used inside the declaring class are marked with trailing underscore_ (but I occasionally break this convention myself).

Firebase Servers

There are three live firebase database repositories: mipui-prod, mipui-dev and mipui-test.

• mipui-prod is the repository serving the live version at mipui.net. Never use that repository.
• mipui-dev is the repository used for development. Feel free to use that repository when testing any changes. This is the default repository used when developing the app locally. Information in this repository might get wiped from time to time, though, so don't rely on it for long-term storage.
• mipui-test is used for running unit tests. Please immediately clean any information you create there.

Programmatic map manipulation

Maps can be saved and loaded in .mipui format, which is a JSON that encodes state._pstate (see state.js). To understand its format, go over content.js.

• props maps keys of type pk to various map property values, such as map name and dimensions.
• content encodes cell keys to cell values; cell values are a mapping of layer index to layer values; layer values are a mapping of content keys to content values, with the keys listed in ck.
• All content maps always contain the kind and variation keys; their values are indices in the ct structure.
• Entities that span multiple cells (e.g. text area) have their content stored in the top-left cell only. The top-left cell will also contain the key of the bottom-right cell. All other cells contain the key of the top-left cell.

Warning: the server is not hardened against malformed files, so manipulating a map can make it invalid and bring it to a state in which it could no longer be succesfully loaded. Don't do that on maps you care about (unless you fork first).

License

Testing

Testing is mostly manual, though a couple of tricky-to-test components have their own sets of unit tests. As a personal challenge I tried to write them without any test framework;I know it's a terrible practice but I just wanted to try. I do recommend using existing frameworks!