Implement canvas-based Dwarf Fortress display in the web interface.

[Noeda]

I cannot be sure, but I suspect the web interface itself is a major source of perceived lag. The current display is implemented as a two dimensional grid of -objects that get their classes and text contents changed all the time, probably triggering nasty, performance-killing things like reflows.

I think it may be worth it to experiment with a canvas object to see if it was faster and more CPU-friendly.

[lethosor]

I've started working on this (repo). It can load fonts from images, like DF, and will also support different foreground and background colors (hopefully it'll support transparency as well, once I figure out how to do that in JavaScript). Speed shouldn't be much of an issue with a canvas, as long as the browser is decent (which most browsers that support websockets are).

[lethosor]

Here's a demo.
Once I can get the plugin built on Linux, I'll rewrite terminal.js to use this instead.

[lethosor]

I should be able to get this done pretty soon – I've managed to get DFHack almost working (hopefully that'll be done soon). I'll also be able to fix any playing UI problems that #18 caused, although I haven't heard of any since that was merged.

[Noeda]

I think we should rewrite the web interface part while we do this.

Currently it's all very inconsistent. The admin panel HTML is generated on the server side whereas the playing interface is implemented with text-file HTML. There's a mix of ad-hoc written JavaScript, jQuery and Bootstrap and I find the thing annoying to work with.

I'm thinking of doing this:

• Implement the web application as single-page application. Communication with the server is limited to passing JSON around in a WebSocket connection (and serving the static files).
• Implement both admin panel and playing interface in the same page.

I think this would significantly simplify the web code I currently have on the server side. I could have a well-defined JSON API and those are fun to write. However, I have no experience with implementing this kind of thing on the client side. Any thoughts on this?

[lethosor]

I would definitely like more consistent JS. :) (Admittedly, part of it is my fault, since I added a lot of bits and pieces in various locations back when I was working on the web UI and never got around to organizing them).
Anyway, it looks like the current html implementation is a lot faster than my JS one - drawing things on the canvas at 10 FPS takes about 50-60% CPU power for me on Chrome, compared to 10-15% with the current UI. I'll try optimizing it when I get a chance, and possibly find a way to emulate the compositing DF uses.