Hacker News new | ask | show | jobs
by toddr123 2128 days ago
Hey everyone, this is a project I've been working on for a little while now, it's a map drawing tool for tabletop role playing games like D&D, ShadowRun, etc. It's still in development, but has quite a few features already, most recently adding support for importing randomly generated maps from https://donjon.bin.sh/d20/dungeon/ and supporting publishing your completed maps to https://fictionalmaps.com.

It's made entirely in html and pure javascript, running completely client side. It also has support as a progressive web app with offline support if you want to use it on the go. I'd love to hear what you all think about it! New bug fixes and features are frequently being added

5 comments

i just played with it a bit and it's kind of awesome! It takes like 5 min to get the hang of it. I didn't notice until I came back here about publishing completed maps, that's great too. Passed along to my (many) game playing friends. If you decided to open source it I would join on for sure.

Why is the hallway tool called "snap to grid"? That was the one I couldn't figure out how to get back to because it's a non-intuitive name imo. When I went back in just now and restarted doodling, I saw that was the tool highlighted.

Also, the way the wall tool works is harder to use than the way the "hallway" aka "snap to grid" tool works, imo the latter is more intuitive.

Just some thoughts! Awesome work!

Thanks for the feedback! I find it interesting you call it a hallway tool, I've never heard anybody refer to it that way before. When I first started, I had the free form drawing, and loads of people were requesting snap to grid options, so I added that as its own tool cause it had a few options specific to it. I personally use it to draw entire maps, as I often find it quicker to fill in a room than switching to the room tool and back. That's how I ended up with that name, and why I feel something like hallway is a little bit too specific for what it does.

I based the wall tool off of the line tool, since I assumed straight walls are the most desirable for people. How would you suggest making it work more similar to the snap to grid tool?

Thanks again!

This is really cool, thanks for sharing! It would be great if the hover text for the tools also displayed the keyboard shortcuts that I found in the nice and easy-to-read JavaScript :)
Amazing project! Really enjoyed playing around with it just now - so easy to create a functional and great looking map. When you say pure javascript, did you use any frameworks or supporting libraries? If not then how did you organize the code (and do you do have any type of automated testing?)
Thanks! And nope, there's no frameworks or libraries in use, other than some helper modules I wrote for past projects and used in this. The code is mostly just organized as each tool being its own class, having a few common methods such as mouseDown, mouseMove, drawCursor and so on, with the main class passing off events from the user to whichever tool is selected. I forked this code off of a previous project, so parts of it are still a little messy due to me enjoying adding new features more than I enjoy refactoring code, but I tried to make it pretty modular from the beginning so it's easy to build on.

At the moment, there's no automated testing, I have a Patreon set up where a decent number of people are helping me beta test new features, but for the time being, I just do my best to avoid adding any regressions, and try to fix them quickly if they do show up.

Much closer to what I need than previous contenders! Now, if only it were open source (compile on your own) and was embeddable (as a web component?) for easy integration into other platforms...
Does the author plan to open source it? I would love to.
At the moment, I'm not planning to, just cause right now it's my own mess of code, and I feel like bringing on extra people would give me a bit more managerial work than I'd like.

That being said, it's all plain javascript, there's no backend, nothing is really stopping people from looking at all the source code

nice work. you want to validate your inputfields tho: number of sides -> 9999999999 -> use and browser tab crashes. :)
I like to let people set their own limits wherever possible, it's not really my business if someone wants to make an incredibly round circle and crash their web browser :P You raise a good point though, some of those could have a more sensible restriction on them just to avoid really unnecessary cases, thanks!