Character View Helper Functions

This document provides detailed information on helper methods within the SceneGrinder VTT Svelte integration module, aimed at enhancing interaction with character data and UI components. Users who want to create their own gaming systems or extend existing systems will need to know how to use these functions withing Character View build outs.

Introduction

The helper methods facilitate a range of functionalities, from attribute manipulation and UI interactions to dynamic list handling within a Svelte application. Below, you'll find the specifications for using these methods effectively.

Helper Methods

check(attrPath)

Initiates a check action for a specified attribute path, useful for attribute validation or checks within the game logic.

Parameters:

• attrPath: String. The dot notation path to the attribute.

Example:

check('character.attributes.agility');

edit(e, attrPath, asMod)

Opens a popup for editing an attribute's value, supporting both direct attributes and modifiers.

Parameters:

• e: Event. The trigger event, typically a click event.
• attrPath: String. The dot notation path to the attribute.
• asMod: Boolean. Indicates if the edit is for a modifier.

Example:

edit(event, 'character.attributes.intelligence', true);

addItem(e, attrPath)

Facilitates the addition of items to a list or collection attribute via the UI.

Parameters:

• e: Event. The trigger event.
• attrPath: String. The path to the list or collection attribute.

Example:

addItem(event, 'character.equipment');

deleteItem(e, attrPath, rowId)

Enables the removal of items from a list or collection attribute through the UI.

Parameters:

• e: Event. The trigger event.
• attrPath: String. The path to the list or collection attribute.
• rowId: String/Number. The identifier of the item to remove.

Example:

deleteItem(event, 'character.equipment', 'sword123');

list(path)

Generates a dynamic array of objects representing items within a list or collection attribute, each with utility methods for further interaction. This method is versatile, handling both arrays of properties and collections of properties, enabling iteration and manipulation of individual items or attributes within these structures.

Parameters:

• path: String. The path to the list or collection attribute.

Usage Contexts:

• Array of Properties: When dealing with direct arrays, list allows iteration over array items, providing access to individual properties and utility methods for each.
• Collections of Properties: For collections (objects with key-value pairs), list facilitates access to each collection item, treating them as discrete entities for manipulation or interaction.

Example:

const skillList = list('character.skills');
skillList.forEach(skill => console.log(skill.get('name')));

trackScroll(node)

Tracks and restores the scroll position of a specified DOM element, useful for persisting UI scroll states across re-renders.

Parameters:

• node: HTMLElement. The element to monitor.

Example:

trackScroll(document.getElementById('content-area'));

Utility Functions within list

Within the context of list, additional utility functions are provided for detailed interactions:

get(attrPath, defaultIfBlank)

Fetches the value of an attribute, offering a default if the value is absent.

edit(e, asMod)

Triggers an edit UI for the attribute or list item.

addItem(e)

Initiates the addition of an item to the collection.

deleteItem(e)

Facilitates the removal of an item from the collection.

Conclusion

These helper methods are designed to streamline interactions within the SceneGrinder VTT environment, providing Svelte authors with the tools needed for effective character data management and UI dynamics.