Get 95% of the way through the stats tab

langs/en-ca.2.json

@@ -30,6 +30,12 @@
 			"explosives": "Explosives",
 			"piloting": "Piloting"
 		},
+		"trainingLevel": {
+			"untrained": "Untrained",
+			"trained": "Trained",
+			"expert": "Expert",
+			"locked": "Locked"
+		},
 		"die": {
 			"d4": "d4",
 			"d6": "d6",

module/config.mjs

@@ -1,11 +1,11 @@
 export const statDice = [ `d4`, `d6`, `d8`, `d10`, `d12`, `d20` ];
 
-export const trainingLevels = {
-	locked: -1,
-	untrained: 0,
-	trained: 2,
-	expert: 4
-}
+export const trainingLevels = [
+	{ key: "locked", label: "dotdungeon.trainingLevel.locked", value: -1 },
+	{ key: "untrained", label: "dotdungeon.trainingLevel.untrained", value: 0 },
+	{ key: "trained", label: "dotdungeon.trainingLevel.trained", value: 2 },
+	{ key: "expert", label: "dotdungeon.trainingLevel.expert", value: 4 },
+];
 
 export const damageTypes = [ `slashing`, `piercing`, `smashing`, `gun`, `neon`, `shadow`, `solar` ];
 
@@ -32,6 +32,7 @@ export const skills = {
 	hands: handsSkills,
 };
 
+export const defaultItemTier = `simple`;
 export const itemTiers = [
 	`simple`, `greater`,
 	`rare`, `legendary`
@@ -64,6 +65,7 @@ export default {
 	handsSkills,
 	allSkills,
 	skills,
+	defaultItemTier,
 	itemTiers,
 	syncMilestones,
 	syncDice,

module/helpers/options.mjs

@@ -1,3 +1,5 @@
+import { localizer } from "../utils/localizer.mjs";
+
 /**
  * @typedef {object} Option
  * @property {string} [label]
@@ -9,7 +11,8 @@
  * @param {string | number} selected
  * @param {Array<Option | string>} opts
  */
-export function options(selected, opts) {
+export function options(selected, opts, meta) {
+	const { localize = false } = meta.hash;
 	selected = Handlebars.escapeExpression(selected);
 	const htmlOptions = [];
 
@@ -24,7 +27,7 @@ export function options(selected, opts) {
 				${selected === opt.value ? "selected" : ""}
 				${opt.disabled ? "disabled" : ""}
 			>
-				${opt.label}
+				${localize ? localizer(opt.label) : opt.label}
 			</option>`
 		);
 	};

module/sheets/Actors/PC/Improved.mjs

@@ -64,13 +64,16 @@ export class PlayerSheetv2 extends GenericActorSheet {
 			selector. Disables all dice options that are selected, but not used
 			by this stat.
 			*/
-			stat.dieOptions = DOTDUNGEON.statDice.map(die => {
-				return {
-					value: die,
-					label: localizer(`dotdungeon.die.${die}`, { stat: statName }),
-					disabled: usedDice.has(die) && this.actor.system.stats[statName] !== die,
-				};
-			});
+			stat.dieOptions = [
+				{ label: `---`, value: `` },
+				...DOTDUNGEON.statDice.map(die => {
+					return {
+						value: die,
+						label: localizer(`dotdungeon.die.${die}`, { stat: statName }),
+						disabled: usedDice.has(die) && this.actor.system.stats[statName] !== die,
+					};
+				})
+			];
 
 			/*
 			Calculating the data needed in order to display all of the skills
@@ -81,10 +84,10 @@ export class PlayerSheetv2 extends GenericActorSheet {
 				const value = this.actor.system.skills[statName][skill];
 				stat.skills.push({
 					key: skill,
-					name: localizer(`dotdungeon.skills.${skill}`),
+					name: game.i18n.format(`dotdungeon.skills.${skill}`),
 					value,
-					formula: `1` + stat.value + modifierToString(value),
-					rollDisabled: stat.value === `` || value === `locked`,
+					formula: `1` + stat.value + modifierToString(value, { spaces: true }),
+					rollDisabled: stat.value === `` || value === -1,
 				});
 			};
 

styles/sheets/actor/char-sheet/pages/stats.scss

@@ -7,12 +7,12 @@
 
 	.stat {
 		border-radius: 8px;
-		color: white;
 
 		select {
 			height: 100%;
 			outline: none;
 			border: none;
+			text-align: center;
 		}
 
 		&__header {
@@ -22,9 +22,17 @@
 			flex-direction: row;
 			color: var(--stat-divider-text-color);
 			gap: 8px;
-			> :first-child {
+			> h2 {
 				flex-grow: 1;
+				color: var(--stat-header-text-color);
 			}
+			.dice-select {
+				color: var(--stat-dice-select-text-color);
+			}
+			.roll-stat {
+				color: var(--stat-roll-button-text-color);
+			}
+
 			&:not(:only-child) {
 				border-bottom: 1px solid var(--stat-divider-color);
 			}
@@ -36,12 +44,23 @@
 			gap: 8px;
 			margin: 8px;
 			align-items: center;
-			label {
-				text-align: end;
-				justify-self: right;
-			}
-			button {
-				margin-right: 25%;
+
+			.skill {
+				&__label {
+					text-align: end;
+					justify-self: right;
+					color: var(--skill-name-text-color);
+				}
+				&__training {
+					color: var(--skill-training-select-text-color);
+					option {
+						background: var(--skill-training-select-bg);
+					}
+				}
+				&__roll {
+					margin-right: 25%;
+					color: var(--skill-roll-button-text-color);
+				}
 			}
 		}
 	}

styles/sheets/actor/char-sheet/themes/dark.scss

@@ -5,7 +5,7 @@ $surface: #121212;
 $primary: #005300;
 $secondary: #6c056c;
 $on-background: $t;
-$on-surface: $t;
+$on-surface: white;
 $on-primary: $t;
 $on-secondary: $t;
 
@@ -25,6 +25,12 @@ $on-secondary: $t;
 	--elevation-16dp-bg: color-mix(in lab, transparent, white 15%);
 	--elevation-24dp-bg: color-mix(in lab, transparent, white 16%);
 
+	--stat-header-text-color: #{$on-surface};
+	--stat-dice-select-text-color: #{$on-surface};
+	--stat-roll-button-text-color: #{$on-surface};
 	--stat-divider-color: #{$secondary};
-	--stat-header-text-color: white;
+	--skill-name-text-color: #{$on-surface};
+	--skill-training-select: #{$surface};
+	--skill-training-select-text-color: #{$on-surface};
+	--skill-roll-button-text-color: #{$on-surface};
 }

templates/actors/char-sheet/v2/partials/stats.v2.pc.hbs

@@ -1,38 +1,44 @@
 <div class="tab stats-panel" data-group="page" data-tab="stats">
-	{{!--
-		Iterate over each stat in the display data
-		- header:
-			- localized stat name
-			- stat dice dropdown
-			- roll button
-		- body (if skills present):
-			- iterate over all of the skills
-				- localized skill name
-				- training dropdown
-				- roll button
-	 --}}
 	{{#each computed.stats as | stat |}}
 		<div class="e-1dp stat">
 			<div class="stat__header">
 				<h2>{{stat.name}}</h2>
 				<select
 					name="system.stats.{{stat.key}}"
-					class="e-2dp"
+					class="e-2dp dice-select"
 				>
 					{{{dd-options stat.value stat.dieOptions}}}
 				</select>
-				<button type="button" class="e-2dp">
+				<button
+					type="button"
+					class="e-2dp roll-stat"
+				>
 					Roll
 				</button>
 			</div>
 			{{#if stat.skills}}
-				<div class="stat__skills">
+				<div class="stat__skills skill">
 					{{#each stat.skills as | skill |}}
-						<label for="">{{skill.name}}</label>
-						<select name="" id="" class="e-2dp"></select>
+						<label
+							for="{{meta.idp}}-{{skill.key}}-training"
+							class="skill__label"
+						>
+							{{skill.name}}
+						</label>
+						<select
+							name="system.skills.{{stat.key}}.{{skill.key}}"
+							id="{{meta.idp}}-{{skill.key}}-training"
+							class="e-2dp skill__training"
+						>
+							{{{dd-options
+								skill.value
+								@root.config.trainingLevels
+								localize=true
+							}}}
+						</select>
 						<button
 							type="button"
-							class="e-2dp"
+							class="e-2dp skill__roll"
 							{{disabled skill.rollDisabled}}
 						>
 							{{#if skill.rollDisabled}}