UPDATE: Since I created this I've updated the script to apply all transforms with Python by default. The JavaScript method of shuffling elements is enabled only if 1) you lack the dependencies required by Python or 2) you specifically flag the program to use JavaScript. The advantage of doing it all with Python is that you don't have to wait until page content loads to see a responsive layout - it's already there. I've also created a comparison of the responsive and default web player layouts. And check out the README to see what Python packages you'll need to do the full HTML transform in Python.

~original post~

The default webplayer page format that gets exported from PICO-8 is great, but not quite excellent, since it only provides one display resolution. I decided to work with the structure and style a bit (using flexbox styles and media breakpoints) to make the canvas render at 290px, 580px, or 1160px wide based on what real estate is available. Also, the buttons collapse into multiple rows once the display gets small enough.

I came up with this.
(replace "[PATH_TO_YOUR_CARTRIDGE.js]" with your actual cartridge js file).

Try it out by resizing your browser window (if you open up the developer console you can use its border to make the window space even smaller). You won't get the highest resolution unless you're on a very high res display (e.g. 4k), since it checks for vertical space as well.

The thing is, this won't be easy to use if you've already made content or style changes to your page, or when the next iteration of the HTML export page is included in a future version of PICO-8.

So I wrote a Python script (click on "Raw" to download) that will, in one command, turn your existing webplayer page into a responsive one.

$ python transform.py cartridge.html

This will give you a "cartridge-responsive.html" file.

It works by inserting a new HTML style tag as a CSS override, and a bit of JavaScript that rearranges your page's elements immediately after the page loads. I was going to do that bit as part of the Python transform, but that would require people installing random Python libraries as dependencies. It doesn't really matter though, since the change happens as soon as the game is ready. The main disadvantage is that on a tiny display, the buttons will be overflowing the side of the screen until the game is finished loading.

The full source is all on GitHub.

Let me know what you think! If I did something wrong, feel free to discuss it here or submit a pull request.

P.S. If you like it feel free to give the project a star on GitHub. :)

Think you could host it somewhere, so we can see how it looks without having to set it up ourselves? Something like GitHub pages would work.

@Ivoah - sure. The main reason I'm hesitant to do that is that I haven't built any finished cartridges of my own yet, and I don't want to volunteer someone's work without permission. :P I can throw something together though.

By the way - I just updated the script dramatically so that by default it performs the HTML transform before saving the file. That way you won't need to wait on the game to finish loading before the JavaScript re-shuffles the page.

Caveat - you need to install a few Python package dependencies for manipulating HTML elements. If you prefer not to do this, just run the script without them, and it will fall back to JavaScript.

https://github.com/benwiley4000/pico8-responsive-webplayer-transform

Here - I created a GitHub pages comparison of the two. http://benwiley4000.github.io/pico8-responsive-webplayer-transform/pico8_responsive.html I'm using my object-oriented implementation of the Squash/Pong game from the first zine.

And I'll update the first post.