RC-28 | Abilities | Display

Apps/HeroSummaryCardV1/content.hbs

@@ -30,7 +30,41 @@
 
 	{{!-- * Weapons --}}
 
-	{{!-- * Skills --}}
+	{{!-- * Abilities --}}
+	<div class="abilities">
+		{{!-- Actual Abilities --}}
+		{{#each abilities as | ability |}}
+			<div class="ability">
+				<div class="compass">
+					{{#unless ability.readonly}}
+						<input
+							type="number"
+							id="{{@root.meta.idp}}-{{ability.id}}-input"
+							value="{{ability.value}}"
+						>
+					{{else}}
+						<span>{{ability.value}}</span>
+					{{/unless}}
+				</div>
+				{{#unless ability.readonly}}
+				<label
+					class="col-header"
+					for="{{@root.meta.idp}}-{{ability.id}}-input"
+				>
+					{{ ability.name }}
+				</label>
+				{{else}}
+				<div class="col-header label">
+					{{ ability.name }}
+				</div>
+				{{/unless}}
+			</div>
+		{{/each}}
+
+		{{!-- Health --}}
+
+		{{!-- Move & Run --}}
+	</div>
 
 	{{!-- * Equipment --}}
 </div>

Apps/HeroSummaryCardV1/style.css

@@ -19,9 +19,10 @@
 		background: rgba(0,0,0, 0.3);
 	}
 
-	label {
+	label, .label {
 		box-sizing: border-box;
 		padding: 2px 4px;
+		text-transform: uppercase;
 	}
 
 	.header {
@@ -51,4 +52,41 @@
 		display: grid;
 		grid-template-rows: subgrid;
 	}
+
+	.abilities {
+		grid-column: 1 / span 4;
+		grid-row: 12 / span 4;
+		display: grid;
+		/* grid-template-rows: minmax(0, 3fr) minmax(0, 1fr); */
+		grid-template-columns: repeat(6, minmax(0, 1fr));
+
+		.ability {
+			display: grid;
+			grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
+			justify-items: center;
+			align-items: center;
+		}
+
+		label, .label {
+			width: 100%;
+			text-align: center;
+		}
+	}
+
+	.compass {
+		--size: 45px;
+		width: var(--size);
+		height: var(--size);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		border: 2px solid black;
+		border-radius: 50%;
+		font-size: 1.5rem;
+
+		> input {
+			width: 75%;
+		}
+	}
 }

module/Apps/ActorSheets/HeroSummaryCardV1.mjs

@@ -1,5 +1,6 @@
 import { filePath } from "../../consts.mjs";
 import { gameTerms } from "../../gameTerms.mjs";
+import { localizer } from "../../utils/Localizer.mjs";
 import { Logger } from "../../utils/Logger.mjs";
 
 const { HandlebarsApplicationMixin } = foundry.applications.api;
@@ -45,7 +46,8 @@ export class HeroSummaryCardV1 extends HandlebarsApplicationMixin(ActorSheetV2)
 
 		ctx.actor = this.document;
 
-		ctx = await this._prepareFatePath(ctx);
+		ctx = await this.prepareFatePath(ctx);
+		ctx = await this.prepareAbilityRow(ctx);
 
 		partId = partId.slice(0,1).toUpperCase() + partId.slice(1);
 		if (this[`_prepare${partId}Context`] != null) {
@@ -56,7 +58,7 @@ export class HeroSummaryCardV1 extends HandlebarsApplicationMixin(ActorSheetV2)
 		return ctx;
 	};
 
-	async _prepareFatePath(ctx) {
+	async prepareFatePath(ctx) {
 		ctx.fate = {};
 		ctx.fate.selected = ctx.actor.system.fate;
 		ctx.fate.options = [
@@ -66,6 +68,22 @@ export class HeroSummaryCardV1 extends HandlebarsApplicationMixin(ActorSheetV2)
 		];
 		return ctx;
 	};
+
+	async prepareAbilityRow(ctx) {
+		ctx.abilities = [];
+		for (const key in ctx.actor.system.ability) {
+			ctx.abilities.push({
+				id: key,
+				name: localizer(
+					`RipCrypt.common.ability.${key}`,
+					{ value: ctx.actor.system.ability[key] },
+				),
+				value: ctx.actor.system.ability[key],
+				readonly: true,
+			});
+		};
+		return ctx;
+	}
 	// #endregion
 
 	// #region Actions