RC-28 | Abilities | Display

Apps/HeroSummaryCardV1/content.hbs

@@ -30,7 +30,41 @@
 
 	{{!-- * Weapons --}}
 
-	{{!-- * Skills --}}
+	{{!-- * Abilities --}}
+	<div class="abilities">
+		{{!-- Actual Abilities --}}
+		{{#each abilities as | ability |}}
+			<div class="ability">
+				<div class="compass">
+					{{#unless ability.readonly}}
+						<input
+							type="number"
+							id="{{@root.meta.idp}}-{{ability.id}}-input"
+							value="{{ability.value}}"
+						>
+					{{else}}
+						<span>{{ability.value}}</span>
+					{{/unless}}
+				</div>
+				{{#unless ability.readonly}}
+				<label
+					class="col-header"
+					for="{{@root.meta.idp}}-{{ability.id}}-input"
+				>
+					{{ ability.name }}
+				</label>
+				{{else}}
+				<div class="col-header label">
+					{{ ability.name }}
+				</div>
+				{{/unless}}
+			</div>
+		{{/each}}
+
+		{{!-- Health --}}
+
+		{{!-- Move & Run --}}
+	</div>
 
 	{{!-- * Equipment --}}
 </div>

Apps/HeroSummaryCardV1/style.css

@@ -19,9 +19,10 @@
 		background: rgba(0,0,0, 0.3);
 	}
 
-	label {
+	label, .label {
 		box-sizing: border-box;
 		padding: 2px 4px;
+		text-transform: uppercase;
 	}
 
 	.header {
@@ -51,4 +52,41 @@
 		display: grid;
 		grid-template-rows: subgrid;
 	}
+
+	.abilities {
+		grid-column: 1 / span 4;
+		grid-row: 12 / span 4;
+		display: grid;
+		/* grid-template-rows: minmax(0, 3fr) minmax(0, 1fr); */
+		grid-template-columns: repeat(6, minmax(0, 1fr));
+
+		.ability {
+			display: grid;
+			grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
+			justify-items: center;
+			align-items: center;
+		}
+
+		label, .label {
+			width: 100%;
+			text-align: center;
+		}
+	}
+
+	.compass {
+		--size: 45px;
+		width: var(--size);
+		height: var(--size);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		border: 2px solid black;
+		border-radius: 50%;
+		font-size: 1.5rem;
+
+		> input {
+			width: 75%;
+		}
+	}
 }