Paranoia Perfect Edition CS, Official - Dragging NPC from Compendium to Canvas shows CS but keeps looping the dice image

Hello,

I'm looking for some help with the Official Mongoose Publishing Paranoia character sheet.

To date, everything we've wanted working has worked, and now we're onto the final stage.

We've been asked by the Roll20 product folk, to 'Create a character by dragging an NPC from the Compendium onto the Canvas.'

When we do this, the character sheet appears, but then the loading dice displays in an infinite loop.

There are no errors in the console, and I see the log 'Compendium item dropped onto canvas!' and then nothing else.

This happens on the character sheet currently available.

So, can anyone give me some advice?  I assume this 'loop' is stopping it from populating the fields on the sheet, or calling the 'change:drop_category' event as I need that to fire so I can show the NPC sheet (defaults to the PC sheet).

TIA

Kenny

If you are using the live version of the sheet, it has no code in it to handle a compendium drop event (of NPCs or anything else). I'd recommend contacting Mongoose Publishing for support on the sheet or for code that is updated to support the compendium drag and drop.

Hi Scott, thank you for taking the time to reply!

I built the character sheet for Mongoose (it's my first ever Roll20 sheet) I thought I was missing something but after a lot of trying I spoke with the product support folk (Eve) and they've suggested I post here.

Most of what I've learned over the last few months has been reading someone else's sheet and then checking the wiki, as a lot of wiki's require existing knowledge, or are a bit hard to follow.

Can you point me to what we need to 'add' for it to handle a compendium drop?  I'd love to know how I can check that it's Equipment or NPC, a specific category, I did add a sheet working for 'change:drop_category' but it hasn't fired.

Thanks,
Kenny

Unfortunately, the wiki information on compendium drop handling is not as comprehensive as it is for other aspects of sheet development. It sounds like you have a development version of your sheet that may have some of this, but in order for a sheet to handle drag and drop, it needs an element that is used as the drop target. The wiki shows this drop target inside a repeating section, but that is an out dated method from when compendiums first started and were not as complex. My current preferred method is to wrap the entire sheet in a div that is the compendium drop target:

<div class='compendium-drop-target'>
    <!-- your sheet code here -->
</div>

This then turns the entire sheet into a drop point for dragging compendium items.

This is particularly useful for handling drops that affect the entire sheet like NPCs. For drops like NPCs that can be dropped directly to the VTT, you also need to add the category name as a class to the drop-target element so that Roll20 knows where to put the data. This category name class is all lowercase, with special characters like parentheses removed:

<div class='compendium-drop-target npcs'>
    <!-- your sheet code here -->
</div>

And then you need attributes to accept the data that you are going to work with. It is possible to do this solely with html by making drop targets for each compendium attribute, but the better way is to make an input to accept the compendium name and the compendium data (compendium name honestly isn't even required):

<div class="compendium-drop-target npcs vehicles">
  <input name="attr_drop_name" accept="Name" value="" type="hidden" title="@{drop_name}"/>
  <input name="attr_drop_data" accept="data" value="" type="hidden" title="@{drop_data}"/>
  <!-- your sheet code here -->
</div>

And then use a sheetworker to parse the json that is put into drop_data and apply it to the sheet as appropriate for the category of data it is.

<div class="compendium-drop-target npcs">
  <input name="attr_drop_name" accept="Name" value="" type="hidden" title="@{drop_name}"/>
  <input name="attr_drop_data" accept="data" value="" type="hidden" title="@{drop_data}"/>
  <!-- your sheet code here -->
</div>
<script type="text/javascript">
  on('change:drop_data',(event) => {
    // don't do handling if this was changed by api or sheetworker
    if(event.sourceType !== 'player') return;

    getAttrs(['drop_data'],(attributes) => {
      try{
        const data = JSON.parse(attributes.drop_data);
        if(data.Category === 'NPCs'){
          // npc processing
        }else if(data.Category === 'other category'){
          // other category, conditional handling for each droppable category
        }
      }catch(err){
        // handlig for if the data isn't correct
      }
    })
  })
</script>

Note that I'm showing this as a chain of ifs for doing the data processing, but I would actually recommend functionalizing each category's drop handling rather than putting it all directly in the change handler. This will make it easier to troubleshoot and read your code.

Thank you, thank you! THANK YOU!

I looked into the wiki page, and tried adding the:

<div class='compendium-drop-target npcs'>
    <!-- your sheet code here -->
</div>

Around all the NPC fields, but nothing worked. 

What I was missing (and thought so) was this type of script:

<script type="text/javascript">
  on('change:drop_data',(event) => {
    // don't do handling if this was changed by api or sheetworker
    if(event.sourceType !== 'player') return;

    getAttrs(['drop_data'],(attributes) => {
      try{
        const data = JSON.parse(attributes.drop_data);
        if(data.Category === 'NPCs'){
          // npc processing
        }else if(data.Category === 'other category'){
          // other category, conditional handling for each droppable category
        }
      }catch(err){
        // handlig for if the data isn't correct
      }
    })
  })
</script>

So later tonight (I'm in England) I will update my latest version (using the Sheet Sandbox) and get it working.

Again, thank you!

I might now be able to finish the Character Sheet!

Thanks,

Kenny

Great to hear, and good luck.

Hey Scott,

A quick update.

Working:

Adding the 'surrounding div' did the trick, the dice animation now completes and now I have the NPC data populated into the NPC fields.

<!-- NPC Sheet -->
    <div class="sheet-npc">
        <div class='compendium-drop-target npcs'>
           ... Lots of NPC code ...
        </div>
    </div>

That caught the data, perfect (as Paranoia would say).

What's not working:

This event doesn't fire, I was hoping it would as all I need to do is to change two attributes so that it swaps to the NPC sheet and hides the header.

I've tried it in it's own 'sheetworker script' section and within the other sheet workers, but nothing works.

Any thoughts? All I want to know 'was the drop an NPC sheet?'

Thanks,

Kenny

Do you have a drop_data attribute?

No, but I think the penny has dropped...... as I now assume that's part of the NPC data?  I just had the standard Basics, Looks, Quirks etc.

So are you basically saying add a unique value like drop_data and within that a JSON property of 'category'?

I could do that, but I don't want that value being displayed on the Compendium under attributes.

I was hoping for something like 'on("sheet:compendium-drop", function() {' which I've seen, but can't find any real help on.

Thanks for all your help, I am making progress - just this final hurdle!

Thanks,

Kenny

You don't need to add the category property, it's a default property that all pages have.

Well, I don't get the ' on('change:drop_data', (event) => {' to fire at all.

This code works and does what I want, it just feels wrong as I'd expect a category, or some type of property that I could check was 'NPC'.

 on("sheet:compendium-drop", function() {
        getAttrs(['npc-quote'], function(values) {
            var tagline = values["npc-quote"];
            if (tagline !== "") {
                // npc dropped, so show NPC sheet and hide header
                setAttrs({ "sheetTab": "npc" });
                setAttrs({ "sheetselection": "on" });
            }
        })
      });

I'll continue to play, but finding this rather frustrating for such a simple task.  I am still very new to this though.

to use the code I provided, you just need to add a hidden input for the attribute drop_data:

<div class='compendium-drop-target npcs'>
    <input type="hidden" name="drop_data" accept="data">
    <!-- your sheet code here -->
</div>

That then provides an attribute to accept the data property of the compendium item. Alternatively, you can rename it to drop_category and tell it to accept "Category" to get just get the category of the compendium item being dropped.

Also, I personally don't use the sheet:compendium-drop event listener because it only triggers when an item is dropped directly to the vtt. There are a couple instances when it's beneficial to limit the code you are running based on how the item was dropped, but not enough for dealing with the differences in the handling. I would recommend doing a listener for changes to the drop_data attribute as above (or drop_category if you change to that alternate).

Hi Scott,

I'm really happy to say that it's all working now.  You were right in that I needed that hidden input, the first two you mentioned did the trick. I'm not sure I need the name, but for the moment I have progress.

<div class="compendium-drop-target npcs">
  <input name="attr_drop_name" accept="Name" value="" type="hidden" title="@{drop_name}"/>
  <input name="attr_drop_data" accept="data" value="" type="hidden" title="@{drop_data}"/>
  <!-- your sheet code here -->
</div>

This works much better than the on:compendium-drop, in that in the same bunch of code I can verify what category and populate the data.

Thanks then for all your help with this, I now understand a lot more than I did a few days ago.

Take care,

Kenny