# 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.

Object · With a Pass · https://tactileui.dev/objects/stack-tower

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## 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

| Option | Type | Description |
| - | - | - |
| sound | boolean | 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. |
| label | text | What a screen reader calls the case. |

## Methods

- hooks
- update
- destroy

## States

1. **How to play**: Press 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. **Keys**: Space 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 of**: The 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. **Idle**: 
5. **Playing**: The bar slides and turns at each side. The view climbs with the tower.
6. **Perfect**: A drop within 3 units snaps square, keeps the full width, lights the Perfect lamp, runs a glint along the seam and rings.
7. **Cut**: The 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 over**: A 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. **Sound**: A 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 motion**: 
11. **Twelve finishes, two volumes**: The 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.

## 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/.