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>