RC-30 | Weapons | Table Setup

Apps/HeroSummaryCardV1/content.hbs

@@ -33,6 +33,30 @@
 	</div>
 
 	{{!-- * Weapons --}}
+	<table class="weapons">
+		<thead>
+			<tr>
+				<th class="label col-header">{{ rc-i18n "RipCrypt.common.weapon.plural" }}</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>
+			</tr>
+		</thead>
+		<tbody>
+			{{#each weapons as | slot |}}
+				{{#if slot.empty}}
+					<tr data-row="{{slot.index}}" class="{{slot.class}}">
+						<td>---</td>
+						<td></td>
+						<td></td>
+						<td></td>
+					</tr>
+				{{else}}
+					<tr data-row="index"></tr>
+				{{/if}}
+			{{/each}}
+		</tbody>
+	</table>
 
 	{{!-- * Abilities --}}
 	<div class="abilities">
@@ -77,7 +101,7 @@
 				<span class="max">{{speed.run}}</span>
 			</div>
 			<div aria-hidden="true" class="col-header label">
-				{{rc-i18n "RipCrypt.Apps.HeroSummaryCardV1.move-run"}}
+				{{rc-i18n "RipCrypt.Apps.move-run"}}
 			</div>
 		</div>
 	</div>

Apps/HeroSummaryCardV1/style.css

@@ -4,7 +4,7 @@
 	--input-height: 1rem;
 
 	display: grid;
-	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2.5fr);
+	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 2.5fr);
 	grid-template-rows: repeat(15, minmax(0, 1fr));
 	column-gap: var(--col-gap);
 
@@ -23,6 +23,10 @@
 		box-sizing: border-box;
 		padding: 2px 4px;
 		text-transform: uppercase;
+		font-size: var(--font-size-14);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-weight: bold;
 	}
 
 	.header {
@@ -53,6 +57,24 @@
 		grid-template-rows: subgrid;
 	}
 
+	.weapons {
+		grid-column: 1 / span 4;
+		grid-row: 7 / span 5;
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-auto-rows: min-content;
+		overflow-y: auto;
+
+		thead,
+		tbody,
+		tr {
+			display: contents;
+		}
+		.row-alt > * {
+			background: inherit;
+		}
+	}
+
 	.abilities {
 		grid-column: 1 / span 4;
 		grid-row: 12 / span 4;

Apps/common.css

@@ -10,6 +10,22 @@
 		--col-gap: 2px;
 	}
 
+	table {
+		all: revert;
+		box-sizing: border-box;
+		border-collapse: collapse;
+
+		thead, tbody, tr {
+			all: revert;
+		}
+		td, th {
+			all: revert;
+			padding: 2px 4px;
+			font-weight: initial;
+			text-align: left;
+		}
+	}
+
 	input {
 		all: revert;
 		box-sizing: border-box;