Revamped roll-result output

[ben]

@rsek mentioned this graphic style:

We could use the Dataforged icons to make a nice output for moves and momentum-burn results.

[rsek]

here's how starforged lays out action score arithmetic.

ironsworn lays these out in roughly the same way:

for a VTT, i think there's some benefit to using a layout that provides roughly the same information in the same order as both rulebooks, even if it's styled differently - particularly if the module later incorporates, say, rules compendium entries that include these diagrams. much of the labelling could instead be handled via tooltip.

aside: as a communication strategy, i think iconic representation + tooltips has a lot to offer a desktop-centric VTT environment. i reckon not every label (or even the majority of labels!) should be moved there, but if the idea is to present information enough for a newbie to get the idea while leaving it uncluttered for folks who know what to expect... there's worse options for accomplishing that. especially in an element like roll output, which is very frequently repeated - folks can attain "system mastery" of what the roll output very quickly when they see it 20 times a game, especially if there's non-textual ways to identify it (a less frequently-repeated item, on the other hand, would probably benefit more from "up front" labelling and icons).

here's one VERY rough idea on how the chat output might lay out dice results for an action roll:

the line below it could then display e.g. "WEAK HIT" in bold text, so that the most important information has both text and icon representation.

and since the alert already references the roll outcome symbols, it becomes a bit more feasible to use symbolic representation in the momentum burn button, to avoid it getting utterly destroyed by the german localization. ;)

[ben]

Another one from the book: burning momentum.

[rsek]

i think we're going have to look somewhere other than source for accurate/informative labelling on roll output. that could just mean it's the responsibility of the HBS template instead, and said template gets passed additional data.

the labelling has to make the content clear w/o the additional context of the graphical representation (which is great, and useful for many people - it just can't be the only way to get those cues).

here's a more concrete example.

at present, someone in a text-only environment gets something like the following from the roll graphic:

1 [title: d6]
+
5 [title: Health (Mammoth / Companion)]
vs.
9 [title: d10]
5 [title: d10]
=
Weak hit [title: Roll]

i think a better set of labels would be something more like...

1 [title: Action die (d6)]
+
5 [title: Stat (health, from your Companion / Mammoth asset)]
vs.
9 [title: Challenge die 1 (d10)]
5 [title: Challenge die 2 (d10)]
=
Weak hit [title: Move outcome]

even better would be something that consistently renders the same terms for every action roll (so, adds are included even if they're zero), including the total score. and we can :

1 [title: Action die (d6)]
+ 
5 [title: Stat (+health, from Companion / Mammoth)]
+ 
0 [title: Adds]
= 
6 [title: Action score]
vs.
9 [title: Challenge die 1 (d10)]
5 [title: Challenge die 2 (d10)]

that consumes the equals sign there, and i've omitted the move outcome ... but that's fine, because i think the move outcome deserves its own element as a sibling of the dice graphic. it's a pretty big deal - maybe the single most important information on the card.

so i reckon users dealing with the GUI should be able to spot it immediately (e.g. because the type is styled dramatically - it's big and important); for users in a text-only environment, we'd simply present the move outcome as the first item (whether or not it's the first item seen by GUI users -- there's some css that can manipulate this), and make more detailed elaboration of the roll arithmetic available via extended description.

here's a very loose and non-exhaustive outline of how i might organize that informational hierarchy in HTML (for v10 tooltip-friendly version, just replace title with data-tooltip):

<article class="ironsworn-roll-message">
  <h3 class="roll-message-title">
    <!-- title string -->
  </h3>
  <h4 class="move-outcome" title="Move outcome">
    <!-- move outcome locale string -->
  <h4/>
  <section class="move-outcome-description" title="Move outcome description">
    <!-- move text, if available -->
  </section>
  <section class="ironsworn-roll-details" title="Roll details">
    <article class="roll-graphic">
      <span class="action-die" title="Action die (d6)">1</span>
      <span class="arithmetic-symbol">
        +
      </span>
      <span class="stat" title="Stat (+health, from Companion / Mammoth)">5</span>
      <span class="arithmetic-symbol">
        +
      </span>
      <span class="adds" title="Adds">0</span>
      <span class="arithmetic-symbol">
        =
      </span>
      <span class="score action-score" title="Action score">6</span>
      <span class="versus" title="versus">vs.</span>
      <span class="challenge-die-1" title="Challenge die 1 (d10)">9</span>
      <span class="challenge-die-2" title="Challenge die 2 (d10)">5</span>
    </article>
  </section>
  <section class="roll-shortcuts">
    <!-- buttons etc go here -->
  </section>
</article>

[rsek]

jotting down some thoughts for various enhancements (some i've already touched on, but i'd like to gather them in one post):

• matches are of significantly more importance in ironsworn than minimum/maximum rolls on challenge dice. if we only do fancy fx on one thing, it should probably be matches; it might simply absorb the dice 'glow' styling, or something entirely different (connecting the two of them with a line or 'chain link' icon?)
  • alternative approach: the dice icon background gets a fill of the relevant colour, and the dice FG is set to white. the light/dark reversal
  • possible distinction: colouring the number means max/min
• show the action score total, and highlight/mark both action score and the progress score in the same way. common shapes marking the same element = easier to parse at a glance. possible inspiration:
• consider showing adds even if they're 0. consistent layout/positioning = easier to parse at a glance
• a visual indicator that a die has been preset (or post-set), e.g. a small 'lock' icon
• a marker of "pass"/"fail" on challenge dice in one corner, similar to the markers on the challenge dice here (mentioned it before):