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")
savingThrow := c.FormValue("savingthrow")
if savingThrow == "on" || heal == "false" {
if savingThrow == "on" && heal != "true" {
damageFloat := float64(damage) * 0.33333
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/middleware/compress"
"github.com/gofiber/fiber/v3/middleware/logger"
"github.com/itsig0/tallytome/handler"
)
@@ -22,6 +23,7 @@ func main() {
// compression baby
app.Use(compress.New())
app.Use(logger.New())
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);
}
});
});

154
view/hptracker/tracker.templ
View File

@@ -34,41 +34,37 @@ type BaseData struct {
Errors string
}
var dd = DamageData {
var dd = DamageData{
Values: "",
SavingThrow: "",
Errors: "",
}
var md = ManaData {
var md = ManaData{
Values: "",
Errors: "",
}
var bd = BaseData {
var bd = BaseData{
HP: "",
Mana: "",
ManaRegen: "",
Errors: "",
}
templ Show(hx bool, td TrackerData){
@layout.Base(hx){
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)
@@ -76,217 +72,135 @@ templ Show(hx bool, td TrackerData){
</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">
<h2>Kampfrunde: {td.Round}</h2>
<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){
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 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>
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) };
--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) };
--mana-from-width: { fmt.Sprintf("%s%%", from) };
--mana-to-width: { fmt.Sprintf("%s%%", to) };
}
templ BaseStats(td TrackerData, bd BaseData){
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
/>
<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/>
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
/>
<input type="number" name="manaregen" placeholder="Regenerations %" value={ td.ManaRegen } required/>
</label>
<div class="lbl-offset">
<button type="submit" >
<button type="submit">
Go
</button>
</div>
</form>
if bd.Errors != "" {
<small id="baseError" class="error-helper">{bd.Errors}</small>
<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">
<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 != "" {
if dd.Errors !="" {
aria-invalid="true"
}
value={dd.Values}
value={ dd.Values }
/>
<button class="secondary" name="heal" value="true">
+
</button>
</fieldset>
if dd.Errors != "" {
<small id="damageError" class="error-helper">{dd.Errors}</small>
<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 != "" {
<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">
<fieldset role="group">
<button class="secondary" name="use" value="true">
-
</button>
<input
id="manaInput"
name="manaInput"
type="number"
placeholder="Mana"
required
if md.Errors != "" {
if md.Errors !="" {
aria-invalid="true"
}
value={md.Values}
value={ md.Values }
/>
<button class="secondary" name="add" value="true">
+
</button>
</fieldset>
if md.Errors != "" {
<small id="manaError" class="error-helper">{md.Errors}</small>
<small id="manaError" class="error-helper">{ md.Errors }</small>
}
</form>
}

27
view/layout/base.templ
View File

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