From a7e0fe899a8683a6218a148e3b9c1d41e3065973 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sat, 5 Apr 2025 00:43:44 -0600
Subject: [PATCH] Display all of the pinned ammo on the sheet and tweak the
 list header style.

---
 langs/en-ca.json                                |  7 +++++--
 module/Apps/ActorSheets/HeroSkillsCardV1.mjs    | 11 ++++++-----
 templates/Apps/HeroSkillsCardV1/content.hbs     | 17 ++++++++++-------
 templates/Apps/HeroSkillsCardV1/style.css       | 14 ++++++--------
 .../Apps/popovers/AmmoTracker/ammoList.hbs      |  8 +++++---
 5 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/langs/en-ca.json b/langs/en-ca.json
index de9e051..1d2ad3e 100644
--- a/langs/en-ca.json
+++ b/langs/en-ca.json
@@ -173,10 +173,13 @@
 			"rollTarget": "Target",
 			"difficulty": "(DC: {dc})",
 			"RichEditor-no-collaborative": "Warning: This editor is not collaborative, that means that if you and someone else are editing it at the same time, you won't see that someone else is making changes until they save, and then your changes will be lost.",
+			"starred-ammo-placeholder": "Starred Ammo Slot",
 			"AmmoTracker": {
 				"no-ammo": "You don't have any ammo!",
-				"pin-button": "Pin {name} to your character sheet",
-				"pin-button-tooltip": "Pin {name}"
+				"star-button": "Add {name} as a starred ammo",
+				"star-button-tooltip": "Add Star",
+				"unstar-button": "Remove {name} as a starred ammo",
+				"unstar-button-tooltip": "Remove Star"
 			}
 		},
 		"notifs": {
diff --git a/module/Apps/ActorSheets/HeroSkillsCardV1.mjs b/module/Apps/ActorSheets/HeroSkillsCardV1.mjs
index be8fb26..7b1301a 100644
--- a/module/Apps/ActorSheets/HeroSkillsCardV1.mjs
+++ b/module/Apps/ActorSheets/HeroSkillsCardV1.mjs
@@ -140,20 +140,21 @@ export class HeroSkillsCardV1 extends GenericAppMixin(HandlebarsApplicationMixin
 
 	static async prepareAmmo(ctx) {
 		let total = 0;
-		ctx.favouriteAmmo = [];
+		let favouriteCount = 0;
+		ctx.favouriteAmmo = new Array(3).fill(null);
 
 		for (const ammo of ctx.actor.itemTypes.ammo) {
 			total += ammo.system.quantity;
 
-			if (ctx.favouriteAmmo.length < 3 && ammo.getFlag(game.system.id, `favourited`)) {
-				ctx.favouriteAmmo.push({
+			if (favouriteCount < 3 && ammo.getFlag(game.system.id, `favourited`)) {
+				ctx.favouriteAmmo[favouriteCount] = {
 					uuid: ammo.uuid,
 					name: ammo.name,
 					quantity: ammo.system.quantity,
-				});
+				};
+				favouriteCount++;
 			};
 		};
-		ctx.favouriteAmmo.length = 3; // assert array length
 
 		ctx.ammo = total;
 		return ctx;
diff --git a/templates/Apps/HeroSkillsCardV1/content.hbs b/templates/Apps/HeroSkillsCardV1/content.hbs
index 5259737..6f8c11b 100644
--- a/templates/Apps/HeroSkillsCardV1/content.hbs
+++ b/templates/Apps/HeroSkillsCardV1/content.hbs
@@ -104,7 +104,7 @@
 		{{/each}}
 	</ol>
 
-	<div class="ammo half-pill with-icon">
+	<div class="ammo pill with-icon">
 		<rc-icon
 			class="ammo-info-icon"
 			name="icons/info-circle"
@@ -121,12 +121,12 @@
 	{{#each favouriteAmmo as | data |}}
 		{{#if data}}
 			<div
-				class="half-pill fav-ammo"
+				class="pill fav-ammo"
 				data-item-id="{{data.uuid}}"
 			>
-				<label for="{{@root.meta.idp}}-{{data.uuid}}-quantity">
+				<div>
 					{{data.name}}
-				</label>
+				</div>
 				<input
 					type="number"
 					value="{{data.quantity}}"
@@ -134,12 +134,15 @@
 				>
 			</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 half-pill">
+		<div class="currency pill">
 			<label for="{{meta.idp}}-gold" >
 				{{ rc-i18n "RipCrypt.common.currency.gold"}}
 			</label>
@@ -150,7 +153,7 @@
 				value="0"
 			>
 		</div>
-		<div class="currency half-pill">
+		<div class="currency pill">
 			<label for="{{meta.idp}}-silver" >
 				{{ rc-i18n "RipCrypt.common.currency.silver"}}
 			</label>
@@ -161,7 +164,7 @@
 				value="0"
 			>
 		</div>
-		<div class="currency half-pill">
+		<div class="currency pill">
 			<label for="{{meta.idp}}-copper" >
 				{{ rc-i18n "RipCrypt.common.currency.copper"}}
 			</label>
diff --git a/templates/Apps/HeroSkillsCardV1/style.css b/templates/Apps/HeroSkillsCardV1/style.css
index bf35321..8c654b0 100644
--- a/templates/Apps/HeroSkillsCardV1/style.css
+++ b/templates/Apps/HeroSkillsCardV1/style.css
@@ -36,6 +36,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		border-radius: 999px;
 	}
 	.skill-list {
 		display: grid;
@@ -107,33 +108,30 @@
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 	}
 
-	.half-pill {
+	.pill {
 		display: grid;
 		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
 		align-items: center;
 		background: var(--section-header-background);
-		border-radius: 0 999px 999px 0;
+		border-radius: 999px;
 		color: var(--section-header-text);
+		padding: 2px 0 2px 4px;
 		--input-background: var(--base-background);
 		--input-text: var(--base-text);
 
 		&.with-icon {
 			grid-template-columns: min-content minmax(0, 1.5fr) minmax(0, 1fr);
 			gap: 4px;
-			padding: 2px 0 2px 4px;
-			.label {
-				padding: 0;
-			}
 		}
 
 		label, .label {
+			padding: 0;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 		}
 
-
 		input, .input {
-			margin: 2px;
+			margin: 0 2px 0 0;
 			border-radius: 999px;
 			text-align: center;
 		}
diff --git a/templates/Apps/popovers/AmmoTracker/ammoList.hbs b/templates/Apps/popovers/AmmoTracker/ammoList.hbs
index a7dc8b5..67d43b2 100644
--- a/templates/Apps/popovers/AmmoTracker/ammoList.hbs
+++ b/templates/Apps/popovers/AmmoTracker/ammoList.hbs
@@ -1,4 +1,4 @@
-<div>
+<div data-tooltip-direction="RIGHT">
 	{{#if ammos}}
 		<ul>
 			{{#each ammos as | data |}}
@@ -10,7 +10,8 @@
 							type="button"
 							class="icon"
 							data-action="unfavourite"
-							aria-label="Unpin ammo"
+							aria-label="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.unstar-button" name=data.ammo.name }}"
+							data-tooltip="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.unstar-button-tooltip" name=data.ammo.name }}"
 						>
 							<rc-icon
 								name="icons/star"
@@ -23,7 +24,8 @@
 							class="icon"
 							{{ disabled @root.atFavouriteLimit }}
 							data-action="favourite"
-							aria-label="Pin ammo"
+							aria-label="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.star-button" name=data.ammo.name }}"
+							data-tooltip="{{ rc-i18n "RipCrypt.Apps.AmmoTracker.star-button-tooltip" name=data.ammo.name }}"
 						>
 							<rc-icon
 								name="icons/star-empty"