This repository contains a number of examples for how to create web view "Symbiotes". It should serve as inspiration for what is possible and as code examples for how to use and interact with our TaleSpire API. The examples here are mostly proof of concepts and while they may have their own merit to use, they are not fleshed out in a way that is conductive to actual game use.
The full Symbiotes documentation is available as a website or as a Symbiote itself to be installed in TaleSpire.
To use Symbiotes, you need to activate the feature in the settings. As these examples are intended as documentation for developing your own, you will likely also want to activate development mode to be able to connect the Chromium debugging tools to the embedded browser.
To install the examples simply go to the Symbiote directory located at %AppData%\..\LocalLow\BouncyRock Entertainment\TaleSpire\Symbiotes by either navigating there manually or pressing the "Open Symbiotes Directory" button in the game settings or the Symbiotes side panel.
Each Symbiote should be in its own folder and contain one manifest.json.
The following is a list of which features are shown off in which examples.
- TaleSpire theme colors and fonts are used in all examples utilizing local webpages (that are completely stored on disk instead of online on some server): Generic Character Sheet, Language Chat, Notes Handout, Dice Roller, Slab Stats, Selection Info
- TaleSpire UI Icons: Generic Character Sheet, Slab Stats, Selection Info
- Local Storage: Generic Character Sheet, Language Chat
- Dice Rolls: Generic Character Sheet, Dice Roller
- Chat: Language Chat
- Data sync: Notes Handout
- Player management: Language Chat
- Client management: Notes Handout
- Board switch handling: Slab Stats
- Creature info: Selection Info
- Handling content pack metadata: Slab Stats, Selection Info
- Permissions: Notes Handout
- Symbiote debug log: Generic Character Sheet, Language Chat
- Initialize Event: Generic Character Sheet, Language Chat, Notes Handout, Selection Info
- Dice Finder extra: Dice Finder
- Inject custom JS/CSS: Website Viewer, Dice Finder
| Name | Description | Used Features |
|---|---|---|
| Generic Character Sheet | A basic character sheet for no specific system | TS Theme Colors, Font & Icons, Dice Rolls, Storage, Debug, Init Event, Description File |
| PDF Reader | Loading a PDF into Symbiote | Load other local resource |
| Minimal Website Viewer | Load an online (non-local) website | Link to online resource |
| Website Viewer | Load an online (non-local) website | Link to online resource, Inject JS, Browser controls |
| Language Chat | A chat tool that allows sending messages with languages that look like gibberish to players who don't know the language | TS Theme Colors, Clients in board, Chat, Subscriptions |
| Notes Handout | A tool for sending stylized notes & web images to other clients | TS Theme Colors & Font, Client management, Sync Messages & Subscriptions, Player Permissions, Notifications, Run in background, Description File |
| Dice Roller | A dice group composer that allows to roll with advantage and disadvantage | TS Theme Colors & Font, Dice Rolls & Subscriptions, Run in background, Description File |
| Slab Stats | An overview of certain stats of a slab | TS Theme Colors & Font, Subscriptions, Slab unpacking & parsing, Load TS Thumbnails & Icons, Board switch handling |
| Selection Info | An overview of minis in a selection | TS Theme Colors & Font, Load TS Thumbnails & Icons |
| Dice Finder | A demonstration of adding the Dice Finder extra to pages | Dice Finder Extra, Inject JS |