Skip to the object
Tactile UI

Simon

The four-lamp memory game as a handheld made of kit parts. Watch the lamps, then repeat them on the keys; each round adds one and the lamps get quicker.

What it is for

A game you could hold, drawn from the kit's own parts: a moulded case with an LCD, four lamps set in as lenses, four raised keys, a Start key, a sound switch and a speaker grille.

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

Controls

The switch on the case. On, each lamp has its own tone 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, Lamp sequence, Segment lcd digits, Concentric corners, Scale as an object
Stack
Vanilla ES modules, CSS
Needs
Nothing, no dependencies
States
10 documented
Version
0.1.0
Licence
With a Pass

States

  1. How to playPress Start (or Space). Round 1 lights one lamp; repeat it on the keys. Every round adds one more, chosen at random, and a wrong key ends the run.
  2. Keys1, 2, 3 and 4 press the green, amber, red and blue keys, and hold them down while held. Space starts a run, or starts again after a miss. Sound begins with the first press.
  3. Made ofThe kit's Panel (the case), LCD (round and best in seven segments), Lamp (four lenses and a state lamp), Key (four raised keys and the primary Start key), Tray, Switch (sound) and Grille.
  4. IdleThe counter reads 00, the best is shown, the screen says Press start.
  5. ShowingThe LCD says Watch and the lamps light one at a time. Each stays lit 520 ms with 180 ms between, and both shorten every four rounds.
  6. Your turnThe LCD says Your turn and the keys are live. A right key lights its lamp; the last of the round says Good and the next round begins.
  7. Game overA wrong key lights its own lamp briefly, then all four. The round you reached stays on the counter; a new best is kept on this device.
  8. SoundOne tone per lamp, and a low buzz on a miss. The switch turns it off; the choice is remembered.
  9. Reduced motionA held key shades but does not move; the lamps still light.
  10. Twelve finishes, two volumesThe case reads the finish and volume tokens only: aluminium, graphite and the other ten finishes, Tactile or Quiet.

Notes

Press Start and watch the lamps; repeat the sequence on the keys. Each round adds one lamp, the lamps shorten every four rounds, and one mistake ends the run. The best round is kept on the visitor's device. It is also a plain demonstration of the case the library's other handheld games share.

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, Lamp sequence, 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 an LCD, four lamps set in as lenses, four raised keys, a Start key, a sound switch and a speaker grille. Press Start and watch the lamps; repeat the sequence on the keys. Each round adds one lamp, the lamps shorten every four rounds, and one mistake ends the run. The best round is kept on the visitor's device. It is also a plain demonstration of the case the library's other handheld games share.

Options

OptionTypeDescription
soundbooleanThe switch on the case. On, each lamp has its own tone 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

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