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

feat: started with bonus hp feature

Browse Source
This commit is contained in:
Itsigo
2024-09-01 18:31:01 +02:00
parent dd548e36a3
commit 1d4c46214c
6 changed files with 218 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -9,4 +9,5 @@ Small tracker site build with GO and HTMX.
- [ ] Database connection - [ ] Database connection
- [ ] Page to track critical hits or misses - [ ] Page to track critical hits or misses
- [ ] Dark Mode - [ ] Dark Mode
- [ ] Bonus HP feature
- [x] Remove the main PicoCSS files from Git - [x] Remove the main PicoCSS files from Git

69
handler/tracker.go
View File

@@ -7,6 +7,7 @@ import (
"strconv" "strconv"
"github.com/gofiber/fiber/v3" "github.com/gofiber/fiber/v3"
"github.com/gofiber/fiber/v3/log"
"github.com/itsig0/tallytome/view/hptracker" "github.com/itsig0/tallytome/view/hptracker"
) )
@@ -82,9 +83,14 @@ func TrackerUpdate(c fiber.Ctx) error {
return render(c, hptracker.BaseStats(data, bd)) return render(c, hptracker.BaseStats(data, bd))
} }
//calculate max hp
intBase, _ := strconv.Atoi(data.HPBase)
data.HPMax = fmt.Sprint(float64(intBase)*0.2 + float64(intBase))
pre := "tracker_" pre := "tracker_"
sess.Set(pre+"HP", data.HP) sess.Set(pre+"HP", data.HP)
sess.Set(pre+"HPBase", data.HPBase) sess.Set(pre+"HPBase", data.HPBase)
sess.Set(pre+"HPMax", data.HPMax)
sess.Set(pre+"HPPercentage", data.HPPercentage) sess.Set(pre+"HPPercentage", data.HPPercentage)
sess.Set(pre+"HPStartPercentage", data.HPPercentage) sess.Set(pre+"HPStartPercentage", data.HPPercentage)
@@ -142,16 +148,36 @@ func TrackerDamage(c fiber.Ctx) error {
// no error handling here because it's already done for currentHP // no error handling here because it's already done for currentHP
baseHP, _ := strconv.Atoi(fmt.Sprint(sess.Get("tracker_HPBase"))) baseHP, _ := strconv.Atoi(fmt.Sprint(sess.Get("tracker_HPBase")))
maxHP, _ := strconv.Atoi(fmt.Sprint(sess.Get("tracker_HPMax")))
heal := c.FormValue("heal") heal := c.FormValue("heal")
savingThrow := c.FormValue("savingthrow") savingThrow := c.FormValue("savingthrow")
bonusHPSet := c.FormValue("bonushp")
hasBonusHP := false
bonusRounds, _ := strconv.Atoi(c.FormValue("bonusInput"))
if bonusRounds < 1 {
bonusRounds = 1
}
if currentHP > baseHP {
hasBonusHP = true
}
if bonusHPSet == "on" {
damage = damage / bonusRounds
sess.Set("tracker_HPBonusRounds", fmt.Sprint(bonusRounds-1))
sess.Set("tracker_HPBonusHeal", fmt.Sprint(damage))
}
if savingThrow == "on" && heal != "true" { 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))
} }
if heal == "true" { if heal == "true" && hasBonusHP == true {
damage = 0
} else if heal == "true" {
damage *= -1 damage *= -1
} }
@@ -161,17 +187,28 @@ func TrackerDamage(c fiber.Ctx) error {
newHP = 0 newHP = 0
} }
if newHP > baseHP { if newHP > baseHP && bonusHPSet != "on" && hasBonusHP == false {
newHP = baseHP newHP = baseHP
} }
if newHP > maxHP {
newHP = maxHP
}
bonusHPPercentage := 0
newPercentage := (newHP * 100) / baseHP newPercentage := (newHP * 100) / baseHP
if newPercentage >= 100 {
bonusHPPercentage = newPercentage - 100
newPercentage = 100
}
data := hptracker.TrackerData{ data := hptracker.TrackerData{
HP: fmt.Sprint(newHP), HP: fmt.Sprint(newHP),
HPBase: fmt.Sprint(sess.Get("tracker_HPBase")), HPBase: fmt.Sprint(sess.Get("tracker_HPBase")),
HPStartPercentage: fmt.Sprint(sess.Get("tracker_HPPercentage")), HPStartPercentage: fmt.Sprint(sess.Get("tracker_HPPercentage")),
HPPercentage: fmt.Sprint(newPercentage), HPPercentage: fmt.Sprint(newPercentage),
HPBonusPercentage: fmt.Sprint(bonusHPPercentage),
} }
sess.Set("tracker_HP", newHP) sess.Set("tracker_HP", newHP)
@@ -184,6 +221,10 @@ func TrackerDamage(c fiber.Ctx) error {
return render(c, hptracker.HPTracker(data)) return render(c, hptracker.HPTracker(data))
} }
func TrackerBonusHP(c fiber.Ctx) error {
return c.SendString("I'm tracking you")
}
func TrackerMana(c fiber.Ctx) error { func TrackerMana(c fiber.Ctx) error {
sess, err := store.Get(c) sess, err := store.Get(c)
if err != nil { if err != nil {
@@ -261,7 +302,7 @@ func TrackerRound(c fiber.Ctx) error {
data := hptracker.TrackerData{} data := hptracker.TrackerData{}
fields := []string{"HP", "HPBase", "HPStartPercentage", "HPPercentage", "Mana", "ManaBase", "ManaRegen", "ManaStartPercentage", "ManaPercentage", "Round"} fields := []string{"HP", "HPBase", "HPStartPercentage", "HPPercentage", "Mana", "ManaBase", "ManaRegen", "ManaStartPercentage", "ManaPercentage", "Round", "HPBonusRounds", "HPBonusHeal", "HPMax"}
for _, field := range fields { for _, field := range fields {
if val := sess.Get("tracker_" + field); val != nil { if val := sess.Get("tracker_" + field); val != nil {
reflect.ValueOf(&data).Elem().FieldByName(field).SetString(fmt.Sprint(val)) reflect.ValueOf(&data).Elem().FieldByName(field).SetString(fmt.Sprint(val))
@@ -273,11 +314,29 @@ func TrackerRound(c fiber.Ctx) error {
manaRegen, _ := strconv.Atoi(data.ManaRegen) manaRegen, _ := strconv.Atoi(data.ManaRegen)
round, _ := strconv.Atoi(data.Round) round, _ := strconv.Atoi(data.Round)
hp, _ := strconv.Atoi(data.HP)
hpMax, _ := strconv.Atoi(data.HPMax)
hpBonusRounds, _ := strconv.Atoi(data.HPBonusRounds)
hpBonusHeal, _ := strconv.Atoi(data.HPBonusHeal)
log.Info(hpBonusRounds)
log.Info(hpBonusHeal)
if manaBase == 0 || manaRegen == 0 { if manaBase == 0 || manaRegen == 0 {
c.Status(418) c.Status(418)
return render(c, hptracker.TrackerHeader(data)) return render(c, hptracker.TrackerHeader(data))
} }
if hpBonusRounds > 0 {
hp += hpBonusHeal
hpBonusRounds -= 1
}
log.Info(hpMax)
if hp > hpMax {
hp = hpMax
}
mana += (manaRegen * manaBase) / 100 mana += (manaRegen * manaBase) / 100
if mana > manaBase { if mana > manaBase {
@@ -291,11 +350,15 @@ func TrackerRound(c fiber.Ctx) error {
data.Round = fmt.Sprint(round + 1) data.Round = fmt.Sprint(round + 1)
data.ManaStartPercentage = data.ManaPercentage data.ManaStartPercentage = data.ManaPercentage
data.ManaPercentage = fmt.Sprint((mana * 100) / manaBase) data.ManaPercentage = fmt.Sprint((mana * 100) / manaBase)
data.HP = fmt.Sprint(hp)
data.HPBonusRounds = fmt.Sprint(hpBonusRounds)
sess.Set("tracker_Mana", data.Mana) sess.Set("tracker_Mana", data.Mana)
sess.Set("tracker_ManaPercentage", data.ManaPercentage) sess.Set("tracker_ManaPercentage", data.ManaPercentage)
sess.Set("tracker_ManaStartPercentage", data.ManaStartPercentage) sess.Set("tracker_ManaStartPercentage", data.ManaStartPercentage)
sess.Set("tracker_Round", data.Round) sess.Set("tracker_Round", data.Round)
sess.Set("tracker_HP", data.HP)
sess.Set("tracker_HPBonusRounds", data.HPBonusRounds)
sess.Save() sess.Save()

4
main.go
View File

@@ -6,7 +6,6 @@ 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"
) )
@@ -23,7 +22,7 @@ func main() {
// compression baby // compression baby
app.Use(compress.New()) app.Use(compress.New())
app.Use(logger.New()) //app.Use(logger.New())
app.Static("/", "./public") app.Static("/", "./public")
@@ -34,6 +33,7 @@ func main() {
tracker.Post("/update", handler.TrackerUpdate) tracker.Post("/update", handler.TrackerUpdate)
tracker.Post("/damage", handler.TrackerDamage) tracker.Post("/damage", handler.TrackerDamage)
tracker.Post("/mana", handler.TrackerMana) tracker.Post("/mana", handler.TrackerMana)
tracker.Post("/bonus-hp", handler.TrackerBonusHP)
tracker.Get("/newround", handler.TrackerRound) tracker.Get("/newround", handler.TrackerRound)
tracker.Get("/reset", handler.TrackerReset) tracker.Get("/reset", handler.TrackerReset)
// app.Get("/*", func(c *fiber.Ctx) error { // app.Get("/*", func(c *fiber.Ctx) error {

20
public/scripts/tallytome.js
View File

@@ -19,6 +19,13 @@ document.addEventListener("DOMContentLoaded", (event) => {
var savingthrow = document.getElementById("savingthrow"); var savingthrow = document.getElementById("savingthrow");
savingthrow.checked = false; savingthrow.checked = false;
var bonushp = document.getElementById("bonushp");
var bonusInput = document.getElementById("bonusInput");
bonusInput.classList.add("hidden");
bonusInput.disabled = true;
bonusInput.value = "";
bonushp.checked = false;
}); });
document.body.addEventListener("ManaUpdated", function() { document.body.addEventListener("ManaUpdated", function() {
@@ -71,3 +78,16 @@ function setTheme(theme) {
localStorage.setItem(atr, theme) localStorage.setItem(atr, theme)
} }
// round toggle
//function toggleRounds() {
// let box = document.getElementById("bonushp");
// let inp = document.getElementById("bonusInput");
// if (box.checked == true) {
// inp.classList.remove("hidden");
// inp.disabled = false;
// } else {
// inp.classList.add("hidden");
// inp.disabled = true;
// }
//}

64
view/hptracker/tracker.templ
View File

@@ -6,8 +6,12 @@ import "fmt"
type TrackerData struct { type TrackerData struct {
HP string HP string
HPBase string HPBase string
HPMax string
HPStartPercentage string HPStartPercentage string
HPPercentage string HPPercentage string
HPBonusPercentage string
HPBonusRounds string
HPBonusHeal string
Mana string Mana string
ManaBase string ManaBase string
ManaStartPercentage string ManaStartPercentage string
@@ -70,17 +74,20 @@ templ Show(hx bool, td TrackerData) {
@Mana(md) @Mana(md)
</div> </div>
</div> </div>
<details> <details>
<summary>Extras</summary> <summary>Extras</summary>
<button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button> <button type="button" hx-get="/hp-mana-tracker/reset" hx-target="main" hx-swap="innerHTML">Reset</button>
</details> </details>
</div> </div>
} }
} }
templ TrackerHeader(td TrackerData) { templ TrackerHeader(td TrackerData) {
<div class="start"> <div class="start">
<h2>Kampfrunde: { td.Round }</h2> <hgroup>
<h2>Kampfrunde: { td.Round }</h2>
<p style="font-size: 0.8rem">Bonus TP: 60, Runden: 2</p>
</hgroup>
</div> </div>
<div id="trackerBars" class="middle"> <div id="trackerBars" class="middle">
@TrackerColumn(td) @TrackerColumn(td)
@@ -102,6 +109,7 @@ templ TrackerColumn(td TrackerData) {
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>
<div class={ "bonushp", extraWidth(td.HPBonusPercentage) }></div>
} }
templ ManaTracker(td TrackerData) { templ ManaTracker(td TrackerData) {
@@ -109,6 +117,10 @@ templ ManaTracker(td TrackerData) {
<div class={ "mana" , manaAnimation(td.ManaStartPercentage, td.ManaPercentage) }></div> <div class={ "mana" , manaAnimation(td.ManaStartPercentage, td.ManaPercentage) }></div>
} }
css extraWidth(data string) {
width: { fmt.Sprintf("%s%%", data) };
}
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) };
@@ -172,14 +184,46 @@ templ Hp(dd DamageData) {
} }
<fieldset> <fieldset>
<label for="savingthrow"> <label for="savingthrow">
<input id="savingthrow" name="savingthrow" type="checkbox" role="switch" <input
if dd.SavingThrow != "" { id="savingthrow"
checked name="savingthrow"
} type="checkbox"
/> role="switch"
if dd.SavingThrow != "" {
checked
}
/>
Verteidigungswurf Verteidigungswurf
</label> </label>
<label for="bonushp">
<input id="bonushp" name="bonushp" type="checkbox" role="switch" onclick="toggleRounds()"/>
Bonus HP
</label>
<input
id="bonusInput"
class="hidden"
name="bonusInput"
type="number"
placeholder="Runden"
value={ dd.Values }
style="width:50%"
disabled="true"
required
/>
</fieldset> </fieldset>
<script>
function toggleRounds() {
let box = document.getElementById("bonushp");
let inp = document.getElementById("bonusInput");
if (box.checked == true) {
inp.classList.remove("hidden");
inp.disabled = false;
} else {
inp.classList.add("hidden");
inp.disabled = true;
}
}
</script>
</form> </form>
} }

132
view/stylesheets/tallytome.scss
View File

@@ -1,7 +1,5 @@
@use "node_modules/@picocss/pico/scss/pico" with ( @use "node_modules/@picocss/pico/scss/pico" with ($theme-color: "cyan",
$theme-color: "cyan", $modules: ("themes/default": false,
$modules: (
"themes/default": false,
// Layout // Layout
"layout/document": true, "layout/document": true,
@@ -43,36 +41,34 @@
// Utilities // Utilities
"utilities/accessibility": true, "utilities/accessibility": true,
"utilities/reduce-motion": true "utilities/reduce-motion": true));
)
);
@use "node_modules/@picocss/pico/scss/colors/index" as *; @use "node_modules/@picocss/pico/scss/colors/index" as *;
@use "custom/styles"; @use "custom/styles";
@use "custom/schemes"; @use "custom/schemes";
:root{ :root {
// // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa // // https://coolors.co/00072d-001c55-0a2472-0e6ba8-a6e1fa
// --font-size: 1.2rem; // --font-size: 1.2rem;
// --border-radius: 5px; // --border-radius: 5px;
// --focus-boxshadow: 0.2rem; // --focus-boxshadow: 0.2rem;
// --pico-primary: hsl(204, 85%, 36%); // --pico-primary: hsl(204, 85%, 36%);
// --focus: hsl(204, 85%, 50%); // --focus: hsl(204, 85%, 50%);
// --grey0: hsl(0, 0%, 0%); // --grey0: hsl(0, 0%, 0%);
// --grey1: hsl(0, 0%, 10%); // --grey1: hsl(0, 0%, 10%);
// --grey2: hsl(0, 0%, 20%); // --grey2: hsl(0, 0%, 20%);
// --grey3: hsl(0, 0%, 30%); // --grey3: hsl(0, 0%, 30%);
// --grey4: hsl(0, 0%, 40%); // --grey4: hsl(0, 0%, 40%);
// --grey5: hsl(0, 0%, 50%); // --grey5: hsl(0, 0%, 50%);
// --grey6: hsl(0, 0%, 60%); // --grey6: hsl(0, 0%, 60%);
// --grey7: hsl(0, 0%, 70%); // --grey7: hsl(0, 0%, 70%);
// --grey8: hsl(0, 0%, 80%); // --grey8: hsl(0, 0%, 80%);
// --grey9: hsl(0, 0%, 90%); // --grey9: hsl(0, 0%, 90%);
// --grey10: hsl(0, 0%, 100%); // --grey10: hsl(0, 0%, 100%);
// --color-ok: #{$green-500}; // --color-ok: #{$green-500};
// --color-warning: #{$pumpkin-300}; // --color-warning: #{$pumpkin-300};
@@ -109,11 +105,11 @@
// } // }
// } // }
.text-center{ .text-center {
text-align: center; text-align: center;
} }
.text-right{ .text-right {
text-align: right; text-align: right;
} }
@@ -145,43 +141,43 @@ a {
} }
// progress // progress
progress{ progress {
height: 1.25rem; height: 1.25rem;
} }
// stat container // stat container
.stat-container{ .stat-container {
display: flex; display: flex;
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
.start{ .start {
justify-content: flex-start; justify-content: flex-start;
margin-right: auto; margin-right: auto;
} }
.middle{ .middle {
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.end{ .end {
justify-content: flex-end; justify-content: flex-end;
margin-left: auto; margin-left: auto;
} }
} }
.lbl-offset{ .lbl-offset {
display: flex; display: flex;
margin-bottom: calc(var(--pico-spacing) * 0.4); margin-bottom: calc(var(--pico-spacing) * 0.4);
button{ button {
margin-top: auto; margin-top: auto;
} }
} }
.progress{ .progress {
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
color: var(--pico-contrast); color: var(--pico-contrast);
height: 1.25rem; height: 1.25rem;
@@ -193,45 +189,63 @@ progress{
margin-bottom: calc(var(--pico-spacing) * .5); margin-bottom: calc(var(--pico-spacing) * .5);
.progress-label{ .progress-label {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 20; z-index: 20;
font-size: 0.9rem; font-size: 0.9rem;
} }
div{
div {
height: 100%; height: 100%;
border-radius: var(--pico-border-radius); border-radius: var(--pico-border-radius);
background: var(--pico-primary); background: var(--pico-primary);
position: relative; position: absolute;
z-index: 10; z-index: 10;
align-self: start; left: 0;
margin-right: auto;
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
&.mana{ &.mana {
background-color: var(--color-mana); background-color: var(--color-mana);
animation-name: manaAnimation; animation-name: manaAnimation;
@keyframes manaAnimation { @keyframes manaAnimation {
0% {width: var(--mana-from-width);} 0% {
100% {width: var(--mana-to-width);} width: var(--mana-from-width);
}
100% {
width: var(--mana-to-width);
}
} }
} }
&.hp{
&.hp {
background-color: var(--color-hp); background-color: var(--color-hp);
animation-name: hpAnimation; animation-name: hpAnimation;
@keyframes hpAnimation { @keyframes hpAnimation {
0% {width: var(--hp-from-width);} 0% {
100% {width: var(--hp-to-width);} width: var(--hp-from-width);
}
100% {
width: var(--hp-to-width);
}
} }
} }
&.bonushp {
background-color: orange;
z-index: 11;
}
} }
} }
.error-helper{ .error-helper {
color: var(--color-error); color: var(--color-error);
} }
@@ -239,32 +253,36 @@ progress{
// utility // utility
// margins // margins
.mb-0{ .mb-0 {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.mb-1{ .mb-1 {
margin-bottom: calc(var(--pico-spacing) * .25); margin-bottom: calc(var(--pico-spacing) * .25);
} }
.mb-2{ .mb-2 {
margin-bottom: calc(var(--pico-spacing) * .50); margin-bottom: calc(var(--pico-spacing) * .50);
} }
.mb-3{ .mb-3 {
margin-bottom: calc(var(--pico-spacing) * .75); margin-bottom: calc(var(--pico-spacing) * .75);
} }
.mb-4{ .mb-4 {
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
} }
.hidden {
display: none;
}
#loginContainer { #loginContainer {
height: 100vh; height: 100vh;
max-width: 510px; max-width: 510px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
// form elements // form elements