From 3ba588a3c17dbeb97d28b02c507bf1f04a7b11d6 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sun, 5 Jan 2025 23:28:29 -0700
Subject: [PATCH] RC-31 | Armour | Table Setup

---
 langs/en-ca.json                             | 10 +++-
 templates/Apps/HeroSummaryCardV1/content.hbs | 44 ++++++++++++++++-
 templates/Apps/HeroSummaryCardV1/style.css   | 50 ++++++++++++++++++++
 3 files changed, 102 insertions(+), 2 deletions(-)

diff --git a/langs/en-ca.json b/langs/en-ca.json
index 460e963..6f9b392 100644
--- a/langs/en-ca.json
+++ b/langs/en-ca.json
@@ -34,6 +34,7 @@
 				"singular": "Weapon",
 				"plural": "Weapons"
 			},
+			"armour": "Armour",
 			"wear": "Wear",
 			"damage": "Damage",
 			"guts": "Guts",
@@ -46,7 +47,14 @@
 				"gold": "Gold",
 				"silver": "Silver",
 				"copper": "Copper"
-			}
+			},
+			"anatomy": {
+				"head": "Head",
+				"body": "Body",
+				"arms": "Arms",
+				"legs": "Legs"
+			},
+			"shield": "Shield"
 		},
 		"setting": {
 			"abbrAccess": {
diff --git a/templates/Apps/HeroSummaryCardV1/content.hbs b/templates/Apps/HeroSummaryCardV1/content.hbs
index 9fa9812..0c6c508 100644
--- a/templates/Apps/HeroSummaryCardV1/content.hbs
+++ b/templates/Apps/HeroSummaryCardV1/content.hbs
@@ -18,7 +18,49 @@
 	>
 
 	{{!-- * Armour --}}
-	<div class="armour"></div>
+	<div class="armour">
+		<div class="section-header label row-alt">
+			{{ rc-i18n "RipCrypt.common.armour" }}
+		</div>
+		<div class="person">
+			<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">
+				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
+			</li>
+			<li>
+				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
+			</li>
+			<li class="row-alt">
+				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
+			</li>
+			<li>
+				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
+			</li>
+			<li class="row-alt">
+				<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
+			</li>
+		</ul>
+	</div>
 
 	{{!-- * Fate & Advancement --}}
 	<div class="fate">
diff --git a/templates/Apps/HeroSummaryCardV1/style.css b/templates/Apps/HeroSummaryCardV1/style.css
index 8d23752..d508632 100644
--- a/templates/Apps/HeroSummaryCardV1/style.css
+++ b/templates/Apps/HeroSummaryCardV1/style.css
@@ -153,6 +153,11 @@
 			z-index: 2;
 		}
 
+		&.small {
+			--size: 30px;
+			font-size: 1.15rem;
+		}
+
 		&.dual {
 			font-size: var(--font-size-14);
 			--distance-from-edge: 4px;
@@ -185,4 +190,49 @@
 			}
 		}
 	}
+
+	.armour {
+		grid-column: -2 / span 1;
+		grid-row: 1 / -1;
+		display: grid;
+		grid-template-rows: subgrid;
+
+		.section-header {
+			text-align: right;
+		}
+
+		.person {
+			grid-row: 2 / span 9;
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+			grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
+			justify-items: center;
+			align-items: center;
+
+			> div {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+
+		/* Positioning */
+		.head, .body, .legs { grid-column: 1; }
+		.arms, .shield { grid-column: 2; }
+		.head { grid-row: 1; }
+		.body, .arms { grid-row: 2; }
+		.legs, .shield { grid-row: 3; }
+		.shield { align-self: end; }
+
+		.armour-items {
+			display: contents;
+
+			> li {
+				display: flex;
+				flex-direction: row-reverse;
+				justify-content: space-between;
+			}
+		}
+	}
 }