Blades in the Dark Clock

[brunocalado]

Hi.

Is it possible to achieve a clock like that:

This style is used in Blades in the Dark system.

[Larkinabout]

If you're looking for the hand-drawn look, you could use a background image with this code:

ChallengeTracker.open({size: 250, outerTotal: 4, frameWidth: 'none', backgroundImage: 'https://.../blades-in-the-dark-4.png', outerColor: '#000000ff', outerBackgroundColor: '#00000000'})

A better artist than me would need to create the images, but I've made a rough attempt:

The challenge tracker will look like this:

If someone does design some really good images, I'd be happy to add them to the module for other users.

[Larkinabout]

You could also just use two images with frameWidth: 'none': a background image with the clock unfilled and a set image with the clock fully filled. That'd then work with any sort of transparency. As long as you include the divider/frame in both images, it will look like the clock is being filled in as you click.

[brunocalado]

Thank you. I'll try it out!

[brunocalado]

const img = 'modules/bloodstone/assets/clocks/Progress%20Clock%204-0.svg'

ChallengeTracker.open({
  size: 250, 
  outerTotal: 4, 
  frameWidth: 'none', 
  backgroundImage: img , 
  outerColor: '#000000ff', 
  outerBackgroundColor: '#00000000',
  frameWidth: 'none'
});

error: clocks.zip

[Larkinabout]

Try testing with a raster file format (png or webp) as I'm not sure it'll handle vector files. If it's that, I'll probably need to let users know somewhere that it's only raster file formats.

[Larkinabout]

Fixed in release 2.1.