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

64
view/hptracker/tracker.templ
View File

@@ -6,8 +6,12 @@ import "fmt"
type TrackerData struct {
HP string
HPBase string
HPMax string
HPStartPercentage string
HPPercentage string
HPBonusPercentage string
HPBonusRounds string
HPBonusHeal string
Mana string
ManaBase string
ManaStartPercentage string
@@ -70,17 +74,20 @@ templ Show(hx bool, td TrackerData) {
@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>
<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>
<hgroup>
<h2>Kampfrunde: { td.Round }</h2>
<p style="font-size: 0.8rem">Bonus TP: 60, Runden: 2</p>
</hgroup>
</div>
<div id="trackerBars" class="middle">
@TrackerColumn(td)
@@ -102,6 +109,7 @@ templ TrackerColumn(td TrackerData) {
templ HPTracker(td TrackerData) {
<span class="progress-label">TP: { td.HP }/{ td.HPBase } </span>
<div class={ "hp" , hpAnimation(td.HPStartPercentage, td.HPPercentage) }></div>
<div class={ "bonushp", extraWidth(td.HPBonusPercentage) }></div>
}
templ ManaTracker(td TrackerData) {
@@ -109,6 +117,10 @@ templ ManaTracker(td TrackerData) {
<div class={ "mana" , manaAnimation(td.ManaStartPercentage, td.ManaPercentage) }></div>
}
css extraWidth(data string) {
width: { fmt.Sprintf("%s%%", data) };
}
css hpAnimation(from, to string) {
--hp-from-width: { fmt.Sprintf("%s%%", from) };
--hp-to-width: { fmt.Sprintf("%s%%", to) };
@@ -172,14 +184,46 @@ templ Hp(dd DamageData) {
}
<fieldset>
<label for="savingthrow">
<input id="savingthrow" name="savingthrow" type="checkbox" role="switch"
if dd.SavingThrow != "" {
checked
}
/>
<input
id="savingthrow"
name="savingthrow"
type="checkbox"
role="switch"
if dd.SavingThrow != "" {
checked
}
/>
Verteidigungswurf
</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>
<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>
}

132
view/stylesheets/tallytome.scss
View File

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