Skip to the object
Tactile UI

Stack Tower

The stacking game as a handheld made of kit parts. A milled bar slides across a tall window; drop it on the stack, and whatever hangs over is sheared off and falls.

What it is for

A game you could hold, drawn from the kit's own parts: a moulded case with a tall window, an LCD, a Perfect lamp in its lens, one big Drop key, a Start key, a sound switch and a speaker grille.

Installnpx shadcn add https://tactileui.dev/r/stack-tower.jsonWith a Pass: how

Controls

The switch on the case. On, each landing knocks, and a perfect one rings, 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, Pointerdown keys, Fixed timestep, Shear and fall, Canvas metal from tokens, Segment lcd digits, Concentric corners, Scale as an object
Stack
Vanilla ES modules, Canvas 2D, CSS
Needs
Nothing, no dependencies
States
11 documented
Version
0.1.0
Licence
With a Pass

States

  1. How to playPress Start (or Drop). A bar slides across the top of the window; drop it on the stack. What hangs over the edge is sheared off and falls, and the next bar is that much narrower. Land it square, within 3 units, and it keeps its width. Miss the stack and the run is over.
  2. KeysSpace or Enter drops the bar, and starts a run when none is going. S starts. The big Drop key holds down while held, and 1 presses it too. Sound begins with the first press.
  3. Made ofThe kit's Panel (the case), LCD (height and best in seven segments), Lamp (the state lamp and the Perfect lamp in its lens), Key (the large Drop key and the primary Start key), Tray, Switch (sound) and Grille. The window is a canvas in the bezel.
  4. IdleThe height reads 00, the best is shown, the screen says Press start and the first bar waits over the base.
  5. PlayingThe bar slides and turns at each side; it speeds up by 0.25 every three floors, to no more than 5. The view climbs with the tower.
  6. PerfectA drop within 3 units snaps square, keeps the full width, lights the Perfect lamp, runs a glint along the seam and rings.
  7. CutThe overhang is sheared off and falls away, turning; the LCD says how much was cut. The bare edge of a fresh shear is bright.
  8. Game overA drop that misses the stack falls whole. The view steps back to show the whole tower, the height stays on the counter, and a new best is kept on this device.
  9. SoundA short low knock of metal on metal on each landing, duller on a miss, with a bright ring on a perfect one. The switch turns it off; the choice is remembered.
  10. Reduced motionThe bar steps 17 units at a time and rests on each stop instead of sliding, a stop is always square over the stack, an offcut simply disappears, and a held key shades but does not move.
  11. Twelve finishes, two volumesThe case and the canvas read the finish and volume tokens only: aluminium, graphite and the other ten finishes, Tactile or Quiet. The metal is redrawn when the finish changes.

Notes

A milled bar slides across the top of the window; drop it on the stack and only the part that rests on the bar below stays, so the tower narrows. Land it square and it keeps its width and the Perfect lamp lights. The bar speeds up every three floors, a miss ends the run, and the best height is kept on the visitor's device. The tower is drawn on a canvas in the finish's own metal, read from its tokens, so it follows the page's finish.

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. The rules (stack.mjs) have no drawing and no clock; the window is drawn on a canvas in stack-tower.mjs. It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.

Anatomy

Shared handheld case, Pointerdown keys, Fixed timestep, Shear and fall, Canvas metal from tokens, Segment lcd digits, 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 tall window, an LCD, a Perfect lamp in its lens, one big Drop key, a Start key, a sound switch and a speaker grille. A milled bar slides across the top of the window; drop it on the stack and only the part that rests on the bar below stays, so the tower narrows. Land it square and it keeps its width and the Perfect lamp lights. The bar speeds up every three floors, a miss ends the run, and the best height is kept on the visitor's device. The tower is drawn on a canvas in the finish's own metal, read from its tokens, so it follows the page's finish.

Options

OptionTypeDescription
soundbooleanThe switch on the case. On, each landing knocks, and a perfect one rings, 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. The rules (stack.mjs) have no drawing and no clock; the window is drawn on a canvas in stack-tower.mjs. It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.