Skip to content

Commit

Permalink
svelte ui almost done
Browse files Browse the repository at this point in the history
  • Loading branch information
valentine195 committed Nov 22, 2021
1 parent bbd1bf8 commit 7d72bb2
Show file tree
Hide file tree
Showing 18 changed files with 548 additions and 164 deletions.
160 changes: 7 additions & 153 deletions src/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,150 +56,14 @@
margin: 0 6px;
}

/** Tapered Rule */
.obsidian-statblock-plugin .tapered-rule {
width: auto;
margin: 0.5em 0;
height: 5px;
background: -webkit-linear-gradient(
0deg,
var(--statblock-rule-color) 0%,
var(--statblock-rule-color) 50%,
var(--statblock-background-color) 95%,
var(--statblock-background-color) 100%
);
clip-path: polygon(0 0, 0 100%, 95% 50%);
-webkit-clip-path: polygon(0 0, 0 100%, 95% 50%);
}

/** Top and Bottom Bars */
.obsidian-statblock-plugin > .bar {
height: 5px;
background: var(--statblock-bar-color);
border: 1px solid #000;
/* position: absolute; */
z-index: 1;
width: auto;
}
.obsidian-statblock-plugin > .bar.top {
top: 0;
}
.obsidian-statblock-plugin > .bar.bottom {
bottom: 0;
}
.obsidian-statblock-plugin {
margin: 0 auto;
position: relative;
}
/** Wrapper Element */
.obsidian-statblock-plugin > .content-wrap {
font-family: "Noto Sans", "Myriad Pro", Calibri, Helvetica, Arial,
sans-serif;
font-size: 14px;
color: var(--statblock-primary-color);
background-color: var(--statblock-background-color);
padding: 0.5em;
border: 1px #ddd solid;
box-shadow: 0 0 1.5em #ddd;
margin-left: 2px;
margin-right: 2px;

column-width: 400px;
column-gap: 1em;
column-fill: auto;
}

.obsidian-statblock-plugin > .content-wrap > * {
max-width: 400px;
}

/** Creature Name and Type */
.obsidian-statblock-plugin .creature-heading > .name {
font-family: "Libre Baskerville", "Lora", "Calisto MT", "Bookman Old Style",
Bookman, "Goudy Old Style", Garamond, "Hoefler Text",
"Bitstream Charter", Georgia, serif;
color: var(--statblock-primary-color);
font-weight: 700;
margin: 0px;
font-size: 23px;
letter-spacing: 1px;
font-variant: small-caps;
display: flex;
justify-content: space-between;
align-items: center;
}
.obsidian-statblock-plugin .creature-heading .statblock-icons {
display: flex;
justify-content: flex-end;
align-items: center;
}

.obsidian-statblock-plugin .creature-heading > .subheading {
font-weight: normal;
font-style: italic;
font-size: 12px;
margin: 0;
}

.obsidian-statblock-plugin .property-line {
line-height: 1.4;
display: block;
color: var(--statblock-primary-color);
}
.obsidian-statblock-plugin .property-line > .property-name {
margin: 0;
margin-right: 0.25em;
display: inline;
font-weight: bold;
}
.obsidian-statblock-plugin .property-line > .property-text {
display: inline;
margin: 0;
}

/** Ability Scores */
.obsidian-statblock-plugin .abilities {
display: grid;
grid-template-columns: repeat(6, 1fr);

color: var(--statblock-primary-color);
}
.obsidian-statblock-plugin .abilities.fage {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.obsidian-statblock-plugin .abilities.fage .top {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
}
.obsidian-statblock-plugin .abilities.fage .bottom {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

.obsidian-statblock-plugin .abilities .ability-score {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}

.obsidian-statblock-plugin .section-header {
border-bottom: 1px solid var(--statblock-primary-color);
color: var(--statblock-primary-color);
font-size: 21px;
font-variant: small-caps;
font-weight: normal;
letter-spacing: 1px;
margin: 0;
margin-bottom: 0.3em;
break-inside: avoid-column;
break-after: avoid-column;
.statblock-settings .coffee {
width: 60%;
color: var(--text-faint);
margin: 1rem auto;
text-align: center;
}

.obsidian-statblock-plugin .property:not(:last-child) {
margin-bottom: 0.25em;
.statblock-settings .coffee img {
height: 30px;
}

.obsidian-statblock-plugin .property > .property-name {
Expand All @@ -218,13 +82,3 @@
.obsidian-statblock-plugin .spell-line .spells {
font-style: italic;
}

.statblock-settings .coffee {
width: 60%;
color: var(--text-faint);
margin: 1rem auto;
text-align: center;
}
.statblock-settings .coffee img {
height: 30px;
}
2 changes: 1 addition & 1 deletion src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import domtoimage from "dom-to-image";

import type DiceRollerPlugin from "../../obsidian-dice-roller/src/main";

import { BESTIARY_BY_NAME } from "./data/srd-bestiary";
import { BESTIARY, BESTIARY_BY_NAME } from "./data/srd-bestiary";
import StatBlockRenderer from "./view/statblock";
import { getColumns, getParamsFromSource, renderError } from "./util/util";
import {
Expand Down
13 changes: 13 additions & 0 deletions src/settings/ui/StatblockCreator.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script lang="ts">
</script>

<div class="creator-container">
<div class="creator" />
</div>

<style>
.creator {
max-width: 50vw;
max-height: 50vh;
}
</style>
8 changes: 4 additions & 4 deletions src/svelte/EditMonster.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -173,17 +173,17 @@
height: 500px;
max-height: 50vh;
}
.json {
/* .json {
margin-bottom: 1rem;
display: flex;
justify-content: flex-start;
align-items: center;
}
} */
.attributes {
/* .attributes {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
} */
.buttons {
margin-top: 1rem;
Expand Down
2 changes: 1 addition & 1 deletion src/util/suggester.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
SuggestModal,
TextComponent
} from "obsidian";
import StatBlockRenderer from "src/renderer/statblock";
import StatBlockRenderer from "src/view/statblock";

import EditMonsterApp from "../svelte/EditMonster.svelte";

Expand Down
29 changes: 29 additions & 0 deletions src/view/Statblock.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script lang="ts">
import type { Monster } from "@types";
import type StatBlockPlugin from "src/main";
import { setContext } from "svelte";
import Bar from "./ui/Bar.svelte";
import Content from "./ui/Content.svelte";
export let monster: Monster;
export let plugin: StatBlockPlugin;
setContext<StatBlockPlugin>("plugin", plugin);
</script>

<div class="obsidian-statblock-plugin statblock">
{#if monster}
<Bar />
<Content {monster} />
<Bar />
{:else}
<span>Invalid monster.</span>
{/if}
</div>

<style>
.statblock {
max-width: 404px;
}
</style>
22 changes: 17 additions & 5 deletions src/renderer/statblock.ts → src/view/statblock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,36 @@ import {
SAVE_SYMBOL
} from "../data/constants";
import { catchError, catchErrorAsync, getMod, toTitleCase } from "../util/util";
import type { Spell, Monster, StatblockMonsterPlugin } from "@types";
import type { Spell, Monster } from "@types";

import Statblock from "./Statblock.svelte";
import type StatBlockPlugin from "src/main";

export default class StatBlockRenderer extends MarkdownRenderChild {
topBar: HTMLDivElement;
bottomBar: HTMLDivElement;
monster: Monster;
loaded: boolean = false;
statblockEl: HTMLDivElement;
contentEl: HTMLDivElement;
constructor(
container: HTMLElement,
monster: Monster,
private plugin: StatblockMonsterPlugin,
public monster: Monster,
private plugin: StatBlockPlugin,
private canSave: boolean,
private canExport: boolean = true
) {
super(container);
this.monster = monster;

new Statblock({
target: this.containerEl,
props: {
monster: this.monster,
plugin: this.plugin
}
});
}

old() {
this.statblockEl = this.containerEl.createDiv({
cls: "obsidian-statblock-plugin",
attr: { style: "visibility: hidden;" }
Expand Down
11 changes: 11 additions & 0 deletions src/view/ui/Bar.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<div class="bar" />

<style>
.bar {
height: 5px;
background: var(--statblock-bar-color);
border: 1px solid #000;
z-index: 1;
width: auto;
}
</style>
69 changes: 69 additions & 0 deletions src/view/ui/BottomStats.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<script lang="ts">
import type { Monster } from "@types";
import { AbilityAliases } from "src/data/constants";
import { toTitleCase } from "src/util/util";
import PropertyLine from "./PropertyLine.svelte";
export let monster: Monster;
function getMod(value: number) {
return `${value > 0 ? "+" : ""}${value}`;
}
const saves = monster.saves
.map((ability) => {
if (typeof ability != "object" || ability == null) return null;
let key = Object.keys(ability)[0];
if (!key) return null;
if (!AbilityAliases[key.toLowerCase()]) return null;
const value = Object.values(ability)[0];
return `${AbilityAliases[key.toLowerCase()]} ${getMod(value)}`;
})
.filter((m) => m);
const skillsaves = monster.skillsaves
.map((ability) => {
if (typeof ability != "object" || ability == null) return null;
let key = Object.keys(ability)[0];
if (!key) return null;
const value = Object.values(ability)[0];
return `${toTitleCase(key)} ${getMod(value)}`;
})
.filter((m) => m);
</script>

<div class="info">
{#if saves && saves.length}
<PropertyLine property={"Saving Throws"} text={saves.join(", ")} />
{/if}
{#if skillsaves && skillsaves.length}
<PropertyLine property={"Skills"} text={skillsaves.join(", ")} />
{/if}
{#if monster.damage_immunities && monster.damage_immunities.length}
<PropertyLine
property={"Damage Immunities"}
text={monster.damage_immunities}
/>
{/if}
{#if monster.condition_immunities && monster.condition_immunities.length}
<PropertyLine
property={"Condition Immunities"}
text={monster.condition_immunities}
/>
{/if}
{#if monster.damage_resistances && monster.damage_resistances.length}
<PropertyLine
property={"Resistances"}
text={monster.damage_resistances}
/>
{/if}
{#if monster.damage_vulnerabilities && monster.damage_vulnerabilities.length}
<PropertyLine
property={"Damage Vulnerabilities"}
text={monster.damage_vulnerabilities}
/>
{/if}
{#if monster.senses && monster.senses.length}
<PropertyLine property={"Senses"} text={monster.senses} />
{/if}
<PropertyLine property={"Languages"} text={monster.languages ?? "-"} />
</div>
Loading

0 comments on commit 7d72bb2

Please sign in to comment.