Implement the dice list form and tweak some design variables

module/dialogs/DiceList.mjs

@@ -1,6 +1,7 @@
 import { GenericDialog } from "./GenericDialog.mjs";
 
 export class DiceList extends GenericDialog {
+
 	constructor(mobActor) {
 		super({}, { title: `${mobActor.name}'s Dice List` });
 		this.actor = mobActor;
@@ -14,22 +15,31 @@ export class DiceList extends GenericDialog {
 		const opts = mergeObject({
 			...super.defaultOptions,
 			template: `systems/dotdungeon/templates/dialogs/diceList.hbs`,
-			width: 400,
+			width: 275,
 			height: 400,
-			submitOnClose: true,
+			submitOnClose: false,
+			resizable: true,
 		});
-		opts.classes.push(`dotdungeon`);
+		opts.classes?.push(`dotdungeon`);
 		return opts;
 	};
 
 	async getData() {
 		const ctx = await super.getData();
 		ctx.dice = this.dice;
+		console.debug(`DiceList context`, ctx);
 		return ctx;
 	};
 
-	async _updateObject(event, formData) {
-		console.log(event, formData);
+	async _updateObject(_event, formData) {
+		const newDice = this.dice.map(d => {
+			return {
+				count: formData[`${d.id}.count`],
+				sides: formData[`${d.id}.sides`],
+				repeat: formData[`${d.id}.repeat`],
+			};
+		});
+		await this.actor.update({ "system.dice": newDice });
 	};
 
 	addDie() {
@@ -41,4 +51,10 @@ export class DiceList extends GenericDialog {
 		});
 		this.render();
 	};
+
+	deleteDie($e) {
+		const data = $e.currentTarget.dataset;
+		this.dice = this.dice.filter(d => d.id !== data.id);
+		this.render();
+	};
 };

module/dialogs/GenericDialog.mjs

@@ -42,4 +42,8 @@ export class GenericDialog extends FormApplication {
 		if (!this[data.action]) return;
 		this[data.action].bind(this)($e);
 	};
+
+	closeNoSave() {
+		this.close({ submit: false, });
+	};
 };

styles/_vars.scss

@@ -8,7 +8,7 @@ $background: #f2f2f2;
 $colour-confirm: #048A81;
 $text-on-confirm: white;
 
-$colour-neutral: #007ACC;
+$colour-neutral: darkblue;
 $text-on-neutral: white;
 
 $colour-danger: #960200;

styles/dialog/DiceList.scss

@@ -1,3 +1,54 @@
-.dotdungeon.dialog--dice-list {
-	padding: 4px;
+.dotdungeon:has(.dialog--dice-list) {
+	max-width: 275px;
+	min-width: 275px;
+}
+
+.dotdungeon .dialog--dice-list {
+	padding: 8px;
+
+	.dice {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.die {
+		align-items: center;
+		border: 2px solid;
+		border-radius: 4px;
+		display: grid;
+		gap: 4px;
+		grid-template-rows: 40px;
+		grid-template-columns: 1fr 15px 1fr 15px 1fr 15px 1fr;
+		padding: 4px;
+		text-align: center;
+
+		label {
+			font-size: 0.8125rem;
+		}
+
+		.large { font-size: 1.2rem; }
+
+		.count { grid-column: 1; }
+		.sides { grid-column: 3; }
+		.repeat { grid-column: 5; }
+
+		button { grid-column: 7; }
+
+		input {
+			height: 100%;
+			font-size: 1.1rem;
+		}
+	}
+
+	.actions {
+		margin-top: 8px;
+		display: flex;
+		flex-direction: row;
+		gap: 4px;
+
+		button {
+			flex-grow: 1;
+		}
+	}
 }

styles/global/buttons.scss

@@ -8,7 +8,10 @@
 		border-color: transparent;
 		border-width: 2px;
 		border-radius: 4px;
-		transition: 400ms;
+		transition:
+			background-color 400ms ease-in-out,
+			color 400ms ease-in-out,
+			border-color 400ms ease-in-out;
 		padding: 4px 8px;
 		display: inline-flex;
 		justify-content: center;

styles/mixins/_partials.scss

@@ -4,12 +4,12 @@
 	border-width: 2px;
 	border-radius: 4px;
 	border-style: solid;
-	border-color: rgba(0,0,0, 0.4);
-	background-color: rgba(0,0,0, 0.1);
+	border-color: black;
 	font-family: $input-font;
+	box-shadow: none;
 
 	&:focus,
 	&:active {
-		border-color: rgba(0,0,0, 1);
+		transform: scale(103%);
 	}
 }

styles/root.scss

@@ -7,6 +7,8 @@
 @use "./global/icons.scss";
 @use "./global/buttons.scss";
 
+@use "./dialog/DiceList.scss";
+
 @use "./sheets/partials/stat.scss";
 @use "./sheets/partials/skill.scss";
 @use "./sheets/partials/panel.scss";

templates/actors/mobs/main.hbs

@@ -27,8 +27,8 @@
 		<input
 			type="text"
 			class="left"
-			name="system.immune"
-			value="{{system.immune}}"
+			name="system.drops"
+			value="{{system.drops}}"
 		>
 	</label>
 	<label class="bonus mask-input">
@@ -67,17 +67,20 @@
 	</label>
 	<div class="dice">
 		Dice:
-		<button data-roll-formula="2d20" class="roll die reduced-padding neutral">
-			2d20x5
-		</button>
-		<button data-roll-formula="1d4" class="roll die reduced-padding neutral">
-			1d4
-		</button>
-		<button data-roll-formula="3d6" class="roll die reduced-padding neutral">
-			3d6
-		</button>
+		{{#each system.dice as | die |}}
+			<button
+				type="button"
+				class="neutral reduced-padding"
+				data-roll-formula="{{die.count}}d{{die.sides}}"
+			>
+				{{die.count}}d{{die.sides}}
+				{{#if (gt die.repeat 1)}}
+					x {{die.repeat}}
+				{{/if}}
+			</button>
+		{{/each}}
 		<div style="flex-grow: 1"></div>
-		<button class="confirm">Edit</button>
+		<button class="confirm edit-dice">Edit</button>
 	</div>
 	<label class="description mask-textarea">
 		Description:

templates/dialogs/diceList.hbs

@@ -1,37 +1,68 @@
 <form class="dialog--dice-list">
-	{{#each dice as | die |}}
-		<div class="die" data-die-id="{{die.id}}">
-			{{dd-stringify die}}
-			<label>
+	<div class="dice">
+		{{#each dice as | die |}}
+			<div class="die">
 				<input
 					type="number"
-					name="die.count"
+					id="Die.{{die.id}}-count"
+					class="count"
+					name="{{die.id}}.count"
+					value="{{die.count}}"
+					aria-label="The number of dice to roll at the same time"
 				>
-			</label>
-			<label>
+				<span class="large" aria-hidden="true">d</span>
 				<input
 					type="number"
-					name="die.sides"
+					id="Die.{{die.id}}-sides"
+					class="sides"
+					name="{{die.id}}.sides"
+					value="{{die.sides}}"
+					aria-label="The number of sides that are on the dice"
 				>
-			</label>
-			<label>
+				<span class="large" aria-hidden="true">x</span>
 				<input
 					type="number"
-					name="die.repeat"
+					id="Die.{{die.id}}-repeat"
+					class="repeat"
+					name="{{die.id}}.repeat"
+					value="{{die.repeat}}"
+					aria-label="The number of times to repeat this dice "
 				>
-			</label>
-		</div>
-	{{/each}}
-	<button type="button" data-action="addDie">
-		Add Die
-	</button>
-	{{#if settings.devMode}}
-		<div class="debug-data">
-			Dice:
-			{{dd-stringify dice}}
-			<hr>
-			Settings:
-			{{dd-stringify settings}}
-		</div>
-	{{/if}}
+				<button
+					type="button"
+					class="danger"
+					data-id="{{die.id}}"
+					data-action="deleteDie"
+					aria-label=""
+				>
+					<div aria-hidden="true" class="icon icon--26">
+						{{{ ../icons.garbage-bin }}}
+					</div>
+				</button>
+			</div>
+		{{/each}}
+	</div>
+	<div class="actions">
+		<button
+			type="button"
+			class="neutral"
+			data-action="addDie"
+		>
+			Add Die
+		</button>
+	</div>
+	<div class="actions">
+		<button
+			class="confirm"
+		>
+			Save and Close
+		</button>
+		<button
+			type="button"
+			class="danger"
+			data-action="closeNoSave"
+		>
+			Close
+		</button>
+	</div>
 </form>