baccarat-threejs

Three.js baccarat table animation packaged as:

• a React component: BaccaratGame
• a lower-level runtime factory: createBaccaratGame

Install

npm install @jingx/baccarat-threejs

React usage

import { BaccaratGame } from "@jingx/baccarat-threejs";

export default function Page() {
  return (
    <main style={{ width: "100%", height: "100vh" }}>
      <BaccaratGame
        currentCountdown={14}
        playerCards={[
          { suit: "spade", rank: "A", ordering: 1 },
          { suit: "club", rank: "9", ordering: 2 },
        ]}
        bankerCards={[
          { suit: "diamond", rank: "10", ordering: 1 },
          { suit: "heart", rank: "8", ordering: 2 },
        ]}
        result="Player"
        showResultSeconds={5}
      />
    </main>
  );
}

Runtime usage

import { createBaccaratGame } from "@jingx/baccarat-threejs";

const game = createBaccaratGame({
  container: document.getElementById("scene-root"),
  currentCountdown: 14,
  playerCards: [
    { suit: "spade", rank: "A", ordering: 1 },
    { suit: "club", rank: "9", ordering: 2 },
  ],
  bankerCards: [
    { suit: "diamond", rank: "10", ordering: 1 },
    { suit: "heart", rank: "8", ordering: 2 },
  ],
  result: "Player",
  showResultSeconds: 5,
});

game.setCurrentCountdown(13);
game.destroy();

Options

• container Runtime only. Required mount element.
• playerCards Ordered player hand data. Up to 3 cards are rendered.
• bankerCards Ordered banker hand data. Up to 3 cards are rendered.
• playerCard Optional fallback face card code when playerCards is empty. Default: TWO_SPADES.
• bankerCard Optional fallback face card code when bankerCards is empty. Default: TEN_DIAMONDS.
• currentCountdown External countdown value used to drive round state.
• result Result overlay text, for example "Player", "Banker", or "Tie".
• showResultSeconds Result display duration in seconds. Default: 2.
• beforeCountdownSeconds Optional positive number used as the pause before reveal.
• startNewRoundAt Optional countdown threshold for starting a new round.
• showResultDurationSeconds Alias for result display duration.
• onAfterRelease Callback fired after all cards are revealed.

Countdown behavior

• The default fresh-round trigger is currentCountdown === 14.
• While currentCountdown > 0, the countdown overlay shows the remaining value.
• If the first countdown value is already 0 or below, the scene waits for the next fresh round.
• Update the runtime with game.setCurrentCountdown(nextValue) as your external countdown changes.

Build

npm run build