Add functionality to the CryptApp to make it update/display the current difficulty, and rerender when it changes.

langs/en-ca.json

@@ -49,6 +49,12 @@
 			},
 			"damage": "Damage",
 			"delete": "Delete",
+			"difficulties": {
+				"easy": "Easy",
+				"normal": "Normal",
+				"tough": "Tough",
+				"hard": "Hard"
+			},
 			"edit": "Edit",
 			"empty": "---",
 			"equipped": "Equipped",

module/Apps/CryptApp.mjs

@@ -7,19 +7,31 @@ const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
 export class CryptApp extends GenericAppMixin(HandlebarsApplicationMixin(ApplicationV2)) {
 	// #region Options
 	static DEFAULT_OPTIONS = {
+		classes: [
+			`ripcrypt--CryptApp`,
+		],
 		window: {
-			title: `Crypt Overview`,
+			title: `Crypt`,
 			frame: true,
 			positioned: true,
 			resizable: false,
-			minimizable: true,
+			minimizable: false,
+		},
+		position: {
+			width: 100,
 		},
 		actions: {},
 	};
 
 	static PARTS = {
-		main: {
-			template: filePath(`templates/Apps/CryptApp/main.hbs`),
+		turnCount: {
+			template: filePath(`templates/Apps/CryptApp/turnCount.hbs`),
+		},
+		delveConditions: {
+			template: filePath(`templates/Apps/CryptApp/delveConditions.hbs`),
+		},
+		fate: {
+			template: filePath(`templates/Apps/CryptApp/fate.hbs`),
 		},
 	};
 	// #endregion
@@ -31,9 +43,49 @@ export class CryptApp extends GenericAppMixin(HandlebarsApplicationMixin(Applica
 		return frame;
 	};
 
+	async _onRender(context, options) {
+		await super._onRender(context, options);
+
+		// Shortcut because users can't edit
+		if (!game.user.isGM) { return };
+
+		// Add event listener for the dropdown
+		if (options.parts.includes(`delveConditions`)) {
+			const select = this.element.querySelector(`#${this.id}-difficulty`);
+			select.addEventListener(`change`, async (ev) => {
+				const newDifficulty = parseInt(ev.target.value);
+				if (!Number.isNaN(newDifficulty)) {
+					await game.settings.set(`ripcrypt`, `dc`, newDifficulty);
+				};
+				this.render({ parts: [`delveConditions`] });
+			});
+		};
+	};
+
 	async _preparePartContext(partId, ctx, opts) {
 		ctx = await super._preparePartContext(partId, ctx, opts);
-		Logger.log(`Context`, ctx);
+
+		ctx.meta.editable = game.user.isGM;
+
+		switch (partId) {
+			case `delveConditions`: {
+				ctx = this._prepareDifficulty(ctx);
+				break;
+			};
+		};
+
+		Logger.log(`${partId} Context`, ctx);
+		return ctx;
+	};
+
+	_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.difficulty = game.settings.get(`ripcrypt`, `dc`);
 		return ctx;
 	};
 	// #endregion

module/settings/metaSettings.mjs

@@ -4,5 +4,8 @@ export function registerMetaSettings() {
 		type: Number,
 		config: false,
 		requiresReload: false,
+		onChange: () => {
+			CONFIG.ui.crypt.render({ parts: [ `delveConditions` ]});
+		},
 	});
 };

templates/Apps/CryptApp/delveConditions.hbs

@@ -0,0 +1,17 @@
+<div>
+	<rc-border
+		var:border-color="var(--accent-1)"
+	>
+		<div slot="title">
+			Difficulty
+		</div>
+		<div slot="content">
+			<span>{{ difficulty }}</span>
+			{{#if meta.editable}}
+				<select id="{{meta.idp}}-difficulty">
+					{{ rc-options difficulty options localize=true }}
+				</select>
+			{{/if}}
+		</div>
+	</rc-border>
+</div>

templates/Apps/CryptApp/fate.hbs

@@ -0,0 +1,12 @@
+<div>
+	<rc-border
+		var:border-color="var(--accent-1)"
+	>
+		<div slot="title">
+			Fate
+		</div>
+		<div slot="content">
+			N
+		</div>
+	</rc-border>
+</div>

templates/Apps/CryptApp/main.hbs

@@ -1,3 +0,0 @@
-<div>
-	Hello
-</div>

templates/Apps/CryptApp/style.css

@@ -0,0 +1,13 @@
+.ripcrypt.ripcrypt--CryptApp {
+	max-width: initial;
+	min-width: initial;
+
+	> .window-header .window-title {
+		text-align: center;
+	}
+
+	> .window-content {
+		background: var(--base-background);
+		padding: 4px;
+	};
+}

templates/Apps/CryptApp/turnCount.hbs

@@ -0,0 +1,12 @@
+<div>
+	<rc-border
+		var:border-color="var(--accent-1)"
+	>
+		<div slot="title">
+			Turn
+		</div>
+		<div slot="content">
+			1
+		</div>
+	</rc-border>
+</div>

templates/Apps/apps.css

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

templates/css/components/rc-border.css

@@ -1,7 +1,7 @@
 :host {
 	display: flex;
 	flex-direction: column;
-	--vertical-displacement: 10px;
+	--vertical-displacement: 12.5px;
 }
 
 .rc-border {
@@ -18,7 +18,7 @@
 	border-radius: 8px;
 	position: relative;
 	margin-top: var(--margin-top, var(--vertical-displacement));
-	padding-top: var(--padding-top, var(--vertical-displacement));
+	padding-top: var(--padding-top, calc(var(--vertical-displacement) + 4px));
 
 	&::before {
 		display: block;
@@ -60,5 +60,6 @@
 		max-width: 75%;
 		min-width: 50px;
 		border-radius: 4px;
+		text-align: center;
 	}
 }

templates/css/themes/dark.css

@@ -17,7 +17,7 @@
 	--alt-row-background: var(--accent-2);
 
 	--input-underline: 2px dashed var(--accent-3);
-	--input-background: inherit;
+	--input-background: var(--accent-2);
 	--input-text: white;
 	--input-placeholder-text: rgba(255,255,255, 0.5);