[Question] Static HTML - jsDilvr Supported ?

[poppabear8883]

Can the package work inside static HTML files. For example: https://cdn.jsdelivr.net/npm/brackets-viewer/dist/brackets-viewer.min.js

If so, can you please show an example of the usage.

[Drarig29]

Hi! Since you said:

For example: https://cdn.jsdelivr.net/npm/brackets-viewer/dist/brackets-viewer.min.js

It's not clear whether you are talking about the brackets-viewer package itself or the toornament-layer package.

The viewer can be used with CDNs like jsDelivr, while currently the toornament layer cannot be used this way.

My own use case was that I wasn't using the Toornament API everytime someone was trying to view the tournament data.

So I used the Toornament API to get the data I needed and used the toornament layer locally to convert the data into a JSON file.

It's directly this converted JSON file that my static web page is accessing. This way the conversion is done only once.

[Drarig29]

What's your use case? How do you get your Toornament data and how often is it fetched?

[poppabear8883]

What's your use case? How do you get your Toornament data and how often is it fetched?

First I really appreciate the quick reply. You may be on a different timezone than I as i'm just getting up for the morning ...

So my use case is that I have a Discord bot that I developed that hosts/manages Call Of Duty tournaments for my org and the goal was to provide a simple link that I have setup that's served by an node express server. The node express server serves static html files (no webpack or package builders) so I wanted to simply include the toornament layer in a similar way I can add the bracket-viewer package.

However, it sounds like you have a solution to this, I can use the toornament layer in the nodejs app via my Discord bot, and I suppose it can generate the necessary data. But can you show me how to use the bracket-viewer on the static html using the generated JSON file ?

Any help here would be gratefully appreciated!

Also as a side note, would be cool if you had the ability to generate an image of the generated bracket, would be awesome in my use case to attach said image to a discord message my bot sends to the users.

[Drarig29]

To use the viewer, take inspiration from this:

• https://github.com/Drarig29/brackets-viewer.js/tree/master#how-to-use
• https://github.com/Drarig29/brackets-viewer.js/blob/master/demo/with-api.html
  • in this demo, you can either inline your JSON data in a variable directly, or fetch a static JSON file

The image generation is a good idea, you could try something like this: https://stackoverflow.com/a/32776834

[poppabear8883]

Thanks that works ...

The Image generation is going to a bit more involved (for my use-case) than just an html-to-image solution. Would work great to generate update brackets when someone visits the page. However, in my case there will be times I'd want to update said images during certain interactions with the Discord bot. So everything would have to happen on the NodeJS side of things and I'm not sure how to accomplish that. I can try a complex generation using node-canvas but that is quite involved for myself anyways.

A nodejs package that could take the toornament-layer structured data and simply generate an HTML string would solve my issue. Because, then I could convert the html to an image.

The brackets-viewer package is a front-end package meant to work in the browser. So it can't be used on the NodeJS side. But something very similar that's compatible with NodeJS would work.

Thanks for all your help! If you have any more suggestions I will take them. If there is a better way to communicate please share. I could invite you to a discord server if you was interested in collaborating. Thanks again.