add node rendering for track/clock creation and closure

Fixes: #63

src/mechanics/css/dlist-clock-status.css

@@ -0,0 +1,20 @@
+.iron-vault-mechanics dl.clock-status {
+  &:before {
+    content: "🕒";
+  }
+  & dd {
+    &.clock-name:has(~ .clock-status[data-value="added"]) {
+      &:before {
+        content: "Clock added: ";
+      }
+    }
+    &.clock-name:has(~ .clock-status[data-value="removed"]) {
+      &:before {
+        content: "Clock removed: ";
+      }
+    }
+    &.clock-status {
+      display: none;
+    }
+  }
+}

src/mechanics/css/dlist-track-status.css

@@ -0,0 +1,20 @@
+.iron-vault-mechanics dl.track-status {
+  &:before {
+    content: "❎";
+  }
+  & dd {
+    &.track-name:has(~ .track-status[data-value="added"]) {
+      &:before {
+        content: "Track added: ";
+      }
+    }
+    &.track-name:has(~ .track-status[data-value="removed"]) {
+      &:before {
+        content: "Track removed: ";
+      }
+    }
+    &.track-status {
+      display: none;
+    }
+  }
+}

src/mechanics/css/mechanics.css

@@ -11,8 +11,10 @@
 @import url("dlist-burn.css");
 @import url("dlist-progress.css");
 @import url("dlist-track.css");
+@import url("dlist-track-status.css");
 @import url("dlist-xp.css");
 @import url("dlist-clock.css");
+@import url("dlist-clock-status.css");
 @import url("dlist-oracle.css");
 
 .collapse-iron-vault-mechanics .iron-vault-mechanics {

src/mechanics/mechanics-blocks.ts

@@ -363,6 +363,14 @@ export class MechanicsRenderer {
 
   async renderTrack(target: HTMLElement, node: KdlNode) {
     const trackName = (node.properties.name ?? node.values[0]) as string;
+    const status = node.properties.status as string | undefined;
+    if (status != null) {
+      await this.renderDlist(target, "track-status", {
+        Clock: { cls: "track-name", value: trackName, md: true },
+        Status: { cls: "track-status", value: status },
+      });
+      return;
+    }
     let from = node.properties.from as number;
     const fromBoxes =
       (node.properties["from-boxes"] as number) ??
@@ -408,6 +416,14 @@ export class MechanicsRenderer {
 
   async renderClock(target: HTMLElement, node: KdlNode) {
     const name = (node.properties.name ?? node.values[0]) as string;
+    const status = node.properties.status as string | undefined;
+    if (status != null) {
+      await this.renderDlist(target, "clock-status", {
+        Clock: { cls: "clock-name", value: name, md: true },
+        Status: { cls: "clock-status", value: status },
+      });
+      return;
+    }
     const from = (node.properties.from ?? node.values[1]) as number;
     const to = (node.properties.to ?? node.values[2]) as number;
     const outOf = (node.properties["out-of"] ?? node.values[3]) as number;

test-vault/Journals/Chapter 01.md

@@ -20,6 +20,7 @@ Reglar link to [[Example Vow|the vow I swor3e]].
 move id="starforged/moves/adventure/face_danger" {
 	add 1 "because I'm cool [[Ash Barlowe]]"
 	roll "shadow" 1 3 1 9 9 // <statname> <action-die> <stat> <adds> <vs1> <vs2>
+	clock "[[Test Clock]]" status="added"
 }
 - "Oh nooo. This is gonna hurt. Time to [Endure Harm](move:EndureHarm). bla bla bla bla bla bla bla bla bla bla"
 - "Another one here"