RCWeb Stack Snap Display

The Stack Snap Display app (app/stack-snap) recreates a classic color-matching card game for RCWeb. The shared screen keeps the full match state, shows the draw and discard stacks, and lets players join instantly by scanning a QR code into the companion phone controller.

Icon

What it does

• Classic color-matching rules: Supports 2 to 8 players, seven-card hands, skips, reverses, draw twos, wilds, wild draw fours, score rounds, and a running race to 500 points.
• Display-owned state: The big screen owns the deck, turn order, scoring, action resolution, and all validation so reconnecting phones can resync cleanly.
• Programmatic SVG cards: Every face card and card back is generated in JavaScript to keep the art simple, bold, and close to the familiar tabletop look.
• Join by QR code: New players scan straight into stack-snap-control with the current room preselected.
• Showy table feedback: The display adds color glows, burst banners, card swoops, and lightweight synthesized sound cues for big plays.

How to play

Setup

Open stack-snap on a shared screen such as a TV, projector, or laptop. Players join by scanning the QR code shown on the display, which opens the stack-snap-control companion app on their phone. The game supports 2 – 8 players and starts when any player taps Start on their phone once at least two players are connected.

Turns

Each player is dealt 7 cards. A card is turned face-up from the draw pile to start the discard stack. Play proceeds clockwise from the dealer. On your turn you may:

• Play a card that matches the top discard by color or face value (number, skip, reverse, or draw-two). Tap the card on your phone to play it.
• Play a wild or wild draw four regardless of the current color (wild draw four can only be played when you hold no cards of the current color).
• Draw a card by tapping the draw button if you cannot or choose not to play. If the drawn card is playable you may play it immediately; otherwise it stays in your hand and your turn ends.

Special cards

| Card | Effect | |---|---| | Skip | The next player loses their turn. | | Reverse | Play direction flips. In a 2-player game it acts like a skip. | | Draw Two | The next player draws 2 cards and loses their turn. | | Wild | You choose the new color. Can be played on any card. | | Wild Draw Four | You choose the new color and the next player draws 4 cards and is skipped. Can only be played when you have no cards matching the current color. |

After playing a wild or wild draw four, a color picker appears on your phone — tap your chosen color to continue play.

Scoring

When a player plays their last card they win the round and score the total point value of every card remaining in all opponents' hands:

| Card type | Points | |---|---| | Number cards | Face value (0 – 9) | | Skip, Reverse, Draw Two | 20 each | | Wild, Wild Draw Four | 50 each |

Winning

The first player to reach 500 points across multiple rounds wins the match. After a round ends, a new round is automatically dealt after a short countdown. After a match is won, scores reset and a fresh game begins.

Tips

• Late arrivals can scan in at any time and will join the next round.
• If a player disconnects during their turn, it is automatically skipped after a few seconds.
• Tap the top bar on the display to toggle fullscreen.

How it works

• Single source of truth: script.js builds and shuffles the deck, deals hands, resolves card actions, and computes round scoring.
• Controller snapshots: After every state change, the display pushes an individualized snapshot to each stack-snap-control client containing that player's hand and the current public table state.
• Room-aware flow: The display waits for at least two connected players, starts rounds automatically, and keeps the QR join path visible for late arrivals who can enter on the next round.

Launch RCWeb App