Embedding

Joust compiles to Javascript+CSS and can be integrated into any website.

Check back later for a full step-by-step guide.

Launcher

Set the target container with Joust.launcher(targetId: string).

The launcher is returned from Joust.launcher(). Every subsequent function returns the launcher, so methods can be chained:

Joust.launcher("joust-container")
     .assets("http://static.example.com/joust/assets/")
     .width(800)
     .height(600)
     .startAtTurn(4)
     .startPaused(false)
     .fromUrl("http://example.com/brawl.hsreplay"); // must always come last

Parameters

.fromUrl(url: string, callback?: () => any)

Required. This call initializes the applet rendering, and therefore must always be last.

The URL to load the HSReplay file from.

.assets(url: string)

The URL at which the Joust assets are hosted (/dist/assets/ after compiling). Defaults to the relative dir (./assets).

.cardArt(url: string)

The URL at which the Hearthstone card assets are hosted. Defaults to a CDN hosting the card art. The card art is Blizzard Entertainment's property.

.width(width: number)

The applet width in pixels. Defaults to 100% (of the parent container).

.height(height: number)

The applet height in pixels. Defaults to 100% (of the parent container).

.startPaused(pause: boolean)

Whether playback should not start after the applet has loaded. Defaults to false, unless a starting turn is specified with .startAtTurn (then true).

.startAtTurn(turn: number)

The initial position of the scrubber in the timeline. Defaults to 0 (Mulligan).

Note: Turns are numbered according to Hearthstone numbering, so the first turn for the second player is actually turn 2, and the second turn for the first player 3. Mulligan is 0.

.startRevealed(revealed: boolean)

Whether the opponents hand should be revealed. Defaults to true.

.startSwapped(swapped: boolean)

Whether the players should be swapped, compared to the default. Defaults to false.

.replayDuration: number (readonly property)

The duration of the replay in Joust ticks.

.secondsWatched: number (readonly property)

An approximate value how many seconds the replay was watched.

.percentageWatched: number (readonly property)

The percentage of the replay that was watched. Every single tick has to be seen once to reach 100% (repeatedly watching the same turn does not increase the percentage past the turn's percentage).

.disableKeybindings()

Disables keybindings.

.enableKeybindings()

(Re)enables keybindings working.

addPlayerName(playerName: string): Launcher

Hints at a player name for the loading screen.

Runtime only

.play()

Starts playback. For startup, use .startPaused instead.

.pause()

Pauses playback.

.toggle()

Pauses the replay if it's playing, plays the replay if it's paused.