Implement the most basic version of a dice pool configuration

templates/Apps/DicePool/buttons.hbs

@@ -0,0 +1,8 @@
+<div class="button-row">
+	<button
+		type="button"
+		data-action="roll"
+	>
+		Roll
+	</button>
+</div>

templates/Apps/DicePool/numberOfDice.hbs

@@ -0,0 +1,33 @@
+<rc-border
+	var:border-color="var(--accent-1)"
+	var:padding-top="16px"
+>
+	<div slot="title">
+		{{ rc-i18n "RipCrypt.Apps.numberOfDice" }}
+	</div>
+	<div slot="content" class="d8-incrementer">
+		<button
+			type="button"
+			data-action="diceCountDelta"
+			data-delta="1"
+		>
+			+
+		</button>
+		<div class="dice-count-row">
+			<rc-icon
+				name="icons/d8-outline"
+				var:size="35px"
+				var:fill="var(--accent-1)"
+			></rc-icon>
+			<span><span aria-hidden="true">x</span>{{ numberOfDice }}</span>
+		</div>
+		<button
+			type="button"
+			data-action="diceCountDelta"
+			data-delta="-1"
+			{{#if decrementDisabled}}disabled{{/if}}
+		>
+			-
+		</button>
+	</div>
+</rc-border>

templates/Apps/DicePool/style.css

@@ -0,0 +1,68 @@
+.ripcrypt.ripcrypt--DicePool {
+	> .window-content {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		grid-template-rows: auto min-content;
+		background: var(--base-background);
+		padding: 8px;
+		gap: 8px;
+		width: 250px;
+		height: 185px;
+	}
+
+	--button-background: var(--alt-row-background);
+	--button-text: var(--alt-row-text);
+	button {
+		border-radius: 2px;
+		font-weight: bold;
+		padding: 4px 8px;
+		width: max-content;
+	}
+
+	.d8-incrementer {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4px;
+
+		button {
+			width: max-content;
+		}
+	}
+
+	.dice-count-row {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: center;
+		align-items: center;
+		gap: 4px;
+		font-size: 1.5rem;
+	}
+
+	.dice-target {
+		display: flex;
+		position: relative;
+
+		.value {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 1.5rem;
+			color: white;
+			font-weight: normal;
+		}
+	}
+
+	.button-row {
+		--button-background: var(--header-background);
+		--button-text: var(--header-text);
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		grid-column: 1 / -1;
+	}
+}

templates/Apps/DicePool/target.hbs

@@ -0,0 +1,32 @@
+<rc-border
+	var:border-color="var(--accent-1)"
+	var:padding-top="16px"
+>
+	<div slot="title">Target</div>
+	<div slot="content" class="d8-incrementer">
+		<button
+			type="button"
+			data-action="targetDelta"
+			data-delta="1"
+			{{#if incrementDisabled}}disabled{{/if}}
+		>
+			+
+		</button>
+		<div class="dice-target">
+			<rc-icon
+				name="icons/d8-outline"
+				var:size="35px"
+				var:fill="var(--accent-1)"
+			></rc-icon>
+			<div class="value">{{target}}</div>
+		</div>
+		<button
+			type="button"
+			data-action="targetDelta"
+			data-delta="-1"
+			{{#if decrementDisabled}}disabled{{/if}}
+		>
+			-
+		</button>
+	</div>
+</rc-border>

templates/Apps/HeroSummaryCardV1/content.hbs

@@ -261,8 +261,8 @@
 							type="button"
 							class="roll icon"
 							data-action="roll"
-							data-formula="{{ability.value}}d8rc4"
-							data-flavor="{{ability.name}} Roll (Difficulty: 4)"
+							data-dice-count="{{ability.value}}"
+							data-flavor="{{ability.name}} Roll"
 						>
 							<rc-icon
 								var:size="20px"

templates/Apps/apps.css

@@ -1,4 +1,5 @@
 @import url("./AllItemSheetV1/style.css");
 @import url("./CombinedHeroSheet/style.css");
+@import url("./DicePool/style.css");
 @import url("./HeroSummaryCardV1/style.css");
 @import url("./HeroSkillsCardV1/style.css");

templates/css/common.css

@@ -11,6 +11,7 @@
 
 .ripcrypt {
 	.window-content {
+		flex: initial;
 		padding: 0;
 		margin: 0;
 	}

templates/css/components/rc-border.css

@@ -0,0 +1,37 @@
+:host {
+	display: flex;
+	flex-direction: column;
+	--vertical-displacement: 10px;
+}
+
+.rc-border {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	flex-grow: 1;
+
+	padding: var(--padding, 4px);
+	border-width: 2px;
+	border-style: solid;
+	border-color: var(--border-color);
+	border-radius: 8px;
+	position: relative;
+	margin-top: var(--margin-top, var(--vertical-displacement));
+	padding-top: var(--padding-top, var(--vertical-displacement));
+
+	.title {
+		position: absolute;
+		top: calc(-1 * var(--vertical-displacement));
+		left: 50%;
+		height: minmax(var(--title-height, 20px), auto);
+		transform: translateX(-50%);
+		background: var(--title-background, var(--border-color));
+		padding: 4px 6px;
+		box-sizing: border-box;
+		width: max-content;
+		max-width: 75%;
+		min-width: 50px;
+		border-radius: 4px;
+	}
+}

templates/css/elements/button.css

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