Wesnoth Canvas

[ancestral]

Wesnoth Canvas
A web site for displaying game maps for The Battle for Wesnoth.

You can view this live at http://mproud.com/wesnoth/canvas.



See the project page:
Github Project Page


What is Wesnoth Canvas?
This is a web site for display maps for displaying game maps for The Battle For Wesnoth. Part of it is an experiment and self-learning to the wonderful ways of JavaScript, jquery, and web design. As I continue to work on the project, it will eventually be a place to create, edit and save maps — and perhaps more.

Changelog
Version 2 Build 8
24 September 2012

• Started adding arrays of images for terrain. This is going to take time. During this time, the terrian may actually look worse as I haven’t “flipped the switch” so to speak, so the terrain will draw with the editor icon version instead of the nice‐looking version which I was using earlier.
• Continued refining logic for drawing terrain transitions using a bitwise method.
• Refined the cursor and made it so it appears in the entire window.

Version 2 Build 7
4 September 2012

• Added new cursor. Not sure how I like it; may revert to original one.
• Added transition map. This is the beginning for really drawing nice-looking terrain.
• Minor formatting changes to terrain table.
• Removed GPL license on images. (These are original works by me, after all.)

Version 2 Build 6
21 August 2012

• Added names for all terrain codes.
• Made status bar narrower.
• Added name of terrain when a hex is selected.

Version 2 Build 5
21 August 2012

• Fixed minor issue with status bar scaling on resize events.
• Reformated README.md.

Version 2 Build 4
20 August 2012

• Introduced Gentium fonts.
• Moved most variables into an object to avoid unecessary variable pollution.
• Implemented beginning of a status bar.
• Hex updates now working, only redraws when hex changes.
• Minor clarifications for licensing.

Version 2 Build 3
20 August 2012

• Modified UI logic so map scrolls better.
• Introduced nice border.
• Created status bar though not fully implemented yet.

Version 2 Build 2
7 July 2012

• Changes to key events.
• Added support for an interactive console.

Version 2 Build 1c
5 July 2012

• Moved out tBfW dependencies. You’ll need to download the game resources and place them on the server.
• Changed index.html to index.php, partially for dynamic data directory support.
• Altered canvases to include a viewport, and changes as the window resizes. This should hopefully help with performance.
• Fixed various bugs.
• Fixed path to hover hex images — finally.
• Fixed path to starting position flag.

Version 1 Build 1
26 April

• First entire upload of the project.

License
Files in the image directory are licensed under GPL Version 2 as per The Battle for Wesnoth project.
http://www.gnu.org/licenses/gpl-2.0.txt

Files in the font directory are licensed under SIL Open Font License 1.1.
http://scripts.sil.org/OFL

All other files are licensed under MIT.
http://www.opensource.org/licenses/MIT

Original Post:

I’ve got a cool little web site utility I’ve been playing around with for the past few days I’d like to show you. For now I’m calling it a Wesnoth Canvas Map Viewer. When finished, it will let you preview any Wesnoth map file online.

http://mproud.com/wesnoth/canvas/

Currently only working with Webkit-based browsers. I’m working on adding support for Firefox. (Patience is a virtue!)

Currently it can read and display the default multiplayer maps. Most hexes are supported; I’m gradually adding functionality to support everything a given map file can take.

Additionally, I’ll be looking at adding functionality to display tile transitions, as well as walls, castles, keeps and shoreline properly, though this may take a while.

It’s very much still in development and largely unoptimized. Please note that a page load may take up to 2 MB of bandwidth.

All Wesnoth assets are still protected under GPL v2; all my code is licensed under MIT.

Any feedback is welcome.

[ancestral]

I’ve updated the project so it reads virtually all hexes now.

At this point, the remaining thing to do is transitions. This could take some time, but the algorithm is relatively straightforward: check previously read neighboring hexes and draw transitions according to that. I also have some work to do with updating the terrain table data object.

Feel free to take a look. Note that this is only working with Webkit-based browsers; my aim is to eventually get Firefox working, and then maybe Opera and IE.

[ancestral]

Newest revision in trunk has introduced some new tiles, so I’ve included support with the map viewer.

At this point, I have a few different ideas, though I’m not sure which I should consider working on first here. I’d like to solicit your input on what you might be interested in seeing me work on next:

1. Terrain transitions so the map looks prettier, just like in Wesnoth
2. Map uploading tools so I can upload my map and see it
3. Map editing tools so I can make a map and download it
4. Support for my browser! I don’t want to have to use a Webkit-based browser

[lipk]

Support for my browser! (Firefox)
However, if I wasn't that selfish, I'd say 2. It'd be especially nice if you could make it possible to load maps from url, since there're some people who post their work on the mp forum as a text file, and I'm too lazy to download, place and load them just to see how do they look. (ohh, "if I wasn't selfish"... )

[Xudo]

[*]Map uploading tools so I can upload my map and see it

This one looks better than others.

[Shinobody]

Support for one of most popular browsers used doesn't sound selfish to me, it sounds more like necessity (and I'm saying this under Chrome, I just hate having to switch browsers to look on something...).
Though 2. sounds like must-have, too (to be of any actual use);
I'd put transitions on bottom of the to-do list, since it sounds most time-consuming and unpractical (it seems like only Cave Wall and Chasm terrains really need it, IMO).

[ancestral]

I like idea #2 also.

So I went ahead and registered a couple domains for a map bin site. Think Pastebin but for maps. Heck, while we're at it, why not have a Pastebin for Wesnoth with WML syntax highlighting. (I'm a little ahead of myself here…)

Keep in mind this is just an experiment, and that nothing is functional as of yet.

http://wsnthb.in/

[ancestral]

I have a usable "Wesnoth Bin" for code snippets with proper WML syntax highlighting. There is still some work to do: copy-paste within the code window still has some minor bugs, and there may be a minor input bug with IE. Otherwise, relatively recent releases of Safari, Chrome, Firefox and Opera should all work. Feel free to test it out if you'd like.

Next to do is enable the shortening algorithm so these bins can actually be saved. I'll hop back to the map bin and get that going as well. I'd like to have an art bin — we need a repository for this kid of stuff.

Next week is looking good for core functionality.

[Ceres]

I like this
There's just one problem I noticed: things like <b> are omitted by the syntax-highlighted code, but left in by the original code. This leads to messes like this:

pangoerror.PNG (9.29 KiB) Viewed 17937 times

[ancestral]

Hmm, you’re right — good catch.

It looks like I need to <pre> the whole code window and avoid copying that to the mirror (what you see). parse the code window spaces and line breaks more meticulously. But it’s definitely fixable.

[lipk]

Works like a charm with Firefox, however, I'm having a strange problem on Chromium 18 (which is quite ironic, because I installed that only to have a browser compatible with this awesomeness ). It seems as if there were two layers of text, one with syntax highlighting and one without. Tabs in the colored text are ignored, so there's an offset between the two layers too.
Here's a screenshot:

(note: the uncolored text has double indentation compared to Firefox, so probably those missing tabs do exist, just in the wrong buffer)

[ancestral]

Back to maps.

I’ve updated the page slightly so you can paste in your own code and it will update automatically.

Still well aware Firefox isn’t playing nicely. I’m pretty sure it has to do with image preloading. I’m working on a solution.

[Gambit]

Very cool and worked perfectly in Chromium 18.0.1

[ancestral]

Alright, I’ve just finished what I’m calling Canvas 2.0.

The biggest thing is… Firefox Support!
Also, the canvas auto-resizes to the window. Use the arrow keys to pan the canvas; perhaps I can add mouse panning later.

As always, more to come.

[ancestral]

Small update.

Map scrolling is quite a bit better and there’s a nice, resizable border. (Remember to use arrow keys to navigate.) Still working out the multi-canvas logic. Also, auto-populating and auto-hiding the map code after initial load.