Finish the Skills Card redesign (closes #11)

module/Apps/ActorSheets/HeroSkillsCardV1.mjs

@@ -11,6 +11,7 @@ import { PopoverEventManager } from "../../utils/PopoverEventManager.mjs";
 const { HandlebarsApplicationMixin } = foundry.applications.api;
 const { ActorSheetV2 } = foundry.applications.sheets;
 const { ContextMenu } = foundry.applications.ui;
+const { deepClone } = foundry.utils;
 
 export class HeroSkillsCardV1 extends GenericAppMixin(HandlebarsApplicationMixin(ActorSheetV2)) {
 
@@ -99,6 +100,8 @@ export class HeroSkillsCardV1 extends GenericAppMixin(HandlebarsApplicationMixin
 		ctx = await HeroSkillsCardV1.prepareAmmo(ctx);
 		ctx = await HeroSkillsCardV1.prepareSkills(ctx);
 
+		ctx.aura = deepClone(ctx.actor.system.aura);
+
 		Logger.debug(`Context:`, ctx);
 		return ctx;
 	};

templates/Apps/HeroSkillsCardV1/content.hbs

@@ -104,46 +104,6 @@
 		{{/each}}
 	</ol>
 
-	<div class="ammo pill with-icon">
-		<rc-icon
-			class="ammo-info-icon"
-			name="icons/info-circle"
-			var:size="16px"
-			var:fill="currentColor"
-		></rc-icon>
-		<div class="label">
-			{{ rc-i18n "RipCrypt.common.ammo"}}
-		</div>
-		<div class="input">
-			{{ ammo }}
-		</div>
-	</div>
-	{{#each favouriteAmmo as | data |}}
-		{{#if data}}
-			<div
-				class="pill fav-ammo"
-				data-item-id="{{data.uuid}}"
-			>
-				<div>
-					{{data.name}}
-				</div>
-				<input
-					type="number"
-					id="{{@root.meta.idp}}-{{data.uuid}}-quantity"
-					value="{{data.quantity}}"
-					aria-label="Quantity of {{data.name}}"
-					data-foreign-update-on="change,blur"
-					data-foreign-uuid="{{data.uuid}}"
-					data-foreign-name="system.quantity"
-				>
-			</div>
-		{{else}}
-			<div class="pill" style="opacity: 0.5; background: var(--alt-row-background);">
-				{{ rc-i18n "RipCrypt.Apps.starred-ammo-placeholder" }}
-			</div>
-		{{/if}}
-	{{/each}}
-
 	{{!-- * Currencies --}}
 	<div class="currencies">
 		<div class="currency pill">
@@ -180,4 +140,63 @@
 			>
 		</div>
 	</div>
+
+	{{!-- * Ammo Summary & Stars --}}
+	<ul class="ammo-list">
+		<li>
+			<div class="ammo pill with-icon">
+				<rc-icon
+					class="ammo-info-icon"
+					name="icons/info-circle"
+					var:size="16px"
+					var:fill="currentColor"
+				></rc-icon>
+				<div class="label">
+					{{ rc-i18n "RipCrypt.common.ammo"}}
+				</div>
+				<div class="input">
+					{{ ammo }}
+				</div>
+			</div>
+		</li>
+		{{#each favouriteAmmo as | data |}}
+			<li>
+				{{#if data}}
+					<div
+						class="pill fav-ammo"
+						data-item-id="{{data.uuid}}"
+					>
+						<div>
+							{{data.name}}
+						</div>
+						<input
+							type="number"
+							id="{{@root.meta.idp}}-{{data.uuid}}-quantity"
+							value="{{data.quantity}}"
+							aria-label="Quantity of {{data.name}}"
+							data-foreign-update-on="change,blur"
+							data-foreign-uuid="{{data.uuid}}"
+							data-foreign-name="system.quantity"
+						>
+					</div>
+				{{else}}
+					<div class="pill" style="opacity: 0.5; background: var(--alt-row-background);">
+						{{ rc-i18n "RipCrypt.Apps.starred-ammo-placeholder" }}
+					</div>
+				{{/if}}
+			</li>
+		{{/each}}
+	</ul>
+
+	{{!-- * Aura Size --}}
+	{{#if aura}}
+		<div class="aura-size dual-pill">
+			<span class="label" aria-hidden="true">{{rc-i18n "RipCrypt.common.aura"}}</span>
+			<div class="values">
+				<span class="value" data-tooltip="RipCrypt.tooltips.auras.normal">{{aura.normal}}</span>
+				<span class="slash" aria-hidden="true"></span>
+				<span class="value" data-tooltip="RipCrypt.tooltips.auras.heavy">{{aura.heavy}}</span>
+			</div>
+		</div>
+	{{/if}}
 </div>

templates/Apps/HeroSkillsCardV1/style.css

@@ -6,7 +6,7 @@
 
 	display: grid;
 	grid-template-columns: repeat(3, minmax(0, 1fr));
-	grid-template-rows: repeat(13, minmax(0, 1fr));
+	grid-template-rows: repeat(14, minmax(0, 1fr));
 	column-gap: var(--col-gap);
 	row-gap: var(--row-gap);
 
@@ -68,20 +68,20 @@
 
 	.grip-skills-header {
 		grid-column: 1 / span 1;
-		grid-row: 6 / span 1;
+		grid-row: 7 / span 1;
 	}
 	.grip-skills {
 		grid-column: 1 / span 1;
-		grid-row: 7 / span 4;
+		grid-row: 8 / span 4;
 	}
 
 	.glim-skills-header {
 		grid-column: 2 / span 1;
-		grid-row: 6 / span 1;
+		grid-row: 7 / span 1;
 	}
 	.glim-skills {
 		grid-column: 2 / span 1;
-		grid-row: 7 / span 4;
+		grid-row: 8 / span 4;
 	}
 
 	.gear-list {
@@ -100,14 +100,29 @@
 		}
 	}
 
+	.ammo-list {
+		grid-column: 1 / span 2;
+		grid-row: 13 / span 2;
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-template-rows: subgrid;
+		list-style-type: none;
+		padding: 0;
+	}
+
 	.currencies {
 		grid-column: 1 / span 2;
-		grid-row: 13 / span 1;
+		grid-row: 12 / span 1;
 		display: grid;
 		column-gap: var(--col-gap);
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}
 
+	.aura-size {
+		grid-column: 3;
+		grid-row: 14;
+	}
+
 	.pill {
 		display: grid;
 		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
@@ -136,4 +151,32 @@
 			text-align: center;
 		}
 	}
+
+	.dual-pill {
+		border-radius: 999px;
+		background: var(--accent-1);
+		display: grid;
+		grid-template-columns: 2fr 1fr;
+		gap: 0.25rem;
+		align-items: center;
+		padding-left: 8px;
+
+		.values {
+			border-radius: 999px;
+			margin: 2px;
+			background: var(--base-background);
+			color: var(--base-text);
+			padding: 0.125rem 0.5rem;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-evenly;
+			gap: 0.5rem;
+			--slash-color: var(--accent-1);
+		}
+
+		.value {
+			flex-grow: 1;
+			text-align: center;
+		}
+	}
 }