Display all of the pinned ammo on the sheet and tweak the list header style.

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",
+				"star-button": "Add {name} as a starred ammo",
-				"pin-button-tooltip": "Pin {name}"
+				"star-button-tooltip": "Add Star",
+				"unstar-button": "Remove {name} as a starred ammo",
+				"unstar-button-tooltip": "Remove Star"
 			}
 		},
 		"notifs": {

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`)) {
+			if (favouriteCount < 3 && ammo.getFlag(game.system.id, `favourited`)) {
-				ctx.favouriteAmmo.push({
+				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;

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>

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;
 		}

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"