Adds status bars to character sheet

source/index.ts

@@ -9,6 +9,13 @@ import { M5Item } from "./module/items/M5Item"
 Hooks.once("init", async () => {
 	Logger.log("M5 | Initialisierung Midgard 5")
 
+	Handlebars.registerHelper("times", (n: number, block) => {
+		var accum = ""
+		for(let i = 0; i < n; ++i)
+			accum += block.fn(i)
+		return accum
+	})
+
 	Handlebars.registerHelper("array", (arr: any[], index: number) => {
 		return arr[index]
 	})
@@ -34,15 +41,11 @@ Hooks.once("init", async () => {
 
 	Handlebars.registerHelper("skillBonus", (actorId: string, skill: M5Skill) => {
 		const actor = (game as Game).actors.get(actorId) as M5Character
-		if (!actor || !skill)
-			console.log("Handlebars.skillBonus", actor, skill)
 		return actor.skillBonus(skill).toString()
 	})
 
 	Handlebars.registerHelper("skillEw", (actorId: string, skill: M5Skill) => {
 		const actor = (game as Game).actors.get(actorId) as M5Character
-		if (!actor || !skill)
-			console.log("Handlebars.skillEw", actor, skill)
 		return actor.skillEw(skill).toString()
 	})
 

source/module/sheets/M5CharacterSheet.ts

@@ -45,6 +45,30 @@ export default class M5CharacterSheet extends ActorSheet {
 	override activateListeners(html: JQuery) {
 		super.activateListeners(html)
 
+		html.find(".update-lp").on("click", async (event) => {
+			const valueStr = event.target.dataset["value"]
+			const value = parseInt(valueStr)
+			this.actor.update({
+				data: {
+					lp: {
+						value: value + 1
+					}
+				}
+			})
+		})
+
+		html.find(".update-ap").on("click", async (event) => {
+			const valueStr = event.target.dataset["value"]
+			const value = parseInt(valueStr)
+			this.actor.update({
+				data: {
+					ap: {
+						value: value + 1
+					}
+				}
+			})
+		})
+
 		html.find(".roll-attribute-button").on("click", async (event) => {
 			const attributeStr = event.target.dataset["attribute"]
 			const roll = M5Roll.fromAttribute(this.actor, attributeStr)

source/style/Character-sheet.less

@@ -90,6 +90,47 @@
 		flex: 1 1 auto;
 	}
 
+	.health-bar {
+		height: 2rem;
+		background-color: rgba(0, 0, 0, 0.8);
+		display: flex;
+		flex-direction: row;
+		gap: 1px;
+		padding: 1px;
+		//align-items: stretch;
+
+		input {
+			flex: 0 0 3rem;
+			text-align: center;
+			height: 100%;
+			background-color: rgba(109, 108, 102, 1);
+			color: rgba(255, 255, 255, 1);
+			font-weight: bold;
+			border-radius: 0;
+		}
+
+		.lp-bar-item-empty,
+		.ap-bar-item-empty {
+			flex-grow: 1;
+			background-color: rgb(201, 201, 201);
+		}
+
+		.lp-bar-item {
+			flex-grow: 1;
+			background-color: rgb(57, 234, 139);
+		}
+
+		.ap-bar-item {
+			flex-grow: 1;
+			background-color: rgb(57, 163, 234);
+		}
+
+		.negative-bar-item {
+			flex-grow: 1;
+			background-color: rgb(234, 57, 57);
+		}
+	}
+
 	.attributes {
 		display: flex;
 		flex-direction: row;

templates/sheets/character/base_values.hbs

@@ -1,3 +1,34 @@
+
+<h3>{{localize "midgard5.actor-lp"}}</h3>
+<div>
+	<div class="health-bar">
+		<input name="data.lp.value" type="text" value="{{data.lp.value}}" data-dtype="Number" />
+		{{#times data.lp.max}}
+			{{#if (lt this ../data.lp.value)}}
+				<div class="lp-bar-item update-lp" data-value="{{this}}"></div>
+			{{else}}
+				<div class="lp-bar-item-empty update-lp" data-value="{{this}}"></div>
+			{{/if}}
+		{{/times}}
+		<input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" />
+	</div>
+</div>
+
+<h3>{{localize "midgard5.actor-ap"}}</h3>
+<div>
+	<div class="health-bar">
+		<input name="data.ap.value" type="text" value="{{data.ap.value}}" data-dtype="Number" />
+		{{#times data.ap.max}}
+			{{#if (lt this ../data.ap.value)}}
+				<div class="ap-bar-item update-ap" data-value="{{this}}"></div>
+			{{else}}
+				<div class="ap-bar-item-empty update-ap" data-value="{{this}}"></div>
+			{{/if}}
+		{{/times}}
+		<input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" />
+	</div>
+</div>
+
 <h3>Eigenschaften</h3>
 <div class="flexrow">
 	<span class="flex0">{{localize "midgard5.class"}}</span>
@@ -10,16 +41,12 @@
 <table>
 	<tbody>
 		<tr>
-			<td>{{localize "midgard5.actor-lp"}} {{localize "midgard5.maximum"}}</td>
-			<td><input name="data.lp.max" type="text" value="{{data.lp.max}}" data-dtype="Number" /></td>
 			<td>{{localize "midgard5.grace"}}</td>
 			<td><input name="data.gg" type="text" value="{{data.gg}}" data-dtype="Number" /></td>
 			<td>{{localize "midgard5.exp-overall"}}</td>
 			<td><input name="data.es" type="text" value="{{data.es}}" data-dtype="Number" /></td>
 		</tr>
 		<tr>
-			<td>{{localize "midgard5.actor-ap"}} {{localize "midgard5.maximum"}}</td>
-			<td><input name="data.ap.max" type="text" value="{{data.ap.max}}" data-dtype="Number" /></td>
 			<td>{{localize "midgard5.destiny"}}</td>
 			<td><input name="data.sg" type="text" value="{{data.sg}}" data-dtype="Number" /></td>
 			<td>{{localize "midgard5.exp-available"}}</td>