I used it that way too to make a fast-and-dirty browser-based, old-school hack n...

I used it that way too to make a fast-and-dirty browser-based, old-school hack n' slash.

https://one-map.netlify.app/

An artist that I follow makes procedurally generated dungeons and villages and such.

https://watabou.github.io/

I noticed that he made it possible to export JSON and SVG files from his one-page dungeons. I decided that was enough to turn them into an actual mini-game. This app takes his procedurally generated static maps and makes them interactive.

There's nothing here I did not already know how to do, but I leaned on Chat GPT to generate code. e.g.

  Me: As the avatar moves around the map, it would be nice to center it. Possibly zoom in and such. I'm thinking that the `transform` attribute of the map could help.

  Chat GPT: Yes, you could use the transform attribute of the map to achieve this effect. The transform attribute allows you to apply various transformations to the SVG element, including scaling and translation.

   To center the avatar, you could use the translate transformation to shift the map so that the avatar is in the center of the viewport. For example, if the avatar is at position (x, y) on the map, you could center it using: <code snippet>

To be honest, parsing through the SVG was just so tedious I would have moved on and not completed the project. As it was, a few nights. Boom! Little game toy thing.

Some other tasks I had for it that saved tons of time:

  * Given these  css rules below, can you combine them so that each is declared once?
  * Could you suggest a mysterious, dark, but not black color for the background of the dungeon map?
  * Could you give me a nice CSS dropshadow for the avatar?
  * Could you suggest several Google fonts that would be good for a dramatic Dungeon title/headline?  Please include links.