tallytome/view/hptracker/tracker.templ

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
	Round               string
}

type DamageData struct {
	Values      string
	SavingThrow string
	Errors      string
}

type ManaData struct {
	Values string
	Errors string
}

type BaseData struct {
	HP        string
	Mana      string
	ManaRegen string
	Errors    string
}

var dd = DamageData{
	Values:      "",
	SavingThrow: "",
	Errors:      "",
}

var md = ManaData{
	Values: "",
	Errors: "",
}

var bd = BaseData{
	HP:        "",
	Mana:      "",
	ManaRegen: "",
	Errors:    "",
}

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)
				</div>
			</div>
            <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>
	</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) {
	<span class="progress-label">TP: { td.HP }/{ td.HPBase } </span>
	<div class={ "hp" , hpAnimation(td.HPStartPercentage, td.HPPercentage) }></div>
}

templ ManaTracker(td TrackerData) {
	<span class="progress-label">Mana: { td.Mana }/{ td.ManaBase } </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(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 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 type="number" name="manaregen" placeholder="Regenerations %" value={ td.ManaRegen } required/>
			</label>
			<div class="lbl-offset">
				<button type="submit">
					Go
				</button>
			</div>
		</form>
		if bd.Errors != "" {
			<small id="baseError" class="error-helper">{ bd.Errors }</small>
		}
	</details>
}

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"
				type="number"
				placeholder="Schaden/Heilung"
				required
				if dd.Errors !="" {
					aria-invalid="true"
				}
				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" 
                if dd.SavingThrow != "" { 
                    checked
                }
                />
				Verteidigungswurf
			</label>
		</fieldset>
	</form>
}

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"
				type="number"
				placeholder="Mana"
				required
				if md.Errors !="" {
					aria-invalid="true"
				}
				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>
}