Improve design and layout of the mob sheet

styles/root.scss

@@ -12,7 +12,7 @@
 @use "./sheets/partials/panel.scss";
 
 @use "./sheets/actor/mvp.scss";
-@use "./sheets/actor/mob.scss";
+@use "./sheets/actor/mob/mob.scss";
 @use "./sheets/actor/sync/basic.scss";
 @use "./sheets/items/aspect.scss";
 @use "./sheets/items/spell.scss";

styles/sheets/actor/mob.scss

@@ -1,10 +0,0 @@
-@use "../../vars" as *;
-
-.dotdungeon .actor--mob {
-	padding: 4px;
-
-	textarea {
-		width: 100%;
-		resize: vertical;
-	}
-}

styles/sheets/actor/mob/avatar.scss

@@ -0,0 +1,4 @@
+@mixin avatar {
+	grid-area: avatar;
+	background: yellowgreen
+}

styles/sheets/actor/mob/mob.scss

@@ -0,0 +1,119 @@
+@use "../../../vars" as *;
+@use "avatar" as *;
+
+.dotdungeon .actor--mob {
+	--gap: 8px;
+	--avatar-size: 80px;
+	--row-height: calc((var(--avatar-size) - var(--gap)) / 2);
+	padding: var(--gap);
+	display: grid;
+	grid-template-columns: var(--avatar-size) 1fr 1fr;
+	grid-template-rows: repeat(6, var(--row-height)) minmax(var(--row-height), 1fr);
+	gap: var(--gap);
+	grid-template-areas:
+		"avatar . ."
+		"avatar . ."
+		"dice . ."
+		"dice . ."
+		"dice . ."
+		"dice stunts stunts"
+		"dice stunts stunts";
+
+	label, .dice {
+		border: 2px solid black;
+		border-radius: 4px;
+		gap: 4px;
+		padding: 4px;
+	}
+
+	input.masked {
+		border: 2px solid black;
+		background: none;
+		box-shadow: none;
+		&:focus {
+			transform: scale(102%);
+		}
+	}
+
+	label.mask-input {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		transition: all ease-in-out 50ms;
+
+		&:focus-within {
+			transform: scale(102%);
+		}
+
+		input {
+			text-align: right;
+			border: none;
+			background: none;
+			&:focus, &:focus-visible {
+				box-shadow: none;
+			}
+		}
+
+		input.left {
+			text-align: left;
+		}
+	}
+
+	.wide {
+		grid-column: span 2;
+	}
+
+
+// Area-specific stylings
+
+	.name {
+		height: 100%;
+		font-size: 1.5rem;
+		input {
+			height: 100%;
+		}
+	}
+
+	.dice {
+		grid-area: dice;
+		display: flex;
+		flex-direction: column;
+
+		.die {
+			display: flex;
+			flex-direction: row;
+			width: 100%;
+			border: 2px solid black;
+			border-radius: 4px;
+
+			.formula {
+				flex-grow: 1;
+				align-self: center;
+			}
+		}
+	}
+
+	.stunts {
+		grid-area: stunts;
+		display: flex;
+		flex-direction: column;
+		transition: all ease-in-out 50ms;
+
+		&:focus-within {
+			transform: scale(102%);
+		}
+
+		textarea {
+			flex-grow: 1;
+			resize: none;
+			border: none;
+			box-shadow: none;
+			background: none;
+		}
+	}
+
+	.avatar {
+		@include avatar;
+		border-radius: 4px;
+	}
+}

templates/actors/mobs/main.hbs

@@ -1,77 +1,79 @@
 <form autocomplete="off" class="actor--mob">
-	<h2><input type="text" name="name" value="{{actor.name}}"></h2>
+	<div class="avatar"></div>
-	<table>
+	<input
-		<tr>
-			<td><label for="{{meta.idp}}-dice">Dice</label></td>
-			<td>
-				<input
-					type="text"
-					id="{{meta.idp}}-dice"
-					name="system.dice"
-					value="{{system.dice}}"
-				>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="{{meta.idp}}-bonus">Bonus</label></td>
-			<td>
-				<input
-					type="number"
-					id="{{meta.idp}}-bonus"
-					name="system.bonus"
-					value="{{system.bonus}}"
-				>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="{{meta.idp}}-initiative">Initiative</label></td>
-			<td>
-				<input
-					type="number"
-					id="{{meta.idp}}-initiative"
-					name="system.initiative"
-					value="{{system.initiative}}"
-				>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="{{meta.idp}}-bytes">Bytes</label></td>
-			<td>
-				<input
-					type="number"
-					id="{{meta.idp}}-bytes"
-					name="system.bytes"
-					value="{{system.bytes}}"
-				>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="{{meta.idp}}-morale">Morale</label></td>
-			<td>
-				<input
-					type="number"
-					id="{{meta.idp}}-morale"
-					name="system.morale"
-					value="{{system.morale}}"
-				>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="{{meta.idp}}-drops">Drops</label></td>
-			<td>
-				<input
-					type="text"
-					id="{{meta.idp}}-drops"
-					name="system.drops"
-					value="{{system.drops}}"
-				>
-			</td>
-		</tr>
-	</table>
-	<label for="{{meta.idp}}-stunts">Stunts</label>
-	<textarea
 		type="text"
-		id="{{meta.idp}}-stunts"
+		class="name wide masked"
-		name="system.stunts"
+		name="name"
-	>{{system.stunts}}</textarea>
+		value="{{actor.name}}"
+	>
+	<label class="initiative mask-input">
+		Initiative:
+		<input
+			type="number"
+			name="system.initiative"
+			value="{{system.initiative}}"
+		>
+	</label>
+	<label class="bytes mask-input">
+		Bytes:
+		<input
+			type="number"
+			name="system.bytes"
+			value="{{system.bytes}}"
+		>
+	</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>
+		<div style="flex-grow: 1"></div>
+		<button class="confirm">Edit</button>
+	</div>
+	<label class="bonus mask-input">
+		Bonus:
+		<input
+			type="number"
+			name="system.bonus"
+			value="{{system.bonus}}"
+		>
+	</label>
+	<label class="morale mask-input">
+		Morale:
+		<input
+			type="number"
+			name="system.morale"
+			value="{{system.morale}}"
+		>
+	</label>
+	<label class="immune wide mask-input">
+		Immune:
+		<input
+			type="text"
+			class="left"
+			name="system.immune"
+			value="{{system.immune}}"
+		>
+	</label>
+	<label class="weak wide mask-input">
+		Weak:
+		<input
+			type="text"
+			class="left"
+			name="system.weak"
+			value="{{system.weak}}"
+		>
+	</label>
+	<label class="stunts">
+		Stunts:
+		<textarea
+			name="system.stunts"
+		>{{system.stunts}}</textarea>
+	</label>
 </form>