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
}

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