Web Shell Clean up

[RobLoach]

It's using raylib's shell right now, but It hink it would be good to do a minimal one or something....

https://github.com/emscripten-core/emscripten/blob/main/src/shell_minimal.html

[konsumer]

I would recommend outputting .mjs from emscripten and doing something like this, for the HTML:

<title>pntr_app</title>
<style>
body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100vh;
  user-select: none;
  padding: 0 10px;
}
canvas {
  flex: 1;
  object-fit: contain;
}
</style>
<canvas id="screen_canvas" />
<script type="module">
import loadDemo from './whatever.mjs'
await loadDemo({canvas: screen_canvas })
</script>

I made a little demo that shows what it looks like:

codepen

Style can be adjusted a bit to fit the demo better, but this will try it's best to fit all the canvases on the screen, centered, using only CSS (no resize-handler.)

In my projects, I just ignore the emscripten template/shell setup, and output mjs directly.

This makes very nice self-contained module that you can load multiple instances of in a page, just give each it's own canvas. This can be really nice for a big page with lots of demos.

I am using some tricks to short-hand here:

• every id gets inserted in window so I can do screen_canvas to ref document.getElementById('screen_canvas')
• html/head/body tags are optional, and the browser will fill them all in if you leave them out
• The style sets up the body as a big flex thing, and fits canvas to whatever size it is flexed to, without stretching.
• gap: 10px; means that if you add more canvases to page, they will have a little gap between them.
• Using type="module" triggers top-level await (which isn't really needed here, because there is nothing after loadDemo) but more importantly, lets you use import to pull in the esm that emscripten generated.

The web target will update the canvas-size itself, and even set the window-title, so whatever you add to title doesn't matter (but I like to set a default title, for while it's loading) and canvas needs no sizing.
user-select: none; is optional, but in some demos I am using content in the page, but click-to-activate, so that keeps it from selecting text on the page, for example here. It can safely be left out for pntr_app.

I think we should put the webroot in docs/ and update the settings for Github Pages, so we can have a nice demo URL.

[konsumer]

If we have multiple demos (#10), we can also use hash-routing, like I setup here:

• https://notnullgames.github.io/null0-sdl/#sound
• https://raylib.surge.sh/#games/pong

[konsumer]

I also did a thing on a null0 demo (which is also another example of a more minimal web shell) where I add a little speaker icon to mean "sound cannot play yet" but if you click on it, it changes. I set the opacity kinda low, to keep it subtle, and would check if audio can play before trying to play. I think it could actually just remove the icon completely, once it's clicked, and it would look great.

I also noticed fullscreen and suspend/resume don't really work right on the auto-generated HTML. I think suspend/resume is an asyncify thing (which I don't think we should add unless we really need it) but a fullscreen button could also be added as an overlay to canvas.

canvas.requestFullscreen() will fullscreen the canvas (and requires user click) but I think there is also some emscripten C api for it, too. I kinda like just adding these things to the shell directly (like attach it directly to the semi-opaque button in JS-space) but also it might be cool to control it with code.

Here are some related icons from tabler: