Core chat sidebar extension

Continuing a discussion with @VoodooFrog about a project to extend the core chat sidebar panel.

The last piece of the puzzle for me would be getting that Svelte component from being it's own window to being a component living just underneath the chat input.

Yeah... I'd be glad to work up an example. Basically it will involve the render hook for the chat sidebar to attach a Svelte component directly where you'd like it. As discussed I'm pretty sure the chat sidebar doesn't render multiple times, so doing this once should be adequate.

You also mentioned GSAP. TRL (my library) does have great GSAP support and easy loading of GSAP, so that might come in handy for what you are creating.

It will be pretty similar except you'll instantiate a Svelte component in the showButton conditional.

Heh heh.. So does your module produce confetti animations? I gather you know about the other confetti module https://foundryvtt.com/packages/confetti

It'll take a moment, but I'll work up an example. In the meantime it could be worth installing essential-svelte-esm to check out various demos. Some use GSAP.
https://github.com/typhonjs-fvtt-demo/essential-svelte-esm

In the box / position demo GSAP resources are loaded here:
https://github.com/typhonjs-fvtt-demo/essential-svelte-esm/blob/main/src/view/position/box/boxStore.js#L5-L13

GsapCompose is something added by TRL that allows you to define GSAP animations by data versus calling functions of the GSAP API. You can see some dynamic timeline creation here:
https://github.com/typhonjs-fvtt-demo/essential-svelte-esm/blob/main/src/view/position/box/boxStore.js#L222-L235

That particular demo is pretty involved, but gives a general idea of ease of use of GSAP w/ TRL.

I definitely use that demo for tuning the built in animation capabilities of TRL plus a GSAP example. It can be used for stress testing / performance metric gathering.

On the right path... Almost done here w/ some basic setup you'll need. Also some styling that will fit in nicely especially with another module that a lot of folks use dice-tray.

How familiar are you w/ coding... Pretty good?

Nice... Yeah... I was around in the LibGDX hey day also past pedigree of 15 years Java. Was working on my own expansive runtime for game dev that sadly never got publicly released; back then I was still hoping to do something commercial with it; before my OSS days.

Just asking as there are a lot of folks that are new to coding trying Foundry related things. The TRL / Svelte version of confetti will likely have just some things that can be lifted from the original module. A few things to figure out, etc. I've got most of a good starter set of code worked out though.

Got something a little better... It also fits in w/ the Dice Tray module (https://foundryvtt.com/packages/dice-calculator) look and feel which has over 50% install ratio, so good to play nice with it.

Pretty close to all the basic setup code you should need.

It does... Just styled things in what I have so that it fits in w/ Dice Tray.

So here is the basic setup code...

In ./src/index.js invoke it like:

import ConfettiMenu        from './ConfettiMenu.svelte';
import ConfettiCanvas      from './ConfettiCanvas.svelte';
import { ConfettiControl } from './ConfettiControl.js';

Hooks.once('renderChatLog', (app, html) => {
   // if the chatlog is rendered not in the sidebar, do nothing
   if (app.options.popOut) {
      return;
   }

   // const showButton = game.settings.get(MODULE_ID, MySettings.ShowButton);
   // if (showButton) {
      new ConfettiMenu({
         target: html[0]
      });
   // }
});

Hooks.once('ready', () =>
{
   new ConfettiCanvas({
      target: document.body
   });

   const api = {
      shootConfetti: (data) => ConfettiControl.shootConfetti(data)
   };

   Object.freeze(api);

   // Add your module ID and uncomment
   // game.modules.get('YOUR_MODULE_ID').api = api;
});

Got the buttons working with a Svelte store to disable when the animation plays... Right now it's a bogus 5 second timeout before they are enabled again.

What is left to do is work out the GSAP details of rendering to the canvas. The original confetti module uses a deprecated / old GSAP mechanism TweenLite. You just need to convert that to using gsap or potentially GsapCompose might even be easier.

You'll also have to work out the socket communication / triggering.

All of the canvas setup should be done.

Oh yeah.. I should note that unfortunately the Font Awesome icons are from the pro set, so technically that means that you need to get a license for Font Awesome.. I didn't take a look at what the original module uses, but perhaps you can replace those icons with those assets.

I gather you can likely take it from here since you have programming experience. If you haven't worked through the Svelte interactive tutorial that is highly recommended as a resource to peruse regarding how Svelte works: https://svelte.dev/tutorial/basics

Feel free to ask any more questions here though! Glad to have you checking things out.. Certainly feel free to grab the Developer role in #roles-ping to get announcements when new TRL releases occur.

Long live confetti!!!

The reason it's done that way is to be able to directly check out a repo into the Data/modules directory and also have Svelte HMR working w/ the Vite dev server. The problem is that the dev server runs from ./src and the Foundry package manifest can't reference a different location like a distribution directory at the same time hence why the build process puts things in the root of the module directory. It's a trade off basically.

The other option is symlinking a dist directory and a separate folder location outside of the Data/modules..

You really should check out the HMR features.. It's pretty awesome. Automatic hot reloading of any .svelte components when changing styles, code, or template.

Video on Svelte HMR: https://www.youtube.com/watch?v=w2xPRRA7GFw

There also is an automatic Github Action in the demo repos that packages up a module when you do a Github release. It automatically has things setup for the stock TRL dev setup. The zip file for the module only includes the required resource as you can see here:
https://github.com/typhonjs-fvtt-demo/template-svelte-esm/blob/main/.github/workflows/main.yml#L33

Eventually I'll be getting to a developers guide / better onboarding materials that cover a lot of the less obvious stuff.. There is a lot more in TRL too to explore as it's a lot more than just a bridge to run Svelte on Foundry. I'm also working toward getting TRL to provide a desktop like UI framework running on top of SvelteKit for any web dev that needs a similar arrangement and then some.

Making any progress @VoodooFrog? Feel free to share the repo and I'll check it out when you think you are done to see if there are any performance improvements. The original module did several things that probably aren't as performant.

Yeah.. Can't hurt to have a nice little example running efficiently for canvas rendering w/ TRL / Svelte / GSAP.

I see you mostly just duplicated the original confetti module and just used Svelte just for the buttons. I may play around and do things as an example more along the lines of what I was describing at some point.

I suppose it can make sense to update the README from the default template and describe the install process as I see you added gulp and probably have it setup for symlinking.

Definitely feel free to get in touch and chat on the forum / dev lounge if you get more into using TRL & Svelte for other projects! 😄

No worries... Glad you got to get a "taste" of what's possible.