feat: started with bonus hp feature

README.md

@@ -9,4 +9,5 @@ Small tracker site build with GO and HTMX.
 - [ ] Database connection
 - [ ] Page to track critical hits or misses
 - [ ] Dark Mode
+- [ ] Bonus HP feature
 - [x] Remove the main PicoCSS files from Git

handler/tracker.go

@@ -7,6 +7,7 @@ import (
 	"strconv"
 
 	"github.com/gofiber/fiber/v3"
+	"github.com/gofiber/fiber/v3/log"
 	"github.com/itsig0/tallytome/view/hptracker"
 )
 
@@ -82,9 +83,14 @@ func TrackerUpdate(c fiber.Ctx) error {
 		return render(c, hptracker.BaseStats(data, bd))
 	}
 
+	//calculate max hp
+	intBase, _ := strconv.Atoi(data.HPBase)
+	data.HPMax = fmt.Sprint(float64(intBase)*0.2 + float64(intBase))
+
 	pre := "tracker_"
 	sess.Set(pre+"HP", data.HP)
 	sess.Set(pre+"HPBase", data.HPBase)
+	sess.Set(pre+"HPMax", data.HPMax)
 	sess.Set(pre+"HPPercentage", data.HPPercentage)
 	sess.Set(pre+"HPStartPercentage", data.HPPercentage)
 
@@ -142,16 +148,36 @@ func TrackerDamage(c fiber.Ctx) error {
 
 	// no error handling here because it's already done for currentHP
 	baseHP, _ := strconv.Atoi(fmt.Sprint(sess.Get("tracker_HPBase")))
+	maxHP, _ := strconv.Atoi(fmt.Sprint(sess.Get("tracker_HPMax")))
 
 	heal := c.FormValue("heal")
 	savingThrow := c.FormValue("savingthrow")
+	bonusHPSet := c.FormValue("bonushp")
+	hasBonusHP := false
+
+	bonusRounds, _ := strconv.Atoi(c.FormValue("bonusInput"))
+	if bonusRounds < 1 {
+		bonusRounds = 1
+	}
+
+	if currentHP > baseHP {
+		hasBonusHP = true
+	}
+
+	if bonusHPSet == "on" {
+		damage = damage / bonusRounds
+		sess.Set("tracker_HPBonusRounds", fmt.Sprint(bonusRounds-1))
+		sess.Set("tracker_HPBonusHeal", fmt.Sprint(damage))
+	}
 
 	if savingThrow == "on" && heal != "true" {
 		damageFloat := float64(damage) * 0.33333
 		damage -= int(math.Round(damageFloat))
 	}
 
-	if heal == "true" {
+	if heal == "true" && hasBonusHP == true {
+		damage = 0
+	} else if heal == "true" {
 		damage *= -1
 	}
 
@@ -161,17 +187,28 @@ func TrackerDamage(c fiber.Ctx) error {
 		newHP = 0
 	}
 
-	if newHP > baseHP {
+	if newHP > baseHP && bonusHPSet != "on" && hasBonusHP == false {
 		newHP = baseHP
 	}
 
+	if newHP > maxHP {
+		newHP = maxHP
+	}
+
+	bonusHPPercentage := 0
 	newPercentage := (newHP * 100) / baseHP
 
+	if newPercentage >= 100 {
+		bonusHPPercentage = newPercentage - 100
+		newPercentage = 100
+	}
+
 	data := hptracker.TrackerData{
 		HP:                fmt.Sprint(newHP),
 		HPBase:            fmt.Sprint(sess.Get("tracker_HPBase")),
 		HPStartPercentage: fmt.Sprint(sess.Get("tracker_HPPercentage")),
 		HPPercentage:      fmt.Sprint(newPercentage),
+		HPBonusPercentage: fmt.Sprint(bonusHPPercentage),
 	}
 
 	sess.Set("tracker_HP", newHP)
@@ -184,6 +221,10 @@ func TrackerDamage(c fiber.Ctx) error {
 	return render(c, hptracker.HPTracker(data))
 }
 
+func TrackerBonusHP(c fiber.Ctx) error {
+	return c.SendString("I'm tracking you")
+}
+
 func TrackerMana(c fiber.Ctx) error {
 	sess, err := store.Get(c)
 	if err != nil {
@@ -261,7 +302,7 @@ func TrackerRound(c fiber.Ctx) error {
 
 	data := hptracker.TrackerData{}
 
-	fields := []string{"HP", "HPBase", "HPStartPercentage", "HPPercentage", "Mana", "ManaBase", "ManaRegen", "ManaStartPercentage", "ManaPercentage", "Round"}
+	fields := []string{"HP", "HPBase", "HPStartPercentage", "HPPercentage", "Mana", "ManaBase", "ManaRegen", "ManaStartPercentage", "ManaPercentage", "Round", "HPBonusRounds", "HPBonusHeal", "HPMax"}
 	for _, field := range fields {
 		if val := sess.Get("tracker_" + field); val != nil {
 			reflect.ValueOf(&data).Elem().FieldByName(field).SetString(fmt.Sprint(val))
@@ -273,11 +314,29 @@ func TrackerRound(c fiber.Ctx) error {
 	manaRegen, _ := strconv.Atoi(data.ManaRegen)
 	round, _ := strconv.Atoi(data.Round)
 
+	hp, _ := strconv.Atoi(data.HP)
+	hpMax, _ := strconv.Atoi(data.HPMax)
+	hpBonusRounds, _ := strconv.Atoi(data.HPBonusRounds)
+	hpBonusHeal, _ := strconv.Atoi(data.HPBonusHeal)
+
+	log.Info(hpBonusRounds)
+	log.Info(hpBonusHeal)
+
 	if manaBase == 0 || manaRegen == 0 {
 		c.Status(418)
 		return render(c, hptracker.TrackerHeader(data))
 	}
 
+	if hpBonusRounds > 0 {
+		hp += hpBonusHeal
+		hpBonusRounds -= 1
+	}
+
+	log.Info(hpMax)
+	if hp > hpMax {
+		hp = hpMax
+	}
+
 	mana += (manaRegen * manaBase) / 100
 
 	if mana > manaBase {
@@ -291,11 +350,15 @@ func TrackerRound(c fiber.Ctx) error {
 	data.Round = fmt.Sprint(round + 1)
 	data.ManaStartPercentage = data.ManaPercentage
 	data.ManaPercentage = fmt.Sprint((mana * 100) / manaBase)
+	data.HP = fmt.Sprint(hp)
+	data.HPBonusRounds = fmt.Sprint(hpBonusRounds)
 
 	sess.Set("tracker_Mana", data.Mana)
 	sess.Set("tracker_ManaPercentage", data.ManaPercentage)
 	sess.Set("tracker_ManaStartPercentage", data.ManaStartPercentage)
 	sess.Set("tracker_Round", data.Round)
+	sess.Set("tracker_HP", data.HP)
+	sess.Set("tracker_HPBonusRounds", data.HPBonusRounds)
 
 	sess.Save()
 

main.go

@@ -6,7 +6,6 @@ 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"
 )
 
@@ -23,7 +22,7 @@ func main() {
 
 	// compression baby
 	app.Use(compress.New())
-	app.Use(logger.New())
+	//app.Use(logger.New())
 
 	app.Static("/", "./public")
 
@@ -34,6 +33,7 @@ func main() {
 	tracker.Post("/update", handler.TrackerUpdate)
 	tracker.Post("/damage", handler.TrackerDamage)
 	tracker.Post("/mana", handler.TrackerMana)
+	tracker.Post("/bonus-hp", handler.TrackerBonusHP)
 	tracker.Get("/newround", handler.TrackerRound)
 	tracker.Get("/reset", handler.TrackerReset)
 	// app.Get("/*", func(c *fiber.Ctx) error {

public/scripts/tallytome.js

@@ -19,6 +19,13 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
         var savingthrow = document.getElementById("savingthrow");
         savingthrow.checked = false;
+
+        var bonushp = document.getElementById("bonushp");
+        var bonusInput = document.getElementById("bonusInput");
+        bonusInput.classList.add("hidden");
+        bonusInput.disabled = true;
+        bonusInput.value = "";
+        bonushp.checked = false;
     });
 
     document.body.addEventListener("ManaUpdated", function() {
@@ -71,3 +78,16 @@ function setTheme(theme) {
     localStorage.setItem(atr, theme)
 }
 
+
+// round toggle
+//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;
+//    }
+//}

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
@@ -80,7 +84,10 @@ templ Show(hx bool, td TrackerData) {
 
 templ TrackerHeader(td TrackerData) {
 	<div class="start">
+		<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" 
+				<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>
 }
 

view/stylesheets/tallytome.scss

@@ -1,7 +1,5 @@
-@use "node_modules/@picocss/pico/scss/pico" with (
+@use "node_modules/@picocss/pico/scss/pico" with ($theme-color: "cyan",
-    $theme-color: "cyan",
+    $modules: ("themes/default": false,
-    $modules: (
-        "themes/default": false,
 
         // Layout
         "layout/document": true,
@@ -43,9 +41,7 @@
 
         // Utilities
         "utilities/accessibility": true,
-        "utilities/reduce-motion": true
+        "utilities/reduce-motion": true));
-    )
-);
 
 @use "node_modules/@picocss/pico/scss/colors/index" as *;
 
@@ -199,32 +195,50 @@ progress{
         z-index: 20;
         font-size: 0.9rem;
     }
+
     div {
         height: 100%;
         border-radius: var(--pico-border-radius);
         background: var(--pico-primary);
-        position: relative;
+        position: absolute;
         z-index: 10;
-        align-self: start;
+        left: 0;
-        margin-right: auto;
         animation-duration: 1s;
         animation-fill-mode: forwards;
 
         &.mana {
             background-color: var(--color-mana);
             animation-name: manaAnimation;
+
             @keyframes manaAnimation {
-                0%   {width: var(--mana-from-width);}
+                0% {
-                100% {width: var(--mana-to-width);}
+                    width: var(--mana-from-width);
+                }
+
+                100% {
+                    width: var(--mana-to-width);
                 }
             }
+        }
+
         &.hp {
             background-color: var(--color-hp);
             animation-name: hpAnimation;
+
             @keyframes hpAnimation {
-                0%   {width: var(--hp-from-width);}
+                0% {
-                100% {width: var(--hp-to-width);}
+                    width: var(--hp-from-width);
                 }
+
+                100% {
+                    width: var(--hp-to-width);
+                }
+            }
+        }
+
+        &.bonushp {
+            background-color: orange;
+            z-index: 11;
         }
 
     }
@@ -259,6 +273,10 @@ progress{
     margin-bottom: var(--pico-spacing);
 }
 
+.hidden {
+    display: none;
+}
+
 #loginContainer {
     height: 100vh;
     max-width: 510px;