Implement most of shield functionality using the armour implementation as a backbone

assets/icons/shield-solid.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+	<path d="m50 89.988 0.011719 0.011719v-0.011719l10.82-5.4102c12.969-6.4883 21.129-19.711 21.129-34.199v-30.25c-18.762 0-31.699-9.9219-31.949-10.121v-0.007812s-13.199 10.129-31.969 10.129v30.25c0 14.488 8.1602 27.711 21.129 34.199l10.82 5.4102-0.003907 0.011719z"/>
+</svg>

langs/en-ca.json

@@ -5,6 +5,7 @@
 		},
 		"Item": {
 			"armour": "Armour",
+			"shield": "Shield",
 			"weapon": "Weapon"
 		}
 	},
@@ -102,6 +103,9 @@
 			"warn": {
 				"cannot-go-negative": "\"{name}\" is unable to be a negative number."
 			}
+		},
+		"tooltips": {
+			"shield-bonus": "Shield Bonus: {value}"
 		}
 	}
 }

module/Apps/ActorSheets/HeroSummaryCardV1.mjs

@@ -143,6 +143,7 @@ export class HeroSummaryCardV1 extends GenericAppMixin(HandlebarsApplicationMixi
 	static async prepareArmor(ctx) {
 		ctx.armours = {};
 		const equipped = ctx.actor.system.equippedArmour;
+		const shield = ctx.actor.system.equippedShield;
 		const defenses = ctx.actor.system.defense;
 		for (const slot of Object.values(gameTerms.Anatomy)) {
 			const item = equipped[slot];
@@ -150,9 +151,16 @@ export class HeroSummaryCardV1 extends GenericAppMixin(HandlebarsApplicationMixi
 				name: item?.name ?? ``,
 				uuid: item?.uuid ?? ``,
 				defense: defenses[slot],
-				shielded: false,
+				shielded: shield?.system.location.has(slot) ?? false,
 			};
 		};
+
+		ctx.shield = {
+			name: shield?.name ?? ``,
+			uuid: shield?.uuid ?? ``,
+			bonus: shield?.system.protection ?? 0,
+		};
+
 		return ctx;
 	};
 

module/data/Actor/Hero.mjs

@@ -165,7 +165,8 @@ export class HeroData extends foundry.abstract.TypeDataModel {
 	};
 
 	get equippedShield() {
-		return null;
+		const shields = this.parent.itemTypes.shield;
+		return shields.find(item => item.system.equipped);
 	};
 
 	get defense() {
@@ -175,7 +176,13 @@ export class HeroData extends foundry.abstract.TypeDataModel {
 			defenses[slot] = armour[slot]?.system.protection ?? 0;
 		};
 
-		// TODO: add shield defenses
+		const shield = this.equippedShield;
+		if (shield) {
+			for (const location of [...shield.system.location.values()]) {
+				const slot = location.toLowerCase();
+				defenses[slot] += shield.system.protection;
+			};
+		};
 
 		return defenses;
 	};

module/hooks/init.mjs

@@ -32,6 +32,7 @@ Hooks.once(`init`, () => {
 	// #region Datamodels
 	CONFIG.Actor.dataModels.hero = HeroData;
 	CONFIG.Item.dataModels.armour = ProtectorData;
+	CONFIG.Item.dataModels.shield = ProtectorData;
 	CONFIG.Item.dataModels.weapon = WeaponData;
 	// #endregion
 

system.json

@@ -45,6 +45,7 @@
 		},
 		"Item": {
 			"armour": {},
+			"shield": {},
 			"weapon": {}
 		}
 	}

templates/Apps/HeroSummaryCardV1/content.hbs

@@ -33,31 +33,26 @@
 			></rc-svg>
 			{{#each armours as | slot |}}
 				<div class="{{@key}}">
-					<div class="compass small">{{ slot.defense }}</div>
+					<div class="compass small">
+						<span class="value">
+							{{ slot.defense }}
+						</span>
+						{{#if slot.shielded}}
+							<rc-icon
+								class="shield"
+								name="icons/shield-solid"
+								data-tooltip="{{ rc-i18n "RipCrypt.tooltips.shield-bonus" value=@root.shield.bonus }}"
+								data-tooltip-direction="UP"
+								var:size="20px"
+								var:fill="var(--accent-3)"
+								var:stroke="black"
+								var:stroke-width="8px"
+							></rc-icon>
+						{{/if}}
+					</div>
 					<span class="label">{{ rc-i18n (concat "RipCrypt.common.anatomy." @key) }}</span>
 				</div>
 			{{/each}}
-			<!--
-			<div class="head">
-				<div class="compass small">0</div>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
-			</div>
-			<div class="body">
-				<div class="compass small">0</div>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
-			</div>
-			<div class="arms">
-				<div class="compass small">0</div>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
-			</div>
-			<div class="legs">
-				<div class="compass small">0</div>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
-			</div>
-			-->
-			<div class="shield">
-				<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
-			</div>
 		</div>
 		<ul class="armour-items">
 			<li class="row-alt">
@@ -78,6 +73,7 @@
 			</li>
 			<li class="row-alt">
 				<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
+				<span class="value ellipses">{{ shield.name }}</span>
 			</li>
 		</ul>
 	</div>

templates/Apps/HeroSummaryCardV1/style.css

@@ -237,11 +237,17 @@
 
 		/* Positioning */
 		.head, .body, .legs { grid-column: 1; }
-		.arms, .shield { grid-column: 2; }
+		.arms { grid-column: 2; }
 		.head { grid-row: 1; }
 		.body, .arms { grid-row: 2; }
-		.legs, .shield { grid-row: 3; }
+		.legs { grid-row: 3; }
-		.shield { align-self: end; }
+
+		.shield {
+			--distance: -7px;
+			position: absolute;
+			top: var(--distance);
+			right: var(--distance);
+		}
 
 		.armour-items {
 			display: contents;

templates/css/components/icon.css

@@ -14,5 +14,10 @@ svg {
 	width: var(--size, 1rem);
 	height: var(--size, 1rem);
 	fill: var(--fill);
-	stroke: var(--stroke);
+}
+
+path {
+	stroke: var(--stroke);
+	stroke-width: var(--stroke-width);
+	stroke-linejoin: var(--stroke-linejoin);
 }