Add functionality for randomly picking a difficulty

module/Apps/CryptApp.mjs

@@ -4,6 +4,13 @@ import { Logger } from "../utils/Logger.mjs";
 
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
 
+const conditions = [
+	{ label: `RipCrypt.common.difficulties.easy`, value: 4 },
+	{ label: `RipCrypt.common.difficulties.normal`, value: 5 },
+	{ label: `RipCrypt.common.difficulties.tough`, value: 6 },
+	{ label: `RipCrypt.common.difficulties.hard`, value: 7 },
+];
+
 export class CryptApp extends GenericAppMixin(HandlebarsApplicationMixin(ApplicationV2)) {
 	// #region Options
 	static DEFAULT_OPTIONS = {
@@ -18,9 +25,11 @@ export class CryptApp extends GenericAppMixin(HandlebarsApplicationMixin(Applica
 			minimizable: false,
 		},
 		position: {
-			width: 100,
+			width: `auto`,
+		},
+		actions: {
+			randomCondition: this.#randomCondition,
 		},
-		actions: {},
 	};
 
 	static PARTS = {
@@ -79,17 +88,17 @@ export class CryptApp extends GenericAppMixin(HandlebarsApplicationMixin(Applica
 	};
 
 	_prepareDifficulty(ctx) {
-		ctx.options = [
-			{ label: `RipCrypt.common.difficulties.easy`, value: 4 },
-			{ label: `RipCrypt.common.difficulties.normal`, value: 5 },
-			{ label: `RipCrypt.common.difficulties.tough`, value: 6 },
-			{ label: `RipCrypt.common.difficulties.hard`, value: 7 },
-		];
+		ctx.options = conditions;
 		ctx.difficulty = game.settings.get(`ripcrypt`, `dc`);
 		return ctx;
 	};
 	// #endregion
 
 	// #region Actions
+	static async #randomCondition() {
+		const dc = conditions[Math.floor(Math.random() * conditions.length)];
+		await game.settings.set(`ripcrypt`, `dc`, dc.value);
+		await this.render({ parts: [`delveConditions`] });
+	};
 	// #endregion
 };

templates/Apps/CryptApp/delveConditions.hbs

@@ -8,9 +8,21 @@
 		<div slot="content">
 			<span>{{ difficulty }}</span>
 			{{#if meta.editable}}
+				<div class="row">
 					<select id="{{meta.idp}}-difficulty">
 						{{ rc-options difficulty options localize=true }}
 					</select>
+					<button
+						type="button"
+						data-action="randomCondition"
+					>
+						<rc-icon
+							name="icons/roll"
+							var:size="20px"
+							var:fill="var(--accent-3)"
+						></rc-icon>
+					</button>
+				</div>
 			{{/if}}
 		</div>
 	</rc-border>

templates/Apps/CryptApp/style.css

@@ -10,4 +10,9 @@
 		background: var(--base-background);
 		padding: 4px;
 	};
+
+	.row {
+		display: flex;
+		flex-direction: row;
+	}
 }