reorganize things and add some cards components

This commit is contained in:
RussellChamp committed 2021-08-14 21:37:30 -04:00
1 parent 51948299fa
commit 40adfd6eaa
29 files changed
+664 -487

No files matched your search

+4 -4
View File
@@ -7,13 +7,13 @@
<title>TPW Roller App</title>
<link rel='icon' type='image/png' href='/tpw/favicon.png'>
<link rel='icon' type='image/png' href='favicon.png'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css' />
<link rel='stylesheet' href='/tpw/global.css'>
<link rel='stylesheet' href='/tpw/build/bundle.css'>
<link rel='stylesheet' href='global.css'>
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='/tpw/build/bundle.js'></script>
<script defer src='build/bundle.js'></script>
</head>
<body>
+12 -11
View File
@@ -1,16 +1,17 @@
<script lang="ts">
import { Accordion, AccordionHeader, AccordionItem } from "sveltestrap";
import CreatureRoller from "./rollers/CreatureRoller.svelte";
import DangerRoller from "./rollers/DangerRoller.svelte";
import DetailsRoller from "./rollers/DetailsRoller.svelte";
import DiscoveryRoller from "./rollers/DiscoveryRoller.svelte";
import DungeonRoller from "./rollers/DungeonRoller.svelte";
import FollowerRoller from "./rollers/FollowerRoller.svelte";
import KingdomRoller from "./rollers/KingdomRoller.svelte";
import NpcRoller from "./rollers/NpcRoller.svelte";
import PlaceRoller from "./rollers/PlaceRoller.svelte";
import RegionRoller from "./rollers/RegionRoller.svelte";
import Footer from "./componenets/Footer.svelte";
import CreatureRoller from "./components/CreatureRoller.svelte";
import DangerRoller from "./components/DangerRoller.svelte";
import DetailsRoller from "./components/DetailsRoller.svelte";
import DiscoveryRoller from "./components/DiscoveryRoller.svelte";
import DungeonRoller from "./components/DungeonRoller.svelte";
import FollowerRoller from "./components/FollowerRoller.svelte";
import KingdomRoller from "./components/KingdomRoller.svelte";
import NpcRoller from "./components/NpcRoller.svelte";
import PlaceRoller from "./components/PlaceRoller.svelte";
import RegionRoller from "./components/RegionRoller.svelte";
import Footer from "./components/Footer.svelte";
</script>
<main>
+81
View File
@@ -0,0 +1,81 @@
<script lang="ts">
import { capitalize } from "lodash";
import { Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row } from "sveltestrap";
import NpcCard from "./NpcCard.svelte";
import DieIcon from "./DieIcon.svelte";
import type { Creature } from "../rollers/creatures";
export let creature: Creature;
export let timestamp: string;
</script>
<main>
<Card class="mb-3">
<CardHeader>
<CardTitle>
{capitalize(creature.type)}<DieIcon value={creature.roll} />
{#if creature.subtype !== ""}({creature.subtype})<DieIcon value={creature.subroll} />{/if}: {capitalize(
creature.description
)}<DieIcon value={creature.specificroll} />
</CardTitle>
</CardHeader>
<CardBody>
<CardText>
<Container>
<Row>
<strong>Details:</strong>
<ul>
{#if creature.ability}<li>Ability: {creature.ability.description}<DieIcon value={creature.ability.roll} /></li>{/if}
{#if creature.activity}<li>Activity: {creature.activity.description}<DieIcon value={creature.activity.roll} /></li>{/if}
{#if creature.adjective}<li>
Adjective: {creature.adjective.description}
<DieIcon value={creature.adjective.roll} />
</li>{/if}
{#if creature.age}<li>Age: {creature.age.description}<DieIcon value={creature.age.roll} /></li>{/if}
{#if creature.alignment}<li>
Alignment: {creature.alignment.description}
<DieIcon value={creature.alignment.roll} />
</li>{/if}
{#if creature.aspect}<li>Aspect: {creature.aspect.description}<DieIcon value={creature.aspect.roll} /></li>{/if}
{#if creature.condition}<li>
Condition: {creature.condition.description}
<DieIcon value={creature.condition.roll} />
</li>{/if}
{#if creature.disposition}<li>
Disposition: {creature.disposition.description}
<DieIcon value={creature.disposition.roll} />
</li>{/if}
{#if creature.feature}<li>Feature: {creature.feature.description}<DieIcon value={creature.feature.roll} /></li>{/if}
{#if creature.npc}<li>
NPC Stats:
<NpcCard npc={creature.npc} {timestamp} />
</li>{/if}
{#if creature.numAppearing}<li>
Number Appearing: {creature.numAppearing.description}
<DieIcon value={creature.numAppearing.roll} />
</li>{/if}
{#if creature.size}<li>Size: {creature.size.description}<DieIcon value={creature.size.roll} /></li>{/if}
{#if creature.tags.length > 0}<li>
Tags: {#each creature.tags as tag} {tag.description}, {/each}
</li>{/if}
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
</main>
<style>
main {
text-align: left;
}
.card-subtitle {
padding-bottom: 1em;
}
ul {
margin-left: 2em;
}
</style>
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts">
import { format as formatDate } from "date-fns";
import { Button } from "sveltestrap";
import CreatureCard from "./CreatureCard.svelte";
import { Creature, rollCreature } from "../rollers/creatures";
let rollResults: { creature: Creature; timestamp: string }[] = [];
function roll(event: Event) {
let creature = rollCreature();
rollResults = [{ creature, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
</script>
<main>
<Button color="primary" on:click={roll}>Roll Creature</Button>
{#each rollResults as { creature, timestamp }}
<CreatureCard {creature} {timestamp} />
{/each}
</main>
<style>
main {
text-align: left;
}
</style>
@@ -1,7 +1,7 @@
<script lang="ts">
import { format as formatDate } from "date-fns";
import { Button, Icon } from "sveltestrap";
import { Danger, rollDanger } from "./dangers";
import { Danger, rollDanger } from "../rollers/dangers";
export let rollResults: { danger: Danger; icon: string; timestamp: string }[] = [];
@@ -21,12 +21,17 @@
rollTag,
rollTerrain,
rollVisibility,
} from "./details";
} from "../rollers/details";
let rollResults: { type: string; value: string; timestamp: string }[] = [];
import DieIcon from "./DieIcon.svelte";
let rollResults: { type: string; roll: number; value: string; timestamp: string }[] = [];
function roll(item: { type: string; description: string; roll: number }) {
rollResults = [{ type: item.type, value: item.description, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
rollResults = [
{ type: item.type, roll: item.roll, value: item.description, timestamp: formatDate(new Date(), "P kk:mm:ss") },
...rollResults,
];
}
</script>
@@ -89,8 +94,8 @@
<Button color="primary" on:click={() => roll(rollVisibility())}>Roll Visibility</Button>
</span>
{#each rollResults as { type, value, timestamp }}
<h4>{timestamp}: ({type}): {value}</h4>
{#each rollResults as { type, roll, value, timestamp }}
<h4>{timestamp}: ({type}): {value}<DieIcon value={roll} /></h4>
{/each}
</main>
+45
View File
@@ -0,0 +1,45 @@
<script lang="ts">
export let faces: number = 12;
export let value: number = 1;
</script>
<main>
<div
class="icon"
class:d4={faces == 4}
class:d6={faces == 6}
class:d8={faces == 8}
class:d10={faces == 10}
class:d12={faces == 12}
class:d20={faces == 20}
>
<span class="value">
&nbsp;[d{faces}: {value}]
</span>
</div>
</main>
<style>
main {
display: inline-block;
}
/* .icon {
font-size: 2em;
color: white;
}
.value {
position: relative;
} */
.d4 {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
.d6 {
height: 50px;
width: 50px;
background-color: #555;
}
</style>
+77
View File
@@ -0,0 +1,77 @@
<script lang="ts">
import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row, Icon } from "sveltestrap";
import { capitalize } from "lodash";
import DieIcon from "./DieIcon.svelte";
import CreatureCard from "./CreatureCard.svelte";
import type { Discovery } from "../rollers/discoveries";
export let discovery: Discovery;
export let timestamp: string;
</script>
<main>
<Card class="mb-3">
<CardHeader>
<CardTitle>
{capitalize(discovery.category)}
<DieIcon value={discovery.roll} />
{#if discovery.subcategory !== ""}
({discovery.subcategory}<DieIcon value={discovery.subroll} />){/if}: {capitalize(discovery.description)}
<DieIcon value={discovery.specificroll} />
</CardTitle>
</CardHeader>
<CardBody>
<CardText>
<Container>
{#if discovery.category == "creature"}
<Row>
<CreatureCard creature={discovery.creature} {timestamp} />
</Row>
{:else if discovery.category == "steading"}
<Row>
<p>TODO: format steadings</p>
</Row>
{:else}
<Row>
<strong>Details:</strong>
<ul>
{#if discovery.age}<li>Age: {discovery.age.description}<DieIcon value={discovery.age.roll} /></li>{/if}
{#if discovery.alignment}<li>
Alignment: {discovery.alignment.description}<DieIcon value={discovery.alignment.roll} />
</li>{/if}
{#if discovery.aspect}<li>Aspect: {discovery.aspect.description}<DieIcon value={discovery.aspect.roll} /></li>{/if}
{#if discovery.creature}<li>
Produced/Inhabited By: {discovery.creature.description}<DieIcon value={discovery.creature.roll} />
<CreatureCard creature={discovery.creature} {timestamp} />
</li>{/if}
{#if discovery.element}<li>Element: {discovery.element.description}<DieIcon value={discovery.element.roll} /></li>{/if}
{#if discovery.magicType}<li>
MagicType: {discovery.magicType.description}<DieIcon value={discovery.magicType.roll} />
</li>{/if}
{#if discovery.ruination}<li>
Ruination: {discovery.ruination.description}<DieIcon value={discovery.ruination.roll} />
</li>{/if}
{#if discovery.size}<li>Size: {discovery.size.description}<DieIcon value={discovery.size.roll} /></li>{/if}
{#if discovery.steading}<li>Steading: {discovery.steading.description}<DieIcon value={discovery.steading.roll} /></li>{/if}
{#if discovery.visibility}<li>
Visibility: {discovery.visibility.description}<DieIcon value={discovery.visibility.roll} />
</li>{/if}
</ul>
</Row>
{/if}
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
</main>
<style>
main {
text-align: left;
}
ul {
margin-left: 2em;
}
</style>
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts">
import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row, Icon } from "sveltestrap";
import { capitalize } from "lodash";
import { format as formatDate } from "date-fns";
import DiscoveryCard from "./DiscoveryCard.svelte";
import { Discovery, rollDiscovery } from "../rollers/discoveries";
export let rollResults: { discovery: Discovery; timestamp: string }[] = [];
function roll(event: Event) {
let discovery = rollDiscovery();
rollResults = [{ discovery, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
function getIcon(t: string, c: string): string {
return "";
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Discovery</Button>
</span>
{#each rollResults as { discovery, timestamp }}
<DiscoveryCard {discovery} {timestamp} />
{/each}
</main>
<style>
main {
text-align: left;
}
.btn {
text-align: center;
}
</style>
+84
View File
@@ -0,0 +1,84 @@
<script lang="ts">
import { Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row, Icon } from "sveltestrap";
import { capitalize } from "lodash";
import type { Dungeon } from "../rollers/dungeons";
export let dungeon: Dungeon;
export let timestamp;
function getIcon(t: string, c: string): string {
return t == "discovery"
? "eye-fill"
: t == "danger"
? "exclamation-triangle-fill"
: c == "mundane"
? "exclamation-triangle"
: c == "unusual"
? "exclamation-square"
: c == "extraordinary"
? "exclamation-octagon"
: "";
}
</script>
<main>
<Card class="mb-3">
<CardHeader>
<CardTitle
>{capitalize(dungeon.size.description)} {dungeon.function.description} built by (a/an) {dungeon.builder.description}</CardTitle
>
</CardHeader>
<CardBody>
<CardSubtitle>
Fell to ruination from <em>{dungeon.ruination.description}</em>.
</CardSubtitle>
<CardText>
<Container>
<Row>
<strong>Common Themes ({dungeon.size.commonThemes}):</strong>
<ul>
{#each dungeon.commonThemes as theme}
<li><Icon name={getIcon("theme", theme.category)} /> {theme.category}: {theme.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Unique Themes ({dungeon.size.uniqueThemes}):</strong>
<ul>
{#each dungeon.uniqueThemes as theme}
<li><Icon name={getIcon("theme", theme.category)} /> {theme.category}: {theme.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Common Areas ({dungeon.size.commonAreas}):</strong>
<ul>
{#each dungeon.commonAreas as area}
<li><Icon name={getIcon(area.type, area.category)} /> {area.type}/{area.category}: {area.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Unique Areas ({dungeon.size.uniqueAreas}):</strong>
<ul>
{#each dungeon.uniqueAreas as area}
<li><Icon name={getIcon(area.type, area.category)} /> {area.type}/{area.category}: {area.description}</li>
{/each}
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
</main>
<style>
main {
text-align: left;
}
ul {
margin-left: 2em;
}
</style>
+34
View File
@@ -0,0 +1,34 @@
<script lang="ts">
import { Button } from "sveltestrap";
import { format as formatDate } from "date-fns";
import DungeonCard from "./DungeonCard.svelte";
import { Dungeon, rollDungeon } from "../rollers/dungeons";
export let rollResults: { dungeon: Dungeon; timestamp: string }[] = [];
function roll(event: Event) {
let dungeon = rollDungeon();
rollResults = [{ dungeon, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Dungeon</Button>
</span>
{#each rollResults as { dungeon, timestamp }}
<DungeonCard {dungeon} {timestamp} />
{/each}
</main>
<style>
main {
text-align: left;
}
.btn {
text-align: center;
}
</style>
+105
View File
@@ -0,0 +1,105 @@
<script lang="ts">
import { Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Col, Row } from "sveltestrap";
import type { Follower } from "../rollers/followers";
export let follower: Follower;
export let timestamp: string;
</script>
<main>
<Card class="mb-3">
<CardHeader>
<CardTitle>{follower.name} ({follower.gender})</CardTitle>
</CardHeader>
<CardBody>
<CardSubtitle>
From <em>{follower.homeSteading.homesteadName}</em> in <em>{follower.homeSteading.kingdomName}</em>
</CardSubtitle>
<CardText>
<Container>
<Row>
<strong>Quality:</strong>
<p>
They are <em>{follower.quality.description}</em> (Quality: {follower.quality.value}). They
<em>{follower.background.description}</em>.
</p>
</Row>
<Row>
<strong>Tags:</strong>
<ul>
{#each follower.tags as tag}
<li>{tag.name}: {tag.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Moves:</strong>
<ul>
{#each follower.moves as move}
<li>{move.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Loyalty:</strong>
<p>
They have a loyalty score of {follower.loyalty.value}{#if !!follower.loyalty.description}
and <em>{follower.loyalty.description}</em>{/if}.
</p>
</Row>
<Row>
<strong>Instinct:</strong>
<p>
When left to their own devices, they will <em>{follower.instinct.description}</em>.
</p>
</Row>
<Row>
<strong>Cost:</strong>
<p>
They are motivated by <em>{follower.cost.name}</em>. They will want <em>{follower.cost.description}</em>
</p>
</Row>
<Row>
<strong>Hit Points:</strong>
<p>
They are <em>{follower.hitPoints.description}</em> and have {follower.hitPoints.value} HP.
</p>
</Row>
<Row>
<strong>Armor & Shield:</strong>
<p>
They are equipped with <em>{follower.armor.description}</em> ({follower.armor.value} armor).
</p>
</Row>
<Row>
<strong>Damage:</strong>
<p>
In a fight, they <em>{follower.damage.description}</em> dealing <em>d{follower.damage.value}</em> damage.
</p>
</Row>
<Row>
<strong>Load & Gear:</strong>
<ul>
{#each follower.loadAndGear.gear as gear}
<li>{gear}</li>
{/each}
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
</main>
<style>
main {
text-align: left;
}
p {
margin-left: 1em;
}
ul {
margin-left: 2em;
}
</style>
+34
View File
@@ -0,0 +1,34 @@
<script lang="ts">
import { Button } from "sveltestrap";
import { format as formatDate } from "date-fns";
import FollowerCard from "./FollowerCard.svelte";
import { rollFollower, Follower } from "../rollers/followers";
export let rollResults: { follower: Follower; timestamp: string }[] = [];
function roll(event: Event) {
let follower = rollFollower();
rollResults = [{ follower, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Followers</Button>
</span>
{#each rollResults as { follower, timestamp }}
<FollowerCard {follower} {timestamp} />
{/each}
</main>
<style>
main {
text-align: left;
}
.btn {
text-align: center;
}
</style>
File renamed without changes.
@@ -3,7 +3,7 @@
import { format as formatDate } from "date-fns";
import { Button, Icon } from "sveltestrap";
import { kingdoms, rollCategory } from "./kingdoms";
import { kingdoms, rollCategory } from "../rollers/kingdoms";
let rollResults: { value: string; icon: string; timestamp: string }[] = [];
let kingdom = "arpad";
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts">
import { Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Col, Row, Icon } from "sveltestrap";
import type { Npc } from "../rollers/npcs";
export let npc: Npc;
export let timestamp: string;
</script>
<main>
<Card class="mb-3">
<CardHeader>
<CardTitle>{npc.getDescription()}</CardTitle>
</CardHeader>
<CardBody>
<CardSubtitle>
From <em>{npc.hometown}</em>.
</CardSubtitle>
<CardText>
<Container>
<Row>
<strong>Background Context:</strong>
<ul>
<li>
They are a(n) <em>{npc.context.alignment.description}</em> <em>{npc.context.description}</em> with
<em>{npc.trait.category} ({npc.context.trait.description})</em>
encountered in a(n) <em>{npc.context.category}</em> setting while they are <em>{npc.context.activity.description}</em>
</li>
</ul>
</Row>
<Row>
<strong>Follower Stats:</strong>
<ul>
<li>{npc.follower.name}</li>
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
</main>
<style>
main {
text-align: left;
}
ul {
margin-left: 2em;
}
</style>
+34
View File
@@ -0,0 +1,34 @@
<script lang="ts">
import { Button } from "sveltestrap";
import { format as formatDate } from "date-fns";
import NpcCard from "./NpcCard.svelte";
import { Npc, rollNpc } from "../rollers/npcs";
export let rollResults: { npc: Npc; timestamp: string }[] = [];
function roll(event: Event) {
let npc = rollNpc();
rollResults = [{ npc, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Npc</Button>
</span>
{#each rollResults as { npc, timestamp }}
<NpcCard {npc} {timestamp} />
{/each}
</main>
<style>
main {
text-align: left;
}
.btn {
text-align: center;
}
</style>
@@ -1,7 +1,7 @@
<script lang="ts">
import { format as formatDate } from "date-fns";
import { Button } from "sveltestrap";
import { rollPlace } from "./places";
import { rollPlace } from "../rollers/places";
export let rollResults: { place: string; timestamp: string }[] = [];
@@ -1,7 +1,7 @@
<script lang="ts">
import { format as formatDate } from "date-fns";
import { Button } from "sveltestrap";
import { rollRegion } from "./regions";
import { rollRegion } from "../rollers/regions";
export let rollResults: { region: string; timestamp: string }[] = [];
+16
View File
@@ -0,0 +1,16 @@
<script lang="ts">
import { Tooltip } from "sveltestrap";
export let item: { roll: number; description: string };
</script>
<main>
<span id="tip" />
<Tooltip target="tip" placement="top">{item.description}</Tooltip>
</main>
<style>
main {
display: inline-block;
}
</style>
-67
View File
@@ -1,67 +0,0 @@
<script lang="ts">
import { capitalize } from "lodash";
import { format as formatDate } from "date-fns";
import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row } from "sveltestrap";
import { Creature, rollCreature } from "./creatures";
export let rollResults: { creature: Creature; timestamp: string }[] = [];
function roll(event: Event) {
let creature = rollCreature();
rollResults = [{ creature, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
</script>
<main>
<Button color="primary" on:click={roll}>Roll Creature</Button>
{#each rollResults as { creature, timestamp }}
<Card class="mb-3">
<CardHeader>
<CardTitle>
{capitalize(creature.type)}
{#if creature.subtype !== ""}({creature.subtype}) {/if}: {capitalize(creature.description)}
</CardTitle>
</CardHeader>
<CardBody>
<CardText>
<Container>
<Row>
<strong>Details:</strong>
<ul>
{#if creature.ability}<li>Ability: {creature.ability.description}</li>{/if}
{#if creature.activity}<li>Activity: {creature.activity.description}</li>{/if}
{#if creature.adjective}<li>Adjective: {creature.adjective.description}</li>{/if}
{#if creature.age}<li>Age: {creature.age.description}</li>{/if}
{#if creature.alignment}<li>Alignment: {creature.alignment.description}</li>{/if}
{#if creature.aspect}<li>Aspect: {creature.aspect.description}</li>{/if}
{#if creature.condition}<li>Condition: {creature.condition.description}</li>{/if}
{#if creature.disposition}<li>Disposition: {creature.disposition.description}</li>{/if}
{#if creature.feature}<li>Feature: {creature.feature.description}</li>{/if}
{#if creature.npc}<li>NPC Name: {creature.npc.name}</li>{/if}
{#if creature.numAppearing}<li>Number Appearing: {creature.numAppearing.description}</li>{/if}
{#if creature.size}<li>Size: {creature.size.description}</li>{/if}
{#if creature.tags.length > 0}<li>
Tags: {#each creature.tags as tag} {tag.description}, {/each}
</li>{/if}
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
{/each}
</main>
<style>
main {
text-align: left;
}
.card-subtitle {
padding-bottom: 1em;
}
ul {
margin-left: 2em;
}
</style>
-82
View File
@@ -1,82 +0,0 @@
<script lang="ts">
import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row, Icon } from "sveltestrap";
import { capitalize } from "lodash";
import { format as formatDate } from "date-fns";
import { Discovery, rollDiscovery } from "./discoveries";
export let rollResults: { discovery: Discovery; timestamp: string }[] = [];
function roll(event: Event) {
let discovery = rollDiscovery();
rollResults = [{ discovery, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
function getIcon(t: string, c: string): string {
return "";
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Discovery</Button>
</span>
{#each rollResults as { discovery, timestamp }}
<Card class="mb-3">
<CardHeader>
<CardTitle
>{capitalize(discovery.category)}{#if discovery.subcategory !== ""}&nbsp;({discovery.subcategory}){/if}: {capitalize(
discovery.description
)}</CardTitle
>
</CardHeader>
<CardBody>
<CardText>
<Container>
{#if discovery.category == "creature"}
<Row>
<p>Are you feeling lucky, punk?</p>
</Row>
{:else if discovery.category == "steading"}
<Row>
<p>TODO: format steadings</p>
</Row>
{:else}
<Row>
<strong>Details:</strong>
<ul>
{#if discovery.age}<li>Age: {discovery.age.description}</li>{/if}
{#if discovery.alignment}<li>Alignment: {discovery.alignment.description}</li>{/if}
{#if discovery.aspect}<li>Aspect: {discovery.aspect.description}</li>{/if}
{#if discovery.creature}<li>Produced/Inhabited By: {discovery.creature.description}</li>{/if}
{#if discovery.element}<li>Element: {discovery.element.description}</li>{/if}
{#if discovery.magicType}<li>MagicType: {discovery.magicType.description}</li>{/if}
{#if discovery.ruination}<li>Ruination: {discovery.ruination.description}</li>{/if}
{#if discovery.size}<li>Size: {discovery.size.description}</li>{/if}
{#if discovery.steading}<li>Steading: {discovery.steading.description}</li>{/if}
{#if discovery.visibility}<li>Visibility: {discovery.visibility.description}</li>{/if}
</ul>
</Row>
{/if}
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
{/each}
</main>
<style>
main {
text-align: left;
}
h2 {
text-align: center;
}
ul {
margin-left: 2em;
}
.btn {
text-align: center;
}
</style>
-103
View File
@@ -1,103 +0,0 @@
<script lang="ts">
import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Row, Icon } from "sveltestrap";
import { format as formatDate } from "date-fns";
import { Dungeon, rollDungeon } from "./dungeons";
import { capitalize } from "lodash";
export let rollResults: { dungeon: Dungeon; timestamp: string }[] = [];
function roll(event: Event) {
let dungeon = rollDungeon();
rollResults = [{ dungeon, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
function getIcon(t: string, c: string): string {
return t == "discovery"
? "eye-fill"
: t == "danger"
? "exclamation-triangle-fill"
: c == "mundane"
? "exclamation-triangle"
: c == "unusual"
? "exclamation-square"
: c == "extraordinary"
? "exclamation-octagon"
: "";
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Dungeon</Button>
</span>
{#each rollResults as { dungeon, timestamp }}
<Card class="mb-3">
<CardHeader>
<CardTitle
>{capitalize(dungeon.size.description)} {dungeon.function.description} built by (a/an) {dungeon.builder.description}</CardTitle
>
</CardHeader>
<CardBody>
<CardSubtitle>
Fell to ruination from <em>{dungeon.ruination.description}</em>.
</CardSubtitle>
<CardText>
<Container>
<Row>
<strong>Common Themes ({dungeon.size.commonThemes}):</strong>
<ul>
{#each dungeon.commonThemes as theme}
<li><Icon name={getIcon("theme", theme.category)} /> {theme.category}: {theme.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Unique Themes ({dungeon.size.uniqueThemes}):</strong>
<ul>
{#each dungeon.uniqueThemes as theme}
<li><Icon name={getIcon("theme", theme.category)} /> {theme.category}: {theme.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Common Areas ({dungeon.size.commonAreas}):</strong>
<ul>
{#each dungeon.commonAreas as area}
<li><Icon name={getIcon(area.type, area.category)} /> {area.type}/{area.category}: {area.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Unique Areas ({dungeon.size.uniqueAreas}):</strong>
<ul>
{#each dungeon.uniqueAreas as area}
<li><Icon name={getIcon(area.type, area.category)} /> {area.type}/{area.category}: {area.description}</li>
{/each}
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
{/each}
</main>
<style>
main {
text-align: left;
}
h2 {
text-align: center;
}
ul {
margin-left: 2em;
}
.btn {
text-align: center;
}
.card-subtitle {
padding-bottom: 1em;
}
</style>
-123
View File
@@ -1,123 +0,0 @@
<script lang="ts">
import { Button, Card, CardHeader, CardTitle, CardBody, CardSubtitle, CardText, CardFooter, Container, Col, Row } from "sveltestrap";
import { format as formatDate } from "date-fns";
import { rollFollower, Follower } from "./followers";
export let rollResults: { follower: Follower; timestamp: string }[] = [];
function roll(event: Event) {
let follower = rollFollower();
rollResults = [{ follower, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Followers</Button>
</span>
{#each rollResults as { follower, timestamp }}
<Card class="mb-3">
<CardHeader>
<CardTitle>{follower.name} ({follower.gender})</CardTitle>
</CardHeader>
<CardBody>
<CardSubtitle>
From <em>{follower.homeSteading.homesteadName}</em> in <em>{follower.homeSteading.kingdomName}</em>
</CardSubtitle>
<CardText>
<Container>
<Row>
<strong>Quality:</strong>
<p>
They are <em>{follower.quality.description}</em> (Quality: {follower.quality.value}). They
<em>{follower.background.description}</em>.
</p>
</Row>
<Row>
<strong>Tags:</strong>
<ul>
{#each follower.tags as tag}
<li>{tag.name}: {tag.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Moves:</strong>
<ul>
{#each follower.moves as move}
<li>{move.description}</li>
{/each}
</ul>
</Row>
<Row>
<strong>Loyalty:</strong>
<p>
They have a loyalty score of {follower.loyalty.value}{#if !!follower.loyalty.description}
and <em>{follower.loyalty.description}</em>{/if}.
</p>
</Row>
<Row>
<strong>Instinct:</strong>
<p>
When left to their own devices, they will <em>{follower.instinct.description}</em>.
</p>
</Row>
<Row>
<strong>Cost:</strong>
<p>
They are motivated by <em>{follower.cost.name}</em>. They will want <em>{follower.cost.description}</em>
</p>
</Row>
<Row>
<strong>Hit Points:</strong>
<p>
They are <em>{follower.hitPoints.description}</em> and have {follower.hitPoints.value} HP.
</p>
</Row>
<Row>
<strong>Armor & Shield:</strong>
<p>
They are equipped with <em>{follower.armor.description}</em> ({follower.armor.value} armor).
</p>
</Row>
<Row>
<strong>Damage:</strong>
<p>
In a fight, they <em>{follower.damage.description}</em> dealing <em>d{follower.damage.value}</em> damage.
</p>
</Row>
<Row>
<strong>Load & Gear:</strong>
<ul>
{#each follower.loadAndGear.gear as gear}
<li>{gear}</li>
{/each}
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
{/each}
</main>
<style>
main {
text-align: left;
}
h2 {
text-align: center;
}
p {
margin-left: 1em;
}
ul {
margin-left: 2em;
}
.btn {
text-align: center;
}
</style>
-85
View File
@@ -1,85 +0,0 @@
<script lang="ts">
import {
Button,
Card,
CardHeader,
CardTitle,
CardBody,
CardSubtitle,
CardText,
CardFooter,
Container,
Col,
Row,
Icon,
} from "sveltestrap";
import { capitalize } from "lodash";
import { format as formatDate } from "date-fns";
import { Npc, rollNpc } from "./npcs";
export let rollResults: { npc: Npc; timestamp: string }[] = [];
function roll(event: Event) {
let npc = rollNpc();
rollResults = [{ npc, timestamp: formatDate(new Date(), "P kk:mm:ss") }, ...rollResults];
}
function getIcon(t: string, c: string): string {
return "";
}
</script>
<main>
<span class="btn">
<Button color="primary" on:click={roll}>Roll Npc</Button>
</span>
{#each rollResults as { npc, timestamp }}
<Card class="mb-3">
<CardHeader>
<CardTitle>{npc.getDescription()}</CardTitle>
</CardHeader>
<CardBody>
<CardSubtitle>
From <em>{npc.hometown}</em>.
</CardSubtitle>
<CardText>
<Container>
<Row>
<strong>Background Context:</strong>
<ul>
<li>
They are a(n) <em>{npc.context.alignment.description}</em> <em>{npc.context.description}</em> with
<em>{npc.trait.category} ({npc.context.trait.description})</em>
encountered in a(n) <em>{npc.context.category}</em> setting while they are <em>{npc.context.activity.description}</em>
</li>
</ul>
</Row>
<Row>
<strong>Follower Stats:</strong>
<ul>
<li>{npc.follower.name}</li>
</ul>
</Row>
</Container>
</CardText>
</CardBody>
<CardFooter>{timestamp}</CardFooter>
</Card>
{/each}
</main>
<style>
main {
text-align: left;
}
ul {
margin-left: 2em;
}
.btn {
text-align: center;
}
.card-subtitle {
padding-bottom: 1em;
}
</style>
+1 -1
View File
@@ -5,7 +5,7 @@ import { Ability, Activity, Adjective, Age, Alignment, Aspect, Condition, Dispos
import { Npc, rollNpc } from './npcs';
export class Creature {
constructor(public roll: number = 0, public subroll: number = 0, public specifcroll: number = 0, public type: string = "", public subtype: string = "", public description: string = "") { };
constructor(public roll: number = 0, public subroll: number = 0, public specificroll: number = 0, public type: string = "", public subtype: string = "", public description: string = "") { };
ability?: Ability;
activity?: Activity;
+1 -1
View File
@@ -43,7 +43,7 @@ export const kingdoms: { [kingdom: string]: Kingdom } = {
categories: ['male', 'female', 'steading', 'mount'],
male: ['Me', 'Mi', 'Amaziah', 'Ayokunle', 'Ary', 'Bambang', 'Bima', 'Budi', 'Darma', 'Dian', 'Eli', 'Gunardi', 'Hartono', 'Irwan', 'Lauwita', 'Manusama', 'Okan', 'Onesimus', 'Sammin', 'Tameem', 'Tanaya', 'Tirto', 'Wiryono', 'Yandi', 'Zebulun',],
female: ['Mah', 'Bulan', 'Candrakusuma', 'Devi', 'Hanjojo', 'Iman', 'Intan', 'Laksniini', 'Lestari', 'Limijanto', 'Marah', 'Megawati', 'Melati', 'Nadiyya', 'Ophrah', 'Ramza', 'Sapphiral', 'Selah', 'Suminten', 'Tamar', 'Tanjaya', 'Tjokro', 'Tri', 'Wangi', 'Zenze',],
steading: ['Airdib (Blessed Waters)', 'Airjinh (Clearwater)', 'Akhir Jalan (Road\'s End)', 'Berdarah (Bloody)', 'Bidang Bera (Fallow Field)', 'Candibula (Moon Temple)', 'Ditingga (Forsaken)', 'Emasungai (Gold Creek)', 'Gunung (Mountain)', 'Kayu (Timber)', 'Kuil (Temple)', 'Ladang Hijau (Greenfield)', 'Lembah (Valley)', 'Menjau (Far Away)', 'Ngarai (Canyon)', 'Persimpangan (Crossroads)', 'Puncakit (Hilltop)', 'Sungairac (}bison River)', 'Teibing (Cliffside)', 'Tempat Aman (Safe Place)', 'Tempat Istir (Rest Place)', 'Terkutuk (Cursed)', 'Tersentu (Touched by God)', 'Wahah (Oasis)', 'Yangtinggi (High Tower)',],
steading: ['Airdib (Blessed Waters)', 'Airjinh (Clearwater)', 'Akhir Jalan (Road\'s End)', 'Berdarah (Bloody)', 'Bidang Bera (Fallow Field)', 'Candibula (Moon Temple)', 'Ditingga (Forsaken)', 'Emasungai (Gold Creek)', 'Gunung (Mountain)', 'Kayu (Timber)', 'Kuil (Temple)', 'Ladang Hijau (Greenfield)', 'Lembah (Valley)', 'Menjau (Far Away)', 'Ngarai (Canyon)', 'Persimpangan (Crossroads)', 'Puncakit (Hilltop)', 'Sungairac (Bison River)', 'Teibing (Cliffside)', 'Tempat Aman (Safe Place)', 'Tempat Istir (Rest Place)', 'Terkutuk (Cursed)', 'Tersentu (Touched by God)', 'Wahah (Oasis)', 'Yangtinggi (High Tower)',],
mount: ['Anginu (North Wind)', 'Api (Blaze)', 'Bakat (Felicity)', 'Bakti (Loyal)', 'Beruntung (Lucky)', 'Bilah (Blade)', 'Biru (Blue)', 'Gemetar (Quiver)', 'Guntur (Thunder)', 'Hidungi (Black Nose)', 'Janda (Widow)', 'Kakicerah (Bright Foot)', 'Kakiring (Light Foot)', 'Keriangan (Sunshine)', 'Kunang (Firefly)', 'Lapar (Hungry)', 'Murni (Pure)', 'Paruh (Bill)', 'Penebus (Avenger)', 'Penyelemat (Savior)', 'Prajurit (Warrior)', 'Rusak (Broken)', 'Satucep (Fast One)', 'Setia (True Heart)', 'Tahanla (Durable)',]
},
};
+4
View File
@@ -0,0 +1,4 @@
export class Roll {
roll: number;
description: string;
}
+4 -1
View File
@@ -1,5 +1,8 @@
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/tpw/'
: '/'
: '/',
preprocess: sveltePreprocess()
}