BilliardHUD

BilliardHUD

Shows whose shot it is, every ball each player has sunk, and how hard the cue is pulled.

What it does

Across the top is a card for each player: their name, how many balls they have potted, and each of those balls in its own colours. Stripes show as a band on white. The card of whoever is shooting glows, and says TO SHOOT. When the table is clear, the winner's card turns green.

When the turn moves, a message shows in the middle for a moment: "Bo's turn", "Scratch! Ann's turn", "Bo shoots again". The final result stays up until the next rack.

Along the bottom, a line coaches the shot with a power bar under it. Before you press it says "Press and hold, then drag BACK to pull the cue". While you drag it says "Power 64% · let go to shoot", and the bar fills green to red. While the balls roll it says so.

Bottom left, a SPIN ball shows where the cue tip will land: a red dot that the up and down arrows move. Above the centre is follow, below is draw, and the label says which and how far, in radii. Turn off the cue's own face when you use it.

It is a DOM overlay over the canvas, so it works the same under Babylon and Three. With no document (a test, a worker) it builds nothing. It only listens, and its one button, NEW GAME, only asks for a rack.

Use it in a scene

{
  "Match": {
    "components": {
      "BilliardTurns": { "players": ["Ann", "Bo"] },
      "BilliardHUD": { "showHelp": true }
    }
  },
  "Cue": {
    "components": {
      "BilliardCue": { "maxSpeed": 10, "pullTrack": true }
    }
  }
}

Props

• showHelp (boolean, default true). Show the keys along the bottom.
• toastSeconds (number, default 1.8). How long a turn message stays up.

Events

Emits:

• billiards.rack.request, {}. From the NEW GAME button.

Listens to:

• billiards.turns.changed. The player cards and the turn message.
• billiards.cue.power.changed. The coaching line and the power bar.

Dependencies

• BilliardTurns. Whose turn it is and what each player potted.
• BilliardCue. The power it is pulled to.
• BilliardBall. The colour of each ball.