Implement %t% placeholder for labels.

Redesign the terrain type config to show the placeholders as a tooltip instead of inline help.

docs/getting-started-gm.md

@@ -26,7 +26,10 @@ Here are some of the important options you need to know:
 5. This group of settings controls the border of the terrain shape that is drawn on the scene. If you are familiar with Foundry's drawing tools, this should be familar, except that THT also has dashed lines!
 6. This group of settings controls the fill of the terrain shape on the scene. Again, this section should be easy for anyone familiar with Foundry's drawing tools. There also some extra advanced options for tweaking how textures render - allowing you to translate or scale the texture.
 7. This group of settings controls the label that will be put on the terrain object on the scene.
-	- "_Label Format_" will specify what the label should actually be. You can use the placeholder's `%h%` and `%e%` which will get replaced with the height and elevation of the terrain respectively. For example, if you set the label to be `%e% + H%h%`, then when this terrain type is painted with an elevation of 2 and a height of 3, the label would be `2 + H3`.
+	- "_Label Format_" will specify what the label should actually be. You can use placeholders which will get replaced with metadata from the terrain. For example, if you set the label to be `%e% + H%h%`, then when this terrain type is painted with an elevation of 2 and a height of 3, the label would be `2 + H3`.
+		- `%h%` will be replaced with the height of the terrain (how big it is vertically)
+		- `%e%` will be replaced with the elevation of the terrain (how high above the ground it is)
+		- `%t%` will be replaced with the elevation of the top of the terrain (height + elevation)
 	- "_Label Format (Elevated)_" is the same as the label format, except that it is used only when the terrain is at a non-zero elevation. If this is blank, the normal label format will always be used. For example, you might create a type which has the label format `H%h%` and an elevated format of `%e%+H%h%` - meaning that the elevation would only show when the terrain is elevated.
 	- Enabling "_Allow Text Rotation_" will allow THT to rotate the label 90 degrees if it thinks that it can fit the label on the shape better that way.
 	- The rest of these options mirror those used for Foundry drawings.

lang/en.json

@@ -69,7 +69,7 @@
 		"DeleteAfterConversion": "Erase shape after conversion?",
 		"DeleteTerrainTypeHint": "<p>Edit the types of terrain that can be painted onto the scene.</p><p>Note: Removing a terrain type will clear cells that are using it from the scene on next save.</p>",
 		"ElevatedLabelFormat.Name": "Label Format (Elevated)",
-		"ElevatedLabelFormat.Hint": "An alternative label format to use when the elevation is not 0. If blank, will use regular label format. Can also use <u>%h%</u> and <u>%e%</u> placeholders.",
+		"ElevatedLabelFormat.Hint": "An alternative label format to use when the elevation is not 0. If blank, will use regular label format.",
 		"Elevation.Name": "Elevation",
 		"Elevation.Hint": "How far the bottom of the terrain is above the ground",
 		"EndHeight.Name": "End Height",
@@ -94,7 +94,6 @@
 		"IsZone.Name": "Is zone?",
 		"IsZone.Hint": "Whether the terrain is a zone. Zones do not have height or elevation.",
 		"LabelFormat.Name": "Label Format",
-		"LabelFormat.Hint": "Use <u>%h%</u> for the numeric height of the terrain, and <u>%e%</u> for the elevation",
 		"LineDashSize": "Dash Size",
 		"LineGapSize": "Gap Size",
 		"LineOfSightConfigTitle": "LoS Ruler",
@@ -114,6 +113,12 @@
 		"PaintMode.TotalReplace.Name": "Clear",
 		"PaintMode.TotalReplace.Hint": "Replace the cell entirely with the new terrain data.",
 		"PaletteTitle": "Terrain Palette",
+		"Placeholders": {
+			"Elevation": "The elevation of the terrain (how far it is off the ground).",
+			"Height": "The height (vertical size) of the terrain.",
+			"PlaceholderHelpText": "You can use any of these placeholders in the label format, which will get replaced with the corresponding value:",
+			"Top": "The elevation of the top of the terrain (elevation + height)."
+		},
 		"SameAsStart": "Same as start",
 		"SameTokenSelected": "You have already selected this token for line of sight, please select a different one",
 		"SceneRenderAboveTiles": "Terrain Height Map Layer",

module/applications/terrain-types-config.mjs

@@ -41,6 +41,8 @@ export class TerrainTypesConfig extends FormApplication {
 
 		data.expandedTypes = this._expandedTypes;
 
+		data.labelPlaceholderHtml = this.#getLabelPlaceholderTooltipHtml();
+
 		return data;
 	}
 
@@ -277,4 +279,26 @@ export class TerrainTypesConfig extends FormApplication {
 		this.render();
 		return true;
 	}
+
+	#getLabelPlaceholderTooltipHtml() {
+		const placeholders = [
+			["%h%", game.i18n.localize("TERRAINHEIGHTTOOLS.Placeholders.Height")],
+			["%e%", game.i18n.localize("TERRAINHEIGHTTOOLS.Placeholders.Elevation")],
+			["%t%", game.i18n.localize("TERRAINHEIGHTTOOLS.Placeholders.Top")]
+		];
+		return `
+			<p>
+				<i class="fas fa-info-circle"></i>
+				${game.i18n.localize("TERRAINHEIGHTTOOLS.Placeholders.PlaceholderHelpText")}
+			</p>
+			<table>
+				<tbody>
+					${placeholders.map(([key, description]) => `<tr>
+						<th>${key}</th>
+						<td>${description}</td>
+					</tr>`).join("")}
+				</tbody>
+			</table>
+		`;
+	}
 }

module/layers/terrain-height-graphics.mjs

@@ -153,6 +153,7 @@ export class TerrainHeightGraphics extends PIXI.Container {
 			? format
 				.replace(/\%h\%/g, prettyFraction(toSceneUnits(shape.height)))
 				.replace(/\%e\%/g, prettyFraction(toSceneUnits(shape.elevation)))
+				.replace(/\%t\%/g, prettyFraction(toSceneUnits(shape.height + shape.elevation)))
 			: format;
 	}
 

styles/main.css

@@ -260,6 +260,49 @@ ul.terrain-type-palette li .terrain-type-name {
 	field-sizing: content;
 }
 
+#tht_terrainTypesConfig .form-group-stacked:has(> .focus-tooltip) {
+	position: relative;
+}
+
+#tht_terrainTypesConfig .focus-tooltip {
+	position: absolute;
+	top: calc(100% + 1px);
+	z-index: var(--z-index-tooltip);
+	pointer-events: none;
+	transition: opacity 250ms ease-out;
+}
+
+#tht_terrainTypesConfig .has-focus-tooltip:not(:focus) + .focus-tooltip {
+	opacity: 0;
+}
+
+#tht_terrainTypesConfig .has-focus-tooltip:focus + .focus-tooltip {
+	opacity: 1;
+}
+
+#tht_terrainTypesConfig .label-placeholder-tooltip {
+	top: 16px;
+	right: calc(100% + 4px);
+	width: 280px;
+	padding: 4px 6px 6px;
+	background: #ededed;
+	color: var(--color-text-dark-primary);
+	border: 1px solid var(--color-border-highlight-alt);
+	border-radius: 3px;
+	font-size: var(--font-size-13);
+    box-shadow: 0 0 4px #000000, 0 0 6px inset var(--color-shadow-highlight);
+}
+
+#tht_terrainTypesConfig .label-placeholder-tooltip table {
+	margin: 0;
+}
+
+#tht_terrainTypesConfig .label-placeholder-tooltip table th {
+	width: 1px;
+	padding-right: 6px;
+	font-family: Consolas, Courier New, Courier, monaco, monospace;
+}
+
 
 /* --------------------------- */
 /* Terrain Types Import/Export */

templates/terrain-types-config.hbs

@@ -128,14 +128,15 @@
 					<div>
 						<div class="form-group-stacked">
 							<label>{{localize "TERRAINHEIGHTTOOLS.LabelFormat.Name"}}</label>
-							<label class="hint">{{{localize "TERRAINHEIGHTTOOLS.LabelFormat.Hint"}}}</label>
-							<textarea class="autoresize" name="{{idx}}.textFormat">{{terrainType.textFormat}}</textarea>
+							<textarea class="autoresize has-focus-tooltip" name="{{idx}}.textFormat">{{terrainType.textFormat}}</textarea>
+							<div class="focus-tooltip label-placeholder-tooltip">{{{../labelPlaceholderHtml}}}</div>
 						</div>
 
 						<div class="form-group-stacked">
 							<label>{{localize "TERRAINHEIGHTTOOLS.ElevatedLabelFormat.Name"}}</label>
-							<label class="hint">{{{localize "TERRAINHEIGHTTOOLS.ElevatedLabelFormat.Hint"}}}</label>
-							<textarea class="autoresize" name="{{idx}}.elevatedTextFormat">{{terrainType.elevatedTextFormat}}</textarea>
+							<label class="hint">{{localize "TERRAINHEIGHTTOOLS.ElevatedLabelFormat.Hint"}}</label>
+							<textarea class="autoresize has-focus-tooltip" name="{{idx}}.elevatedTextFormat">{{terrainType.elevatedTextFormat}}</textarea>
+							<div class="focus-tooltip label-placeholder-tooltip">{{{../labelPlaceholderHtml}}}</div>
 						</div>
 
 						<div class="form-group-stacked">