Eldoria JavaScript Widgets

How CustomJS Works

The CustomJS plugin is configured with jsFolder: "docs/Assets". It recursively loads all .js files in that folder and makes their exported classes available via await cJS() inside dataviewjs blocks.

Each widget class is instantiated automatically by CustomJS. You destructure the class you need:

const {ClassName} = await cJS()

Data Sources

All lookup widgets load data from CSV files in their respective docs/Assets/{Type}/ folders:

• Spells.csv, Items.csv, Races.csv, Feats.csv, Backgrounds.csv

The CSV files are loaded via Dataview's dv.io.csv() method at runtime. The widgets cache the data after first load.

Widget Reference

1. CharacterSheetDisplay

File: docs/Assets/character-sheet.js Class: CharacterSheetDisplay Purpose: Renders a full interactive D&D 5e character stat sheet with ability scores, modifiers, saving throws, skills, combat stats, weapon attacks, and spellcasting — all auto-calculated.

Full Display

const {CharacterSheetDisplay} = await cJS()
await CharacterSheetDisplay.display(dv, {
  name: "Character Name",
  class: "Fighter",
  level: 5,
  race: "Human",
  background: "Soldier",
  str: 16,
  dex: 14,
  con: 14,
  int: 10,
  wis: 12,
  cha: 8,
  ac: 18,
  speed: 30,
  saves: ['str', 'con'],
  skills: ['athletics', 'intimidation', 'perception', 'survival'],
  simpleWeapons: true,
  martialWeapons: true,
  spellcasting: false
})

Parameters

Optional Parameters (sections appear only when set)

Dynamic Level from Player Controls

Player sheets pull level from a shared "Player Controls" note:

const {CharacterSheetDisplay} = await cJS()
await CharacterSheetDisplay.display(dv, {
  name: "Claire",
  class: "Cleric",
  level: dv.page("Player Controls").level,
  experience: dv.page("Player Controls").ExperiencePoints,
  guildPoints: dv.page("Player Controls").GuildPoints,
  guildRank: dv.page("Player Controls").GuildRank,
  // ... rest of stats
})

Compact Display

A smaller inline version for quick reference:

const {CharacterSheetDisplay} = await cJS()
await CharacterSheetDisplay.displayCompact(dv, {
  name: "Claire",
  class: "Cleric",
  level: 5,
  race: "Water Genasi",
  str: 16, dex: 8, con: 16, int: 14, wis: 18, cha: 12,
  ac: 18, speed: 30,
  saves: ['wis', 'cha'],
  skills: ['insight', 'medicine', 'perception', 'persuasion', 'religion'],
  spellcasting: 'wis',
  simpleWeapons: true,
  martialWeapons: true
})

Valid Skill IDs

Use these camelCase identifiers in the skills array:

acrobatics, animalHandling, arcana, athletics, deception, history, insight, intimidation, investigation, medicine, nature, perception, performance, persuasion, religion, sleightOfHand, stealth, survival

2. SpellLookup

File: docs/Assets/Spells/spell-lookup.js Class: SpellLookup Purpose: Displays expandable spell cards with full details (school, level, casting time, range, components, duration, description, higher levels). Loads from Spells.csv.

const {SpellLookup} = await cJS()
await SpellLookup.display(dv, ['Fireball', 'Magic Missile', 'Cure Wounds'])

Pass an array of spell names. Each renders as a collapsible card with color-coded level badges. Names must match the CSV data (case-insensitive matching is built in).

Pass an empty array [] to display nothing (useful as a placeholder).

3. SpellSearchWidget

File: docs/Assets/Spells/spell-search-widget.js Class: SpellSearchWidget Purpose: Renders a search bar with fuzzy search across all spells in the CSV. Results display as the same spell cards from SpellLookup.

const {SpellSearchWidget} = await cJS()
await SpellSearchWidget.display(dv)

No parameters needed — it provides a full search UI.

4. ItemLookup

File: docs/Assets/Items/item-lookup.js Class: ItemLookup Purpose: Displays expandable item cards with rarity, type, weight, attunement, and description. Color-coded by rarity (Common through Legendary). Loads from Items.csv.

const {ItemLookup} = await cJS()
await ItemLookup.display(dv, ['Longsword', 'Bag of Holding', '+1 Weapon'])

Special Syntax — Item with Context Name

Use pipe syntax to search by a different name than displayed:

'Spell Scroll (1st Level)|Burning Hands'

This searches the CSV for "Spell Scroll (1st Level)" and displays it. The pipe portion provides additional context.

5. ItemSearchWidget

File: docs/Assets/Items/item-search-widget.js Class: ItemSearchWidget Purpose: Searchable item browser with fuzzy search across all items in the CSV.

const {ItemSearchWidget} = await cJS()
await ItemSearchWidget.display(dv)

6. RaceLookup

File: docs/Assets/Races/race-lookup.js Class: RaceLookup Purpose: Displays expandable race cards with traits, ability score increases, size, speed, and description. Loads from Races.csv.

const {RaceLookup} = await cJS()
await RaceLookup.display(dv, ['Genasi (Water)', 'Half-Elf'])

Race names must match CSV format — subraces use parenthetical notation: 'Genasi (Water)', 'Elf (High)'.

7. RaceSearchWidget

File: docs/Assets/Races/race-search-widget.js Class: RaceSearchWidget Purpose: Searchable race browser with fuzzy search.

const {RaceSearchWidget} = await cJS()
await RaceSearchWidget.display(dv)

8. FeatLookup

File: docs/Assets/Feats/feat-lookup.js Class: FeatLookup Purpose: Displays expandable feat cards with prerequisites, description, and source. Loads from Feats.csv.

const {FeatLookup} = await cJS()
await FeatLookup.display(dv, ['Alert', 'Lucky', 'War Caster'])

9. FeatSearchWidget

File: docs/Assets/Feats/feat-search-widget.js Class: FeatSearchWidget Purpose: Searchable feat browser with fuzzy search.

const {FeatSearchWidget} = await cJS()
await FeatSearchWidget.display(dv)

10. BackgroundLookup

File: docs/Assets/Backgrounds/background-lookup.js Class: BackgroundLookup Purpose: Displays expandable background cards with skill proficiencies, tool proficiencies, languages, equipment, and feature description. Loads from Backgrounds.csv.

const {BackgroundLookup} = await cJS()
await BackgroundLookup.display(dv, ['Sailor', 'Noble', 'Acolyte'])

11. BackgroundSearchWidget

File: docs/Assets/Backgrounds/background-search-widget.js Class: BackgroundSearchWidget Purpose: Searchable background browser with fuzzy search.

const {BackgroundSearchWidget} = await cJS()
await BackgroundSearchWidget.display(dv)

12. CommonLookupStyles

File: docs/Assets/common-lookup-styles.js Class: CommonLookupStyles (on window) Purpose: Shared CSS factory used internally by all lookup widgets. Provides getBaseStyles(), getSpellLevelStyles(), getItemRarityStyles(), and injectStyles() methods. You never call this directly — the lookup widgets load it automatically.

Interactive Maps

Maps are standalone HTML pages in docs/ that use Leaflet.js and the shared docs/js/map-logic.js.

How Maps Work

1. An HTML page loads Leaflet, includes js/map-logic.js, and calls initMap() with an image path and markers array.
2. Each marker has: name, position (as [y%, x%] of image dimensions, 0-1 range), link (path to an HTML file in Public/), and description.
3. The map supports Shift+Click to add markers interactively (requires the Node server running).

WorldMap.html

The main world map. Markers correspond to settlements and landmarks with links to public HTML exports.

MapTemplate.html

A blank template for creating new regional/area maps:

<script src="js/map-logic.js"></script>
<script>
    const markers = [
        {
            name: "Location Name",
            position: [0.500, 0.500],  // [y%, x%] of image
            link: "Public/World/Region/Settlement/Settlement.html",
            description: "Brief description"
        },
        // Add more markers here
    ];

    initMap({
        imagePath: './Assets/YourMapImage.jpg',
        markers: markers
    });
</script>

To create a new map page: copy MapTemplate.html, rename it, set the imagePath to the map image, and populate the markers array.

Map Marker Server

docs/server.js runs a local Node.js HTTP server on port 8086 that:

• Serves all files under docs/ as static content
• Provides POST /api/markers to add markers to a map HTML file
• Provides DELETE /api/markers to remove markers from a map HTML file

Start it with:

cd docs
node server.js

Then open http://localhost:8086/WorldMap.html. Shift+Click on the map to add a marker interactively.

Index Generators (Node.js CLI Scripts)

These are run from the command line, not embedded in notes.

generate-index.js

Scans docs/Public/World/ for exported HTML files and generates:

• npc-index.json — NPCs organized by region and settlement
• location-index.json — Settlements and locations organized by region

Used by npc-reference.html and location-reference.html for web-based browsing.

cd docs
node generate-index.js

Run this after adding new HTML exports to docs/Public/.

generate-jarvis-index.js

Scans the entire vault (both Private/ and Public/) and generates jarvis-index.json — a comprehensive entity index with frontmatter metadata, summaries, wiki-link mentions, and full markdown bodies.

Used by dm-jarvis.html for the DM Jarvis live dashboard.

cd docs
node generate-jarvis-index.js

Run this after significant vault changes to keep the dashboard current.

Web Dashboards (HTML Pages)

These are standalone HTML pages, not Obsidian notes. They're accessed via browser or embedded in Obsidian using the Custom Frames plugin.

dm-jarvis.html

Full-featured DM dashboard with entity search, filtering by type, and detailed entity views. Reads jarvis-index.json.

npc-reference.html

Player-facing NPC browser. Search and browse NPCs by region and settlement. Reads npc-index.json.

location-reference.html

Player-facing location browser. Search and browse locations by region. Reads location-index.json.

Embedding Web Pages in Notes

The Custom Frames plugin allows embedding external URLs or local server pages directly in Obsidian notes: