Replay a recorded hand

The reader steps through a hand that already happened, one moment at a time. They cannot change it. This one is The Hand: Gus Hansen against Daniel Negreanu, High Stakes Poker, 2006.

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. It asks nothing of any other site.

Step 2: write the config

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

mode: replay
layout: ring
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
  # …
  table:
    name: High Stakes Poker
    seats: 8
    button: 0
  # …
  players:
  - seat: 0
    name: Doyle Brunson
    stack: 100000.0
    hole_cards: T♠ 2♥
  # … seven more players
  board: 9♣ 6♦ 5♥ 5♠ 8♠
  streets:
    preflop:
  # … every action, street by street, then the results

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

{ printf 'mode: replay\nlayout: ring\nhand:\n'; sed 's/^/  /' the_hand.yaml; } > the-hand-replay.yaml

Step 3: put the table in the page

<bowery-table src="the-hand-replay.yaml">
  <img src="the-hand-flop.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/": the folder that holds bowery.js.

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

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

Step 4: serve the page

python3 -m http.server 8000

Then open http://localhost:8000/ and your page.

How the reader uses it

• ⏮ ◀ ▶ ⏭ under the table: first, back, next, last.
• Keys, when the table has focus: ← → Home End.
• % 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 a replay. 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. A config with a problem shows the problem in the table, with the field and the line.

Events

The table sends events that bubble up to document:

document.addEventListener('bowery:ready', (event) => {
  console.log(event.target.id, 'is ready, version', event.detail.version);
});
document.addEventListener('bowery:error', (event) => {
  console.log(event.target.id, event.detail);
});

This page's events: