Add the primitive dropdown styling for the skills

.css/root.css

@@ -1,33 +1,53 @@
 @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
+.dotdungeon > .window-content h2, .dotdungeon > .window-content h3, .dotdungeon > .window-content h4, .dotdungeon > .window-content h5, .dotdungeon > .window-content h6 {
+  all: initial;
+  display: block;
+  font-family: "Pixelify Sans", sans-serif;
+  margin: 0;
+}
+.dotdungeon > .window-content button, .dotdungeon > .window-content button:hover {
+  all: initial;
+  font-family: inherit;
+  cursor: pointer;
+}
+.dotdungeon > .window-content select, .dotdungeon > .window-content select:hover {
+  cursor: pointer;
+}
+
 .dotdungeon {
-  --breakpoint-medium: 700px;
-  --breakpoint-small: 550px;
-  --breakpoint-extra-small: 400px;
   container-type: size;
 }
 .dotdungeon > .window-content {
   padding: 0;
   background: #f2f2f2;
 }
-.dotdungeon h2, .dotdungeon h3, .dotdungeon h4, .dotdungeon h5, .dotdungeon h6 {
-  all: initial;
-  font-family: "Pixelify Sans", sans-serif;
-  margin: 0;
-}
-.dotdungeon button, .dotdungeon button:hover {
-  all: initial;
-  font-family: inherit;
-  cursor: pointer;
-}
-.dotdungeon select, .dotdungeon select:hover {
-  cursor: pointer;
-}
 
 .dotdungeon .stat {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+.dotdungeon .skill {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  align-items: center;
+}
+.dotdungeon .skill-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 8px;
+  gap: 4px;
+}
+.dotdungeon .skill-group h3 {
+  margin-top: 8px;
+  font-size: 1.2em;
+  width: 100%;
+  text-align: center;
+}
+
 .dotdungeon .actor--pc {
   display: grid;
   grid-template-areas: "avatar stats stats" "avatar skills skills" "backpack skills skills" "backpack sync aspect" "backpack weapons aspect" "backpack weapons spells" "backpack roles spells" "summons roles mounts" "summons roles storage";
@@ -52,6 +72,11 @@
 .dotdungeon .actor--pc .panel--skills {
   grid-area: skills;
 }
+.dotdungeon .actor--pc .panel--skills .panel__content {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, min-content));
+}
 .dotdungeon .actor--pc .panel--backpack {
   grid-area: backpack;
 }
@@ -129,4 +154,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../styles/root.scss%22,%22../styles/vars.scss%22,%22../styles/mixins/_foundry.scss%22,%22../styles/sheets/partials/stat.scss%22,%22../styles/sheets/actor/mvp.scss%22,%22../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAGQ;AAER;EACC;EACA;EACA;EAGA;;AAEA;EACC;EACA,YCdW;;ADiBZ;EEjBA;EFmBC,aCpBW;EDqBX;;AAGD;EEvBA;EFyBC;EACA;;AAGD;EACC;;;AG/BF;EACC;EACA;EACA;;ACCA;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aHtFS;EGuFT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;ACvFH;EDgGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;ACpHJ;ED6HC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22root.css%22%7D */
+/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../styles/root.scss%22,%22../styles/mixins/_foundry.scss%22,%22../styles/vars.scss%22,%22../styles/sheets/partials/stat.scss%22,%22../styles/sheets/partials/skill.scss%22,%22../styles/sheets/actor/mvp.scss%22,%22../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAGQ;AAIP;ECNA;EDQC;EACA,aEVW;EFWX;;AAGD;ECbA;EDeC;EACA;;AAGD;EACC;;;AAKF;EACC;;AAEA;EACC;EACA,YE9BW;;;ACDb;EACC;EACA;EACA;;ACHD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;;ACdF;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAEA;EACC;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aH5FS;EG6FT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AC7FH;EDsGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;AC1HJ;EDmIC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22root.css%22%7D */

.css/sheets/actor/mvp.css

@@ -22,6 +22,11 @@
 .dotdungeon .actor--pc .panel--skills {
   grid-area: skills;
 }
+.dotdungeon .actor--pc .panel--skills .panel__content {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, min-content));
+}
 .dotdungeon .actor--pc .panel--backpack {
   grid-area: backpack;
 }
@@ -99,4 +104,4 @@
   }
 }
 
-/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/sheets/actor/mvp.scss%22,%22../../../styles/vars.scss%22,%22../../../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAIC;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aCtFS;EDuFT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AEvFH;EFgGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;AEpHJ;EF6HC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22mvp.css%22%7D */
+/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/sheets/actor/mvp.scss%22,%22../../../styles/vars.scss%22,%22../../../styles/mixins/_breakpoints.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAIC;EACC;EACA,qBACC;EASD;EACA;EACA;EACA;;AAGC;EACC;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAEA;EACC;EACA;EACA;;AAGF;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA,aC5FS;ED6FT;;AAGD;EAEC,QADO;EAEP,OAFO;EAGP;;;AE7FH;EFsGC;IACC;IACA;IACA,qBACC;;EAiBF;IACC;;EAGC;IACC;;;AE1HJ;EFmIC;IACC;IACA,qBACC;;EAGF;IACC%22,%22file%22:%22mvp.css%22%7D */

.css/sheets/partials/skill.css

@@ -0,0 +1,22 @@
+.dotdungeon .skill {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  align-items: center;
+}
+.dotdungeon .skill-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 8px;
+  gap: 4px;
+}
+.dotdungeon .skill-group h3 {
+  margin-top: 8px;
+  font-size: 1.2em;
+  width: 100%;
+  text-align: center;
+}
+
+/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../../../styles/sheets/partials/skill.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAAA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA%22,%22file%22:%22skill.css%22%7D */

langs/en-ca.json

@@ -21,32 +21,34 @@
 	"dotdungeon.stat.tilt": "Tilt",
 	"dotdungeon.stat.rng": "RNG",
 
-	"skills.header": "Skills",
+	"dotdungeon.skills.build": "Build",
-	"skills.build": "Build",
+	"dotdungeon.skill.defense": "Defense",
-	"skill.defense": "Defense",
+	"dotdungeon.skill.magic": "Magic",
-	"skill.magic": "Magic",
+	"dotdungeon.skill.melee": "Melee",
-	"skill.melee": "Melee",
+	"dotdungeon.skill.platforming": "Platforming",
-	"skill.platforming": "Platforming",
+	"dotdungeon.skill.strength": "Strength",
-	"skill.strength": "Strength",
 
-	"skills.meta": "Meta",
+	"dotdungeon.skills.meta": "Meta",
-	"skill.alchemy": "Alchemy",
+	"dotdungeon.skill.alchemy": "Alchemy",
-	"skill.arcanum": "Arcanum",
+	"dotdungeon.skill.arcanum": "Arcanum",
-	"skill.dreams": "Dreams",
+	"dotdungeon.skill.dreams": "Dreams",
-	"skill.lore": "Lore",
+	"dotdungeon.skill.lore": "Lore",
-	"skill.navigation": "Navigation",
+	"dotdungeon.skill.navigation": "Navigation",
 
-	"skills.presence": "Presence",
+	"dotdungeon.skills.presence": "Presence",
-	"skill.animal_handling": "Animal Handling",
+	"dotdungeon.skill.animal_handling": "Animal Handling",
-	"skill.perception": "Perception",
+	"dotdungeon.skill.perception": "Perception",
-	"skill.sneak": "Sneak",
+	"dotdungeon.skill.sneak": "Sneak",
-	"skill.speech": "Speech",
+	"dotdungeon.skill.speech": "Speech",
-	"skill.vibes": "Vibes",
+	"dotdungeon.skill.vibes": "Vibes",
 
-	"skills.hands": "Hands",
+	"dotdungeon.skills.hands": "Hands",
-	"skill.accuracy": "Accuracy",
+	"dotdungeon.skill.accuracy": "Accuracy",
-	"skill.crafting": "Crafting",
+	"dotdungeon.skill.crafting": "Crafting",
-	"skill.engineering": "Engineering",
+	"dotdungeon.skill.engineering": "Engineering",
-	"skill.explosives": "Explosives",
+	"dotdungeon.skill.explosives": "Explosives",
-	"skill.piloting": "Piloting"
+	"dotdungeon.skill.piloting": "Piloting",
+
+
+	"dotdungeon.aria.skill-dropdown": "Your expertise level in the {skill} skill"
 }

module/handlebars.js

@@ -3,6 +3,7 @@ export const partials = [
 	"actors/char-sheet-mvp/partials/stat.hbs",
 	"actors/char-sheet-mvp/partials/skill.hbs",
 	"actors/char-sheet-mvp/partials/panel.hbs",
+	"actors/char-sheet-mvp/partials/panels/skills.hbs",
 ]
 
 export async function registerHandlebarsHelpers() {

module/hooks/hotReload.js

@@ -1,3 +1,5 @@
+import * as hbs from "../handlebars.js";
+
 Hooks.on(`hotReload`, async (data) => {
 	if (data.extension !== 'hbs') {
 		return true;

module/sheets/CharacterSheet.js

@@ -4,13 +4,14 @@
  */
 export class CharacterSheet extends ActorSheet {
 	static get defaultOptions() {
-		return mergeObject(
+		let opts = mergeObject(
 			super.defaultOptions,
 			{
-				classes: ["dotdungeon"],
 				template: "systems/dotdungeon/templates/actors/char-sheet-mvp/sheet.hbs"
 			}
 		);
+		opts.classes.push("dotdungeon");
+		return opts;
 	};
 
 	activateListeners(html) {

styles/root.scss

@@ -3,21 +3,11 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');
 
-.dotdungeon {
+// Reset the parts of Foundry's styling which gets in the way of what I want
-	--breakpoint-medium: 700px;
+.dotdungeon > .window-content {
-	--breakpoint-small: 550px;
-	--breakpoint-extra-small: 400px;
-
-
-	container-type: size;
-
-	> .window-content {
-		padding: 0;
-		background: $background;
-	}
-
 	h2, h3, h4, h5, h6 {
 		@include fvtt_reset;
+		display: block;
 		font-family: $title-font;
 		margin: 0;
 	}
@@ -33,5 +23,17 @@
 	}
 }
 
+// Styling that doesn't belong to any particular part of my sheet
+.dotdungeon {
+	container-type: size;
+
+	> .window-content {
+		padding: 0;
+		background: $background;
+	}
+}
+
 @import "./sheets/partials/stat.scss";
+@import "./sheets/partials/skill.scss";
+
 @import "./sheets/actor/mvp.scss";

styles/sheets/actor/mvp.scss

@@ -35,6 +35,12 @@
 			}
 			&--skills {
 				grid-area: skills;
+
+				.panel__content {
+					display: grid;
+					grid-template-columns: repeat(2, minmax(0, 1fr));
+					grid-template-rows: repeat(2, minmax(0, min-content));
+				}
 			}
 			&--backpack {
 				grid-area: backpack;

styles/sheets/partials/skill.scss

@@ -0,0 +1,22 @@
+.dotdungeon .skill {
+	display: flex;
+	flex-direction: column;
+	justify-content: left;
+	align-items: center;
+
+	&-group {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
+		margin-bottom: 8px;
+		gap: 4px;
+
+		h3 {
+			margin-top: 8px;
+			font-size: 1.2em;
+			width: 100%;
+			text-align: center;
+		}
+	}
+}

system.json

@@ -30,7 +30,7 @@
 	],
 	"flags": {
 		"hotReload": {
-			"extensions": ["css", "hbs", "json", "mjs"],
+			"extensions": ["css", "hbs", "json", "js", "mjs"],
 			"paths": ["templates", "langs", ".css", "module"]
 		}
 	}

templates/actors/char-sheet-mvp/partials/panels/skills.hbs

@@ -0,0 +1,24 @@
+<div class="skill-group">
+	<h3 class="skill-group__label">{{localize "dotdungeon.skills.build"}}</h3>
+	{{#each (dotdungeon-array "defense" "magic" "melee" "platforming" "strength")}}
+		{{> dotdungeon.skill name=this}}
+	{{/each}}
+</div>
+<div class="skill-group">
+	<h3 class="skill-group__label">{{localize "dotdungeon.skills.meta"}}</h3>
+	{{#each (dotdungeon-array "alchemy" "arcanum" "dreams" "lore" "navigation")}}
+		{{> dotdungeon.skill name=this}}
+	{{/each}}
+</div>
+<div class="skill-group">
+	<h3 class="skill-group__label">{{localize "dotdungeon.skills.presence"}}</h3>
+	{{#each (dotdungeon-array "alchemy" "arcanum" "dreams" "lore" "navigation")}}
+		{{> dotdungeon.skill name=this}}
+	{{/each}}
+</div>
+<div class="skill-group">
+	<h3 class="skill-group__label">{{localize "dotdungeon.skills.hands"}}</h3>
+	{{#each (dotdungeon-array "animal_handling" "perception" "sneak" "speech" "vibes")}}
+		{{> dotdungeon.skill name=this}}
+	{{/each}}
+</div>

templates/actors/char-sheet-mvp/partials/skill.hbs

@@ -1,9 +1,11 @@
 <div class="skill">
-	<label>{{localize (concat "dotdungeon.skill." name)}}</label>
+	<span>
-	<select>
+		{{localize (concat "dotdungeon.skill." name)}}
-		<option value="">Untrained</option>
+	</span>
+	<select aria-label="{{localize "dotdungeon.aria.skill-dropdown" skill=name}}">
+		<option value="">Novice</option>
 		<option value="locked">Locked</option>
-		<option value="+2">Trained (+2)</option>
+		<option value="+2">Trained</option>
-		<option value="+4">Expert (+4)</option>
+		<option value="+4">Expert</option>
 	</select>
 </div>

templates/actors/char-sheet-mvp/sheet.hbs

@@ -8,9 +8,7 @@
 		{{/each}}
 	{{/ dotdungeon.panel}}
 	{{#> dotdungeon.panel class="skills" title="dotdungeon.panel.skills"}}
-		<div class="skill-group">
+		{{> dotdungeon.skills }}
-			<h3>{{localize "dotdungeon.skills.build"}}</h3>
-		</div>
 	{{/ dotdungeon.panel}}
 	{{#> dotdungeon.panel class="backpack" title="dotdungeon.panel.backpack"}}
 		Backpack