feat: started with bonus hp feature

view/hptracker/tracker.templ

@@ -6,8 +6,12 @@ import "fmt"
 type TrackerData struct {
 	HP                  string
 	HPBase              string
+	HPMax               string
 	HPStartPercentage   string
 	HPPercentage        string
+	HPBonusPercentage   string
+	HPBonusRounds       string
+	HPBonusHeal         string
 	Mana                string
 	ManaBase            string
 	ManaStartPercentage string
@@ -70,17 +74,20 @@ templ Show(hx bool, td TrackerData) {
 					@Mana(md)
 				</div>
 			</div>
-            <details>
-                <summary>Extras</summary>
-			    <button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button>
-            </details>
+			<details>
+				<summary>Extras</summary>
+				<button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button>
+			</details>
 		</div>
 	}
 }
 
 templ TrackerHeader(td TrackerData) {
 	<div class="start">
-		<h2>Kampfrunde: { td.Round }</h2>
+		<hgroup>
+			<h2>Kampfrunde: { td.Round }</h2>
+			<p style="font-size: 0.8rem">Bonus TP: 60, Runden: 2</p>
+		</hgroup>
 	</div>
 	<div id="trackerBars" class="middle">
 		@TrackerColumn(td)
@@ -102,6 +109,7 @@ templ TrackerColumn(td TrackerData) {
 templ HPTracker(td TrackerData) {
 	<span class="progress-label">TP: { td.HP }/{ td.HPBase } </span>
 	<div class={ "hp" , hpAnimation(td.HPStartPercentage, td.HPPercentage) }></div>
+	<div class={ "bonushp", extraWidth(td.HPBonusPercentage) }></div>
 }
 
 templ ManaTracker(td TrackerData) {
@@ -109,6 +117,10 @@ templ ManaTracker(td TrackerData) {
 	<div class={ "mana" , manaAnimation(td.ManaStartPercentage, td.ManaPercentage) }></div>
 }
 
+css extraWidth(data string) {
+	width: { fmt.Sprintf("%s%%", data) };
+}
+
 css hpAnimation(from, to string) {
 	--hp-from-width: { fmt.Sprintf("%s%%", from) };
 	--hp-to-width: { fmt.Sprintf("%s%%", to) };
@@ -172,14 +184,46 @@ templ Hp(dd DamageData) {
 		}
 		<fieldset>
 			<label for="savingthrow">
-				<input id="savingthrow" name="savingthrow" type="checkbox" role="switch" 
-                if dd.SavingThrow != "" { 
-                    checked
-                }
-                />
+				<input
+					id="savingthrow"
+					name="savingthrow"
+					type="checkbox"
+					role="switch"
+					if dd.SavingThrow != "" {
+						checked
+					}
+				/>
 				Verteidigungswurf
 			</label>
+			<label for="bonushp">
+				<input id="bonushp" name="bonushp" type="checkbox" role="switch" onclick="toggleRounds()"/>
+				Bonus HP
+			</label>
+			<input
+				id="bonusInput"
+				class="hidden"
+				name="bonusInput"
+				type="number"
+				placeholder="Runden"
+				value={ dd.Values }
+				style="width:50%"
+				disabled="true"
+				required
+			/>
 		</fieldset>
+		<script>
+        function toggleRounds() {
+            let box = document.getElementById("bonushp");
+            let inp = document.getElementById("bonusInput");
+            if (box.checked == true) {
+                inp.classList.remove("hidden");
+                inp.disabled = false;
+            } else {
+                inp.classList.add("hidden");
+                inp.disabled = true;
+            }
+        }
+        </script>
 	</form>
 }