stats and meters

src/characters/character-block.ts

@@ -83,16 +83,7 @@ Error rendering character: character file is invalid${character
     const tpl = html`
       <article class="iron-vault-character">
         <h3 class="name">${md(this.plugin, lens.name.get(raw), file.path)}</h3>
-        <h5>Stats</h5>
-        ${this.renderStats(charCtx, file)}
-        <h5>Meters</h5>
-        ${this.renderMeters(charCtx, file)}
-        <h5>Impacts</h5>
-        ${this.renderImpacts(charCtx, file)}
-        <h5>Special Tracks</h5>
-        ${this.renderSpecialTracks(charCtx, file)}
-        <h5>Assets</h5>
-        ${this.renderAssets(charCtx, file)}
+        ${this.renderStats(charCtx, file)} ${this.renderMeters(charCtx, file)}
       </article>
     `;
     render(tpl, this.contentEl);
@@ -129,11 +120,26 @@ Error rendering character: character file is invalid${character
             <li>
               <dl>
                 <dt data-value=${meter}>${meter}</dt>
-                <dd data-value=${value.get(raw)}>${value.get(raw)}</dd>
+                <dd data-value=${value.get(raw)}>
+                  <button type="button">-</button>
+                  <span>${value.get(raw)}</span>
+                  <button type="button">+</button>
+                </dd>
               </dl>
             </li>
           `,
         )}
+        <li class="momentum">
+          <dl>
+            <dt>momentum</dt>
+            <dd data-value=${lens.momentum.get(raw)}>
+              <button type="button">-</button>
+              <span>${lens.momentum.get(raw)}</span>
+              <button type="button">+</button>
+            </dd>
+          </dl>
+          <button type="button">Reset</button>
+        </li>
       </ul>
     `;
   }

src/characters/css/characters.css

@@ -2,8 +2,15 @@
 @import url("impacts.css");
 @import url("meters.css");
 @import url("special_tracks.css");
-@import url("assets.css");
+@import url("stats.css");
 
 .iron-vault-character {
-
+  & .name {
+    width: 100%;
+    text-align: center;
+    &:after {
+      /* Some themes, like ITS Theme, try to put stuff here. Make it go away. */
+      display: none;
+    }
+  }
 }

src/characters/css/meters.css

@@ -1,2 +1,67 @@
 .iron-vault-character .meters {
+  display: flex;
+  padding: 0;
+  flex-flow: wrap;
+  list-style: none;
+  text-transform: uppercase;
+  gap: 1em;
+  justify-content: center;
+  align-items: center;
+  & li {
+    &:before {
+      /* Some themes (Like ITS Theme) try to be more clever than they deserve
+      to be with list bullets. Make that b.s. go away. */
+      display: none;
+    }
+    background-color: var(--background-secondary);
+    border-radius: 8px;
+    border: 2px solid var(--background-modifier-border);
+    margin: 0;
+    height: 4.5em;
+    &.momentum {
+      height: 6.5em;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      justify-content: center;
+      & > button {
+        font-size: 1em;
+        margin: 0 0.4em;
+        width: 92%;
+      }
+    }
+  }
+  & dl {
+    margin: 0;
+    padding: 0;
+    font-weight: bold;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    & dt,
+    dd {
+      margin: 0;
+      padding: 0;
+    }
+    & dt {
+      font-size: 0.8em;
+      width: 100%;
+      text-align: center;
+      padding: 0.2em 0;
+      border-bottom: 2px solid var(--background-modifier-border);
+    }
+    & dd {
+      font-size: 1.6em;
+      display: flex;
+      flex: row nowrap;
+      align-items: center;
+      justify-content: center;
+      gap: 0.2em;
+      padding: 0 0.2em;
+      & > span {
+        width: 1.8em;
+        text-align: center;
+      }
+    }
+  }
 }

src/characters/css/stats.css

@@ -1,2 +1,48 @@
 .iron-vault-character .stats {
+  border-bottom: 2px solid var(--background-modifier-border);
+  padding: 0;
+  padding-bottom: 1em;
+  display: flex;
+  flex-flow: wrap;
+  list-style: none;
+  text-transform: uppercase;
+  gap: 1em;
+  justify-content: center;
+  align-items: center;
+  & li {
+    &:before {
+      /* Some themes (Like ITS Theme) try to be more clever than they deserve
+      to be with list bullets. Make that b.s. go away. */
+      display: none;
+    }
+    background-color: var(--background-secondary);
+    border-radius: 8px;
+    border: 2px solid var(--background-modifier-border);
+    margin: 0;
+    width: 5em;
+    height: 4.5em;
+  }
+  & dl {
+    margin: 0;
+    padding: 0;
+    font-weight: bold;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    & dt,
+    dd {
+      margin: 0;
+      padding: 0;
+    }
+    & dt {
+      font-size: 0.8em;
+      width: 100%;
+      text-align: center;
+      padding: 0.2em 0;
+      border-bottom: 2px solid var(--background-modifier-border);
+    }
+    & dd {
+      font-size: 1.6em;
+    }
+  }
 }