RC-51 | Roll Abilities

Apps/HeroSummaryCardV1/content.hbs

@@ -76,6 +76,20 @@
 					{{else}}
 						<span>{{ability.value}}</span>
 					{{/unless}}
+					{{#if @root.meta.editable}}
+						<button
+							type="button"
+							class="roll"
+							data-action="roll"
+							data-formula="{{ability.value}}d8rc4"
+							data-flavor="{{ability.name}} Roll (Difficulty: 4)"
+						>
+							<rc-icon
+								var:size="20px"
+								name="icons/roll-2"
+							></rc-icon>
+						</button>
+					{{/if}}
 				</div>
 				{{#unless ability.readonly}}
 				<label

Apps/HeroSummaryCardV1/style.css

@@ -89,6 +89,8 @@
 		grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
 		justify-items: center;
 		align-items: center;
+		position: relative;
+
 		label, .label {
 			width: 100%;
 			text-align: center;
@@ -106,6 +108,7 @@
 		border: 2px solid black;
 		border-radius: 50%;
 		font-size: 1.5rem;
+		position: relative;
 
 		> .value {
 			background: none;
@@ -113,8 +116,15 @@
 			text-align: center;
 		}
 
+		> .roll {
+			--distance: -15%;
+			position: absolute;
+			top: var(--distance);
+			right: var(--distance);
+			z-index: 2;
+		}
+
 		&.dual {
-			position: relative;
 			font-size: var(--font-size-14);
 			--distance-from-edge: 4px;