Skip to the object
Tactile UI

Spall

A brick game on the kit's vacuum fluorescent display, as a handheld made of kit parts. Press on the display and the bat follows your finger; knock the wall down brick by brick.

What it is for

A game you could hold, drawn from the kit's own parts: a moulded case with a wide window of the kit's VFD glass, a fader in a slot under it, a big round Serve key, a Start key, a sound switch and a speaker grille.

Installnpx shadcn add https://tactileui.dev/r/spall.jsonWith a Pass: how

Controls

The switch on the case. On, the notches, the hits and a lost ball each have a sound once you have pressed a key (a browser allows sound only after a press). The visitor’s own setting is kept on their device.

What a screen reader calls the case.

Everything you set here is what the Code and Prompt tabs give you.

Seats open in 11 days. Want one email that morning?

Datasheet

Mechanism
Shared handheld case, Vfd canvas, Finger follow bat, Fader under display, Seeded serve, Fixed step loop, Pointerdown keys, Concentric corners, Scale as an object
Stack
Vanilla ES modules, CSS, Canvas 2D
Needs
Nothing, no dependencies
States
11 documented
Version
0.1.0
Licence
With a Pass

States

  1. How to playPress Start, or tap the display. Drag along the display and the bat follows your finger along the bottom of the tube; tap to serve. Every brick knocked out of the wall scores 4, 3, 2 or 1 by course from the top. Clear the wall and the next one is laid; lose three balls and the game is over.
  2. KeysPress anywhere on the display and the bat's middle comes under your finger, then follows it dot for dot; let go where you pressed and it serves. The fader under the display is the same bat: slide it and the bat moves. The arrow keys or A and D move the bat a dot, then on, faster the longer they are held; Space serves; Enter or P starts and pauses. Sound begins with the first press.
  3. Made ofThe kit's Panel (the case), VFD (the display, its field, figures, lamps and words drawn over the kit's glass), Fader (the bat, in a slot with a printed scale), Tray (the wells), Key (the round Serve key and the primary Start key), Switch (sound) and Grille.
  4. IdleThe tube shows every anode faintly, as unlit phosphor does: the field of dots, the walls, the figures and the words. BEST shows the best score and START blinks.
  5. PlayingThe ball waits on the bat until it is served, then moves a whole dot at a time; where it lands on the bat sets the angle out. A step is 92 ms on level 1 and the ball takes 6 per cent off each time it reaches the top. Each level lays its own wall: the whole wall, a gable, alternate bricks, then two piers and a lintel.
  6. Ball lostThe bat blinks three times, a ball lamp goes out and the next ball waits on the bat; SERVE blinks.
  7. PausedStart, Enter or P pauses and carries on; a hidden tab pauses by itself. PAUSE lights.
  8. Game overThe wall dims and GAME OVER lights; a new best blinks NEW BEST and is kept on this device.
  9. SoundA tick for each notch the bat moves, a blip for the walls, the bat and each brick (higher for higher courses), a falling note for a lost ball. The switch turns it off; the choice is remembered.
  10. Reduced motionKeys shade but do not move, the phosphor lets go at once, nothing flares, falls or blinks; the ball still moves.
  11. Twelve finishes, two volumesThe case reads the finish and volume tokens only, and the tube takes each finish's own VFD colour: aluminium, graphite and the other ten finishes, Tactile or Quiet.

Notes

Keep the ball in play with the bat along the bottom of the tube; every brick it knocks out of the wall scores, more the higher the course, and the ball gets a little quicker each time it reaches the top. Clear the wall and the next is laid. Three balls; the best score is kept on the visitor's device. It is played on the glass itself: press anywhere on the display and the bat comes to your finger and follows it, and the fader under the display rides with the bat.

Original. The case is the library's shared handheld (originals/components/shared/handheld), drawn from the kit's parts at one size and scaled as an object; its display is the kit's VFD glass with a canvas of anodes over it. It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.

Anatomy

Shared handheld case, Vfd canvas, Finger follow bat, Fader under display, Seeded serve, Fixed step loop, Pointerdown keys, Concentric corners, Scale as an object

Usage notes

A game you could hold, drawn from the kit's own parts: a moulded case with a wide window of the kit's VFD glass, a fader in a slot under it, a big round Serve key, a Start key, a sound switch and a speaker grille. Keep the ball in play with the bat along the bottom of the tube; every brick it knocks out of the wall scores, more the higher the course, and the ball gets a little quicker each time it reaches the top. Clear the wall and the next is laid. Three balls; the best score is kept on the visitor's device. It is played on the glass itself: press anywhere on the display and the bat comes to your finger and follows it, and the fader under the display rides with the bat.

Options

OptionTypeDescription
soundbooleanThe switch on the case. On, the notches, the hits and a lost ball each have a sound once you have pressed a key (a browser allows sound only after a press). The visitor’s own setting is kept on their device.
labeltextWhat a screen reader calls the case.

Methods

  • hooks
  • update
  • destroy

How it works

Original. The case is the library's shared handheld (originals/components/shared/handheld), drawn from the kit's parts at one size and scaled as an object; its display is the kit's VFD glass with a canvas of anodes over it. It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.