chimis
chimis
PostsComments
TTyphonJS
Created by chimis on 7/15/2023 in #typhonjs-runtime
TJSDocument for aggregating actor flags for Svelte Component
The GMJournal, and the codeblock I first provided was intended to take an array of documents that are populated by an array of active encounters, and their actors. If there are multiple encounters, they should be separated by different tabs. The array of actors for the given encounter selected, will provide a carasel of all of the actors to cycle through, and it will provide one NPCFocus, which provides the data for the selected NPC. The store functionality will be useful for, and I'm hoping to use it to subscribe to changes that occur on the actor document itself (for instance if someone changes the fortitude save value which would change which save is considered the 'lowest save'). I don't need TJS to update that information on the foundry document or on my flags, but when my flags values change I would like for me to be able to mediate those changes between the backend and the view. For instance, if the gm changes the visibility of a flag property by clicking an eyeball icon, that change could be passed to the subscribers (I'm assuming) which could change the objects value at the foundry level, and the playerJournal which is also subscribed to that document would be notified to reflect the visibility of property on the players journal. Hopefully this isn't too high level of a description of what the module does. If I need to provide more details somwhere I certainly can.
6 replies
TTyphonJS
Created by chimis on 7/15/2023 in #typhonjs-runtime
TJSDocument for aggregating actor flags for Svelte Component
Sorry it took me some time to respond. I'm working on a module that provides an overhaul to the recall knowledge functionality of PF2e. From a data perspective, I'm collecting the attributes which are pertinent to knowledge recall checks (lowest save, abilities, spells, and descriptions that are tied to the actor. An example object with the flags will look as such: 
pf2eNPC: {
  flags: {
    NPCFlags: {
      ...
      spellAbilities: [
        {name: fireball, tradition: arcane, description: `some string`, visibility: false},
      ]
    }
  }
}
pf2eNPC: {
  flags: {
    NPCFlags: {
      ...
      spellAbilities: [
        {name: fireball, tradition: arcane, description: `some string`, visibility: false},
      ]
    }
  }
}
If a player wishes to use a recall knowledge ability and suceeds the GUI provides an interface for the GM to toggle vilibility, through the GMJournal, and this populates an entry in the PlayerJournal. This data is also stored as a JSON file in persistant storage to keep track of all past recall knowledge attemtps so that the PlayerJournal remains populated as they go through the campaign. It's very similar to how a pokedex works in pokemon, and has similarities to the Wrath of the Righteous feature allowing you to see knowledge information when you hover over enemies in that CRPG. The player journal, during foundry initialization, is populated by an array that is sourced by the JSON file we store between sessions. The GM journal is only ever populated by active encounters. What I was working on above was going to be similar to implementation throughout when I'm trying to get that data in the svelte component. The TJSDocument, I was attempting, was to be a wrapper for the actors in my array so that I could use that store to populate the view. I have on the class for the NPCModel the methods being utilized for actually updating, instantiating, and deleting flags. The functionality here is just to take an array of foundry Actor documents and be able to implement them in the vue.
6 replies
TTyphonJS
Created by chimis on 7/15/2023 in #typhonjs-runtime
TJSDocument for aggregating actor flags for Svelte Component
Based on what is being done here: 
   const wildcard = doc.embedded.create(Item, {
      name: 'wildcard',
      filters: [filterSearch],
      sort: (a, b) => a.name.localeCompare(b.name)
   });
   const wildcard = doc.embedded.create(Item, {
      name: 'wildcard',
      filters: [filterSearch],
      sort: (a, b) => a.name.localeCompare(b.name)
   });
It's pretty clear that I need to pass more parameters to get the Dyn reducer to work than just passing it "the location of the object" or a "string" to search.
6 replies
TTyphonJS
Created by TyphonJS (Michael) on 7/10/2023 in #typhonjs-runtime
Release `TRL 0.1.0` - The journey to beta begins...
Just in case that helps someone else, that worked for me.
21 replies
TTyphonJS
Created by TyphonJS (Michael) on 7/10/2023 in #typhonjs-runtime
Release `TRL 0.1.0` - The journey to beta begins...
I had issues just updating the dependencies in my package.json and running npm install. I was able to update my module with a couple of steps: 1. ran npm cache clean --force 2. deleted my node_modules directory 3. deleted package-lock.json 4. made my dependency version changes and ran npm insall.
21 replies
TTyphonJS
Created by chimis on 7/5/2023 in #typhonjs-runtime
Getting started with the GUI and understanding element root
That's good advice. I have some backend stuff that needs some work so I will pause for now on the front end until we have that update!
6 replies
TTyphonJS
Created by chimis on 7/5/2023 in #typhonjs-runtime
Getting started with the GUI and understanding element root
And then the NPC data is being presented in the NPCProfile Component 
<script>
import {setContext} from "svelte";


let elementRoot
let module = ui.knowledgeRecalled;
let npcArray = module?.npcActors;
let selectedNPC = npcArray ? npcArray[-1] : null;

function updateSelectedActor(actor) {
   selectedNPC = actor;
   setContext('selectedNPC', selectedNPC);
}
</script>


      {#if npcArray}
         {#each npcArray as npc}
            <button on:click={() => updateSelectedActor(npc)}>{npc.name}</button>
         {/each}

         <h2> Selected Actor: {selectedNPC.flags.name}</h2>
            <p> Actor Data: {selectedNPC.flags.defaultDC}</p>
      {/if}
<script>
import {setContext} from "svelte";


let elementRoot
let module = ui.knowledgeRecalled;
let npcArray = module?.npcActors;
let selectedNPC = npcArray ? npcArray[-1] : null;

function updateSelectedActor(actor) {
   selectedNPC = actor;
   setContext('selectedNPC', selectedNPC);
}
</script>


      {#if npcArray}
         {#each npcArray as npc}
            <button on:click={() => updateSelectedActor(npc)}>{npc.name}</button>
         {/each}

         <h2> Selected Actor: {selectedNPC.flags.name}</h2>
            <p> Actor Data: {selectedNPC.flags.defaultDC}</p>
      {/if}
This is more so just to see the data before I go to much further, because I have a tendency to write a bunch of code and then try to debug before verifying that piece works. I am finding myself looking through other examples of Typhon and I'm trying to apply what's been done there to my system, and I recognize this is a problem. in foundry I have this error here 
[TRL] loadSvelteConfig error - HTMLElement target with no 'selectorElement' defined.

Note: If configuring an application shell and directly targeting a HTMLElement did you bind an'elementRoot' and include '<svelte:options accessors={true}/>'?

Offending config:
[TRL] loadSvelteConfig error - HTMLElement target with no 'selectorElement' defined.

Note: If configuring an application shell and directly targeting a HTMLElement did you bind an'elementRoot' and include '<svelte:options accessors={true}/>'?

Offending config:
it's dawning on me that I don't think I quite understand how data should be managed in TRL. In other examples It seems like maybe I should work with the data in the 'shell' and then import that into the component for presenting it? I'm not really sure. I'm not expecting anyone to it for me, so I guess I mainly would just like to know how I should think about working with the data once I'm in the view portion of the code, and maybe what a good example project out there is to look at for someone doing this well. Any advice is appreciated.
6 replies