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)

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).

.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.

.metadata((build: number, callback: (CardObjects[]) => void) => void)

A callback to fetch the card data, provided the Hearthstone build is contained in the replay (otherwise build is null). Fetch the card metadata from https://hearthstonejson.com/ and return the JSON.parse()'d result. You probably want to set up some local caching as well (e.g. using localStorage), so that subsequent requests have the metadata avaiable immediately.

Example

.metadata(function(build, cb) {
  $.ajax("https://api.hearthstonejson.com/v1/" + build + "/enUS/cards.json", {
    type: "GET",
    dataType: "text",
    success: function(result) {
      cb(JSON.parse(result));
    }
  });
})

.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.