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;
 

Apps/common.css

@@ -1,3 +1,5 @@
+@import url("./elements/button.css");
+
 .ripcrypt {
 	.window-content {
 		padding: 0;
@@ -57,4 +59,4 @@
 	label, input, select {
 		cursor: pointer;
 	}
-}
+}

Apps/components/icon.css

@@ -0,0 +1,18 @@
+:host {
+	display: inline-block;
+}
+
+div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+svg {
+	width: var(--size, 1rem);
+	height: var(--size, 1rem);
+	fill: var(--fill);
+	stroke: var(--stroke);
+}

Apps/elements/button.css

@@ -0,0 +1,22 @@
+.ripcrypt > .window-content button {
+	all: revert;
+	padding: 2px 4px;
+
+	&.roll {
+		padding: 0;
+		border-radius: 50%;
+		outline: none;
+		border: none;
+		width: 20px;
+		height: 20px;
+
+		&:hover:not(:disabled) {
+			cursor: pointer;
+			outline: none;
+		}
+
+		&:disabled {
+			opacity: 0.6;
+		}
+	}
+}