A framework using Svelte to generate a website for one's TTRPG notes with buttons that activate Foundry commands
Adding code to render Influence statblocks
Cass Unterholzner
(Jul 21, 2026, 8:06 PM -0500)
fb71eaff
ee648a7f
+64
+42
src/lib/components/influenceStatblock.svelte
+42
src/lib/components/influenceStatblock.svelte
···
1
+
<script lang="ts">
2
+
import influence from "$lib/data/influence";
3
+
import CheckButton from "./checkButton.svelte";
4
+
import { onMount } from "svelte";
5
+
6
+
let { id, campaign, children } = $props();
7
+
8
+
const statblock = influence[id];
9
+
</script>
10
+
11
+
<div class="statblock">
12
+
<h3>{statblock.name}</h3>
13
+
<h4>Creature {statblock.level}</h4>
14
+
<hr />
15
+
<div class="traits">
16
+
<div class="pf-trait pf-trait-{statblock.rarity}">{statblock.rarity}</div>
17
+
<div class="pf-trait pf-trait-size">{statblock.size}</div>
18
+
{#each statblock.traits as trait}
19
+
<div class="pf-trait pf-trait-{trait}">{trait}</div>
20
+
{/each}
21
+
</div>
22
+
<p>{statblock.type}</p>
23
+
<p class="hang"><b>Perception</b> {#if statblock.perception >= 0}+{/if}{statblock.perception}</p>
24
+
<p class="hang"><b>Will</b> {#if statblock.will >= 0}+{/if}{statblock.will}</p>
25
+
<p class="hang"><b>Discovery</b> {#each statblock.discovery as discovery, index}
26
+
<CheckButton skill={discovery.skill} dc={discovery.dc} campaign={campaign} />{#if index < statblock.discovery.length - 1}, {/if}
27
+
{/each}</p>
28
+
<p class="hang"><b>Influence Skills</b> {#each statblock.influence as influence, index}
29
+
<CheckButton skill={influence.skill} dc={influence.dc} campaign={campaign} /> {#if influence.reason !== undefined}({influence.reason}){/if}{#if index < statblock.influence.length - 1}, {/if}
30
+
{/each}</p>
31
+
{@render children()}
32
+
<hr />
33
+
<p class="hang"><b>Resistances</b> {@html statblock.resistance.replace("\n\n", "<br />")}</p>
34
+
<p class="hang"><b>Weakness</b> {@html statblock.weakness.replace("\n\n", "<br />")}</p>
35
+
<hr />
36
+
<p class="hang"><b>Background</b> {@html statblock.background.replace("\n\n", "<br />")}</p>
37
+
<p class="hang"><b>Appearance</b> {@html statblock.appearance.replace("\n\n", "<br />")}</p>
38
+
<p class="hang"><b>Personality</b> {@html statblock.personality.replace("\n\n", "<br />")}</p>
39
+
{#if statblock.penalty !== undefined}
40
+
<p class="hang"><b>Penalty</b> {@html statblock.penalty.replace("\n\n", "<br />")}</p>
41
+
{/if}
42
+
</div>
+5
src/lib/components/influenceThreshold.svelte
+5
src/lib/components/influenceThreshold.svelte
+17
src/lib/data/influence.ts
+17
src/lib/data/influence.ts
···
1
+
const statblocks = import.meta.glob(
2
+
"/data/*-influence.json",
3
+
{
4
+
eager: true
5
+
}
6
+
);
7
+
8
+
const influence: Record<string, any> = Object.fromEntries(
9
+
Object.entries(statblocks).map(([path, module]: [string, any]): [string, any] => {
10
+
return [
11
+
path.split("/").pop()!.replace("-influence.json", ""),
12
+
module.default
13
+
];
14
+
})
15
+
);
16
+
17
+
export default influence;