Support for Frosthaven

[cafelizardo]

Is your feature request related to a problem? Please describe.

Add support for Frosthaven

Describe the new feature you'd like

My groups have been very happy using the virtual gloomhaven board even as we play in person as it's so much more convenient and easier for setup and cleanup and of course when some of us are playing remotely. One of my groups has started playing Frosthaven in person but my other group is wondering how we will be able to play remotely. Is the artwork available?

[hobnob]

The general reply to this in the last few months has been 'Lets wait and see what the Creators Pack looks like', but having done some digging I actually think we might be in a good place to start implementing Frosthaven.

So the short answer is: Yes, lets do it! There are assets available here, which is by the same people that supplied a lot of the assets that we use in the VGB already, and they look to be of a higher quality than the images that are currently used.

However, I don't know what that's going to look like yet to be honest - I've never been fully happy with the VGB codebase (it was flung together as a pet project so me and some friends could play Gloomhaven over lockdown) and it certainly isn't in a great position for extending in the way Frosthaven needs it to. It may be that we take a step back and rethink the whole process, how it works and why certain descisions were made, or it may be that we just plough ahead and find a suitable place within the existing codebase.

The scenarios are going to be a majority of the work here I think - if I remember correctly each scenario takes about an hour to get into the project once the assets are in, and there are about 214 scenarios (including solo scenarios). I'm also currently working on a different project, so I'll have to put that into a good state first before I begin this. All in all we're probably talking many months of work, similar to the time it took to do the initial VGB.

I'm going to keep this issue open, so we can keep track of what needs doing, and where we are along the road. If nothing else it'll serve as a pointer for anyone else interested in the state of Frosthaven. As with a lot of the big features in the VGB, this will comprise of lots of releases where nothing appears to have actually been done, but lots of work is happening behind the scenes. The following may grow as new requirements are discovered, but on the whole once they've all been done, we should have Frosthaven in the VGB:

• [x] Look at the codebase and decide what to do with it
• [ ] Move from Elm to Tyrian & Indigo (#100)
• [ ] Add new map tiles and supporting data structure
• [ ] Add map tile outlines for new map tile shapes
• [ ] Add new characters to character selection
• [ ] Add new monsters
• [ ] Add new obstacles/wall/etc
• [ ] Add scenario data (0/214 done)
• [ ] Check for new rules, and implement as appropriate
• [ ] Add a new theme for Frosthaven (might be a nice to have)
• [ ] Activate Frosthaven option

[cafelizardo]

I would be willing to help wherever I can even if it's "data entry" and testing, and can probably find others to help in that regard. I am a software developer doing mostly server side c++/java/script data-processing and pipeline and have dabbled with web technologies in the past.

[hobnob]

Hi @cafelizardo thanks for the offer! 🙂

So the very first thing to do is to standardise all of the images Worldhaven have a selection of images for the map tiles, but each map tile has a different size for each of the hexes, and will need standardising. We use a hex size of about 77 pixles in the VGB, so each map tile would need to conform to that. To do this I think we'll just need to take the hex size of the map tile and get the hex size as a percentage of the size we're after. Then just shrink the image by that percentage. It's not the most rewarding work in the world, but would you be able to do it at all? The images can live in VirtualGloomhavenBoard/assets/img/map-tiles/frosthaven/ for now. If you could raise a PR with that work in, I can link it here and we can tick it off when it's done. I realise it's not the best job in the world, so don't feel you have to do it 🙂

Meanwhile I'm going to move the codebase over to our game engine Indigo. The codebase in Elm isn't very easy to maintain, and in some scenarios the game feels more jerky than I like. This makes the job a little bigger, but should be worth it in the end 🙂

[cafelizardo]

Yes I believe I can work on this. I took a quick look at the file fh-01a-snow.png and I was able to shrink it down to 68% which might be a tad too much but it got pretty close. I don't suppose there's away to determine groups of map tile images that can be resized using the same percentage? Is there a way now or soon be a way to test the changes using vgb? Do you have a time frame of when you'd like this to be done?

[hobnob]

78 pixles in size, not 77 🤦

[hobnob]

Excellent, thanks @cafelizardo ! Unfortunately because every map tile is of a different size there's no way of testing which tiles need resizing. There's no way of testing it in the VGB at the moment, but I'd like to make a tool that allows us to view it in situ, and set up things like offset positions (as each tile needs offsetting before it matches the grids on VGB). Unfortunately I don't have a time frame on any of this, but I'm hoping that it will only be a few weeks before we can see all of this in a VGB test area somewhere 🤞

[hobnob]

I should also mention that the 78 pixels is the width of the rectangle, not the height of the hex.. just for clarity

[cafelizardo]

Yes I measured the width of the hex using the parallel lines not an edge or between vertices.

[hobnob]

Hi @cafelizardo

I got to thinking about the tool I'd like to see to help with positioning etc, and this is what I came up with. It's incredibly rough around the edges (I just threw it together), but it should help a lot. If you download that HTML file and run it in a browser it will allow you to do almost everything we need to get the image data in. Here's how it works:

• Select the image you want to use from the Worldhaven repo on your local machine
• Scale and position the image using the arrow buttons until the image is correct (this is fiddly, but as a rule of thumb the image (excluding tabs) should fall within an exact hexagon on each side)
• Click on the hexagons that are valid areas on the tile (i.e. not walls or partial hexagons) - they should go green. You can click again to deselect
• Once done, download the image in the 'Data' portion of the page to the local virtual gloomhaven board repo
• Select the JSON in the 'Data' portion of the page and save it somewhere in the same repo (maybe a 'data' directory)

It should work in everything except Internet Explorer, in theory. But I've only tested it in Firefox :-/

It's still a little fiddly, but much better than loading it into an image editor and trying to get it right :-)

Hope that helps!

[cafelizardo]

Sounds workable but not sure where to put the file tooling.html. Did a checkout of the repo, and started to build and running into lots of dependencies. Do you have a list? My laptop is a Mac so running Safari but I might be able to run this on a headless linux server. Is there another channel we can discuss some specifics such as slack or something?

[hobnob]

Just open tooling.html in a browser and it should just work 🙂 At this stage you don't need to build or compile anything, as it's just getting the assets in the right place.

We can always set up a DM in Slack, but I'll need an email address 🤔

[cafelizardo]

Okay got it to work using a Windows Desktop using Firefox. Also got it to work on my Mac laptop using Firefox 112.02 on macOS 12.6.5 Monterey and 10.15.7 Catalina. Does not work with Safari 16.4.1 or 15.6.1. I just get an error saying it could not load the file. Have not tried Internet Explorer.

I followed your instructions for the first file fh-01a-snow.png and created a json file called fh-01.snow.json which I put in a subdirectory called data. I also updated the value of tileset to "fh-01.snow". If this change is needed it would be nice to set the field when you load an image file.

Other suggestions are to add support to use the arrow keys as well as clicking on the buttons and print the scaling factor on the screen. Finally it would speed things up if you could create a button that would save the two files or at least a button to copy the contents of the json data window to the buffer so I could quickly paste to a file.

[hobnob]

To be honest, I'd just seen this as a quick hack tool to get things going and make things a little easier 😛 The tileset name should stay the same as this will be used internally (we don't really need to know the snow part for instance, just the unique reference value '01a'). I've set out the json as I imagine it loading into the app, so it should just be a copy + paste job. If you raise a PR we can go through the general structure and agree something that works. I'll see what I can do in terms of keyboard shortcuts etc 🙂

[cafelizardo]

Yeah after working on a few more files I decided to leave the contents of the json file as is. What about the file names of the image and corresponding json files? Use just '01a' or prefix with 'fh-' and/or the descriptive suffice like '-snow'? Should I leave the .png and .json in the same directory? I'm just wondering how you will keep the original gloomhaven files separate from the frosthaven files and possibly crimson scales?

[hobnob]

Shall we go for something like 01a.png? Don't worry too much about where they're stored, as I'll probably move them around a bit as I find a good fit (I suspect in some sort of image folder under gloomhaven/frosthaven subfolders).. for now lets make a folder called maptiles and put them in there 🙂

[cafelizardo]

ok. I'll put the .png and .json in the same directory for now without prefix or suffix. Oh, was I suppose to save the images with the cell's selected? I was thinking that was only to confirm the hexes were correct.
Rather than supporting keyboard arrow keys to resize, it would be nice to be able to enter size and x/y offset values into a text box to speed up the process.

[cafelizardo]

Can you show me an example set of files for one of the fh images so I can make sure I am doing this correctly? Looking for a reduced png and a json file to compare.

[hobnob]

Sure no problem - I'll get those sorted for you later on today. I'm gonna make some amends to the tooling.html as you suggested (keyboard events) just to make things a little easier 🙂

[hobnob]

Hi @cafelizardo,

Heres an image that's been scaled and associated JSON for the a1a tile in Gloomhaven:

{
    tileset: "gloomhaven",
    mapRef: "a1a",
    offset: {
        x: -16,
        y: -34
    },
    cells: [
        { x: 0, y: 0 },
        { x: 1, y: 0 },
        { x: 2, y: 0 },
        { x: 3, y: 0 },
        { x: 0, y: 1 },
        { x: 1, y: 1 },
        { x: 2, y: 1 },
        { x: 3, y: 1 },
        { x: 4, y: 1 }
    ]
}

This is all going to be very new to the Virtual Gloomhaven Board, as I'm improving how we store all this for the re-write, so where it's stored matter a lot less than the data being correct 🙂

As you suggested, the tool has been updated with keyboard support and a copy button for the JSON text, so it should be a bit easier to use now 🙂

[cafelizardo]

Okay that helps. I’ll have to go back and redo the first set of files. Should have asked for this earlier. Will check the new tool later.

BTW what’s the best way to exchange contact info without leaving my email here?

[hobnob]

Hi @cafelizardo, sorry it's takken so long to get back to you. You can email me at info@purplekingdomgames.com with your email and I'll start a Slack chat with you 🙂

[cafelizardo]

Howdy @hobnob, have you had a chance to look at the map tiles and json files that I have been adding to my branch?

A couple of suggestions:

1. option to rotate the images tiles by fixed degrees.
2. Show +/- magnification value to make it easier to quickly get to the same zoom as other maptiles
3. Option to toggle selected tiles on an off.

[hobnob]

Hi @cafelizardo

Yes I'd had a look at image rotation, and couldn't get it working the way I wanted without a lot of work. The others I can get done though at some point, although this week looks pretty busy. The map tiles look good - I won't really know until I've written the import script, which is low on my priority list at the moment with the re-write... but itr all looks good 🙂

Thank you so much for helping with this! Much of the difficulty with this kind of work is the data entry, and so not having to worry about that is a massive weight off my shoulders 🙂