progress on asset cards

src/characters/asset-card.ts

@@ -0,0 +1,158 @@
+import { TemplateResult, html } from "lit-html";
+import { map } from "lit-html/directives/map.js";
+import {
+  AssetAbility,
+  AssetControlField,
+  AssetOptionField,
+} from "@datasworn/core/dist/Datasworn";
+
+import { IronVaultSheetAssetSchema } from "./lens";
+import IronVaultPlugin from "index";
+import { md } from "utils/ui/directives";
+
+export default function renderAssetCard(
+  plugin: IronVaultPlugin,
+  sheetAsset: IronVaultSheetAssetSchema,
+) {
+  const asset = plugin.datastore.assets.get(sheetAsset.id);
+  if (!asset) {
+    return;
+  }
+  return html`
+    <article class="iron-vault-asset-card">
+      <header>
+        <dl>
+          <dt>Type</dt>
+          <dd class="category">${asset.category}</dd>
+          <dt>Name</dt>
+          <dd class="name">${asset.canonical_name ?? asset.name}</dd>
+          ${asset.requirement &&
+          html`
+            <dt>Requirement</dt>
+            <dd class="requirement">${asset.requirement}</dd>
+          `}
+          ${asset.icon && html`<img src=${asset.icon} />`}
+          ${asset.options &&
+          html`
+            <dt>Options</dt>
+            <dd class="options">
+              <ul>
+                ${map(Object.entries(asset.options), ([name, opt]) => {
+                  return html`
+                    <li>
+                      <dl>
+                        <dt class="option-name">${name}</dt>
+                        <dd>
+                          <label>${opt.label} ${renderOption(opt)}</label>
+                        </dd>
+                      </dl>
+                    </li>
+                  `;
+                })}
+              </ul>
+            </dd>
+          `}
+        </dl>
+      </header>
+      <section>
+        <ul class="abilities">
+          ${map(Object.values(asset.abilities), (ability) =>
+            renderAssetAbility(plugin, ability),
+          )}
+        </ul>
+      </section>
+      ${asset.controls &&
+      html`<section>${renderControls(plugin, asset.controls)}</section>`}
+    </article>
+  `;
+}
+
+function renderOption(option: AssetOptionField) {
+  switch (option.field_type) {
+    case "text": {
+      return html`<input type="text" placeholder=${option.label} />`;
+    }
+    case "select_enhancement": {
+      return html`
+        <select>
+          ${map(Object.keys(option.choices), (key) => {
+            return html` <option value=${key}>${key}</option> `;
+          })}
+        </select>
+      `;
+    }
+    case "select_value": {
+      return html`
+        <select>
+          ${map(Object.keys(option.choices), (key) => {
+            return html` <option value=${key}>${key}</option> `;
+          })}
+        </select>
+      `;
+    }
+  }
+}
+
+function renderAssetAbility(plugin: IronVaultPlugin, ability: AssetAbility) {
+  return html`<li class=${ability.enabled ? "enabled" : ""}>
+    ${md(plugin, ability.text)}
+  </li>`;
+}
+
+function renderControls(
+  plugin: IronVaultPlugin,
+  controls: Record<string, AssetControlField>,
+): TemplateResult {
+  return html`
+    <ul class="controls">
+      ${map(Object.entries(controls), ([key, control]) => {
+        return html`
+          <li>
+            <dl>
+              <dt>${key}</dt>
+              <dd class="control">${renderControl(plugin, control)}</dd>
+            </dl>
+          </li>
+        `;
+      })}
+    </ul>
+  `;
+}
+
+function renderControl(plugin: IronVaultPlugin, control: AssetControlField) {
+  switch (control.field_type) {
+    case "condition_meter": {
+      return html`<div class="condition-meter">
+        ${control.controls && renderControls(plugin, control.controls)}
+        <label
+          ><span>${control.label}</span>
+          <span>${control.value}</span>
+        </label>
+      </div>`;
+    }
+    case "card_flip": {
+      return html`<label class="checkbox"
+        ><span>${control.label}</span
+        ><input type="checkbox" ?checked=${control.value}
+      /></label>`;
+    }
+    case "checkbox": {
+      return html`<label class="checkbox"
+        ><span>${control.label}</span
+        ><input type="checkbox" ?checked=${control.value}
+      /></label>`;
+    }
+    case "select_enhancement": {
+      return html`<label class="select-enhancement">
+        <span>${control.label}</span>
+        <select>
+          ${map(
+            Object.keys(control.choices),
+            (key) => html`<option value=${key}>${key}</option>`,
+          )}
+        </select>
+      </label>`;
+    }
+  }
+  return null;
+}

src/characters/character-block.ts

@@ -1,11 +1,10 @@
 import { html, render } from "lit-html";
 import { map } from "lit-html/directives/map.js";
-// import { range } from "lit-html/directives/range.js";
 
 import IronVaultPlugin from "index";
 import { EventRef, TFile } from "obsidian";
-// import { vaultProcess } from "utils/obsidian";
 import { CharacterContext } from "../character-tracker";
+import renderAssetCard from "./asset-card";
 import { md } from "utils/ui/directives";
 
 export default function registerCharacterBlock(plugin: IronVaultPlugin): void {
@@ -84,7 +83,7 @@ Error rendering character: character file is invalid${character
       <article class="iron-vault-character">
         <h3 class="name">${md(this.plugin, lens.name.get(raw), file.path)}</h3>
         ${this.renderStats(charCtx, file)} ${this.renderMeters(charCtx, file)}
-        ${this.renderImpacts(charCtx, file)}
+        ${this.renderImpacts(charCtx, file)} ${this.renderAssets(charCtx, file)}
       </article>
     `;
     render(tpl, this.contentEl);
@@ -210,14 +209,7 @@ Error rendering character: character file is invalid${character
       <ul class="assets">
         ${map(
           Object.values(lens.assets.get(raw)),
-          (asset) => html`
-            <li>
-              <dl>
-                <dt data-value=${asset.id}>${asset.id}</dt>
-                <dd>${JSON.stringify(asset)}</dd>
-              </dl>
-            </li>
-          `,
+          (asset) => html` <li>${renderAssetCard(this.plugin, asset)}</li> `,
         )}
       </ul>
     `;

src/characters/css/asset-card.css

@@ -0,0 +1,126 @@
+.iron-vault-asset-card {
+  border: 2px solid var(--background-modifier-border);
+  padding: 0;
+  border-radius: 8px;
+  width: 320px;
+  & > header {
+    position: relative;
+    padding: 0.5em;
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    border-bottom: 2px solid var(--background-modifier-border);
+    padding-bottom: 0.2em;
+    & dl {
+      margin: 0;
+      padding: 0;
+      & dd,
+      dt,
+      ul {
+        margin: 0;
+        padding: 0;
+      }
+      & dt {
+        display: none;
+      }
+      & .category {
+        font-size: 0.8em;
+        color: var(--text-accent);
+      }
+      & mg {
+        position: absolute;
+        top: 0.2em;
+        right: 0.2em;
+      }
+    }
+  }
+  & .options > ul {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 0.4em;
+    list-style: none;
+    & > li {
+      width: 100%;
+    }
+    & dt {
+      padding-right: 0.4em;
+    }
+    & label {
+      font-size: 0.6em;
+      color: var(--text-muted);
+      & select,
+      input {
+        padding: 0.4em;
+        width: 100%;
+      }
+      & select,
+      option {
+        text-transform: uppercase;
+        font-weight: var(--font-bold);
+      }
+    }
+  }
+  & .abilities {
+    padding: 0.5em;
+    font-size: 0.8em;
+    list-style: none;
+    margin: 0;
+    /* display: flex;
+    flex-flow: column nowrap; */
+    & > li {
+      display: flex;
+      flex-flow: row nowrap;
+      padding-left: 0.4em;
+      gap: 0.4em;
+      &:before {
+        cursor: pointer;
+        content: "⬡";
+        vertical-align: top;
+      }
+      &.enabled:before {
+        content: "⬢";
+      }
+    }
+  }
+  & .condition-meter > .controls {
+    flex-flow: row wrap;
+  }
+  & .controls {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    & dt {
+      display: none;
+    }
+    & dl,
+    dt {
+      margin: 0;
+      padding: 0;
+    }
+    & input[type="checkbox"] {
+      -webkit-appearance: none;
+      appearance: none;
+      border: none;
+      margin: 0;
+      background-color: transparent;
+      width: 1.2em;
+      height: 1.2em;
+      &[checked] {
+        background-color: transparent;
+        &:after {
+          content: "⬢";
+        }
+      }
+      &:after {
+        -webkit-mask-image: none;
+        position: relative;
+        top: initial;
+        right: initial;
+        font-size: 1.4em;
+        content: "⬡";
+        margin-left: 0.5em;
+      }
+    }
+  }
+}

src/characters/css/assets.css

@@ -1,2 +1,11 @@
 .iron-vault-character .assets {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: flex;
+  flex-flow: row wrap;
+  gap: 0.4em;
+  & > li {
+    margin: 0.5em;
+  }
 }

src/characters/css/characters.css

@@ -1,11 +1,12 @@
 @import url("assets.css");
+@import url("asset-card.css");
 @import url("impacts.css");
 @import url("meters.css");
 @import url("special_tracks.css");
 @import url("stats.css");
 
 .iron-vault-character {
-  & .name {
+  & > .name {
     width: 100%;
     text-align: center;
     &:after {

test-vault/characters/Ash Barlowe.md

@@ -25,10 +25,19 @@ assets:
       - false
     controls:
       integrity: 5
-      integrity/battered: false
+      integrity/battered: true
       integrity/cursed: false
     options:
       label: Arclight
+  - id: starforged/assets/path/devotant
+    abilities:
+      - true
+      - false
+      - false
+    controls: {}
+    options:
+      name: m'lard
+      linked_stat: heart
 spirit: 5
 supply: 5
 Quests_Progress: 4