I thought of adding mobile support, just to make this available for more people; the basics were working already, but it needs responsiveness.

The biggest issue was how the map was being fit to be shown completely through the width, which didn’t work at all in portrait mode. My first idea was to have procedural generation be responsive and place the map nodes in the portrait area, but then I remembered having the pre-seeded scenarios is a key feature and that would make the experience in mobile differ.

As I write this post, now that I think about it I could have made it work, if I changed the cardinal directions so that it pointed up West instead of North. But in any case the solution that wound up in is better UX: I made the map fit vertically and added panning so the player can drag sideways to explore the rest of the map; this additionally provides him with nice sized buttons.

The UI had to be adapted as well to two lines at the top, and the city/unit panel was located anchored at the bottom. The onboarding tips were moved to the top and the onboarding was adapted so it didn’t require positioning on top of the capital city, which was causing conflicts with the HUD. I also added a safe area at the bottom to prevent the bottom anchored panel form obscuring cities and preventing interacting with them.

All was fine, it worked great, but it was 443 bytes over the limit, so it was time to start cutting.

The first thing I did was removing stats we were tracking that were not core to the experience: cities taken, cities lost, hosts broken, gameplay time (as in, clock time). I left only the in-game days which is the real success metric. I also gave a look at shortening texts.

None of that was enough, so I asked claude to investigate where we could cut; luckily before checking into actual features, it found out esbuild was NOT doing proper property mangling! just activating that while setting a proper allowlist gave us 316 bytes back.

Now time to playtest in mobile!