Add ammo to the gear types, and get more design stuff for the AmmoTracker

langs/en-ca.json

@@ -172,7 +172,8 @@
 			"numberOfDice": "# of Dice",
 			"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."
+			"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.",
+			"no-ammo": "You don't have any ammo!"
 		},
 		"notifs": {
 			"error": {

module/Apps/popovers/AmmoTracker.mjs

@@ -19,8 +19,8 @@ export class AmmoTracker extends GenericPopoverMixin(HandlebarsApplicationMixin(
 	};
 
 	static PARTS = {
-		main: {
-			template: filePath(`templates/Apps/popovers/AmmoTracker/content.hbs`),
+		ammoList: {
+			template: filePath(`templates/Apps/popovers/AmmoTracker/ammoList.hbs`),
 		},
 	};
 	// #endregion
@@ -29,6 +29,12 @@ export class AmmoTracker extends GenericPopoverMixin(HandlebarsApplicationMixin(
 	// #endregion
 
 	// #region Lifecycle
+	async _preparePartContext(partId, data) {
+		const ctx = { partId };
+		ctx.canPin = false;
+		ctx.ammos = data.ammos;
+		return ctx;
+	};
 	// #endregion
 
 	// #region Actions

module/gameTerms.mjs

@@ -37,6 +37,7 @@ export const gameTerms = Object.preventExtensions({
 	}),
 	/** The types of items that contribute to the gear limit */
 	gearItemTypes: new Set([
+		`ammo`,
 		`armour`,
 		`weapon`,
 		`shield`,

templates/Apps/popovers/AmmoTracker/ammoList.hbs

@@ -0,0 +1,23 @@
+<div>
+	{{#if ammos}}
+		<ul>
+			{{#each ammos as | ammo |}}
+				<div class="ammo" data-item-id="{{ammo.uuid}}">
+					<span class="name">{{ ammo.name }}</span>
+					<span class="value">{{ ammo.system.quantity }}</span>
+					<button
+						type="button"
+						{{ disabled @root.canPin }}
+						data-action="pinAmmo"
+					>
+						Pin
+					</button>
+				</div>
+			{{/each}}
+		</ul>
+	{{else}}
+		<span class="placeholder">
+			{{ rc-i18n "RipCrypt.Apps.no-ammo" }}
+		</span>
+	{{/if}}
+</div>

templates/Apps/popovers/AmmoTracker/content.hbs

@@ -1,3 +0,0 @@
-<div>
-	Hello
-</div>

templates/Apps/popovers/AmmoTracker/style.css

@@ -1,4 +1,38 @@
-.ripcrypt--AmmoTracker {
-	color: var(--base-text);
-	background: var(--base-background);
+.ripcrypt--AmmoTracker.ripcrypt--AmmoTracker {
+	color: var(--popover-text);
+	background: var(--popover-background);
+	padding: 4px 8px;
+
+	--button-text: var(--header-text);
+	--button-background: var(--header-background);
+
+	button {
+		border-radius: 4px;
+	}
+
+	ul {
+		&:nth-child(even) {
+			color: var(--popover-alt-row-text);
+			background: var(--popover-alt-row-background);
+			--button-text: unset;
+			--button-background: unset;
+		}
+	}
+
+	.ammo {
+		display: grid;
+		grid-template-columns: 150px 30px min-content;
+		grid-template-rows: min-content;
+		align-items: center;
+		justify-items: center;
+		/* display: flex;
+		flex-direction: row;
+		align-items: center; */
+		gap: 8px;
+
+		.name {
+			flex-grow: 1;
+			justify-self: left;
+		}
+	}
 }

templates/css/elements/button.css

@@ -1,5 +1,4 @@
-.ripcrypt.popover.frameless button,
-.ripcrypt.hud button,
+.ripcrypt:where(.popover.frameless, .hud) button,
 .ripcrypt > .window-content button {
 	all: revert;
 	outline: none;

templates/css/elements/lists.css

@@ -36,6 +36,9 @@
 	}
 
 	ul {
+		margin: 0;
+		padding: 0;
+
 		> li {
 			margin: 0;
 		}

templates/css/themes/dark.css

@@ -27,6 +27,16 @@
 	--col-gap: 2px;
 	--row-gap: 0px;
 
+	/* Popover Variables */
+	--popover-text: var(--base-text);
+	--popover-background: var(--base-background);
+
+	--popover-alt-row-text: var(--alt-row-text);
+	--popover-alt-row-background: var(--alt-row-background);
+
+	--popover-header-text: var(--header-text);
+	--popover-header-background: var(--header-background);
+
 	/* Additional Variables */
 	--string-tags-border: inherit;
 	--string-tags-tag-background: inherit;