PICO-8 Styler

Current feature list:
-Page colours can be customized (background, button background/hover, text)
-Canvas scale can be customized, has no border, and defaults to 512x512
-Canvas is centered horizontally and vertically
-Canvas and buttons use image-rendering CSS for sharper fullscreen viewing
-First script tag includes "var require = null;" in order to address a node.js issue which prevents PICO-8 games from running in things like NW.js
-Buttons are "text-align:center" instead of "float:left"
-Buttons are slightly smaller to better fit default canvas size
-Button text can't be selected
-Buttons can be excluded
-Link button label/target can be customized
-Page can be autofocused for more accessible iframe embeds (without this, sometimes PICO-8 games won't receive input until you click on a button)
-HTML5 Gamepad API support can be included for singleplayer or multiplayer

If you have ideas for more useful features, feel free to contribute on GitHub or send me suggestions!

Hey, this is pretty cool man! Nice work.

Very nice! I'll make sure to bookmark this! Can you also make it so the buttons are changeable? Like being able to remove different buttons; reorder them; change their icons and labels; and, in the case of the Carts button, change the link? Mainly, I'd just like to be able to remove the Fullscreen and Carts buttons, so I don't have to link back to BBS and because Fullscreen doesn't work correctly in NW.js (can't exit fullscreen). Speaking of, could you also have the option to have the buttons centered along with the canvas, so that there isn't empty space above the canvas?

EDIT: Fix for NW.js with the Fullscreen button:

if (nw)
	nw.App.registerGlobalHotKey(new nw.Shortcut({
		key: "Escape",
		active: function() {
			nw.Window.get().leaveFullscreen();
		}
	}));

Also, two SMALL nitpicks: there's two different cursor statements in the CSS for .pico_el (which is also in the original template). Also, it'd be nice if user-select: none could be added to the .pico8_el, so the text in them can't be selected. That CSS statement would need to be prefixed, however.

Thanks for all the feedback! I'll try to update with some of these later today.

I did some quick research about the "cursor:hand;" thing, and according to this SO question it's for compatibility with IE5 and IE5.5. I don't think PICO-8 even runs in IE5 though, so it's probably safe to take it out.

btw, I have the source for this up on GitHub if anyone wants to check it out.

Okay, I've updated with most of your suggestions, though I didn't go too deep on the button customization since I figure it's probably easier to just edit the html file manually if you want to change the order/logos and stuff.

Okay. Part of being able to customize the buttons, though, would also be readjusting the sizes of the buttons...
EDIT: Maybe just have the Carts button optional?

I actually already made it so that you can exclude individual buttons (the Carts button is "link button"). You can also change the label and link for that one, since I figure some people might prefer to link to their own site or whatever.

As for the button size, I did implement it since I needed to know the height of the buttons to fix the centering error, but it looks pretty ugly if you change it much from the default so I didn't bother adding a form input for that. If you want to try it out, you can add "&btnHeight=100" to the end of the URL and see what I mean.

I didn't mean height, I meant width. I'd prefer to have the buttons match the width of the canvas, like how it does when all 5 buttons are present.

Oh, ok I can throw that in pretty easily. New version will be up and running in a few minutes.

Nice. I love all the work on this. Also, the Include link button checbox on the page should probably toggle the visibility of the Link button label and target textboxes below, like the Include buttons checkbox does with the rest of them. The preview below also doesn't reflect the new button visibility options. Also, a nice little idea would be for it to show a minimum width and height for itch.io and NW.js (which has weird width and height properties). These would, of course, be calculated based off the total width of the buttons (padding included), the game scale, and the button heights. Something like this?

if (includebtns) {
  width = Math.max(scale * 128, btncount * (btnwidth + 2));
  height = scale * 128 + btnheight;
} else width = height = scale * 128;

Also, the title of the results probably shouldn't have the JS filename in it, since it's always going to be lowercase, it'll just be out of place. Also, now that the customization page is getting bigger, maybe it could shrunken down to be made shorter, like having the button toggles all one one line and having all three of the customization sections in another accordion, like the Instructions, Features, and Credits section are in. And any chance there could be an option to use the borders from the original template? Final thing: I was asking before if the width of the buttons could stretch the match the width of the canvas if there were less buttons (or if the scale was changed). Maybe have an auto button next to the width textbox?
EDIT: Sorry. Final thing: Maybe have an option to have the buttons match the BBS player, where there's no text and only icons? Hopefully I'm not weighing you down with my constructive feedback. :P

Haha, I think you're starting to go outside my intended scope for this project! I'll probably fix some of the layout stuff you mentioned when I get a chance, but I feel like most people wouldn't really get much use out of the more detailed button customization stuff, and tbh there's something to be said for consistency across different PICO-8 apps. If you want to try forking the repo and adding in some of these features on your own though, I'd be happy to see what you come up with!

Btw, the title doesn't have to be lowercase. PICO-8 generates files with lowercase names, but they can be renamed as long as you change the src on the script tag in the html (so if you're using the styler, you could just enter the new .js name and it would still work).

I was working on another web-based project the other day and made a little wrapper for the Gamepad API + put in a quick fix for iframe embeds not receiving focus properly. I figured that these would both also be useful for PICO-8 games, so the PICO-8 Styler now includes both (if you don't need them, you can turn them off under "Misc. Options").

I also addressed a couple of the minor layout issues Fayne Aldan brought up awhile back while I was at it, so it's a bit more compact now too.

Been awhile since I've updated this thread! Most recently, I've set it up so that you can enable support for gamepads to control separate players. Playing hotseat with the default keyboard controls isn't a great local multiplayer experience, so hopefully this will make things a bit more accessible!

that's great! (plus the only way you can play with a xbox controller d-pad!)

a few issues though (windows 10, chrome):

• it seems all buttons are always included no matter what.

• saving the page changes the reference to <yourcart>.js to something else in a subdir, so you have to rectify it afterwards. you might want to reflect that in the instructions.

• gamepad buttons get stuck when you unplug a pad (never get a 'button release' message or something). not sure it's on your side, or even on the gamepad api, but you could test with this cart if you want: https://www.lexaloffle.com/bbs/?tid=3714

• the gamepad api doesn't work at all in firefox (?)

• pico8's frame is blurry in microsoft edge, but so is the vanilla export (microsoft being microsoft like always?)

great work anyways, thanks a lot!

Hey thanks for all the feedback!

-Whoops, I introduced a bug with the URL arguments when reformatting some stuff in the last update; fixed now.

-This happens when you choose "Web Page, complete" instead of "Web Page, HTML only" in the file saving popup. I don't think I can prevent it, but I've added a line to the instructions saying to use "HTML only". Hopefully that clarifies things!

-Issue was with my wrapper code always returning the last known values for a disconnected pad. It should correctly treat disconnected gamepads as having no input now. Chrome still seems kind of finicky and sometimes won't reconnect a controller at all, but I think that's an issue with the browser detecting the gamepad and not my wrapper.

-Fixed. Silly bug on my part: the gamepad code was originally from a project with jquery and still had a jquery-style event listener. It only broke Firefox because the other browsers don't actually use the connection events and have to be polled every frame.

-Weird, I've tested it in Microsoft Edge as well and it scaled correctly for me. In any case, every supported image-rendering CSS line that I'm aware of is already included, so not sure if there's anything that can be done there!

hi seleb!
up and down are reversed on the stick (ok on dpad)!
and the pause menu button is not mapped on the controller (I'd suggest both 'back' and 'start')
nothing too serious, I was able to fix that with my feeble js skills ;)

also a small suggestion: add a tick box to hide the pointer inside the pico8 frame (I'm drawing my own)

• something I could hack too: cursor:none :)

about edge, it's blurry on 2 different rigs here. plus I had found a comparison "somewhere" on the internet, saying that 'pixelated' or 'nearest_neighbor' was still unsupported (or something to that effect)...

thanks!

-vertical axis issue fixed
-implemented your suggestion for back/start (I didn't even realize the menu button was accessible, haha!)
-implemented your suggestion for the canvas pointer option
-unfortunately I don't have a rig that can test out the edge issue, but I've added "image-rendering: optimizeSpeed" which is supposedly an older one that edge acknowledges. Let me know if that's fixed it and I'll make sure to include it in my general purpose snippet for pixel-perfect CSS going forward.

Thanks again for all the feedback ultrabrite! I've also added a copy of your padtest to the server + a line about how to use it to the instructions. It's pretty useful for testing, especially the multiplayer!

This is great! Any plans to add mobile controls like the BBS has?

Yeah, mobile controls have been on my todo-list for awhile now! I've got the technical aspects of it mostly figured out already, but haven't really had the time to think about the design of it.