From 524ddee9d4813e5f93c49900e5f25cbac1b38b55 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Fri, 11 Apr 2025 21:46:49 -0600
Subject: [PATCH] Redesign the Hero Summary Card to match the book

---
 langs/en-ca.json                             |  2 +-
 templates/Apps/HeroSummaryCardV1/content.hbs | 46 ++++++++++----------
 templates/Apps/HeroSummaryCardV1/style.css   |  6 ++-
 templates/css/elements/generic.css           |  7 +++
 templates/css/main.css                       |  1 +
 5 files changed, 36 insertions(+), 26 deletions(-)
 create mode 100644 templates/css/elements/generic.css

diff --git a/langs/en-ca.json b/langs/en-ca.json
index 8eab18e..31de2cc 100644
--- a/langs/en-ca.json
+++ b/langs/en-ca.json
@@ -156,7 +156,7 @@
 			}
 		},
 		"Apps": {
-			"traits-range": "@RipCrypt.common.traits • @RipCrypt.common.range",
+			"traits-range": "@RipCrypt.common.traits / @RipCrypt.common.range",
 			"grit-skills": "@RipCrypt.common.abilities.grit Skills",
 			"gait-skills": "@RipCrypt.common.abilities.gait Skills",
 			"grip-skills": "@RipCrypt.common.abilities.grip Skills",
diff --git a/templates/Apps/HeroSummaryCardV1/content.hbs b/templates/Apps/HeroSummaryCardV1/content.hbs
index beefb7d..3351784 100644
--- a/templates/Apps/HeroSummaryCardV1/content.hbs
+++ b/templates/Apps/HeroSummaryCardV1/content.hbs
@@ -2,7 +2,7 @@
 	{{!-- * Header --}}
 	<div class="header">
 		<div class="image">Logo Image</div>
-		<label class="row-alt" for="{{meta.idp}}-name">
+		<label class="row-alt left-pill" for="{{meta.idp}}-name">
 			Hero
 		</label>
 		<div>
@@ -19,7 +19,7 @@
 
 	{{!-- * Armour --}}
 	<div class="armour">
-		<div class="section-header label row-alt">
+		<div class="section-header label row-alt right-pill">
 			{{ rc-i18n "RipCrypt.common.armour" }}
 		</div>
 		<div class="person">
@@ -56,41 +56,41 @@
 		</div>
 		<ul class="armour-items">
 			<li
-				class="row-alt"
+				class="row-alt right-pill"
 				data-ctx-menu="armour"
 				data-item-id="{{armours.head.uuid}}"
 			>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
+				<span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>
 				<span class="value ellipses">{{ armours.head.name }}</span>
 			</li>
 			<li
 				data-ctx-menu="armour"
 				data-item-id="{{armours.body.uuid}}"
 			>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
+				<span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.body" }}</span>
 				<span class="value ellipses">{{ armours.body.name }}</span>
 			</li>
 			<li
-				class="row-alt"
+				class="row-alt full-pill"
 				data-ctx-menu="armour"
 				data-item-id="{{armours.arms.uuid}}"
 			>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
+				<span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.arms" }}</span>
 				<span class="value ellipses">{{ armours.arms.name }}</span>
 			</li>
 			<li
 				data-ctx-menu="armour"
 				data-item-id="{{armours.legs.uuid}}"
 			>
-				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
+				<span class="label small">{{ rc-i18n "RipCrypt.common.anatomy.legs" }}</span>
 				<span class="value ellipses">{{ armours.legs.name }}</span>
 			</li>
 			<li
-				class="row-alt"
+				class="row-alt full-pill"
 				data-ctx-menu="armour"
 				data-item-id="{{shield.uuid}}"
 			>
-				<span class="label">{{ rc-i18n "RipCrypt.common.shield" }}</span>
+				<span class="label small">{{ rc-i18n "RipCrypt.common.shield" }}</span>
 				<span class="value ellipses">{{ shield.name }}</span>
 			</li>
 		</ul>
@@ -98,11 +98,11 @@
 
 	{{!-- * Fate & Advancement --}}
 	<div class="fate">
-		<label for="{{meta.idp}}-fate-path" class="col-header">
+		<label for="{{meta.idp}}-fate-path" class="col-header left-pill fate-label">
 			{{ rc-i18n "RipCrypt.common.fate" }}
 		</label>
 		<select
-			class="row-alt"
+			class="row-alt left-pill fate-value"
 			id="{{meta.idp}}-fate-path"
 			name="system.fate"
 		>
@@ -172,7 +172,7 @@
 	<{{{ifThen meta.editable "label" "div"}}}
 		id="{{meta.idp}}-rank-label"
 		for="{{meta.idp}}-rank"
-		class="rank-label label col-header"
+		class="rank-label label col-header right-pill"
 	>
 		{{ rc-i18n "RipCrypt.common.rank" }}
 	</{{{ifThen meta.editable "label" "div"}}}>
@@ -180,7 +180,7 @@
 		<select
 			id="{{meta.idp}}-rank"
 			name="system.level.rank"
-			class="rank row-alt"
+			class="rank row-alt right-pill"
 		>
 			{{ rc-options level.rank.selected level.rank.options localize=true }}
 		</select>
@@ -197,10 +197,10 @@
 	<table class="weapons">
 		<thead>
 			<tr>
-				<th class="label col-header">{{ rc-i18n "RipCrypt.common.weapon.plural" }}</th>
+				<th class="label col-header left-pill">{{ rc-i18n "RipCrypt.common.weapon.singular" }}</th>
 				<th class="label col-header">{{ rc-i18n "RipCrypt.Apps.traits-range" }}</th>
 				<th class="label col-header">{{ rc-i18n "RipCrypt.common.wear" }}</th>
-				<th class="label col-header">{{ rc-i18n "RipCrypt.common.damage" }}</th>
+				<th class="label col-header right-pill">{{ rc-i18n "RipCrypt.common.damage" }}</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -211,10 +211,10 @@
 						class="{{slot.class}}"
 						aria-hidden="true"
 					>
-						<td>{{ rc-i18n "RipCrypt.common.empty" }}</td>
-						<td></td>
+						<td class="left-pill">{{ rc-i18n "RipCrypt.common.empty" }}</td>
 						<td></td>
 						<td></td>
+						<td {{#unless @last}}class="right-pill"{{/unless}}></td>
 					</tr>
 				{{else}}
 					<tr
@@ -223,7 +223,7 @@
 						data-ctx-menu="weapon"
 						data-item-id="{{ slot.data.uuid }}"
 					>
-						<td>
+						<td class="left-pill">
 							{{!-- ? NOTE: Disabled for now to see what user feedback spawns
 							<rc-icon
 								var:size="1rem"
@@ -246,7 +246,7 @@
 						<td>
 							{{ slot.data.system.wear.value }} / {{ slot.data.system.wear.max }}
 						</td>
-						<td>
+						<td {{#unless @last}}class="right-pill"{{/unless}}>
 							{{ slot.data.system.damage }}
 						</td>
 					</tr>
@@ -291,13 +291,13 @@
 				</div>
 				{{#unless ability.readonly}}
 				<label
-					class="col-header"
+					class="col-header {{#if @first}}left-pill{{/if}}"
 					for="{{@root.meta.idp}}-{{ability.id}}-input"
 				>
 					{{ ability.name }}
 				</label>
 				{{else}}
-				<div class="col-header label">
+				<div class="col-header label {{#if @first}}left-pill{{/if}}">
 					{{ ability.name }}
 				</div>
 				{{/unless}}
@@ -350,7 +350,7 @@
 				<span class="value">{{speed.move}}</span>
 				<span class="max">{{speed.run}}</span>
 			</div>
-			<div aria-hidden="true" class="col-header label">
+			<div aria-hidden="true" class="col-header label right-pill">
 				{{ rc-i18n "RipCrypt.common.move" }}
 			</div>
 		</div>
diff --git a/templates/Apps/HeroSummaryCardV1/style.css b/templates/Apps/HeroSummaryCardV1/style.css
index 15344d6..c8007a1 100644
--- a/templates/Apps/HeroSummaryCardV1/style.css
+++ b/templates/Apps/HeroSummaryCardV1/style.css
@@ -24,7 +24,6 @@
 		box-sizing: border-box;
 		padding: 2px 4px;
 		text-transform: uppercase;
-		font-size: var(--font-size-14);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		font-weight: bold;
@@ -84,6 +83,9 @@
 		display: grid;
 		grid-template-rows: subgrid;
 	}
+	.fate-value {
+		padding-left: 2px;
+	}
 
 	.weapons {
 		grid-column: 1 / span 4;
@@ -258,7 +260,7 @@
 				justify-content: space-between;
 				align-items: center;
 				flex-wrap: nowrap;
-				padding: 0 2px;
+				padding: 0 4px;
 				gap: 4px;
 				min-width: 0;
 			}
diff --git a/templates/css/elements/generic.css b/templates/css/elements/generic.css
new file mode 100644
index 0000000..0bacb35
--- /dev/null
+++ b/templates/css/elements/generic.css
@@ -0,0 +1,7 @@
+.ripcrypt.popover.frameless,
+.ripcrypt.hud,
+.ripcrypt > .window-content {
+	.left-pill { border-radius: 999px 0 0 999px; }
+	.right-pill { border-radius: 0 999px 999px 0; }
+	.full-pill { border-radius: 999px; }
+}
diff --git a/templates/css/main.css b/templates/css/main.css
index 5621f33..9b06147 100644
--- a/templates/css/main.css
+++ b/templates/css/main.css
@@ -8,6 +8,7 @@
 @import url("./themes/dark.css") layer(themes);
 
 /* Elements */
+@import url("./elements/generic.css") layer(elements);
 @import url("./elements/button.css") layer(elements);
 @import url("./elements/input.css") layer(elements);
 @import url("./elements/lists.css") layer(elements);