itsigo/tallytome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: js not working on page swap

Browse Source 
also fixed saving throw percentages being used on heling operations
This commit is contained in:
Itsigo
2024-04-01 20:52:51 +00:00
parent a47ae03747
commit 05b4ffab16
5 changed files with 234 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
handler/tracker.go
View File

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

2
main.go
View File

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

41
public/scripts/tallytome.js Normal file
View File

@@ -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);
}
});
});

412
view/hptracker/tracker.templ
View File

@@ -4,289 +4,203 @@ import "github.com/itsig0/tallytome/view/layout"
import "fmt" import "fmt"
type TrackerData struct { type TrackerData struct {
HP string HP string
HPBase string HPBase string
HPStartPercentage string HPStartPercentage string
HPPercentage string HPPercentage string
Mana string Mana string
ManaBase string ManaBase string
ManaStartPercentage string ManaStartPercentage string
ManaPercentage string ManaPercentage string
ManaRegen string ManaRegen string
Round string Round string
} }
type DamageData struct { type DamageData struct {
Values string Values string
SavingThrow string SavingThrow string
Errors string Errors string
} }
type ManaData struct { type ManaData struct {
Values string Values string
Errors string Errors string
} }
type BaseData struct { type BaseData struct {
HP string HP string
Mana string Mana string
ManaRegen string ManaRegen string
Errors string Errors string
} }
var dd = DamageData { var dd = DamageData{
Values: "", Values: "",
SavingThrow: "", SavingThrow: "",
Errors: "", Errors: "",
} }
var md = ManaData { var md = ManaData{
Values: "", Values: "",
Errors: "", Errors: "",
} }
var bd = BaseData { var bd = BaseData{
HP: "", HP: "",
Mana: "", Mana: "",
ManaRegen: "", ManaRegen: "",
Errors: "", Errors: "",
} }
templ Show(hx bool, td TrackerData){ templ Show(hx bool, td TrackerData) {
@layout.Base(hx){ @layout.Base(hx) {
<div class="container"> <div class="container">
<div id="trackerHeader" class="grid mb-2">
<div id="trackerHeader" class="grid mb-2"> @TrackerHeader(td)
@TrackerHeader(td) </div>
</div> // base stats go here
@BaseStats(td, bd)
// base stats go here <div class="grid">
@BaseStats(td, bd) <div>
<h3>TP</h3>
<div class="grid"> @Hp(dd)
<div> </div>
<h3>TP</h3> <div>
@Hp(dd) <h3>Mana</h3>
</div> @Mana(md)
</div>
<div> </div>
<h3>Mana</h3> <button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button>
@Mana(md) </div>
</div> }
</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>
}
} }
templ TrackerHeader(td TrackerData){ templ TrackerHeader(td TrackerData) {
<div class="start"> <div class="start">
<h2>Kampfrunde: {td.Round}</h2> <h2>Kampfrunde: { td.Round }</h2>
</div> </div>
<div id="trackerBars" class="middle">
<div id="trackerBars" class="middle"> @TrackerColumn(td)
</div>
@TrackerColumn(td) <div class="text-right">
<button hx-get="/hp-mana-tracker/newround" hx-target="#trackerHeader" hx-swap="innerHTML">Nächste Runde</button>
</div> </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){ templ TrackerColumn(td TrackerData) {
<div id="hpBar" class="progress">
<div id="hpBar" class="progress"> @HPTracker(td)
@HPTracker(td) </div>
</div> <div id="manaBar" class="progress">
@ManaTracker(td)
<div id="manaBar" class="progress"> </div>
@ManaTracker(td)
</div>
} }
templ HPTracker(td TrackerData){ templ HPTracker(td TrackerData) {
<span class="progress-label">TP: {td.HP}/{td.HPBase} </span> <span class="progress-label">TP: { td.HP }/{ td.HPBase } </span>
<div class={"hp", hpAnimation(td.HPStartPercentage, td.HPPercentage)} ></div> <div class={ "hp" , hpAnimation(td.HPStartPercentage, td.HPPercentage) }></div>
} }
templ ManaTracker(td TrackerData){ templ ManaTracker(td TrackerData) {
<span class="progress-label">Mana: {td.Mana}/{td.ManaBase} </span> <span class="progress-label">Mana: { td.Mana }/{ td.ManaBase } </span>
<div class={"mana", manaAnimation(td.ManaStartPercentage, td.ManaPercentage)}></div> <div class={ "mana" , manaAnimation(td.ManaStartPercentage, td.ManaPercentage) }></div>
} }
css hpAnimation(from, to string) { css hpAnimation(from, to string) {
--hp-from-width:{ fmt.Sprintf("%s%%", from) }; --hp-from-width: { fmt.Sprintf("%s%%", from) };
--hp-to-width:{ fmt.Sprintf("%s%%", to) }; --hp-to-width: { fmt.Sprintf("%s%%", to) };
} }
css manaAnimation(from, to string) { css manaAnimation(from, to string) {
--mana-from-width:{ fmt.Sprintf("%s%%", from) }; --mana-from-width: { fmt.Sprintf("%s%%", from) };
--mana-to-width:{ fmt.Sprintf("%s%%", to) }; --mana-to-width: { fmt.Sprintf("%s%%", to) };
} }
templ BaseStats(td TrackerData, bd BaseData){ templ BaseStats(td TrackerData, bd BaseData) {
<details id="baseStats" open> <details id="baseStats" open>
<summary>Standard Werte</summary> <summary>Standard Werte</summary>
<form class="grid" hx-post="/hp-mana-tracker/update" hx-target="#trackerBars"> <form class="grid" hx-post="/hp-mana-tracker/update" hx-target="#trackerBars">
<label>
<label> Trefferpunkte
Trefferpunkte <input type="number" placeholder="Trefferpunkte" name="hp" value={ td.HP } required/>
<input </label>
type="number" <label>
placeholder="Trefferpunkte" Mana <input type="number" name="mana" placeholder="Mana" value={ td.Mana } required/>
name="hp" </label>
value={td.HP} <label>
required Regenerations %
/> <input type="number" name="manaregen" placeholder="Regenerations %" value={ td.ManaRegen } required/>
</label> </label>
<div class="lbl-offset">
<label> <button type="submit">
Mana <input type="number" name="mana" placeholder="Mana" value={td.Mana} required/> Go
</label> </button>
</div>
<label> </form>
Regenerations % if bd.Errors != "" {
<input <small id="baseError" class="error-helper">{ bd.Errors }</small>
type="number" }
name="manaregen" </details>
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){ templ Hp(dd DamageData) {
<form id="damageInputs" hx-post="/hp-mana-tracker/damage" hx-target="#hpBar">
<form id="damageInputs" hx-post="/hp-mana-tracker/damage" hx-target="#hpBar"> <fieldset role="group">
<button class="secondary" name="damage" value="true">
<fieldset role="group"> -
</button>
<button class="secondary" name="damage" value="true"> <input
- id="damageInput"
</button> name="damageInput"
type="number"
placeholder="Schaden/Heilung"
<input required
id="damageInput" if dd.Errors !="" {
name="damageInput" aria-invalid="true"
type="number" }
placeholder="Schaden/Heilung" value={ dd.Values }
required />
if dd.Errors != "" { <button class="secondary" name="heal" value="true">
aria-invalid="true" +
} </button>
value={dd.Values} </fieldset>
/> if dd.Errors != "" {
<small id="damageError" class="error-helper">{ dd.Errors }</small>
<button class="secondary" name="heal" value="true"> }
+ <fieldset>
</button> <label for="savingthrow">
<input id="savingthrow" name="savingthrow" type="checkbox" role="switch" if dd.SavingThrow !="" {
</fieldset> checked
if dd.Errors != "" { }/>
<small id="damageError" class="error-helper">{dd.Errors}</small> Verteidigungswurf
} </label>
</fieldset>
</form>
<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){ templ Mana(md ManaData) {
<form id="manaInputs" hx-post="/hp-mana-tracker/mana" hx-target="#manaBar"> <form id="manaInputs" hx-post="/hp-mana-tracker/mana" hx-target="#manaBar">
<fieldset role="group"> <fieldset role="group">
<button class="secondary" name="use" value="true">
<button class="secondary" name="use" value="true"> -
- </button>
</button> <input
id="manaInput"
<input name="manaInput"
id="manaInput" type="number"
name="manaInput" placeholder="Mana"
type="number" required
placeholder="Mana" if md.Errors !="" {
required aria-invalid="true"
if md.Errors != "" { }
aria-invalid="true" value={ md.Values }
} />
value={md.Values} <button class="secondary" name="add" value="true">
/> +
</button>
<button class="secondary" name="add" value="true"> </fieldset>
+ if md.Errors != "" {
</button> <small id="manaError" class="error-helper">{ md.Errors }</small>
}
</fieldset> </form>
if md.Errors != "" { }
<small id="manaError" class="error-helper">{md.Errors}</small>
}
</form>
}

63
view/layout/base.templ
View File

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