Theatre mode

[copy]

Implement theatre mode.

Take some inspiration from e.g.https://alpine.sh/ or https://www.rekoba.de/~cs/v86/demo/

[chschnell]

Nice!

Here's how I did the Zoom to fit (theater mode) for v86's graphical canvas. For a demo, see FreeDOS in Zoom to fit mode using VGA fonts in text mode (meaning it uses the graphical canvas) here:
https://www.rekoba.de/~cs/v86/demo/?z=max-fit&p=hd_freedos14_20m_en

After loading, play around with your browser's window size and note how the canvas scales to maximally fill its containing HTML element while maintaining aspect ratio.

It's done in a few lines of CSS, one definition for an outer container, and one for the canvas.

The container element uses display style grid, and the canvas element sits in the grid's 2nd row (minmax(auto, 1fr)):

.window.zoom-max-fit {
    display: grid;
    grid-template-rows: min-content minmax(auto, 1fr) min-content min-content;
    width: 100%;
    height: 100%;
}

The canvas element's style definition (what matters here is object-fit: contain and width: 100%, ignore the height):

.window.zoom-max-fit #screen_container > canvas {
    image-rendering: pixelated;
    object-fit: contain;
    width: 100%;
    height: calc(100vh - 60px);
}

So in order to activate Zoom to fit (theater mode), only css class zoom-max-fit needs to be added to the container element's list of CSS classes.

I also played around with continuous scaling of the browser font (for text mode using browser fonts) which looks extremely good (vector fonts scale superb) but dismissed that because I couldn't get a satisfying result (I think it broke down when entering fullscreen mode, don't remember exactly), maybe to early.

---

More of a strategic thing (and from personal experience), I'd start this by refactoring code that directly modifies DOM attributes with code that uses CSS classes instead, wherever possible. For example, showing and hiding elements using a CSS class hidden {display: none} would allow for display values other then block (like flex, grid or many others). Styles of hard-coded elements in HTML that are modified dynamically from code should not be permanently overwritten unless that is actually wanted, like is the case with width and height of the canvas element.

[SuperMaxusa]

I tried implementing theatre mode without major changes to the v86' page layout, and here is a demo: https://my-name-is-supermaxusa.pages.dev/v86theatre

v86-theatre.mp4

Partly inspired by fullscreen mode in Firefox and Zen Mode in JetBrains IDEs. Runtime panels appear on cursor hover and can be completely hidden by the "Hide UI".

Under the hood, the "zoom to fit" feature uses emulator.screen_set_scale() function and a simple formula:

$$n_{width} = \frac{viewport_{width}}{\text{screen container}_{width}}; n_{height} = \frac{viewport_{height}}{\text{screen container}_{height}}$$ $$scale = min(n_{width}, n_{height})$$

...so it works for both text and graphical modes.

All theatre mode "magic" works on CSS classes and their switching.

Any feedback is welcome.

[chschnell]

Any feedback is welcome.

You absolutely nailed it!