Skip to the object
Tactile UI

Dash

A three-lane runner as a handheld made of kit parts, on a printed segment LCD. Change lanes to run past the hurdles; three falls end the run, and the track quickens every ten hurdles.

What it is for

A game you could hold, drawn from the kit's own parts: a moulded case with a wide printed LCD, two big lane keys, a Game A key, a sound switch and a speaker grille.

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

Controls

The switch on the case. On, each tick of the track beeps, higher when a hurdle is passed, 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, Segment lcd screen, Fixed step clock, Seeded hurdles, Swipe to change lane, Concentric corners, Scale as an object
Stack
Vanilla ES modules, CSS, SVG
Needs
Nothing, no dependencies
States
10 documented
Version
0.1.0
Licence
With a Pass

States

  1. How to playPress Game A (or S). The runner stands in the middle lane and hurdles come down the track, one row a tick. Change lanes to run past them: each hurdle passed scores one. Standing in front of one, or changing lanes into one, is a fall; three falls end the run.
  2. KeysThe left and right arrows, or A and D, change lanes (1 and 2 press the lane keys too), and the key stays down while held. S starts a run, or starts again after the end. On a phone, tap the keys, swipe across the screen to change lane, or tap the screen to start. Sound begins with the first press.
  3. Made ofThe kit's Panel (the case), LCD (a wide window of fixed segments for the track, the runner, hurdles, score and best), Lamp (state), Key (two lane keys and the primary Game A key), Tray, Switch (sound) and Grille.
  4. IdleThe glass shows only its ghosts, and BEST with the best score if there is one. The status says Press Game A to start.
  5. RunningThe track, hills, posts, hurdles and the score light; the runner's stride alternates each tick and the lane markings run towards you. A tick comes every 30 steps of 1/60 s, and 3 steps sooner for every ten hurdles passed, to a floor of 12.
  6. FallThe runner lies face down over the hurdle, stars above it, and a mark is lit under MISS. The run stops for 84 steps, the hurdles near the runner are cleared and it runs on from the same lane.
  7. Game overThe third fall lights GAME OVER and the score and best stay on the glass. A new best is kept on this device. Game A or S starts again (a press within a moment of the end is ignored, so a late press does not restart).
  8. SoundA short beep each tick, higher when a hurdle is passed, a click for a lane change, a low note for a fall and a lower one at the end. The switch turns it off; the choice is remembered.
  9. Reduced motionA held key shades but does not move; the segments switch exactly as before.
  10. Twelve finishes, two volumesThe case reads the finish and volume tokens only: aluminium, graphite and the other ten finishes, Tactile or Quiet. The glass takes the LCD's own ink.

Notes

A runner seen from behind stands on a three-lane track and hurdles come down it one row a tick; change lanes to pass them. A fall stops the run for a moment, three end it, and the track gets quicker every ten hurdles passed. The screen is a fixed set of segments with a faint ghost under each, the way a real LCD's unlit segments show. The best score is kept on the visitor's device.

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. 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, Segment lcd screen, Fixed step clock, Seeded hurdles, Swipe to change lane, 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 printed LCD, two big lane keys, a Game A key, a sound switch and a speaker grille. A runner seen from behind stands on a three-lane track and hurdles come down it one row a tick; change lanes to pass them. A fall stops the run for a moment, three end it, and the track gets quicker every ten hurdles passed. The screen is a fixed set of segments with a faint ghost under each, the way a real LCD's unlit segments show. The best score is kept on the visitor's device.

Options

OptionTypeDescription
soundbooleanThe switch on the case. On, each tick of the track beeps, higher when a hurdle is passed, 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. It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.