Core chat sidebar extension

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

36 Replies

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.

VoodooFrog•2y ago

I'm just loading GSAP the standard way at the moment, but if there's existing functionality in TRL that I can leverage then I may as well, yeah. 🙂 I assume we'd be looking at something like the following (this is in the standard module I was basing all this on at first not using TRL):

Hooks.on('renderChatLog', (app, html) => {
  console.log('foundryvtt-confetti | rendering buttons');
  // 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) {
    _addConfettiButtons(html);
  }
});

Hooks.on('renderChatLog', (app, html) => {
  console.log('foundryvtt-confetti | rendering buttons');
  // 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) {
    _addConfettiButtons(html);
  }
});

TyphonJS (Michael)OP•2y ago

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

VoodooFrog•2y ago

It's derivative of that one, yes. But there were a number of things that annoyed me about the original. - It wasn't rate limited and the way it rendered the controls didn't respect things like the new AV dock (because it was't developed past v9, I assume). I'm essentially bringing it up to v10, and reworking all the controls. If I can get it to a state where I'm happy enough with it I'll probably get in touch with the original dev and propose this as a replacement. Or I might just keep it private for my group. 🤷‍♂️

TyphonJS (Michael)OP•2y ago

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

VoodooFrog•2y ago

Yeah I've referred to that repo a few times. I haven't actually checked it out locally though.

TyphonJS (Michael)OP•2y ago

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.

VoodooFrog•2y ago

Oh, I think I've nearly got it figured out myself all but for some styling issues:

VoodooFrog•2y ago

Mainly the height of the container is way too tall. 😛

TyphonJS (Michael)OP•2y ago

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?

VoodooFrog•2y ago

I'm a front-end developer professionally - though that's mainly React. I don't tend to use a lot of straight JS and DOM manipulation. I also used to do a lot of Java at work but not so much anymore, although I still do some on my own time (mainly Minecraft mods) and I also code games using Kotlin and LibGDX. This is my first time doing anything with Svelte. It's interesting. 🙂

TyphonJS (Michael)OP•2y ago

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.

VoodooFrog•2y ago

I keep waiting for a decent game framework to mature for Rust as well. There's nothing that's quite developed enough to pull me away from GDX yet. Mainly because I'd like something faster but I'd rather beat myself with a stick than suffer through C++. 😄

VoodooFrog•2y ago

That's the styling issue sorted.

VoodooFrog•2y ago

Well, at least in terms of the container height. There's more to do before I'd say I was happy with it. I still kinda wish Svelte had proper observers, though. But from what I understand they specifically avoided that for performance reasons, which I get. It's just a pain to have to use a CustomEvent to enable/disable the buttons while on cooldown.

TyphonJS (Michael)OP•2y ago

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.

Dice Tray | Foundry Virtual Tabletop

Dice Tray, an Add-on Module for Foundry Virtual Tabletop

VoodooFrog•2y ago

Nice. I do use Dice Tray....

TyphonJS (Michael)OP•2y ago

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

VoodooFrog•2y ago

How are you ensuring it comes after the tray? Just checking to see if it's present and changing the html anchor depending? Oh, never mind. I just loaded Dice Tray and it seems that it winds up there without me doing anything.

TyphonJS (Michael)OP•2y ago

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

TyphonJS (Michael)OP•2y ago

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;
});

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;
});

confetti.zip

TyphonJS (Michael)OP•2y ago

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.

TyphonJS (Michael)OP•2y ago

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 <#915550455948537896> to get announcements when new TRL releases occur. Long live confetti!!!

VoodooFrog•2y ago

Ha. 🙂 I do have a question about your development template setup - it seems to default to just putting the build output in the root dir, which seems less than ideal for actually distributing the module. Am I missing something? I did change the options so it builds to dist and set it up so I could link that folder into foundry instead of just checking my code directly into the modules dir, but that's caused a number of subsequent niggles.

TyphonJS (Michael)OP•2y ago

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

VoodooFrog•2y ago

Cool. 🙂 Thanks for all your help. I'll just finish knocking this into shape.

TyphonJS (Michael)OP•2y ago

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.

VoodooFrog•2y ago

Yeah I got it in a state where it was doing pretty much everything I wanted. I don't go much further since but if you want to take a look and make suggestions I'm all for it. Bear in mind I just inherited a lot of it from the original and I may very well never do anything serious with it. I like to tinker in my spare time. 🙂

VoodooFrog•2y ago

https://github.com/voodoofrog/foundryvtt-celebrate

GitHub

GitHub - voodoofrog/foundryvtt-celebrate

Contribute to voodoofrog/foundryvtt-celebrate development by creating an account on GitHub.

TyphonJS (Michael)OP•2y ago

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

VoodooFrog•2y ago

Yeah I didn't do much vis-a-vis your GSAP stuff. Not really my area of expertise. Wow that's quite the typo that I totally failed to spot: Added a nuunch of new settings I have no idea how I wound up so far from "bunch" but here we are. 😄

TyphonJS (Michael)OP•2y ago

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.

VoodooFrog•2y ago

Yeah, like I said back at the start the whole reason I even wound up looking at your stuff was because there didn't seem to be any way to get the buttons to dynamically disable while on cooldown. Using the straight Foundry API, I mean. This was just a weekend project to bring the module more in line with what I wanted from it, nothing more. And yes, I am using Gulp to symlink as I was using the build watcher rather than the server.

TyphonJS (Michael)OP•2y ago

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! 😄

VoodooFrog•2y ago

I may well use it for my long mooted NPC generator. I have noted that there are not a great deal of modules that do that in the Foundry ecosystem and those that do don't quite fit with what I'd want from one. Essentially I'd like one that generated random NPC based on demographics. But like most things, it's finding the time. I seem to be spinning a lot of plates just now. (I have a couple of Minecraft modding projects, as well as modpacks I'm maintaining for friends and I'm running my friends through Wild beyond the Witchlight just now. Well - not literally right now, on a Wednesday, but obviously prep work takes up a chunk of time around the actual day. Oh and I'm also still prepping my own campaign when I can actually spare a moment to devote to it. 😄

TyphonJS (Michael)OP•2y ago

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

Gaming

Programming

Core chat sidebar extension