chimis Posts - Answer Overflow

chimis

•Created by chimis on 7/15/2023 in #typhonjs-runtime

TJSDocument for aggregating actor flags for Svelte Component

I'm sure this is very simple, but I'm having a hard time understanding how to get this to work. Maybe someone can provide a quicker pointer or two. For a module I'm working on, I'm storing attributes as flags on the Actors document. An example is as such:

_ActorPF2e2 : {
  ....
  flags: {
    fvtt-knowledge-recalled-pf2e: {
      npcFlags: *myFlags exist here*
    }
  }  
}

_ActorPF2e2 : {
  ....
  flags: {
    fvtt-knowledge-recalled-pf2e: {
      npcFlags: *myFlags exist here*
    }
  }  
}

To gather this data with the TJSDocument method I have the following code

const doc = new TJSDocument();
const NPC = doc.embedded.create(Actors,
   {
   flags: {
      npcFlags: doc?.flags?.npcFlags,
   }
});

const doc = new TJSDocument();
const NPC = doc.embedded.create(Actors,
   {
   flags: {
      npcFlags: doc?.flags?.npcFlags,
   }
});

To explore what the objects look like and what kind of returns I should expect I've been implementing with this function here:

function onDrop(event)
{
   try
   {
      doc.setFromDataTransfer(JSON.parse(event.dataTransfer.getData('text/plain')));
      console.log("Knowledge Recalled onDrop: ", doc.embedded.create(Actors));
   }
   catch (err) { /**/ }
}

function onDrop(event)
{
   try
   {
      doc.setFromDataTransfer(JSON.parse(event.dataTransfer.getData('text/plain')));
      console.log("Knowledge Recalled onDrop: ", doc.embedded.create(Actors));
   }
   catch (err) { /**/ }
}

Using the Essential Svelte as a template to drag an actor over to see if I can extract the data I want. Create requires a second argument, but in my experimenting I've tried the parameter that I posted above for the NPC variable, but I left it out of the implementation here for brevity. I also tried create(Actors, 'flags.npcFlags'). It's clear that I don't really understand how DynOptionsMapCreate works. The output that I'm receiving is a DynMapReducer object with a null value in the array. I've have to step away to head to work, so I'll continue to explore later today, but I figured I'd post here to see if maybe there was something simple that I'm missing here. I appreciate any help here.

6 replies

TTyphonJS

•Created by chimis on 7/5/2023 in #typhonjs-runtime

Getting started with the GUI and understanding element root

It's been a while, but I've been working on my Knowledge Recalled module since V11 is out, and my friend and I have made progress with getting and storing the data that we need. I'll be honest I'm struggling a little with Typhon for building my GUI. I'm not sure if I'm just lacking understanding of Svelte or what, but I think if I can get may data presented in the gui it'll be a lot easier for me to tinker around to figure out a little more of what is going on. If someone could maybe give me a suggestion or too. The approach I'm taking involves using my GMJournalAppShell as the place where I'm going to pull in all of the other svelte components.

<script>
   import { flip }               from 'svelte/animate';

   import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/core';
   import { TJSDocument }        from '@typhonjs-fvtt/runtime/svelte/store';

   import { rippleFocus }        from '@typhonjs-fvtt/svelte-standard/action';
   import { TJSInput }           from '@typhonjs-fvtt/svelte-standard/component';
   import { createFilterQuery }  from '@typhonjs-fvtt/svelte-standard/store';
   import {getContext, setContext} from "svelte";
   import NPCProfile from "./NPCProfile.svelte";

   const { application } = getContext("#external");
   let elementRoot;

</script>
<svelte:options accessors={true} />
<ApplicationShell bind:elementRoot>
   <NPCProfile />
</ApplicationShell>


<style>

</style>

<script>
   import { flip }               from 'svelte/animate';

   import { ApplicationShell }   from '@typhonjs-fvtt/runtime/svelte/component/core';
   import { TJSDocument }        from '@typhonjs-fvtt/runtime/svelte/store';

   import { rippleFocus }        from '@typhonjs-fvtt/svelte-standard/action';
   import { TJSInput }           from '@typhonjs-fvtt/svelte-standard/component';
   import { createFilterQuery }  from '@typhonjs-fvtt/svelte-standard/store';
   import {getContext, setContext} from "svelte";
   import NPCProfile from "./NPCProfile.svelte";

   const { application } = getContext("#external");
   let elementRoot;

</script>
<svelte:options accessors={true} />
<ApplicationShell bind:elementRoot>
   <NPCProfile />
</ApplicationShell>


<style>

</style>

6 replies

Gaming

Programming