+ to the git

view/hptracker/tracker.templ

@@ -0,0 +1,170 @@
+package hptracker
+
+import "github.com/itsig0/tallytome/view/layout"
+import "fmt"
+
+type TrackerData struct {
+    HP                  string
+    HPBase              string
+    HPStartPercentage   string
+    HPPercentage        string
+    Mana                string
+    ManaBase            string
+    ManaStartPercentage string
+    ManaPercentage      string
+    ManaRegen           string
+}
+
+templ Show(hx bool, td TrackerData){
+    @layout.Base(hx){
+        <div class="container">
+
+            <div class="grid mb-2">
+                <div class="start">
+                    <h2>Kampfrunde: </h2>
+                </div>
+
+                <div id="trackerBars" class="middle">
+                    
+                    @TrackerColumn(td)
+
+                </div>
+
+                <div class="text-right">
+                    <button>Nächste Runde</button>
+                </div>
+            </div>
+
+            // base stats go here
+            @baseStats()
+
+            <div class="grid">
+                <div>
+                    <h3>TP</h3>
+                    @hp()
+                </div>
+
+                <div>
+                    <h3>Mana</h3>
+                    @mana()
+                </div>
+            </div>
+        </div>
+    }
+}
+
+// css loading(percent string) {
+// 	width: { fmt.Sprintf("%s%%", percent) };
+// }
+
+templ TrackerColumn(td TrackerData){
+
+    <div id="hpBar" class="progress">
+        @HPTracker(td)
+    </div>
+
+    <div class="progress">
+        @ManaTracker(td)
+    </div>
+
+}
+
+templ HPTracker(td TrackerData){
+    <span class="progress-label">TP: {td.HP}/{td.HP} </span>
+    <div class={"hp", hpAnimation(td.HPStartPercentage, td.HPPercentage)} ></div>
+}
+
+templ ManaTracker(td TrackerData){
+    <span class="progress-label">Mana: {td.Mana}/{td.Mana} </span>
+    <div class={"mana", manaAnimation(td.ManaStartPercentage, td.ManaPercentage)}></div> 
+}
+
+css hpAnimation(from, to string) {
+    --hp-from-width:{ fmt.Sprintf("%s%%", from) };
+    --hp-to-width:{ fmt.Sprintf("%s%%", to) };
+}
+
+css manaAnimation(from, to string) {
+    --mana-from-width:{ fmt.Sprintf("%s%%", from) };
+    --mana-to-width:{ fmt.Sprintf("%s%%", to) };
+}
+
+templ baseStats(){
+    <details open>
+        <summary>Standard Werte</summary>
+        <form class="grid" hx-post="/hp-mana-tracker/update" hx-target="#trackerBars">
+
+            <label>
+                Trefferpunkte
+                <input
+                    type="number"
+                    placeholder="Trefferpunkte"
+                    name="hp"
+                    required
+                />
+            </label>
+
+            <label>
+                Mana <input type="number" name="mana" placeholder="Mana" required/>
+            </label>
+
+            <label>
+                Regenerations %
+                <input
+                    type="number"
+                    name="manaregen"
+                    placeholder="Regenerations %"
+                    required
+                />
+            </label>
+
+            <div class="lbl-offset">
+                <button type="submit">
+                    Go
+                </button>
+            </div>
+        </form>
+    </details>
+}
+
+templ hp(){
+
+    <form hx-post="/hp-mana-tracker/damage" hx-target="#hpBar">
+        <fieldset role="group">
+
+            <button class="secondary" name="damage" value="true">
+                -
+            </button>
+
+            <input name="damageInput" type="number"/>
+
+            <button class="secondary" name="heal" value="true">
+                +
+            </button>
+
+        </fieldset>
+    
+        <fieldset>
+            <label for="savingthrow">
+                <input id="savingthrow" name="savingthrow" type="checkbox" role="switch"/>
+                Verteidigungswurf
+            </label>
+        </fieldset>
+    </form>
+}
+
+templ mana(){
+    <fieldset role="group">
+
+        <button class="secondary" name="use" hx-get="/hp-mana-tracker/check">
+            -
+        </button>
+
+        <input type="number" placeholder="" min="0" value="0"/>
+
+        <button class="secondary" name="add">
+            +
+        </button>
+
+    </fieldset>
+}