Pixel UI/Games & sound/Handheld

Handheld

A pocket game console, and anything you put inside plays on its screen.

<piix-handheld>DOM + canvas

SAVE FILE 1

Real HTML, shown in four shades of green.

Scroll with the D-pad. Press SELECT to change the screen.

<piix-handheld>
  <h3>SAVE FILE 1</h3>
  <p>Real HTML, shown in four shades of green.</p>
  <p><a href="#">Continue</a><br><a href="#">New game</a><br><a href="#">Options</a></p>
  <p>Scroll with the D-pad. Press SELECT to change the screen.</p>
</piix-handheld>

Screen

Shell

A chunky handheld with a power light, a D-pad, A and B, Select and Start. Your content stays live, real HTML on its screen, recoloured into four LCD shades with a dot-matrix grid on top: links work, text can be selected. The D-pad scrolls and hops a cursor between links, A presses, B goes back to the top, Select changes the screen colours and Start boots it again. Every press fires a cancelable press event first, so you can build your own game on it.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just handheld (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/handheld.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-handheld>
      <h3>SAVE FILE 1</h3>
      <p>Real HTML, shown in four shades of green.</p>
      <p><a href="#">Continue</a><br><a href="#">New game</a><br><a href="#">Options</a></p>
      <p>Scroll with the D-pad. Press SELECT to change the screen.</p>
    </piix-handheld>
  );
}

Usage

<piix-handheld>
  <h3>SAVE FILE 1</h3>
  <p>Real HTML, shown in four shades of green.</p>
  <p><a href="#">Continue</a><br><a href="#">New game</a><br><a href="#">Options</a></p>
  <p>Scroll with the D-pad. Press SELECT to change the screen.</p>
</piix-handheld>

Examples

Your blog, as a cartridge

Images are recoloured too.

Patch notes 0.5

Games arrived: breakout, dialogue and this very console.

<piix-handheld color="ink" screen="pocket" width="280px">
  <img src="../site/launch-poster.jpg" alt="Piixpal launch" style="width:100%">
  <h3>Patch notes 0.5</h3>
  <p>Games arrived: breakout, dialogue and this very console.</p>
  <a href="#">Read more</a>
</piix-handheld>

A game of your own

Cancel the press and do your own thing with the buttons.

◆

<piix-handheld id="gb" color="lime" screen="grape" boot="off" width="260px">
  <p id="pos" style="font-size:28px;text-align:center;margin-top:40px">◆</p>
</piix-handheld>

<script>
  let x = 0;
  gb.addEventListener('press', e => {
    const b = e.detail.button;
    if (b !== 'left' && b !== 'right') return;
    e.preventDefault();
    x += b === 'left' ? -12 : 12;
    pos.style.transform = 'translateX(' + x + 'px)';
  });
</script>

API reference

Attribute	What it does	Default
`screen`	`dmg` `pocket` `light` `grape` `color` (no filter)	`dmg`
`color`	the shell: `classic` `lime` `grape` `ink` `coral`	`classic`
`width`	any CSS length	`320px`
`brand`	the name on the front	`Piixpal`
`boot`	`off` skips the boot screen	–
`font`	`pixel` or `inherit` (your page font)	`pixel`
`sound`	make sounds even without `<piix-chiptune>`; `off` keeps it silent	–

Events

Event	When
`press`	any button: `detail.button` is up, down, left, right, a, b, select or start. Cancelable.
`screen`	Select changed the colours: `detail.screen`

Methods

Method	What it does
`press(button)`	press a button from code

Accessibility

Every button is a real button with a label; the screen is a scrollable region you can tab into.
Keyboard: arrows, X for A, Z for B, Enter for Start, C for Select.
The colour filter is visual only: screen readers read your content as written.
With reduced motion it skips the boot animation and scrolls instantly.