fix: js not working on page swap

also fixed saving throw percentages being used on heling operations

handler/tracker.go

@@ -146,7 +146,7 @@ func TrackerDamage(c fiber.Ctx) error {
 	heal := c.FormValue("heal")
 	savingThrow := c.FormValue("savingthrow")
 
-	if savingThrow == "on" || heal == "false" {
+	if savingThrow == "on" && heal != "true" {
 		damageFloat := float64(damage) * 0.33333
 		damage -= int(math.Round(damageFloat))
 	}

main.go

@@ -6,6 +6,7 @@ import (
 
 	"github.com/gofiber/fiber/v3"
 	"github.com/gofiber/fiber/v3/middleware/compress"
+	"github.com/gofiber/fiber/v3/middleware/logger"
 	"github.com/itsig0/tallytome/handler"
 )
 
@@ -22,6 +23,7 @@ func main() {
 
 	// compression baby
 	app.Use(compress.New())
+	app.Use(logger.New())
 
 	app.Static("/", "./public")
 

public/scripts/tallytome.js

@@ -0,0 +1,41 @@
+// HTMX event listener
+document.addEventListener("DOMContentLoaded", (event) => {
+  document.body.addEventListener("htmx:beforeSwap", function (evt) {
+    if (evt.detail.xhr.status === 422) {
+      evt.detail.shouldSwap = true;
+      evt.detail.isError = false;
+    }
+  });
+
+  document.body.addEventListener("HPUpdated", function () {
+    var input = document.getElementById("damageInput");
+    input.value = "";
+    input.removeAttribute("aria-invalid");
+
+    var errorMessage = document.getElementById("damageError");
+    if (errorMessage) {
+      errorMessage.parentNode.removeChild(errorMessage);
+    }
+
+    var savingthrow = document.getElementById("savingthrow");
+    savingthrow.checked = false;
+  });
+
+  document.body.addEventListener("ManaUpdated", function () {
+    var input = document.getElementById("manaInput");
+    input.value = "";
+    input.removeAttribute("aria-invalid");
+
+    var errorMessage = document.getElementById("manaError");
+    if (errorMessage) {
+      errorMessage.parentNode.removeChild(errorMessage);
+    }
+  });
+
+  document.body.addEventListener("BaseUpdated", function () {
+    var errorMessage = document.getElementById("baseError");
+    if (errorMessage) {
+      errorMessage.parentNode.removeChild(errorMessage);
+    }
+  });
+});

view/hptracker/tracker.templ

@@ -55,20 +55,16 @@ var bd = BaseData {
 templ Show(hx bool, td TrackerData) {
 	@layout.Base(hx) {
 		<div class="container">
-
 			<div id="trackerHeader" class="grid mb-2">
 				@TrackerHeader(td)
 			</div>
-
 			// base stats go here
 			@BaseStats(td, bd)
-
 			<div class="grid">
 				<div>
 					<h3>TP</h3>
 					@Hp(dd)
 				</div>
-
 				<div>
 					<h3>Mana</h3>
 					@Mana(md)
@@ -76,48 +72,6 @@ templ Show(hx bool, td TrackerData){
 			</div>
 			<button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button>
 		</div>
-        <script>
-        document.addEventListener("DOMContentLoaded", (event) => {
-            document.body.addEventListener("htmx:beforeSwap", function(evt){
-                if (evt.detail.xhr.status === 422){
-                    evt.detail.shouldSwap = true;
-                    evt.detail.isError = false;
-                }         
-            });
-
-            document.body.addEventListener("HPUpdated", function() {
-                var input = document.getElementById('damageInput');
-                input.value = "";
-                input.removeAttribute('aria-invalid');
-
-                var errorMessage = document.getElementById('damageError');
-                if (errorMessage) {
-                    errorMessage.parentNode.removeChild(errorMessage);
-                }
-
-                var savingthrow = document.getElementById('savingthrow');
-                savingthrow.checked = false;
-            });
-
-            document.body.addEventListener("ManaUpdated", function() {
-                var input = document.getElementById('manaInput');
-                input.value = "";
-                input.removeAttribute('aria-invalid');
-
-                var errorMessage = document.getElementById('manaError');
-                if (errorMessage) {
-                    errorMessage.parentNode.removeChild(errorMessage);
-                }
-            })
-
-            document.body.addEventListener("BaseUpdated", function() {
-                var errorMessage = document.getElementById('baseError');
-                if (errorMessage) {
-                    errorMessage.parentNode.removeChild(errorMessage);
-                }
-            })
-        })
-        </script>
 	}
 }
 
@@ -125,28 +79,21 @@ templ TrackerHeader(td TrackerData){
 	<div class="start">
 		<h2>Kampfrunde: { td.Round }</h2>
 	</div>
-
 	<div id="trackerBars" class="middle">
-        
 		@TrackerColumn(td)
-
 	</div>
-
 	<div class="text-right">
 		<button hx-get="/hp-mana-tracker/newround" hx-target="#trackerHeader" hx-swap="innerHTML">Nächste Runde</button>
 	</div>
 }
 
 templ TrackerColumn(td TrackerData) {
-
 	<div id="hpBar" class="progress">
 		@HPTracker(td)
 	</div>
-
 	<div id="manaBar" class="progress">
 		@ManaTracker(td)
 	</div>
-
 }
 
 templ HPTracker(td TrackerData) {
@@ -173,33 +120,17 @@ templ BaseStats(td TrackerData, bd BaseData){
 	<details id="baseStats" open>
 		<summary>Standard Werte</summary>
 		<form class="grid" hx-post="/hp-mana-tracker/update" hx-target="#trackerBars">
-
 			<label>
 				Trefferpunkte
-                <input
+				<input type="number" placeholder="Trefferpunkte" name="hp" value={ td.HP } required/>
-                    type="number"
-                    placeholder="Trefferpunkte"
-                    name="hp"
-                    value={td.HP}
-                    required
-                />
 			</label>
-
 			<label>
 				Mana <input type="number" name="mana" placeholder="Mana" value={ td.Mana } required/>
 			</label>
-
 			<label>
 				Regenerations %
-                <input
+				<input type="number" name="manaregen" placeholder="Regenerations %" value={ td.ManaRegen } required/>
-                    type="number"
-                    name="manaregen"
-                    placeholder="Regenerations %"
-                    value={td.ManaRegen}
-                    required
-                />
 			</label>
-
 			<div class="lbl-offset">
 				<button type="submit">
 					Go
@@ -213,16 +144,11 @@ templ BaseStats(td TrackerData, bd BaseData){
 }
 
 templ Hp(dd DamageData) {
-
 	<form id="damageInputs" hx-post="/hp-mana-tracker/damage" hx-target="#hpBar">
-
 		<fieldset role="group">
-
 			<button class="secondary" name="damage" value="true">
 				-
 			</button>
-
-            
 			<input
 				id="damageInput"
 				name="damageInput"
@@ -234,24 +160,18 @@ templ Hp(dd DamageData){
 				}
 				value={ dd.Values }
 			/>
-
 			<button class="secondary" name="heal" value="true">
 				+
 			</button>
-
 		</fieldset>
 		if dd.Errors != "" {
 			<small id="damageError" class="error-helper">{ dd.Errors }</small>
 		}
-       
-    
 		<fieldset>
 			<label for="savingthrow">
-                <input id="savingthrow" name="savingthrow" type="checkbox" role="switch" 
+				<input id="savingthrow" name="savingthrow" type="checkbox" role="switch" if dd.SavingThrow !="" {
-                if dd.SavingThrow != "" {
 	checked
-                }
+}/>
-                />
 				Verteidigungswurf
 			</label>
 		</fieldset>
@@ -261,11 +181,9 @@ templ Hp(dd DamageData){
 templ Mana(md ManaData) {
 	<form id="manaInputs" hx-post="/hp-mana-tracker/mana" hx-target="#manaBar">
 		<fieldset role="group">
-
 			<button class="secondary" name="use" value="true">
 				-
 			</button>
-
 			<input
 				id="manaInput"
 				name="manaInput"
@@ -277,16 +195,12 @@ templ Mana(md ManaData){
 				}
 				value={ md.Values }
 			/>
-
 			<button class="secondary" name="add" value="true">
 				+
 			</button>
-
 		</fieldset>
 		if md.Errors != "" {
 			<small id="manaError" class="error-helper">{ md.Errors }</small>
 		}
-       
 	</form>
-   
 }

view/layout/base.templ

@@ -1,39 +1,30 @@
 package layout
 
 templ Base(hx bool) {
-
 	if hx == false {
 		<!DOCTYPE html>
 		<html lang="en" data-theme="light">
 			<head>
 				<meta charset="UTF-8"/>
 				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-
 				<link rel="stylesheet" href="/tallytome.css"/>
-
 				<script src="/scripts/htmx.js"></script>
-        // <script src="/scripts/alpine.js" defer></script>
+				<script src="/scripts/tallytome.js"></script>
-
 				<title>Tallytome</title>
 			</head>
 			<body>
-
 				<header>
 					@header()
 				</header>
-
 				<main>
 					{ children... }
 				</main>
-        
 				// <footer>
 				// @footer()
 				// </footer>
-        
 			</body>
 		</html>
 	} else {
 		{ children... }
 	}
-
 }