2016-03-04 Simple File Load using VanillaJS

Gridmapper allows users to save and load maps. As Gridmapper is a Javascript app, it runs in a sandbox and has no access to your filesystem. The maps are therefore saved in a dedicated Gridmapper Wiki. When loading a map, I need a user interface allowing people to click a link (a modal “open file” dialog would be the traditional way to solve this). Since I wanted a solution using VanillaJS, I simply show a div full of links. There’s no close button (it just fades after a while if you don’t click anything), there’s no scroll bar. And as the list of maps grew, I realized that I was running out of space. So now it adds more columns if possible. But still, this won’t scale.

Gridmapper

Gridmapper Wiki

VanillaJS

Then again, perhaps I’d better use the wiki to navigate: Clicking load opens the wiki, and on the wiki there’s a special kind of link that opens Gridmapper with a particular map?

Well, I still have a two or three columns to fill, so there’s no rush.

For the moment, I implemented an intermediary step: When the app loads, it looks at its own SVG code and initializes the data structures accordingly (in case the file was loaded from the file system), looks at the URL and loads a map if so instructed (this is the new part), or simply interprets the keys it sees (this is what “Prepare Link” would generate).

Let’s try the new thing: load The Sewer Prison.

The Sewer Prison

Now that we have a way to load maps via the URL, Gridmapper will add that URL to maps it saves to the Gridmapper wiki (using Oddmuse URL abbreviations, so-called interlinks). You can see the new link being added here, at the Demo Dungeon.

Demo Dungeon

​#Gridmapper ​#Javascript