From 3672241aeceb6956860f531181f76f6d3b821914 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sun, 22 Dec 2024 16:44:47 -0700
Subject: [PATCH] RC-28 | Abilities | Display

---
 Apps/HeroSummaryCardV1/content.hbs            | 36 ++++++++++++++++-
 Apps/HeroSummaryCardV1/style.css              | 40 ++++++++++++++++++-
 module/Apps/ActorSheets/HeroSummaryCardV1.mjs | 22 +++++++++-
 3 files changed, 94 insertions(+), 4 deletions(-)

diff --git a/Apps/HeroSummaryCardV1/content.hbs b/Apps/HeroSummaryCardV1/content.hbs
index 6e68d31..4103adb 100644
--- a/Apps/HeroSummaryCardV1/content.hbs
+++ b/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>
diff --git a/Apps/HeroSummaryCardV1/style.css b/Apps/HeroSummaryCardV1/style.css
index e15e8d2..0d17cd0 100644
--- a/Apps/HeroSummaryCardV1/style.css
+++ b/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%;
+		}
+	}
 }
diff --git a/module/Apps/ActorSheets/HeroSummaryCardV1.mjs b/module/Apps/ActorSheets/HeroSummaryCardV1.mjs
index 0d93da1..18049fc 100644
--- a/module/Apps/ActorSheets/HeroSummaryCardV1.mjs
+++ b/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