Implement POC of rolling check from character sheet

src/module/actor/sheets/actor-sheet.ts

@@ -109,7 +109,9 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
 
         html.find(".item-change").on("change", this._onItemChange.bind(this));
 
-        html.find(".rollable-item").on("click", this._onRoll.bind(this));
+        html.find(".rollable-item").on("click", this._onRollItem.bind(this));
+
+        html.find(".rollable-check").on("click", this._onRollCheck.bind(this));
     }
 
     /**
@@ -218,16 +220,26 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
     }
 
     /**
-     * Handle clickable rolls.
+     * Handle clickable item rolls.
      * @param event - The originating click event
      */
-    protected _onRoll(event: JQuery.ClickEvent): void {
+    protected _onRollItem(event: JQuery.ClickEvent): void {
         event.preventDefault();
         const id = $(event.currentTarget).parents(".item").data("itemId");
         const item = this.actor.getOwnedItem(id);
         item.roll();
     }
 
+    /**
+     * Handle clickable check rolls.
+     * @param event - The originating click event
+     */
+    protected _onRollCheck(event: JQuery.ClickEvent): void {
+        event.preventDefault();
+        const check = event.currentTarget.dataset["check"];
+        this.actor.rollCheck(check);
+    }
+
     /** @override */
     protected async _onDropItem(
         event: DragEvent,

src/module/handlebars/handlebars-partials.ts

@@ -1,6 +1,8 @@
 export default async function registerHandlebarsPartials(): Promise<void> {
     const templatePaths = [
         "systems/ds4/templates/sheets/actor/components/character-progression.hbs",
+        "systems/ds4/templates/sheets/actor/components/check.hbs",
+        "systems/ds4/templates/sheets/actor/components/checks.hbs",
         "systems/ds4/templates/sheets/actor/components/combat-value.hbs",
         "systems/ds4/templates/sheets/actor/components/combat-values.hbs",
         "systems/ds4/templates/sheets/actor/components/core-value.hbs",

src/scss/components/_check.scss

@@ -0,0 +1,3 @@
+.ds4-check {
+    cursor: pointer;
+}

src/scss/components/_checks.scss

@@ -0,0 +1,6 @@
+.ds4-checks {
+    display: grid;
+    column-gap: 0.5em;
+    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    white-space: nowrap;
+}

src/scss/ds4.scss

@@ -6,24 +6,27 @@
 @include meta.load-css("global/fonts");
 @include meta.load-css("global/grid");
 @include meta.load-css("global/window");
+
 @include meta.load-css("components/actor_sheet");
 @include meta.load-css("components/dice_total");
 
 /* Styles limited to ds4 sheets */
 .ds4 {
-    @include meta.load-css("components/core_values");
-    @include meta.load-css("components/core_value");
     @include meta.load-css("components/apps");
     @include meta.load-css("components/basic_property");
     @include meta.load-css("components/character_progression");
     @include meta.load-css("components/character_values");
-    @include meta.load-css("components/combat_values");
+    @include meta.load-css("components/check");
+    @include meta.load-css("components/checks");
     @include meta.load-css("components/combat_value");
+    @include meta.load-css("components/combat_values");
+    @include meta.load-css("components/core_value");
+    @include meta.load-css("components/core_values");
+    @include meta.load-css("components/currency");
     @include meta.load-css("components/description");
     @include meta.load-css("components/forms");
     @include meta.load-css("components/item_list");
+    @include meta.load-css("components/rollable_image");
     @include meta.load-css("components/tabs");
     @include meta.load-css("components/talent_rank_equation");
-    @include meta.load-css("components/currency");
-    @include meta.load-css("components/rollable_image");
 }

src/templates/sheets/actor/components/check.hbs

@@ -0,0 +1,11 @@
+{{!--
+!-- Render a check.
+!--
+!-- @param check-key: The key of the combat value
+!-- @param check-target-number: The check target number
+!-- @param check-label: The label for the check
+--}}
+
+<div class="ds4-check rollable-check" data-check="{{check-key}}">
+    {{check-label}}: {{check-target-number}}
+</div>

src/templates/sheets/actor/components/checks.hbs

@@ -0,0 +1,6 @@
+<div class="ds4-checks">
+    {{#each config.i18n.checks as |check-label check-key|}}
+    {{> systems/ds4/templates/sheets/actor/components/check.hbs check-key=check-key check-target-number=(lookup
+    ../data.checks check-key) check-label=check-label}}
+    {{/each}}
+</div>

src/templates/sheets/actor/components/combat-value.hbs

@@ -2,8 +2,8 @@
 !-- Render a combat value.
 !--
 !-- @param combat-value-key: The key of the combat value
-!-- @param combat-value-data: The data for the attribute
+!-- @param combat-value-data: The data for the combat value
-!-- @param combat-value-label: The label for the attribute
+!-- @param combat-value-label: The label for the combat value
 --}}
 
 <div class="ds4-combat-value">

src/templates/sheets/actor/tabs/values.hbs

@@ -1,4 +1,5 @@
 <div class="tab values" data-group="primary" data-tab="values">
     {{> systems/ds4/templates/sheets/actor/components/core-values.hbs}}
     {{> systems/ds4/templates/sheets/actor/components/combat-values.hbs}}
+    {{> systems/ds4/templates/sheets/actor/components/checks.hbs}}
 </div>