load material icons, rank from one, gate the skill row

mothership.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Archivo:400,700,800,900|IBM+Plex+Mono:400&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Archivo:400,700,800,900|IBM+Plex+Mono:400|Material+Icons&display=swap");
 .charsheet,
 .sheet-rolltemplate-ms,
 .sheet-rolltemplate-ms-cm {
@@ -187,7 +187,7 @@ body.sheet-darkmode
   --ms-text-xl: 1.25em;
   --ms-text-2xl: 2.15em;
   --ms-roll-w: 3.6em;
-  --ms-roll-h: 2.9em;
+  --ms-roll-h: var(--ms-roll-w);
 }
 .sheet-rolltemplate-ms .sheet-ms-result,
 .sheet-rolltemplate-ms-cm .sheet-ms-result {
@@ -204,7 +204,7 @@ body.sheet-darkmode
   box-sizing: border-box;
   padding: var(--ms-space-md) var(--ms-space-lg);
   background: var(--ms-inverse);
-  font-size: var(--ms-text-xl);
+  font-size: var(--ms-text-lg);
   line-height: 1.05;
   font-family: var(--ms-font-header);
   text-align: center;
@@ -246,17 +246,21 @@ body.sheet-darkmode
 .sheet-rolltemplate-ms-cm .sheet-ms-roll {
   display: grid;
   position: relative;
-  place-items: center;
+  grid-auto-rows: min-content;
+  align-content: center;
+  justify-items: center;
+  overflow: hidden;
   border: var(--ms-border-width-thick) solid var(--ms-border);
   border-radius: var(--ms-radius-lg);
   box-sizing: border-box;
+  min-height: 0;
   background: var(--ms-surface);
+  aspect-ratio: 1/1;
 }
 .sheet-rolltemplate-ms .sheet-ms-roll__roll,
 .sheet-rolltemplate-ms .sheet-ms-roll__roll2,
 .sheet-rolltemplate-ms-cm .sheet-ms-roll__roll,
 .sheet-rolltemplate-ms-cm .sheet-ms-roll__roll2 {
-  grid-area: 1/1;
   font-size: var(--ms-text-2xl);
   line-height: 1;
   font-weight: 700;
@@ -275,18 +279,24 @@ body.sheet-darkmode
 }
 .sheet-rolltemplate-ms .sheet-ms-roll--spent,
 .sheet-rolltemplate-ms-cm .sheet-ms-roll--spent {
-  position: absolute;
-  top: 0.1em;
-  right: 0.3em;
+  order: 2;
   font-size: var(--ms-text-xs);
+  line-height: 1;
   font-weight: 800;
   text-decoration: line-through;
   color: var(--ms-fg-muted);
 }
 .sheet-rolltemplate-ms .sheet-ms-roll--used,
 .sheet-rolltemplate-ms-cm .sheet-ms-roll--used {
-  box-shadow: 0 0 0 2px var(--ms-accent);
-  border-radius: var(--ms-radius-sm);
+  order: 1;
+}
+.sheet-rolltemplate-ms
+  .sheet-ms-roll:has(.sheet-ms-roll--spent)
+  .sheet-ms-roll--used,
+.sheet-rolltemplate-ms-cm
+  .sheet-ms-roll:has(.sheet-ms-roll--spent)
+  .sheet-ms-roll--used {
+  font-size: var(--ms-text-xl);
 }
 .sheet-rolltemplate-ms .sheet-ms-readout,
 .sheet-rolltemplate-ms-cm .sheet-ms-readout {

mothership.html

@@ -1321,9 +1321,9 @@ <h1 class="sheet-ms-result__title">{{title}}</h1>
     <h2 class="sheet-ms-result__subtitle">{{subtitle}}</h2>
     {{/subtitle}}
 
-    {{#computed::skill}}
+    {{#rollTotal() computed::hasskill 1}}
     <div class="sheet-ms-result__skill">{{computed::skill}}</div>
-    {{/computed::skill}}
+    {{/rollTotal() computed::hasskill 1}}
 
     {{#credits}}
     <div class="sheet-ms-roll">
@@ -1363,18 +1363,18 @@ <h2 class="sheet-ms-result__subtitle">{{subtitle}}</h2>
     </div>
     {{/damage}}
 
-    {{#rollTotal() computed::rank 3}}
+    {{#rollTotal() computed::rank 4}}
     <div class="sheet-ms-verdict sheet-ms-verdict--critical-success">{{computed::verdict}}</div>
+    {{/rollTotal() computed::rank 4}}
+    {{#rollTotal() computed::rank 3}}
+    <div class="sheet-ms-verdict sheet-ms-verdict--success">{{computed::verdict}}</div>
     {{/rollTotal() computed::rank 3}}
     {{#rollTotal() computed::rank 2}}
-    <div class="sheet-ms-verdict sheet-ms-verdict--success">{{computed::verdict}}</div>
+    <div class="sheet-ms-verdict sheet-ms-verdict--failure">{{computed::verdict}}</div>
     {{/rollTotal() computed::rank 2}}
     {{#rollTotal() computed::rank 1}}
-    <div class="sheet-ms-verdict sheet-ms-verdict--failure">{{computed::verdict}}</div>
-    {{/rollTotal() computed::rank 1}}
-    {{#rollTotal() computed::rank 0}}
     <div class="sheet-ms-verdict sheet-ms-verdict--critical-failure">{{computed::verdict}}</div>
-    {{/rollTotal() computed::rank 0}}
+    {{/rollTotal() computed::rank 1}}
 
     {{#rollTotal() computed::hasnotes 1}}
     <div class="sheet-ms-notes">{{computed::notes}}</div>
@@ -5164,17 +5164,18 @@ <h1 data-i18n="Building character...">Building character...</h1>
   var COMPUTED = {
     Used: "used",
     HasNotes: "hasnotes",
+    HasSkill: "hasskill",
     Verdict: "verdict",
     VerdictClass: "verdictclass",
     Rank: "rank",
     Notes: "notes",
     Skill: "skill"
   };
   var RANKS = {
-    [Outcomes.CriticalFailure]: 0,
-    [Outcomes.Failure]: 1,
-    [Outcomes.Success]: 2,
-    [Outcomes.CriticalSuccess]: 3
+    [Outcomes.CriticalFailure]: 1,
+    [Outcomes.Failure]: 2,
+    [Outcomes.Success]: 3,
+    [Outcomes.CriticalSuccess]: 4
   };
   var VERDICT_CLASSES = {
     [Outcomes.CriticalFailure]: "critical-failure",
@@ -5217,6 +5218,7 @@ <h1 data-i18n="Building character...">Building character...</h1>
       [COMPUTED.VerdictClass, "[[0]]"],
       [COMPUTED.Rank, "[[0]]"],
       [COMPUTED.Skill, "[[0]]"],
+      [COMPUTED.HasSkill, "[[0]]"],
       [COMPUTED.Notes, "[[0]]"],
       [COMPUTED.HasNotes, "[[0]]"]
     ]);
@@ -5231,6 +5233,7 @@ <h1 data-i18n="Building character...">Building character...</h1>
       [COMPUTED.VerdictClass]: VERDICT_CLASSES[check.outcome],
       [COMPUTED.Rank]: RANKS[check.outcome],
       [COMPUTED.Skill]: skillName,
+      [COMPUTED.HasSkill]: notesFlag(skillName),
       [COMPUTED.Used]: used,
       [COMPUTED.Notes]: panicWarning(check)
     };

src/rolltemplates/ms.html

@@ -8,9 +8,9 @@ <h1 class="sheet-ms-result__title">{{title}}</h1>
     <h2 class="sheet-ms-result__subtitle">{{subtitle}}</h2>
     {{/subtitle}}
 
-    {{#computed::skill}}
+    {{#rollTotal() computed::hasskill 1}}
     <div class="sheet-ms-result__skill">{{computed::skill}}</div>
-    {{/computed::skill}}
+    {{/rollTotal() computed::hasskill 1}}
 
     {{#credits}}
     <div class="sheet-ms-roll">
@@ -50,18 +50,18 @@ <h2 class="sheet-ms-result__subtitle">{{subtitle}}</h2>
     </div>
     {{/damage}}
 
-    {{#rollTotal() computed::rank 3}}
+    {{#rollTotal() computed::rank 4}}
     <div class="sheet-ms-verdict sheet-ms-verdict--critical-success">{{computed::verdict}}</div>
+    {{/rollTotal() computed::rank 4}}
+    {{#rollTotal() computed::rank 3}}
+    <div class="sheet-ms-verdict sheet-ms-verdict--success">{{computed::verdict}}</div>
     {{/rollTotal() computed::rank 3}}
     {{#rollTotal() computed::rank 2}}
-    <div class="sheet-ms-verdict sheet-ms-verdict--success">{{computed::verdict}}</div>
+    <div class="sheet-ms-verdict sheet-ms-verdict--failure">{{computed::verdict}}</div>
     {{/rollTotal() computed::rank 2}}
     {{#rollTotal() computed::rank 1}}
-    <div class="sheet-ms-verdict sheet-ms-verdict--failure">{{computed::verdict}}</div>
-    {{/rollTotal() computed::rank 1}}
-    {{#rollTotal() computed::rank 0}}
     <div class="sheet-ms-verdict sheet-ms-verdict--critical-failure">{{computed::verdict}}</div>
-    {{/rollTotal() computed::rank 0}}
+    {{/rollTotal() computed::rank 1}}
 
     {{#rollTotal() computed::hasnotes 1}}
     <div class="sheet-ms-notes">{{computed::notes}}</div>

src/svelte/styles/_rolltemplate.scss

@@ -47,7 +47,7 @@ $roots: ".sheet-rolltemplate-ms, .sheet-rolltemplate-ms-cm";
 
   // the roll box: one size for every template
   --ms-roll-w: 3.6em;
-  --ms-roll-h: 2.9em;
+  --ms-roll-h: var(--ms-roll-w); // square: the footer offset reads this
 
   .sheet-ms-result {
     border: var(--ms-border-width-thick) solid var(--ms-border);
@@ -72,7 +72,7 @@ $roots: ".sheet-rolltemplate-ms, .sheet-rolltemplate-ms-cm";
 
     background: var(--ms-inverse);
 
-    font-size: var(--ms-text-xl);
+    font-size: var(--ms-text-lg);
     line-height: 1.05;
     font-family: var(--ms-font-header);
     text-align: center;
@@ -121,19 +121,29 @@ $roots: ".sheet-rolltemplate-ms, .sheet-rolltemplate-ms-cm";
   .sheet-ms-roll {
     display: grid;
     position: relative;
-    place-items: center;
+    grid-auto-rows: min-content;
+    align-content: center;
+    justify-items: center;
+
+    overflow: hidden;
 
     border: var(--ms-border-width-thick) solid var(--ms-border);
     border-radius: var(--ms-radius-lg);
     box-sizing: border-box;
+    min-height: 0;
 
     background: var(--ms-surface);
+
+    // Square, and it has to be said twice. aspect-ratio states the intent;
+    // min-height: 0 is what actually enforces it, because this box is itself
+    // a grid item and a grid item's automatic minimum size is its content --
+    // which silently wins over an explicit height once the discarded die is
+    // stacked under the counted one.
+    aspect-ratio: 1 / 1;
   }
 
   .sheet-ms-roll__roll,
   .sheet-ms-roll__roll2 {
-    grid-area: 1 / 1;
-
     font-size: var(--ms-text-2xl);
     line-height: 1;
     font-weight: 700;
@@ -163,22 +173,27 @@ $roots: ".sheet-rolltemplate-ms, .sheet-rolltemplate-ms-cm";
   // are shown in the order they were actually thrown, since that order
   // matters for auditing a roll, and either one can be the die that counted.
   .sheet-ms-roll--spent {
-    position: absolute;
-    top: 0.1em;
-    right: 0.3em;
+    order: 2;
 
     font-size: var(--ms-text-xs);
+    line-height: 1;
     font-weight: 800;
     text-decoration: line-through;
     color: var(--ms-fg-muted);
   }
 
-  // The die that counted gets a ring rather than sitting unmarked -- with the
-  // spent die shrunk into the corner it would already read as the answer, but
-  // an edge is exactly the roll a table double-checks.
+  // The counted die sits where a single die would; the struck-out one below it
+  // is annotation. No ring -- the strike-through already says which is which,
+  // and an accent outline read as an error state rather than an edge.
   .sheet-ms-roll--used {
-    box-shadow: 0 0 0 2px var(--ms-accent);
-    border-radius: var(--ms-radius-sm);
+    order: 1;
+  }
+
+  // With a discarded die stacked beneath it, the counted one steps down so the
+  // pair sits inside the square rather than being clipped by it. A lone die
+  // keeps the full size -- most rolls have no edge and should read large.
+  .sheet-ms-roll:has(.sheet-ms-roll--spent) .sheet-ms-roll--used {
+    font-size: var(--ms-text-xl);
   }
 
   // --- target / damage: the dark footer of the roll box ---------------------

src/svelte/styles/_tokens.scss

@@ -9,7 +9,7 @@
 //
 // Variable axes are the casualty: this brings in Archivo's weights but not its
 // width axis, so the `font-stretch` the labels ask for has nothing to act on.
-@import url('https://fonts.googleapis.com/css?family=Archivo:400,700,800,900|IBM+Plex+Mono:400&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Archivo:400,700,800,900|IBM+Plex+Mono:400|Material+Icons&display=swap');
 
 // Design tokens for the Mothership sheet.
 //

src/ts/rules/rollTemplate.ts

@@ -22,6 +22,7 @@ const TEMPLATE = "ms";
 export const COMPUTED = {
   Used: "used",
   HasNotes: "hasnotes",
+  HasSkill: "hasskill",
   Verdict: "verdict",
   VerdictClass: "verdictclass",
   Rank: "rank",
@@ -35,11 +36,15 @@ export const COMPUTED = {
  * Roll templates cannot compare text, but `rollTotal()` compares a roll to a
  * number, which is how a critical gets its own treatment in chat.
  */
+// Ranked from 1, not 0. A card that sets no rank at all -- an alert, a
+// damage roll, an armour-destroyed notice -- leaves the placeholder reading 0,
+// and a verdict block testing `rank 0` would match it and print an empty
+// pill. Starting at 1 means "no rank" matches nothing.
 const RANKS: Record<Outcome, number> = {
-  [Outcomes.CriticalFailure]: 0,
-  [Outcomes.Failure]: 1,
-  [Outcomes.Success]: 2,
-  [Outcomes.CriticalSuccess]: 3,
+  [Outcomes.CriticalFailure]: 1,
+  [Outcomes.Failure]: 2,
+  [Outcomes.Success]: 3,
+  [Outcomes.CriticalSuccess]: 4,
 };
 
 /**
@@ -147,6 +152,7 @@ export function checkTemplate(options: CheckTemplateOptions): string {
     [COMPUTED.VerdictClass, "[[0]]"],
     [COMPUTED.Rank, "[[0]]"],
     [COMPUTED.Skill, "[[0]]"],
+    [COMPUTED.HasSkill, "[[0]]"],
     [COMPUTED.Notes, "[[0]]"],
     [COMPUTED.HasNotes, "[[0]]"],
   ]);
@@ -173,6 +179,7 @@ export function checkComputed(
     [COMPUTED.VerdictClass]: VERDICT_CLASSES[check.outcome],
     [COMPUTED.Rank]: RANKS[check.outcome],
     [COMPUTED.Skill]: skillName,
+    [COMPUTED.HasSkill]: notesFlag(skillName),
     [COMPUTED.Used]: used,
     [COMPUTED.Notes]: panicWarning(check),
   };