Swipe Deck Features Block for React

Edit REQUESTS at the top of the file: each has an id, an area, the team that asked first, a title, a sentence, votes, teams and an effort size. The pile shows three at a time and the tally is counted from the decisions, so the number of requests can be anything.

The pointer handlers write one CSS variable on the top card, the distance in pixels, and the card's position, tilt and stamps all follow from it in CSS: no animation loop runs. On release, a distance past 96 pixels keeps or skips the card and a shorter one clears the variable, so the card springs back with a transition. Vertical swipes still scroll the page on a touch screen.

Focus the deck (it is a named list and a tab stop) and press the arrow keys: toward the end of the line keeps the card and toward the start skips it, which flips in a right-to-left page. The Keep and Skip buttons work with Enter and Space. After each decision a polite status line says what happened and how many are left, and when the last card goes, focus moves to "Start over".

The card leaves at once without the flight, the tilt is off, and the pile does not animate. The drag itself still moves the card with your pointer, because that is direct manipulation and not a decoration.

Keep always goes toward the end of the line, so in a right-to-left page a card is kept by dragging it to the left, the Keep button sits on the left, and the stamps mirror. The arrow keys follow the same direction.

The deck keeps its size and the Keep and Skip buttons stay large, side by side under it, so one thumb can triage a whole inbox. The pile's cards are not focusable and are hidden from assistive technology, so only the top card is read.