Skip to the object
Tactile UI

Swarf

A fixed shooter on a vector-tube handheld: hold the line against a formation of loose fasteners that steps, drops, dives and rains swarf on your cover.

What it is for

A game you could hold, on a screen that reads as a real tube.

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

Controls

The switch on the case, off to begin with. On, the formation clicks like a ratchet as it steps, a pin thumps, a fastener tinks, a dive whistles and the driver blows up, once the visitor has touched the page (a browser allows sound only after a press). Their 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 8 days. Want one email that morning?

Datasheet

Mechanism
Shared handheld case, Vector tube, Phosphor persistence, Filtered glow, Fixed step formation, Shape exact collision, Cell erosion, Swoop paths, Lookahead pilot, Seven segment digits, Token driven materials, Pointerdown keys, Synthesised sound, Scale as an object
Stack
Vanilla ES modules, CSS, Canvas 2D, Web Audio
Needs
Nothing, no dependencies
States
14 documented
Version
0.1.0
Licence
With a Pass

States

  1. How to playMove the driver along the rail and fire up at the formation. Knock every fastener out to clear the wave: thirty points for a wing nut, twenty for a hex nut, ten for a bolt, double for one caught while it dives, and fifty to three hundred for the spanner. Curls of swarf and a fastener diving into the driver each cost a life; three lives. If the formation comes all the way down to the line, the game is over. The girder stubs shelter the driver until they are worn away. Each wave starts lower and steps faster.
  2. KeysThe arrow keys or A and D move the driver while held (a tap moves it a little). Space fires, and held keeps firing as fast as one pin at a time allows. Enter starts and pauses; P pauses and carries on; Esc pauses; F fills the screen. The keys on the case do the same, held or tapped. On a phone, drag anywhere on the screen to move the driver, tap to fire, and hold a finger still to keep firing; a tap starts a game. Sound is off until the switch is on.
  3. Made ofThe kit's Panel (the case), VFD (the tube's glass and its lit colour, which the phosphor and the filter take), LCD (the score, the wave and the best in seven segments, three printed drivers for the lives), Lamp (playing, paused, lost), Key (the move keys, the round Fire key and the primary Start key), Tray (their tray and well), Switch (Sound) and Grille; the lines drawn on a canvas from the finish's own tokens.
  4. WaitingThe screen plays a demo: a careful pilot holds the line against a wave while PRESS START is written across the tube. The LCD shows the best and three lives, the status line says Press start. Under reduced motion the screen holds still.
  5. PlayingThe lamp is green. The formation steps with a ratchet's click, wing nuts flapping, hex nuts turning, bolts working their thread; WAVE and its number are written across the tube as it starts. A pin leaves a short tail of phosphor as it climbs; a fastener knocked out bursts into rays.
  6. A diveOne fastener peels off an end of the formation, loops out over the top and dives at the driver, brighter than the rest, dropping a curl on the way. Missed, it comes round from the top to its place. Knocked out while it dives, it scores double and its points are written where it was.
  7. Cover worn awayEach curl that lands on a girder stub, and each pin fired into one, wears a small chip out of it; the formation grinds away whatever it comes down over, while a dive passes in front. The beam scans each stub a row at a time, so a worn cell shows as a break in its row.
  8. The spannerNow and then, while the formation still has eight or more, a spanner tumbles across the top, end over end. Hit, it pays fifty, a hundred, a hundred and fifty or three hundred points, written where it was.
  9. LostThe lamp goes red, the driver breaks into its own lines, which fly apart and fade, and the tube's picture shakes for a moment. The status line says Hit or Rammed, a printed driver goes out, and the next one starts in the middle of the rail.
  10. PausedThe lamp is amber, PAUSE is written across the tube and nothing moves; the screen stops drawing once the phosphor has settled. A hidden tab, or the case scrolled out of sight, pauses a run too.
  11. Game overThe last driver goes, or the formation reaches the line: the lamp stays red and GAME OVER is written across the tube; the best score is kept on this device. Start, Space or a tap plays again.
  12. SoundOff until the switch is turned on, and silent until the page is touched. Synthesised: a ratchet's click for each step of the formation, a pneumatic thump for a pin, a tink of struck steel for a fastener, a falling whistle for a dive, a whirr for the spanner, a crunch on a girder, a blast for the driver, a run up the scale for a cleared wave.
  13. Reduced motionNo screen shake, nothing eased (a burst is drawn at its full size, words are written at once, the driver's pieces lie where they broke), no tail of phosphor behind what moves, nothing blinks, and the screen holds still while it waits for Start. The formation, the dives and the curls still move while a game is played: they are the game.
  14. Twelve finishes, two volumesThe case reads the finish and volume tokens; the tube's glass and its light are the finish's own VFD glass and colour, so the cyan-white of Aluminium, the pale green of Phosphor and the flat cream lines printed on ink of Paper each draw their own. Quiet takes away the glow and the lamp's sheen.

Notes

A small vector tube, drawn line by line behind a filter in the finish's own lit colour, sits in the library's handheld case above a segment LCD for the score, the wave, the best and the lives, with two keys to move, a round Fire key, Start, the sound switch and a speaker grille. A formation of fasteners has come loose: wing nuts over hex nuts over bolts. It steps sideways together, drops at each edge and steps faster as it thins; now and then one peels off an end, loops out and dives at the driver on the rail. They drop curls of swarf that wear four girder stubs away cell by cell, and a spanner tumbles across the top now and then for a mystery score. One pin in the air at a time, every hit judged on the lines drawn. Each wave starts lower and steps faster. While it waits for Start the screen plays a demo wave of its own.

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, the pilot and the vector tube are the game's own (rules.mjs, screen.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, Vector tube, Phosphor persistence, Filtered glow, Fixed step formation, Shape exact collision, Cell erosion, Swoop paths, Lookahead pilot, Seven segment digits, Token driven materials, Pointerdown keys, Synthesised sound, Scale as an object

Usage notes

A game you could hold, on a screen that reads as a real tube. A small vector tube, drawn line by line behind a filter in the finish's own lit colour, sits in the library's handheld case above a segment LCD for the score, the wave, the best and the lives, with two keys to move, a round Fire key, Start, the sound switch and a speaker grille. A formation of fasteners has come loose: wing nuts over hex nuts over bolts. It steps sideways together, drops at each edge and steps faster as it thins; now and then one peels off an end, loops out and dives at the driver on the rail. They drop curls of swarf that wear four girder stubs away cell by cell, and a spanner tumbles across the top now and then for a mystery score. One pin in the air at a time, every hit judged on the lines drawn. Each wave starts lower and steps faster. While it waits for Start the screen plays a demo wave of its own.

Options

OptionTypeDescription
soundbooleanThe switch on the case, off to begin with. On, the formation clicks like a ratchet as it steps, a pin thumps, a fastener tinks, a dive whistles and the driver blows up, once the visitor has touched the page (a browser allows sound only after a press). Their 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, the pilot and the vector tube are the game's own (rules.mjs, screen.mjs). It needs the Tactile UI Kit's stylesheets on the page; the Code tab's example links them from ./kit/.