Take a seat in a recorded hand

A replay where the reader can take over a seat. If they act as the record did, the record goes on. If they act otherwise, the hand is theirs: the other seats become bots, and the real board is still to come. Here the reader takes Negreanu's seat at the flop of The Hand.

What you need

• A recorded hand in pkcore's hand-history format, version 1. This page uses fixtures/the_hand.yaml.
• A web server. The table does not run from a file:// page.

Step 1: load the element

Put this line in the page once. Every table on the page shares it.

<script type="module" src="https://cdn.jsdelivr.net/npm/@imperialbower/bowery@0.3.0/bowery.js"></script>

To host it yourself, unpack bowery-vX.Y.Z.tar.gz from a release into a folder, for example bowery/, and load bowery/bowery.js instead. The element loads its wasm from the same folder.

Step 2: write the config

Write a YAML file. It has five settings, then the whole hand history, indented two spaces under hand:.

mode: interactive
layout: spotlight
seat: 4
start: flop
hand:
  # pkcore Hand History Format v1
  # "The Hand" — Gus Hansen vs Daniel Negreanu
  # …
  pkcore_version: 0.17.0
  format_version: 1
  hand:
    id: hsp-s2e11-the-hand
    game: holdem
  # …
  players:
  # …
  - seat: 4
    name: Daniel Negreanu
    stack: 387100.0
    hole_cards: 6♠ 6♥
  # … the rest of the players, every action, then the results

• seat: 4 is the seat the table suggests. The reader can pick any seat still in the hand. Seats count from 0.
• start: flop opens the table when the flop is dealt.
• layout: spotlight folds the out seats into one strip, so a two-player hand gets the room.

This is a short view. The whole file is the-hand-interactive.yaml. To make one from your own hand history, run this:

{ printf 'mode: interactive\nlayout: spotlight\nseat: 4\nstart: flop\nhand:\n'; sed 's/^/  /' the_hand.yaml; } > the-hand-interactive.yaml

Optional: pick the bots

Off the record, each other seat is played by pkcore's gto bot. To pick another bot for a seat, add players at the top level of the config. A name or stack you give must agree with the hand.

players:
  - { seat: 3, bot: maniac }

Step 3: put the table in the page

<bowery-table src="the-hand-interactive.yaml">
  <img src="the-hand-spotlight.svg" alt="The Hand on the flop.">
</bowery-table>

• src is the config file. It must be on the same site as the page.
• What you put inside the element is the fallback. The reader sees it until the table is ready, and keeps it if JavaScript is off.
• If you host the element yourself in another folder, add base="bowery/".

To make a still picture for the fallback, run this in a clone of bowery:

cargo run --example bowery-still -- the-hand-interactive.yaml --at flop > the-hand-spotlight.svg

Step 4: serve the page

python3 -m http.server 8000

How the reader uses it

1. Pick a seat and press Take this seat.
2. Step with ⏮ ◀ ▶ ⏭, or ← → Home End. On the record, ▶ stops when it is the reader's turn.
3. Act with the action buttons. Act as the record did, and the record goes on. Act otherwise, and the hand goes off the record.
4. Back to the record returns to the moment of the takeover.
5. % shows every live seat's win percent, and with two seats left and one card to come, the trailing seat's outs; it is only there when every card is up. Odds start on in this mode. The preflop percent is sampled, so it may differ from the figure bowery-still --odds prints. controls: { odds: false } drops the button only; the percents stay.

Settings you can change

Every field: Config on docs.rs.

Events

Two events tell the page what the reader did:

document.addEventListener('bowery:off-record', (event) => {
  console.log(event.target.id, 'left the record at moment', event.detail.since);
});
document.addEventListener('bowery:hand-over', (event) => {
  console.log(event.target.id, 'hand over', event.detail.result);
});

This page's events: